Components

TranscriptDivider

Toned run-boundary separator for transcripts: steering, interruptions, and condensed context.

Keep migrating the remaining routes.

Context condensed — 42 messages summarized

Resuming from the condensed summary: three routes are left.

Run interrupted

Run failed — provider returned an error

Composition

Run boundary

<TranscriptDivider>
- <TranscriptDividerLabel />
</TranscriptDivider>

Installation

First install and activate one skin. Core deliberately contains no visual token defaults.

This agent installs from the transcript-divider registry. Install the bundle with the command above, or inspect the source below.

Registry command

npx shadcn@latest add https://control-ui.dev/r/transcript-divider.json

See registry manifest

Usage

import { TranscriptDivider } from "@/components/control-ui/transcript-divider";

type RunBoundary = {

id: string;

kind: "condensed" | "interrupted" | "failed";

summary: string;

};

const boundaryTone = {

condensed: "neutral",

interrupted: "warning",

failed: "danger",

} as const;

export function Example({ boundaries }: { boundaries: RunBoundary[] }) {

return (

<>

{boundaries.map((boundary) => (

<TranscriptDivider key={boundary.id} tone={boundaryTone[boundary.kind]}>

{boundary.summary}

</TranscriptDivider>

))}

</>

);

}

Raw code

This agent’s owned source and private support files

src/registry/sources/control-ui/transcript-divider.tsx

import type { ComponentProps, CSSProperties } from "react";

import type { TranscriptDividerKnobStyle } from "@/components/control-ui/knob-contracts/transcript-divider-knobs";

import { cn } from "@/components/control-ui/lib/cn";

export type ChatTone = "neutral" | "success" | "warning" | "danger";

export type TranscriptDividerProps = Omit<ComponentProps<"div">, "style"> & {

tone?: ChatTone;

style?: CSSProperties & TranscriptDividerKnobStyle;

};

export function TranscriptDivider({ tone = "neutral", className, children, ...props }: TranscriptDividerProps) {

return (

<div

data-control-ui="transcript-divider"

data-control-family="transcript-divider"

data-slot="root"

data-tone={tone}

className={cn("flex min-w-0 items-center before:flex-1 after:flex-1", className)}

{...props}

>

{children != null ? <TranscriptDividerLabel>{children}</TranscriptDividerLabel> : null}

</div>

);

}

export type TranscriptDividerLabelProps = ComponentProps<"span"> & { style?: CSSProperties & TranscriptDividerKnobStyle };

export function TranscriptDividerLabel({ className, ...props }: TranscriptDividerLabelProps) {

return (

<span

data-control-ui="transcript-divider"

data-control-family="transcript-divider"

data-slot="label"

className={cn("min-w-0 truncate", className)}

{...props}

/>

);

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-transcript-divider-* · 5 knobsHow the cascade resolves

--cui-transcript-divider-foreground<color>var(--muted-foreground)

--cui-transcript-divider-line-color<color>var(--border)

--cui-transcript-divider-danger-foreground<color>var(--destructive-text)

--cui-transcript-divider-success-foreground<color>var(--badge-green-foreground)

--cui-transcript-divider-warning-foreground<color>var(--badge-yellow-foreground)