Thread header

Pro

The bar above a thread: its title, the environment it acts on, and who is working on it right now. Agent status is ambient — avatars of the agents at work and a count — so a person can tell at a glance whether anything is running.

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/thread-header

Brings in: agent-avatar, chat, locale, status-dot, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Share2 } from "lucide-react"
import { ThreadHeader } from "@/components/thread-header"
import type { AgentIdentity } from "@/lib/chat"

const working: AgentIdentity[] = [
  { id: "a-dev", name: "Dev agent", role: "dev" },
  { id: "a-qa", name: "QA agent", role: "qa" },
]

export default function Example() {
  return (
    <div className="max-w-2xl overflow-hidden rounded-lg border">
      <ThreadHeader
        title="Add a region column to orders"
        scope={{ account: "Acme", environment: "Storefront", detail: "staging", production: false }}
        working={working}
        actions={
          <button type="button" aria-label="Share thread" className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground">
            <Share2 className="size-4" />
          </button>
        }
      />
    </div>
  )
}

<ThreadHeader>

Prop	Type	Default	Description
titlerequired	`string`	—	The thread's name.
scope	`ComposerScope \| undefined`	—	The environment the thread acts on, shown as a tag; production shows a warning. Without one, no tag.
working	`AgentIdentity[] \| undefined`	[]	Agents currently running on this thread.
actions	`React.ReactNode \| undefined`	—	Buttons at the right end, e.g. share or close.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
production	Production
nonProduction	Non-production
agentsWorking	{ one: "{count} agent working: {names}", other: "{count} agents working: {names}" }
working	{count} working
idle	Idle