ToolLine

One step an agent took between messages, such as reading a file or running a command. Add detail to let people open the output.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Read src/content/Markdown.tsx

Runningnpm run build

SkippedLint, because no config was found

Exit code 1

Error: EACCES: permission denied, open '/etc/hosts'

Read src/content/Markdown.tsx

Runningnpm run build

SkippedLint, because no config was found

Exit code 1

Error: EACCES: permission denied, open '/etc/hosts'

Read src/content/Markdown.tsx

Runningnpm run build

SkippedLint, because no config was found

Exit code 1

Error: EACCES: permission denied, open '/etc/hosts'

tsx

import { ToolLine } from '@skribly/ui/conversation'

tsx

<ToolLine status={{ tone: 'danger', label: 'Failed' }} detail={<OutputBox label="Output" text={log} />}>
  Run npm test
</ToolLine>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The status word comes before the step, with an icon and a coloured edge, so it never rests on colour.
With detail the line is a disclosure button with aria-expanded, opened with Enter or Space.

This demo runs through axe in all three themes on every test run. See what the tests check.