GitHub

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>

Renders

<div>

Profile

UI
View as Markdown

Text intents

Example

Preview
Pack my box with five dozen liquor jugs.
<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

    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

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.

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

    Text colour between main and muted, for introductions

    text-soft
  • 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

    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' }],
},