Drift change

Preview

Install

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

Brings in: agent-avatar, bidi, button, change-diff, chat, entity-chip, environment-band, heading-level, heading-scope, locale, locked, relative-time, team, tokens, use-announcer, use-focus-within, work, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { DriftChange, type DetectedChange } from "@/components/candor/drift-change"

const found: DetectedChange = {
  id: "d1",
  summary: "The approval step on refunds over $500 was turned off",
  entity: { kind: "field", name: "refunds.approval", label: "Refund approval" },
  environment: { name: "Shop", production: true, hue: 1 },
  severity: "high",
  // No person or agent is on record for it, so the row says so, loudest.
  author: { kind: "unattributed" },
  detectedAt: new Date(Date.now() - 40 * 60_000).toISOString(),
  files: [
    {
      path: "rules/refunds.json",
      change: "update",
      language: "json",
      hunks: [{ lines: [{ kind: "context", text: '"over": 500,' }, { kind: "remove", text: '"approval": "required"' }, { kind: "add", text: '"approval": "none"' }] }],
    },
  ],
}

export default function Example() {
  const [change, setChange] = React.useState(found)
  const settle = (status: "adopted" | "reverted") => async () => {
    await new Promise((r) => setTimeout(r, 500))
    setChange((c) => ({ ...c, status }))
  }
  return <DriftChange className="max-w-2xl" change={change} onReview={() => {}} onAdopt={settle("adopted")} onRevert={settle("reverted")} />
}

<DriftChange>

Strings

Types

ChangeAuthor

Who made a change, as the app knows it: a person, an agent, or no one on record.

| { kind: "person"; name: string } | { kind: "agent"; agent: AgentIdentity } | { kind: "unattributed" }

DetectedChange

A change the app found in an environment that it didn't make itself (drift), as the app's server reports it.

{ id: string; /** What changed, in the app's words, e.g. "The approval step on refunds was turned off". */ summary: string; /** The thing that changed, shown as a chip. */ entity?: EntityRef | undefined; /** Where it changed. */ environment: Pick<Environment, "name" | "detail" | "production" | "hue">; /** How much it matters, drawn in words: low, medium or high. */ severity: "low" | "medium" | "high"; /** Who made it. An unattributed change is drawn loudest. */ author: ChangeAuthor; /** When it was made, as an ISO time. Left out when the app doesn't know, and the row says so. */ changedAt?: string | undefined; /** When the app found it, as an ISO time. */ detectedAt: string; /** The change itself, drawn with ChangeDiff behind Show the change. */ files?: FileDiff[] | undefined; /** What became of it: still open (the default), adopted, or reverted. A settled change shows the outcome, not the actions. */ status?: "open" | "adopted" | "reverted" | undefined; }

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

EntityRef from @/lib/candor/chat

{ kind: EntityKind; /** The identifier, e.g. "orders.status" or "billing.invoice.due_date". */ name: string; /** A friendlier label when there is one, e.g. "Region". */ label?: string | undefined; /** Where it lives, when more than one place is in scope, e.g. "Shop staging". */ location?: string | undefined; }

HeadingLevel from @/lib/candor/heading-level

A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.

1 | 2 | 3 | 4 | 5 | 6

AgentIdentity from @/lib/candor/chat

{ id: string; /** The displayed name, e.g. "Architect agent". Never derived from model output. */ name: string; role: AgentRole; specialty?: string | undefined; }

Environment from @/lib/candor/team

Where agents act: a CRM instance, a database, a repository, a project. The app names them; LocaleProvider's `nouns` sets what they're called ("project", "workspace").

{ id: string; /** The name shown everywhere, e.g. "Shop". */ name: string; /** What tells same-named ones apart, e.g. "dev-2" or "staging". */ detail?: string | undefined; /** Changes here reach real users, so components warn and ask for more care. */ production: boolean; /** A chart slot (1–5) so each environment keeps one colour everywhere it appears. */ hue?: 1 | 2 | 3 | 4 | 5 | undefined; connection: "connected" | "expired" | "not-connected"; }

FileDiff from @/lib/candor/work

{ path: string; /** What the file is, e.g. a field or a layout. */ entity?: EntityRef | undefined; change: "create" | "update" | "delete"; /** e.g. "xml", "ts", "python"; shown as a label. */ language?: string | undefined; hunks: DiffHunk[]; }

EntityKind from @/lib/candor/chat

What kind of thing an entity is: "record", "table", "workflow"… Any string; the app registers each kind's icon and noun (see EntityKindsProvider), and presets cover the kinds of the systems an app commonly works with.

string

AgentRole from @/lib/candor/chat

What an agent does: "assistant", "coder", "reviewer"… The app registers each role's glyph and hue (AgentRolesProvider).

string

DiffHunk from @/lib/candor/work

{ header?: string | undefined; lines: DiffLine[] }