Mielui · Tool

Installation

pnpm dlx @mielui/svelte add tool

Usage

Use Item to list the commands, searches, and reads completed within a task.

Running tools use a spinner and a readable status label. Tool.Item renders supplied children in place of its detail text, so you can compose a link or custom detail without replacing its name and icon.

import * as Tool from '@mielui/svelte/components/tool';

<Tool.Root name="1 file, 1 search, and 1 command" state="complete" duration="6s" variant="quiet">
  <Tool.Item name="Bash" detail="pnpm lint" />
  <Tool.Item name="Grep" detail="InputBar" kind="search" />
  <Tool.Item name="Read" detail="/lib/input-bar.tsx" kind="read" />
</Tool.Root>

Composition

Root renders Trigger and Content automatically. Set composed to place those parts yourself, omit a region, or restyle it.

Trigger accepts native button attributes and a children snippet receiving open, state, name, and duration. Its click handler may preventDefault to cancel toggling. Content accepts native div attributes and children; use at most one Content per Root. Both parts read their state from Root.

<Tool.Root name="Read source" state="complete" composed>
  <Tool.Content class="ml-0 px-0">
    <Tool.Item name="Read" detail="src/main.ts" kind="read" />
  </Tool.Content>
  <Tool.Trigger class="px-0">
    {#snippet children({ open })}
      {open ? 'Hide details' : 'Show details'}
    {/snippet}
  </Tool.Trigger>
</Tool.Root>

Bind open to control expansion. onOpenChange reports state changes; onOpenChangeComplete runs after the current transition completes. Interrupted transitions do not report stale completion. Closing content is inert during its exit.

When Content is omitted, completion follows the state change without animation. Use Root's trigger snippet to customize the automatic trigger.

Failure and retry

Tool displays the state your application supplies. Keep the failed output visible, then replace it when a retry starts. This composition exposes input and output separately and keeps the retry action outside the disclosure.

Examples

Tool states in a support flow

Quiet

Use variant="quiet" when tool details should stay visually secondary to the response.

API reference

Tool.Root

Provides a tool execution summary.

Prop	Type	Default
`name` Required	`string` A concise summary of the work completed by this task group.	`—`
`state`	`ToolState \| undefined`	`'running'`
`variant`	`ToolVariant \| undefined` A low-emphasis presentation for inline transcript details.	`'default'`
`duration`	`string \| undefined` A compact summary of how long the task took, such as 6s.	`—`
`open` Bindable	`boolean \| undefined` Whether the individual tool calls are visible.	`true`
`onOpenChange`	`((open: boolean) => void) \| undefined`	`—`
`onOpenChangeComplete`	`((open: boolean) => void) \| undefined`	`—`
`composed`	`boolean \| undefined` Render explicit Trigger and Content parts through children.	`false`
`trigger`	`Snippet<[Readonly<{ open: boolean; state: ToolState; name: string; duration?: string \| undefined; }>]> \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`class`	`(string & (ClassValue \| null)) \| undefined`	`—`

Tool.Content

Prop	Type	Default
`children`	`Snippet<[]> \| undefined`	`—`

Tool.Input

Displays tool input.

Prop	Type	Default
`label`	`string \| undefined`	`'Input'`
`children`	`Snippet<[]> \| undefined`	`—`
`class`	`(string & (ClassValue \| null)) \| undefined`	`—`

Tool.Item

Displays one tool call.

Prop	Type	Default
`name` Required	`string`	`—`
`detail`	`string \| undefined`	`—`
`kind`	`"search" \| "command" \| "read" \| undefined`	`'command'`
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Tool.Output

Displays tool output.

Prop	Type	Default
`label`	`string \| undefined`	`'Output'`
`children`	`Snippet<[]> \| undefined`	`—`
`class`	`(string & (ClassValue \| null)) \| undefined`	`—`