<!-- #region AgentChat.ToolCallCard [C:2] [TYPE Component] [SEMANTICS agent,tool,call,card,ui] -->
<!-- @ingroup AgentChat -->
<!-- @BRIEF Inline tool-call card within assistant message — spinner (executing), checkmark (completed), cross (failed). Expandable for input/output/error detail. -->
<!-- @UX_STATE executing — Spinner visible, tool name in mono font, card has muted background. -->
<!-- @UX_STATE completed — Spinner→checkmark, output expandable on click. -->
<!-- @UX_STATE failed — Spinner→cross, error detail expandable on click. -->
<!-- @UX_FEEDBACK Click "Details" toggles expandable section with input/error/output. -->
<!-- @RELATION DEPENDS_ON -> $lib/ui/Icon (existing) -->
<script lang="ts">
  let {
    tool,
    input,
    output,
    error,
    status,
  }: {
    tool: string;
    input?: Record<string, unknown>;
    output?: Record<string, unknown>;
    error?: string;
    status: "executing" | "completed" | "failed";
  } = $props();

  let expanded = $state(false);
</script>

<div class="bg-surface-muted border border-border rounded-lg px-3 py-2 text-xs">
  <div class="flex items-center gap-2">
    {#if status === "executing"}
      <svg class="animate-spin w-3.5 h-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
      </svg>
    {:else if status === "completed"}
      <svg class="w-3.5 h-3.5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
      </svg>
    {:else}
      <svg class="w-3.5 h-3.5 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    {/if}
    <span class="text-text-muted font-mono">{tool}</span>
    {#if status !== "executing"}
      <button
        class="text-xs font-medium text-text-muted hover:text-text transition rounded px-1.5 py-0.5 hover:bg-surface-muted"
        onclick={() => (expanded = !expanded)}
      >
        {expanded ? "Hide" : "Details"}
      </button>
    {/if}
  </div>

  {#if expanded}
    <div class="mt-2 space-y-1 text-text-muted text-xs font-mono overflow-auto max-h-32 whitespace-pre-wrap border-t border-border pt-2">
      {#if input}
        <details>
          <summary class="cursor-pointer text-text-subtle hover:text-text-muted">Input</summary>
          <pre class="mt-1">{JSON.stringify(input, null, 2)}</pre>
        </details>
      {/if}
      {#if status === "completed" && output}
        <details>
          <summary class="cursor-pointer text-text-subtle hover:text-text-muted">Result</summary>
          <pre class="mt-1">{JSON.stringify(output, null, 2)}</pre>
        </details>
      {/if}
      {#if status === "failed" && error}
        <details open>
          <summary class="cursor-pointer text-destructive font-medium">Error</summary>
          <pre class="mt-1 text-destructive">{error}</pre>
        </details>
      {/if}
    </div>
  {/if}
</div>
<!-- #endregion AgentChat.ToolCallCard -->
