ToolExecution
Tool execution status display.
import { ToolExecution } from '@ybouhjira/hyperkit';#Playground
Edit the code — the preview recompiles and re-renders as you type.
Loading preview…
#More Examples
Success
<ToolExecution
toolName="Read"
status="success"
input="/src/index.ts"
output={"export { Button } from \"./Button\";"}
duration={12}
defaultOpen
/>Error
<ToolExecution
toolName="Write"
status="error"
input="/protected/file"
output="Permission denied"
duration={3}
defaultOpen
/>#Props
| Prop | Type | Default | Description |
|---|---|---|---|
toolName * | string | — | — |
status * | ToolStatus | — | — |
input | string | — | — |
output | string | — | — |
duration | number | — | — |
defaultOpen | boolean | — | — |
class | string | — | — |
* required prop.
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-bg-primary--sk-bg-secondary--sk-border--sk-font-mono--sk-font-size-base--sk-font-size-sm--sk-radius-lg--sk-space-sm--sk-space-xs--sk-text-muted--sk-text-primary