Folded turns

Free · MIT

A run of turns folded into one line, for long agent work a reader doesn't need to see step by step: "Drafted three versions and compared them". The line says how many turns are inside and opens them in place; summary is yours (a sentence, a count of tool calls, a cost). Folding never hides that the turns happened.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/folded-turns

Brings in: collapsible, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { FoldedTurns } from "@/components/folded-turns"
import { Message } from "@/components/message"
import type { Message as MessageData } from "@/lib/chat"

const agent = { id: "a1", name: "Writer agent", role: "assistant" }
const turn = (id: string, text: string): MessageData => ({ id, author: { role: "agent", agent }, status: "complete", blocks: [{ kind: "paragraph", nodes: [{ kind: "text", text }] }] })

const turns = [turn("1", "Drafted an opening that starts with the outage."), turn("2", "Drafted a second that starts with the fix."), turn("3", "Compared them: the second is clearer for customers.")]

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-7">
      <FoldedTurns count={turns.length} summary="Drafted two openings and compared them · 6 tool calls">
        {turns.map((m) => (
          <Message key={m.id} message={m} />
        ))}
      </FoldedTurns>
      <Message message={turn("4", "Here is the update, starting with the fix.")} />
    </div>
  )
}

<FoldedTurns>

Prop	Type	Default	Description
countrequired	`number`	—	How many turns are inside, for the button ("Show 12 turns").
summary	`React.ReactNode \| undefined`	—	What happened in them, shown on the folded line: text or your own small summary.
defaultOpen	`boolean \| undefined`	false	Start open.
open	`boolean \| undefined`	—	Controlled open state.
onOpenChange	`((open: boolean) => void) \| undefined`	—	Called when a person opens or closes it.
header	`React.ReactNode \| undefined`	—	Your own folded line instead of the dashed one: a card with a title, how it ended, its cost, actions. The Show/Hide button follows it, so the turns can still be opened.
childrenrequired	`React.ReactNode`	—	The turns, usually Messages.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under foldedTurns in <LocaleProvider strings={{ … }}>; the table is exported as foldedTurnsStrings.

Key	English
show	{ one: "Show {count} turn", other: "Show {count} turns" }
hide	{ one: "Hide {count} turn", other: "Hide {count} turns" }