# Call Chip

A compact chip for an agent's tool call. While the call runs, a soft fill wipes across the chip and a millisecond counter ticks. The fill parks at 90% until the call resolves. On success the fill completes, washes green and the tool glyph rolls into a check. On failure the fill stops where it was, tints red and the chip shakes. When you bind `@retry`, the failed chip becomes a button: click it (or focus it and press Enter) to run the call again. Press Replay in the demo panel to restart.

<demo-call-chip>



</demo-call-chip>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/call-chip.json"
```

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import CallChip from '~/components/ui/call-chip/CallChip.vue';
  import type { CallChipStatus } from '~/components/ui/call-chip/types';

  const status = ref<CallChipStatus>('running');

  function runTool() {
    status.value = 'running';
    setTimeout(() => {
      status.value = 'done';
    }, 1400);
  }
</script>

<template>
  <CallChip
    icon="terminal"
    name="bash"
    argument="npm test"
    :status="status"
    :expected-ms="2500"
    @retry="runTool"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        'terminal' | 'file' | 'search' | 'edit' | string
      </code>
    </td>
    
    <td>
      <code>
        'terminal'
      </code>
    </td>
    
    <td>
      Tool glyph preset or any Iconify name. It rolls out when the call resolves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'bash'
      </code>
    </td>
    
    <td>
      The tool name.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        argument
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'npm test'
      </code>
    </td>
    
    <td>
      The argument.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        'idle' | 'running' | 'done' | 'error'
      </code>
    </td>
    
    <td>
      <code>
        'running'
      </code>
    </td>
    
    <td>
      Running wipes the fill and ticks the counter. Done completes it with a wash. Error stops, tints and shakes.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        expected-ms
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2500
      </code>
    </td>
    
    <td>
      Milliseconds the fill takes to reach its 90% park — the time you expect the call to take.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        34
      </code>
    </td>
    
    <td>
      Chip height in pixels. Font, padding and glyph follow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Corner radius in pixels. Half the height is a pill.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Ink for the text and the tool glyph.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        surface-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#27272a'
      </code>
    </td>
    
    <td>
      The chip surface.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        progress-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      The fill that wipes across while running.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        progress-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.08
      </code>
    </td>
    
    <td>
      How strong that fill is.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        done-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#22c55e'
      </code>
    </td>
    
    <td>
      The success wash and the check.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        error-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ef4444'
      </code>
    </td>
    
    <td>
      The stopped fill and the retry glyph on error.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wash-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.14
      </code>
    </td>
    
    <td>
      Strength of the success wash and of the error tint.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shake
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Error shake amplitude in pixels. <code>
        0
      </code>
      
       tints only.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-timer
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Shows the millisecond counter.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root.
    </td>
  </tr>
</tbody>
</table>

## Events and slots

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        retry
      </code>
      
       event
    </td>
    
    <td>
      —
    </td>
    
    <td>
      When bound, the failed chip becomes a retry button that fires this event.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        #icon
      </code>
      
       slot
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Replaces the tool glyph (the check and retry glyphs stay).
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The root has `role="status"` and sets `aria-busy` while running.
- A visually hidden line announces the result, for example "bash npm test, done in 1417 ms".
- With `@retry` bound, the failed chip holds a native button labelled "Retry bash npm test" with a visible focus ring.
- With `prefers-reduced-motion`, the shake, glyph roll and done wipe are removed, and the timer updates every 100 ms instead of every frame.
- Ported from [React Bits](https://reactbits.dev/micro/call-chip) by David Haz.