ToolCallCardexperimental

<script lang="ts">
  import { onDestroy } from 'svelte';
  import { Button, ToolCallCard, type ChatToolCallPart } from '@urbicon-ui/blocks';

  // The consumer owns the part and mutates its `state` / `output` as the
  // real call resolves — here a timer stands in for the transport layer.
  let call = $state<ChatToolCallPart>({
    type: 'tool-call',
    id: 'weather-1',
    name: 'get_weather',
    state: 'running',
    input: { city: 'Berlin', unit: 'celsius' }
  });

  let timer: ReturnType<typeof setTimeout> | undefined;

  function run() {
    clearTimeout(timer);
    call = { ...call, state: 'running', output: undefined };
    timer = setTimeout(() => {
      call = {
        ...call,
        state: 'complete',
        output: { temperature: 21, condition: 'Partly cloudy', humidity: 0.54 }
      };
    }, 1600);
  }

  onDestroy(() => clearTimeout(timer));
</script>

<div class="space-y-3">
  <ToolCallCard toolCall={call} />
  <Button size="sm" variant="outlined" onclick={run}>Replay call</Button>
</div>

<script lang="ts">
  import { ToolCallCard, type ChatToolCallPart } from '@urbicon-ui/blocks';

  // A failed call: the card starts expanded so the error is visible without a
  // click. `errorMessage` renders above the (still available) input.
  const call: ChatToolCallPart = {
    type: 'tool-call',
    id: 'db-query-7',
    name: 'run_query',
    state: 'error',
    input: { sql: 'SELECT * FROM invoices WHERE due < now()' },
    errorMessage: 'permission denied for relation "invoices" (SQLSTATE 42501)'
  };
</script>

<ToolCallCard toolCall={call} />

<script lang="ts">
  import { ToolCallCard, type ChatToolCallPart } from '@urbicon-ui/blocks';

  // A run log: here the calls ARE the content, so each one gets a frame of its
  // own instead of the quiet line the chat stream uses.
  const trace: ChatToolCallPart[] = [
    {
      type: 'tool-call',
      id: 'trace-1',
      name: 'list_rooms',
      state: 'complete',
      input: { house: 'cala', nights: 3 },
      output: { available: 4 }
    },
    {
      type: 'tool-call',
      id: 'trace-2',
      name: 'price_stay',
      state: 'error',
      input: { room: 'sea-view-2' },
      errorMessage: 'rate plan expired (RATE_STALE)'
    },
    {
      type: 'tool-call',
      id: 'trace-3',
      name: 'price_stay',
      state: 'running',
      input: { room: 'sea-view-2', refresh: true }
    }
  ];
</script>

<div class="space-y-2">
  {#each trace as call (call.id)}
    <ToolCallCard toolCall={call} variant="card" />
  {/each}
</div>

<script lang="ts">
  import { Badge, ToolCallCard, type ChatToolCallPart } from '@urbicon-ui/blocks';

  type SearchHit = { title: string; url: string; score: number };

  const call: ChatToolCallPart = {
    type: 'tool-call',
    id: 'search-3',
    name: 'web_search',
    state: 'complete',
    input: { query: 'oklch color space' },
    output: [
      { title: 'OKLCH in CSS: why we moved', url: 'example.com/oklch', score: 0.94 },
      { title: 'A perceptual color picker', url: 'example.com/picker', score: 0.87 },
      { title: 'Gamut mapping explained', url: 'example.com/gamut', score: 0.71 }
    ] satisfies SearchHit[]
  };
</script>

<!-- The children snippet replaces the default JSON body with a domain view of
     the same part — the header (status + tool name) stays intact. -->
<ToolCallCard toolCall={call}>
  {#snippet children(part)}
    {@const hits = (part.output ?? []) as SearchHit[]}
    <ul class="divide-border-subtle divide-y">
      {#each hits as hit (hit.url)}
        <li class="flex items-center justify-between gap-3 py-2">
          <div class="min-w-0">
            <p class="text-text-primary truncate text-sm font-medium">{hit.title}</p>
            <p class="text-text-tertiary truncate text-xs">{hit.url}</p>
          </div>
          <Badge intent="neutral" variant="soft" size="sm">
            {(hit.score * 100).toFixed(0)}%
          </Badge>
        </li>
      {/each}
    </ul>
  {/snippet}
</ToolCallCard>