@cueplusplus/ui 0.13.0

package/dist/elements/vocabulary.js

@@ -0,0 +1,611 @@
+//#region src/elements/vocabulary.ts
+/**
+* The tense triad per tool kind, as three shipping products write it.
+*
+* Eleven of the fourteen rows are Cursor's own copy, read off
+* `AgentConversation/tool-action-labels.js` — `shellToolCall` is `Running/Ran/
+* Run`, `globToolCall` is `Searching files/Searched files/Search files`, and so
+* on down the list. `explore`, `delegate` and `use` are Hermes's category
+* verbs, which exist because a collapsed run summarises *kinds* of call rather
+* than calls: "Explored 3 files, ran 5 commands" needs a verb for the category
+* and not for the tool.
+*
+* `use` is the fallback, and {@link verbFor} returns it for a kind this table
+* does not know. That matters more than it looks: an MCP server names its own
+* tools, so the set of kinds a console will meet is open, and a row that has to
+* choose between `undefined` and the raw wire name will render the wire name.
+*
+* @example
+* // Extending it: a table of your own, spread over this one.
+* const VERBS = { ...VERB_TRIADS, render: { proposed: "Render", active: "Rendering", past: "Rendered" } };
+*/
+const VERB_TRIADS = {
+	shell: {
+		proposed: "Run",
+		active: "Running",
+		past: "Ran"
+	},
+	read: {
+		proposed: "Read",
+		active: "Reading",
+		past: "Read"
+	},
+	edit: {
+		proposed: "Edit",
+		active: "Editing",
+		past: "Edited"
+	},
+	grep: {
+		proposed: "Grep",
+		active: "Grepping",
+		past: "Grepped"
+	},
+	glob: {
+		proposed: "Search files",
+		active: "Searching files",
+		past: "Searched files"
+	},
+	search: {
+		proposed: "Search",
+		active: "Searching",
+		past: "Searched"
+	},
+	web: {
+		proposed: "Search web",
+		active: "Searching web",
+		past: "Searched web"
+	},
+	plan: {
+		proposed: "Write plan",
+		active: "Writing plan",
+		past: "Wrote plan"
+	},
+	task: {
+		proposed: "Work on task",
+		active: "Working on task",
+		past: "Completed task"
+	},
+	todos: {
+		proposed: "Update todos",
+		active: "Updating todos",
+		past: "Updated todos"
+	},
+	mcp: {
+		proposed: "Explore tools",
+		active: "Exploring tools",
+		past: "Explored tools"
+	},
+	explore: {
+		proposed: "Explore",
+		active: "Exploring",
+		past: "Explored"
+	},
+	delegate: {
+		proposed: "Delegate",
+		active: "Delegating",
+		past: "Delegated"
+	},
+	use: {
+		proposed: "Use",
+		active: "Using",
+		past: "Used"
+	}
+};
+/**
+* One tense of one kind, with `use` as the answer for anything unknown.
+*
+* Takes a plain `string` rather than a {@link VerbKind} on purpose: the kind
+* arrives from a wire payload, and a signature that only accepted the fourteen
+* would push every caller through a cast to reach the fallback this function
+* exists to provide.
+*
+* @example
+* verbFor("shell", "active"); // "Running"
+* verbFor("compile", "past"); // "Used" — the fallback, not undefined
+*/
+function verbFor(kind, tense) {
+	return (VERB_TRIADS[kind] ?? VERB_TRIADS.use)[tense];
+}
+/**
+* The action vocabulary a live status row draws from, as opencode ships it.
+*
+* Ten phrases, recovered from opencode's embedded i18n dictionary — the most
+* precise UI-copy source in the whole study, because that package's `AGENTS.md`
+* forbids a hardcoded English string outright, so every line a person reads is
+* in the table.
+*
+* opencode writes the detailed one as one interpolated string,
+* `Thinking - {{topic}}`. {@link TailStatus} splits that into an `action` and a
+* `detail` instead, so the topic can truncate on its own while the action never
+* does — a transcript is 280px wide in an editor sidebar, and a status line
+* that elides its verb has said nothing at all.
+*
+* @example
+* <TailStatus action={TAIL_ACTIONS.searchingCode} detail="composer.tsx" onCancel={stop} />
+*/
+const TAIL_ACTIONS = {
+	/** Nothing is running; the run has the turn but is not spending it. */
+	idle: "Idle",
+	/** The turn is waiting behind another one. */
+	queued: "Queued",
+	/** The model holds the turn. Pair with a `detail` for opencode's `Thinking - {{topic}}`. */
+	thinking: "Thinking",
+	/** Between steps: the model is deciding what to do next. */
+	planning: "Planning next steps",
+	/** Shell calls are out. */
+	running: "Running commands",
+	/** Reads, greps and globs are out. */
+	searchingCode: "Searching the codebase",
+	/** A fetch or a web search is out. */
+	searchingWeb: "Searching the web",
+	/** The catch-all for work that is neither reading nor running. */
+	exploring: "Exploring",
+	/** A person stopped it. */
+	interrupted: "Interrupted",
+	/** The runtime stopped it. */
+	aborted: "Aborted"
+};
+/**
+* The words the transcript's per-turn footer puts on its four controls.
+*
+* Cursor's turn footer is `copyMessage`, `replyToMessage`, `forkChat` and an
+* overflow menu; these are the accessible names for those four.
+* {@link TurnFooter} takes a `labels` prop that is merged over this table, so a
+* console can localise all four without touching the component or losing the
+* ones it did not override.
+*/
+const TURN_ACTION_LABELS = {
+	/** The copy control. Becomes `copied` once the clipboard has it. */
+	copy: "Copy",
+	/** The name the copy control takes while it is confirming. */
+	copied: "Copied",
+	/** Quote this turn into the composer. */
+	reply: "Reply",
+	/** Branch the conversation from this turn. */
+	fork: "Fork",
+	/** The overflow menu — Cursor hangs "Copy request ID" off it. */
+	more: "More actions"
+};
+/**
+* The five states a compaction passes through, in the order it passes them.
+*
+* Cline's `CompactionRow` is the only implementation in the sample that has all
+* five; Zed has three (`InProgress | Completed | Canceled`) and Roo has two
+* rows. Five is the honest number, because the two everybody drops are the two
+* a reader most needs: a compaction that *failed* leaves the window full, and
+* one that was *skipped* leaves it full for a reason the reader should be told.
+*/
+const COMPACTION_STATES = [
+	"started",
+	"completed",
+	"failed",
+	"cancelled",
+	"skipped"
+];
+/**
+* What the compaction rule says, per state.
+*
+* The tense triad again, which is why it lives beside it: `started` is present
+* participle, everything else is settled. Extend the same way as
+* {@link VERB_TRIADS} — spread, override the row, pass the result as
+* {@link CompactionRow}'s `label`.
+*/
+const COMPACTION_LABELS = {
+	started: "Compacting the conversation",
+	completed: "Compacted the conversation",
+	failed: "Could not compact the conversation",
+	cancelled: "Compaction cancelled",
+	skipped: "Compaction skipped"
+};
+/**
+* What the dock over the composer calls its four controls.
+*
+* Cursor's copy, read off the composer toolbar's queue: `Expand queue`,
+* `Collapse queue`, `Edit Queued Message`, `Send now`, and `CancelQueuedTurn`
+* for the control that drops one. opencode names the same surface
+* `session.followupDock` and gives it the same four keys — `expand`,
+* `collapse`, `edit`, `sendNow` — which is the reason this is a table rather
+* than five strings in the markup: two products that never spoke to each other
+* wrote the same five labels, so the sixth product to need them should not have
+* to invent them again.
+*
+* {@link QueueDock} merges a partial table over this one, so a console can
+* localise `sendNow` without losing the other four.
+*/
+const QUEUE_LABELS = {
+	/** Open the dock and show the entries. */
+	expand: "Expand queue",
+	/** Fold it back to its summary line. */
+	collapse: "Collapse queue",
+	/** Put a queued turn back in the composer. */
+	edit: "Edit queued message",
+	/** Jump one turn to the front and send it now, without waiting for the run. */
+	sendNow: "Send now",
+	/** Drop a queued turn before it ever sends. */
+	remove: "Remove from the queue"
+};
+/**
+* The axis every checkpoint restore in the study turned out to have.
+*
+* A run changes two things — the files on disk and the conversation about them
+* — and putting one back is not putting the other back. Roo's checkpoint menu
+* offers `Restore Files` and `Restore Files & Task`; Cline's user turn offers
+* `Reset Code` (*rewind conversation, reset code edits*) and `Reset Chat`
+* (*rewind conversation, keep current code edits*). Those are the same three
+* outcomes named twice, and the third one — the conversation alone — is the one
+* a reader reaches for after the model went down a blind alley but wrote
+* nothing worth losing.
+*
+* Three values, in the order they escalate. A product that only has two passes
+* the two it has as {@link RevertDock}'s `scopes`.
+*/
+const REVERT_SCOPES = [
+	"files",
+	"conversation",
+	"both"
+];
+/** What each scope is called, on the control that performs it. */
+const REVERT_SCOPE_LABELS = {
+	files: "Restore files",
+	conversation: "Restore conversation",
+	both: "Restore files and conversation"
+};
+/**
+* What each scope actually does, in the words the products that ship it use.
+*
+* These are the tooltips, not decoration: Cline's whole distinction between its
+* two buttons lives in a tooltip, and a restore control that says only
+* `Restore Files` leaves a reader to guess what happens to the twelve messages
+* after this point. `both` says out loud that they are deleted, which is Roo's
+* copy — *…and deletes all messages after this point*.
+*/
+const REVERT_SCOPE_DESCRIPTIONS = {
+	files: "Puts the files back to this point. The conversation stays as it is.",
+	conversation: "Rewinds the conversation to this point. Current code edits are kept.",
+	both: "Puts the files back and deletes all messages after this point."
+};
+/**
+* The dock's own copy, including the two sentences that make it safe.
+*
+* `warning` is Roo's verbatim — *This action cannot be undone.* — and it is
+* rendered in the UI rather than left to the documentation, because a control
+* whose irreversibility is only written down is a control that surprises
+* somebody. `question` is Cursor's verbatim — *Discard all changes up to this
+* checkpoint?* — and it is the second step: {@link RevertDock} never calls
+* `onRestore` from the control that names a scope, only from the one that
+* answers this.
+*/
+const REVERT_LABELS = {
+	/** Open the dock and show the scopes. */
+	expand: "Show restore options",
+	/** Fold it back to its summary line. */
+	collapse: "Hide restore options",
+	/** The confirm step's question. Cursor's, verbatim. */
+	question: "Discard all changes up to this checkpoint?",
+	/** The control that answers it and actually restores. */
+	confirm: "Discard and restore",
+	/** The control that backs out of the confirm step. */
+	cancel: "Keep everything",
+	/** The line the dock states while it is open. Roo's, verbatim. */
+	warning: "This action cannot be undone."
+};
+/**
+* What occupies a context window, as opencode's context tab names it.
+*
+* Five categories — `context.breakdown.{system,user,assistant,tool,other}` —
+* and they are the label set because they are the only *complete* one in the
+* study: Cursor's tray categories are per-workspace and unnamed in the bundle,
+* and Claude Code's modal builds its table from whatever the session happens to
+* hold. These five partition a window with nothing left over, which is what a
+* segmented bar needs.
+*
+* The table is the vocabulary, not a schema: {@link ContextUsage} takes
+* `categories` as `{ label, tokens, tone }`, so a console that separates its
+* file reads from its shell output writes its own labels and keeps these for
+* the rest.
+*
+* @example
+* const categories = [
+*   { label: CONTEXT_CATEGORY_LABELS.system, tokens: 11_800, tone: "stream" },
+*   { label: CONTEXT_CATEGORY_LABELS.tools, tokens: 38_400, tone: "warn" },
+* ];
+*/
+const CONTEXT_CATEGORY_LABELS = {
+	/** The system prompt, the tool schemas, the rules file. */
+	system: "System",
+	/** What the person typed. */
+	user: "User",
+	/** What the model wrote back. */
+	assistant: "Assistant",
+	/** Tool calls and everything they returned. */
+	tools: "Tool Calls",
+	/** Whatever the four above do not cover. */
+	other: "Other"
+};
+/**
+* The stat rows under the bar, as opencode's `context.stats.*` names them.
+*
+* Eight of the sixteen keys in that namespace: the four token kinds a provider
+* bills separately, the two totals, the limit, and the money. They are labels
+* only — {@link ContextUsage} takes each stat's value pre-formatted, because
+* the element that draws a window must not be the thing that decides how a
+* currency rounds.
+*/
+const CONTEXT_STAT_LABELS = {
+	/** Tokens sent. */
+	input: "Input tokens",
+	/** Tokens generated. */
+	output: "Output tokens",
+	/** Thinking tokens, where the provider bills them apart. */
+	reasoning: "Reasoning tokens",
+	/** Tokens served from the prompt cache. */
+	cache: "Cache tokens",
+	/** Input plus output, for a provider that reports one number. */
+	total: "Total tokens",
+	/** The window's size. */
+	limit: "Context limit",
+	/** What the session has cost so far. */
+	cost: "Total cost",
+	/** How many messages are in the window. */
+	messages: "Messages"
+};
+/**
+* The context meter's own chrome: its title, its three column headings, and the
+* two words it uses for what is left.
+*
+* The column headings are Claude Code's — its context modal is a table headed
+* `Category / Tokens / Usage` — and `used` is Cursor's, whose tray labels
+* itself `<n> context used`. `headroom` names the remainder segment Cursor
+* draws as `__bar-remainder` and nobody labels.
+*/
+const CONTEXT_LABELS = {
+	/** The meter's heading. */
+	title: "Context",
+	/** The breakdown's first column. */
+	category: "Category",
+	/** Its second: the token count. */
+	tokens: "Tokens",
+	/** Its third: the share of the window. */
+	usage: "Usage",
+	/** The row for what is still free. */
+	headroom: "Headroom",
+	/** The phrase after the percentage in the header. */
+	used: "context used"
+};
+/**
+* The four rungs of agent authority, which is what a mode is actually saying.
+*
+* Claude Code's panel ships *six* modes and paints them in *four* colours:
+* `default` is the brand orange, `acceptEdits` is the plain foreground, `plan`
+* is blue, and `auto` and `bypassPermissions` are both the error red. Cursor
+* ships nine mode names, opencode seven. So the mode *set* is open — every
+* product names its own — and the thing that carries meaning is the ladder
+* underneath it, which is four rungs everywhere and reads the same way in every
+* product: will it ask me, is it writing, is it only thinking, are the
+* guardrails off.
+*
+* These four are therefore what `data-agent-mode` carries and what
+* `@cueplusplus/ui/elements.css` keys the mode quadruple on. A product with
+* nine modes maps them onto four rungs in one table of its own and passes its
+* own word as {@link AgentModeBadge}'s `label` — which is exactly what Claude
+* Code's stylesheet does, one selector list at a time.
+*
+* The order is the ladder's: least authority first.
+*
+* @example
+* // Nine product modes, four rungs, one table.
+* const RUNG = { agent: "auto-edit", ask: "manual", plan: "plan", yolo: "unsafe" } as const;
+* <AgentModeBadge mode={RUNG[mode]} label={mode} />
+*/
+const AGENT_MODES = [
+	"manual",
+	"auto-edit",
+	"plan",
+	"unsafe"
+];
+/**
+* What each rung is called on the chip, as Claude Code's mode picker names it.
+*
+* Its six labels collapse onto these four the same way its colours do:
+* `Manual`, `Edit automatically`, `Plan`, and `Bypass permissions` for the two
+* that share the red. A console with its own words passes them as `label`.
+*/
+const AGENT_MODE_LABELS = {
+	manual: "Manual",
+	"auto-edit": "Edit automatically",
+	plan: "Plan",
+	unsafe: "Bypass permissions"
+};
+/**
+* What each rung actually means, in a sentence, for the chip's `title`.
+*
+* These are cue's words rather than the reference's: the six descriptions in
+* the teardown all name a particular product's agent by name, and a design
+* system that shipped them would be putting another company's voice in every
+* console that installs it. The *distinctions* are theirs, and they are the
+* point — the difference between `auto-edit` and `unsafe` is which of the two
+* things the run stops asking about, and a mode picker that does not say so is
+* a picker that gets `unsafe` chosen by accident.
+*/
+const AGENT_MODE_DESCRIPTIONS = {
+	manual: "Asks before every edit and every command.",
+	"auto-edit": "Writes edits without asking. Commands and everything else still ask.",
+	plan: "Reads and plans. It changes nothing until you accept the plan.",
+	unsafe: "Runs everything without asking, including what cannot be undone."
+};
+/**
+* How far an "always allow" reaches, in the four reaches the study found.
+*
+* Zed's `SandboxPermission` has four lifetimes (`AllowOnce`, `AllowThread`,
+* `AllowAlways`, `Deny`) with a note that two of them share an ACP kind and are
+* told apart only by id; Claude Code's scope cycler has five destinations, of
+* which `CLI` is not a choice a person makes; Roo keeps allow/deny patterns per
+* command and Cline a per-category bar. What survives all of them is these
+* four, in this order: this run, this checkout, this checkout and everyone
+* else's, every checkout.
+*
+* They are **labels, not a schema**. {@link PermissionScopes} takes its scopes
+* as `{ id, label, writes }`, and `writes` — the file the grant is saved to —
+* has no default here and never will: `.claude/settings.local.json` is one
+* product's path, and a permission control that guessed where a grant is
+* written would be committing the exact defect the control exists to prevent.
+* A console passes its own sentence; these four supply the words in front of
+* it.
+*
+* @example
+* const SCOPES = [
+*   { id: "session", label: PERMISSION_SCOPE_LABELS.session, writes: "Not saved. Gone when this run ends." },
+*   { id: "project", label: PERMISSION_SCOPE_LABELS.project, writes: "Saves to .cue/settings.local.json (gitignored)" },
+* ];
+*/
+const PERMISSION_SCOPE_LABELS = {
+	/** Until the run ends, and no further. */
+	session: "this session",
+	/** This checkout, for the person sitting at it. */
+	project: "this project (just you)",
+	/** This checkout, committed, for whoever else works in it. */
+	team: "this project (shared)",
+	/** Everywhere this person works. */
+	everywhere: "all projects"
+};
+/**
+* The permission card's own copy — everything on it except the sentence it
+* writes for itself.
+*
+* `hint` is Claude Code's `keyboardHints` line, verbatim, because it documents
+* a real binding this element ships: Escape denies, while focus is inside the
+* card. A console whose card answers the key from anywhere is a console that
+* routed it there itself, and the words on the line are the same either way.
+* `change` is the accessible
+* name of the control that cycles the destination, and it is phrased as a
+* question about *where* rather than about scope, since "scope" is a word for
+* the people who build these and not for the people who answer them.
+*/
+const PERMISSION_LABELS = {
+	/** The first answer: yes, once, and ask me again next time. */
+	allowOnce: "Yes, this time",
+	/** The third answer. */
+	deny: "No, and stop",
+	/** The line under the answers. Claude Code's, verbatim. */
+	hint: "Esc to cancel",
+	/** The control that moves the grant to a different destination. */
+	change: "Change where this is saved",
+	/** The heading over the full rule list, drawn when the label cannot name them all. */
+	rules: "this allows",
+	/** What the always-allow answer says when there is no rule to name. */
+	fallback: "Yes, and don't ask again"
+};
+/**
+* How dangerous the runtime says this call is — OpenHands' `SecurityRisk`, in
+* its own four values.
+*
+* `unknown` is first and is not padding: it is the honest answer for a runtime
+* that does not score its actions, and a badge that had to choose between
+* `low` and rendering nothing would quietly downgrade every call in every
+* product that has no scorer. Six of the seven projects in the study encode
+* risk *implicitly*, through which approval bucket a tool falls into; this is
+* the one that makes it a property of the action, which is what lets one
+* element render it without a taxonomy of tools.
+*/
+const SECURITY_RISKS = [
+	"unknown",
+	"low",
+	"medium",
+	"high"
+];
+/**
+* What each risk is called on the badge.
+*
+* The word `risk` is in all four, because the badge sits inline on a tool row
+* beside a duration, a diff stat and a status — and `HIGH` on its own, next to
+* `+48 −12`, is a number about something.
+*/
+const RISK_LABELS = {
+	unknown: "Risk unknown",
+	low: "Low risk",
+	medium: "Medium risk",
+	high: "High risk"
+};
+/**
+* The verdict row's chrome: what the scorer is called, and how its rating is
+* read out.
+*
+* OpenHands calls the thing a *critic* and gates it on
+* `verification.enable_iterative_refinement`. `Verification` is the neutral
+* name for the same idea, and `rating` is a template rather than a string
+* because the row's rating is drawn as five glyphs and a screen reader is owed
+* the sentence they stand for.
+*/
+const VERDICT_LABELS = {
+	/** The row's heading. */
+	title: "Verification",
+	/** The heading over the issue chips. */
+	issues: "Most likely problems",
+	/** The rating's accessible name. `{n}` is the score out of five. */
+	rating: "Rated {n} out of 5"
+};
+/**
+* The two words on a reveal, which are the same two words everywhere.
+*
+* `Show more` and `Show less` are in Claude Code's shipped ARIA label list
+* verbatim, and they are what Cursor, opencode and every catalogue in the study
+* write too. A table rather than two defaults inside {@link Clamp} for the
+* ordinary reason: a console in German should not have to fork a component to
+* truncate a paragraph.
+*/
+const CLAMP_LABELS = {
+	/** Opens the clamp. */
+	more: "Show more",
+	/** Closes it again, and is never dimmed. */
+	less: "Show less"
+};
+/**
+* The nine transitions an agent surface announces, as templates.
+*
+* These are the nine Claude Code's panel feeds to its announcement queue, in
+* cue's own words: the run starting and stopping, compaction, each of the three
+* things it can stop and wait for, an error, a permission request naming its
+* tool, and a finished answer. Codex's extension announces the same run of
+* states from its own string table (`Response started`, `Response: {content}`,
+* `Response complete`), which is what makes this a canon rather than one
+* product's copy.
+*
+* `{tool}`, `{message}` and `{text}` are substituted by the caller, the way
+* {@link VERDICT_LABELS}' `{n}` is — a table stays a table, and a table of
+* functions is an API.
+*
+* The words are cue's rather than the reference's for the reason the mode
+* descriptions are: the originals name a particular company's agent in every
+* sentence, and a design system that shipped them would put another product's
+* voice into every console that installs it. `answer` carries the model's own
+* prose, which a console flattens out of markdown before it gets here —
+* nothing in this package parses anything.
+*
+* @example
+* import { ANNOUNCEMENTS, LiveRegionAnnouncer } from "@cueplusplus/ui/elements";
+*
+* const say = ANNOUNCEMENTS.permission.replace("{tool}", call.tool);
+* setLog((was) => [...was, say]);
+*/
+const ANNOUNCEMENTS = {
+	/** The run has started working. */
+	working: "The agent is working.",
+	/** It has stopped, and the composer is the next thing that matters. */
+	ready: "Ready for your input.",
+	/** The context is being compacted, which can take a while and looks like nothing. */
+	compacting: "Compacting the conversation.",
+	/** It is blocked on a decision of some kind. */
+	decision: "The agent is waiting for your decision.",
+	/** It asked a question rather than for a permission. */
+	question: "The agent is asking you a question.",
+	/** A plan is finished and wants review before anything is done to the files. */
+	plan: "The agent has finished a plan and is waiting for your review.",
+	/** A tool wants permission. `{tool}` is the tool's own name. */
+	permission: "The agent is requesting permission to use {tool}.",
+	/** Something failed. `{message}` is the error as the runtime reported it. */
+	error: "Error: {message}",
+	/** A turn finished. `{text}` is the answer, flattened to speech by the caller. */
+	answer: "The agent answered: {text}"
+};
+//#endregion
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, QUEUE_LABELS, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, SECURITY_RISKS, TAIL_ACTIONS, TURN_ACTION_LABELS, VERB_TRIADS, VERDICT_LABELS, verbFor };

package/dist/elements/voice-conversation.d.ts

@@ -0,0 +1,49 @@
+import { ComponentProps } from "react";
+//#region src/elements/voice-conversation.d.ts
+type VoiceMode = "connecting" | "listening" | "thinking" | "speaking";
+/** One turn of a spoken conversation, as it was transcribed. */
+interface VoiceTurn {
+  /** The row's key. */
+  id: string;
+  /** Who spoke — the caller or the assistant. */
+  role: "user" | "assistant";
+  /** What was heard, or what was said. */
+  text: string;
+}
+/**
+ * A live call: the orb tracks your voice, the caption names the turn, the transcript
+ * follows.
+ *
+ * @example
+ * import { VoiceConversation } from "@cueplusplus/ui/elements";
+ *
+ * <VoiceConversation
+ *   mode="listening"
+ *   amplitude={0.6}
+ *   transcript={transcript}
+ *   onToggleMute={toggleMute}
+ *   onEnd={hangUp}
+ * />
+ */
+declare function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, onInterrupt, onEnd, className, ...props }: Omit<ComponentProps<"div">, "children" | "mode" | "amplitude" | "transcript" | "muted" | "onToggleMute" | "onInterrupt" | "onEnd"> & {
+  /** Drives the orb and the caption. Only listening and speaking react to amplitude. */
+  mode: VoiceMode;
+  /** Current level from 0 to 1, clamped internally. Feed it from the analyser node. */
+  amplitude: number;
+  /** Turns so far, oldest first. */
+  transcript: readonly VoiceTurn[];
+  /** Marks the mic control as engaged and swaps the hint. */
+  muted?: boolean;
+  /** Called when the mic is muted or unmuted. */
+  onToggleMute?: () => void;
+  /**
+   * Called when the orb is pressed while the assistant is speaking. The orb is inert
+   * in every other mode, so the caption only offers the interrupt when one is
+   * possible.
+   */
+  onInterrupt?: () => void;
+  /** Called when the call is ended. */
+  onEnd?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { VoiceConversation, VoiceMode, VoiceTurn };