# text.line

One line in an agent terminal; data-kind says what it is: "ask" for the person (or "prompt", set as a chat bubble), "skip" for a step that turned up nothing useful and "keep" for one that found what was wanted, "agent" for its reply, "step" for something it did, "run" for a check still running, "fail" for one that failed, "pass" for one that passed. Steps lead with an icon, and any output follows in a text.output

Component: [`<Text>`](https://www.prongs.dev/docs/components/text.md) · Renders: `<div>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Text intent="text.line">Pack my box with five dozen liquor jugs.</Text>
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| One line in an agent terminal; data-kind says what it is: "ask" for the person (or "prompt", set as a chat bubble), "skip" for a step that turned up nothing useful and "keep" for one that found what was wanted, "agent" for its reply, "step" for something it did, "run" for a check still running, "fail" for one that failed, "pass" for one that passed. Steps lead with an icon, and any output follows in a text.output | `text.line` (this page) |
| A code sample on the page | [`text.code`](https://www.prongs.dev/docs/intents/text/code.md) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`tone.soft`](https://www.prongs.dev/docs/intents/ui.md#tone-soft)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How text.line resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`tone.soft`](https://www.prongs.dev/docs/intents/ui.md#tone-soft) — Text colour between main and muted, for introductions

  ```
  text-soft
  ```

- `text.line` (this page) — One line in an agent terminal; data-kind says what it is: "ask" for the person (or "prompt", set as a chat bubble), "skip" for a step that turned up nothing useful and "keep" for one that found what was wanted, "agent" for its reply, "step" for something it did, "run" for a check still running, "fail" for one that failed, "pass" for one that passed. Steps lead with an icon, and any output follows in a text.output

  ```
  grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2
  gap-y-1.5 break-words leading-5 [&>svg]:size-3.5
  [&>svg]:shrink-0 data-[kind=prompt]:block
  data-[kind=prompt]:max-w-[85%] data-[kind=prompt]:self-end
  data-[kind=prompt]:rounded-2xl
  data-[kind=prompt]:bg-surface-active data-[kind=prompt]:px-3.5
  data-[kind=prompt]:py-2 data-[kind=prompt]:font-sans
  data-[kind=prompt]:text-[13px]
  data-[kind=prompt]:text-foreground
  data-[kind=skip]:text-surface-muted
  data-[kind=skip]:[&>svg]:text-destructive/70
  data-[kind=keep]:[&>svg]:text-success data-[kind=ask]:block
  data-[kind=ask]:font-sans data-[kind=ask]:text-[13px]
  data-[kind=agent]:font-sans data-[kind=agent]:text-[13px]
  data-[kind=ask]:border data-[kind=ask]:border-surface-border
  data-[kind=ask]:px-3 data-[kind=ask]:py-2.5
  data-[kind=ask]:text-foreground data-[kind=agent]:block
  data-[kind=agent]:whitespace-pre-wrap
  data-[kind=agent]:text-foreground
  data-[kind=fail]:text-destructive
  data-[kind=pass]:[&>svg]:text-success
  data-[kind=run]:[&>span]:bg-[linear-gradient(90deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]
  data-[kind=run]:[&>span]:bg-[length:200%_100%]
  data-[kind=run]:[&>span]:bg-clip-text
  data-[kind=run]:[&>span]:text-transparent
  data-[kind=run]:[&>span]:animate-[shimmer_1.6s_linear_infinite]
  data-[kind=run]:[&>svg]:motion-safe:animate-spin
  motion-reduce:data-[kind=run]:[&>span]:animate-none
  motion-reduce:data-[kind=run]:[&>span]:bg-none
  motion-reduce:data-[kind=run]:[&>span]:text-inherit
  ```

Final classes

```
text-soft grid grid-cols-[auto_minmax(0,1fr)] items-center
gap-x-2 gap-y-1.5 break-words leading-5 [&>svg]:size-3.5
[&>svg]:shrink-0 data-[kind=prompt]:block
data-[kind=prompt]:max-w-[85%] data-[kind=prompt]:self-end
data-[kind=prompt]:rounded-2xl
data-[kind=prompt]:bg-surface-active data-[kind=prompt]:px-3.5
data-[kind=prompt]:py-2 data-[kind=prompt]:font-sans
data-[kind=prompt]:text-[13px]
data-[kind=prompt]:text-foreground
data-[kind=skip]:text-surface-muted
data-[kind=skip]:[&>svg]:text-destructive/70
data-[kind=keep]:[&>svg]:text-success data-[kind=ask]:block
data-[kind=ask]:font-sans data-[kind=ask]:text-[13px]
data-[kind=agent]:font-sans data-[kind=agent]:text-[13px]
data-[kind=ask]:border data-[kind=ask]:border-surface-border
data-[kind=ask]:px-3 data-[kind=ask]:py-2.5
data-[kind=ask]:text-foreground data-[kind=agent]:block
data-[kind=agent]:whitespace-pre-wrap
data-[kind=agent]:text-foreground
data-[kind=fail]:text-destructive
data-[kind=pass]:[&>svg]:text-success
data-[kind=run]:[&>span]:bg-[linear-gradient(90deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]
data-[kind=run]:[&>span]:bg-[length:200%_100%]
data-[kind=run]:[&>span]:bg-clip-text
data-[kind=run]:[&>span]:text-transparent
data-[kind=run]:[&>span]:animate-[shimmer_1.6s_linear_infinite]
data-[kind=run]:[&>svg]:motion-safe:animate-spin
motion-reduce:data-[kind=run]:[&>span]:animate-none
motion-reduce:data-[kind=run]:[&>span]:bg-none
motion-reduce:data-[kind=run]:[&>span]:text-inherit
```

Definition

```ts
'text.line': {
  kind: 'semantic',
  description: 'One line in an agent terminal; data-kind says what it is: "ask" for the person (or "prompt", set as a chat bubble), "skip" for a step that turned up nothing useful and "keep" for one that found what was wanted, "agent" for its reply, "step" for something it did, "run" for a check still running, "fail" for one that failed, "pass" for one that passed. Steps lead with an icon, and any output follows in a text.output',
  refs: ['tone.soft'],
  binding: {
    element: 'div',
    classes: 'grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2 gap-y-1.5 break-words leading-5 [&>svg]:size-3.5 [&>svg]:shrink-0 data-[kind=prompt]:block data-[kind=prompt]:max-w-[85%] data-[kind=prompt]:self-end data-[kind=prompt]:rounded-2xl data-[kind=prompt]:bg-surface-active data-[kind=prompt]:px-3.5 data-[kind=prompt]:py-2 data-[kind=prompt]:font-sans data-[kind=prompt]:text-[13px] data-[kind=prompt]:text-foreground data-[kind=skip]:text-surface-muted data-[kind=skip]:[&>svg]:text-destructive/70 data-[kind=keep]:[&>svg]:text-success data-[kind=ask]:block data-[kind=ask]:font-sans data-[kind=ask]:text-[13px] data-[kind=agent]:font-sans data-[kind=agent]:text-[13px] data-[kind=ask]:border data-[kind=ask]:border-surface-border data-[kind=ask]:px-3 data-[kind=ask]:py-2.5 data-[kind=ask]:text-foreground data-[kind=agent]:block data-[kind=agent]:whitespace-pre-wrap data-[kind=agent]:text-foreground data-[kind=fail]:text-destructive data-[kind=pass]:[&>svg]:text-success data-[kind=run]:[&>span]:bg-[linear-gradient(90deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)] data-[kind=run]:[&>span]:bg-[length:200%_100%] data-[kind=run]:[&>span]:bg-clip-text data-[kind=run]:[&>span]:text-transparent data-[kind=run]:[&>span]:animate-[shimmer_1.6s_linear_infinite] data-[kind=run]:[&>svg]:motion-safe:animate-spin motion-reduce:data-[kind=run]:[&>span]:animate-none motion-reduce:data-[kind=run]:[&>span]:bg-none motion-reduce:data-[kind=run]:[&>span]:text-inherit',
  },
  notFor: [{ context: 'a code sample on the page', instead: 'text.code' }],
},
```