@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
62 lines (61 loc) • 3.16 kB
TypeScript
import { JSX } from 'solid-js';
/** The run state of an agent, mapped to the kit's tool / status hues.
* - `working` (blue) the agent is actively running.
* - `idle` (muted) waiting, no current activity.
* - `done` (green) finished its turn.
* - `error` (red) failed.
* - `blocked` (amber) stalled, usually waiting on something. */
export type AgentStatusTone = 'working' | 'idle' | 'done' | 'error' | 'blocked';
export interface AgentStatus {
/** Which hue the status dot takes. */
tone: AgentStatusTone;
/** Optional short label rendered next to the dot (e.g. "Working", "Blocked on you"). */
label?: string;
/** Animate the dot with a ping ring (off under prefers-reduced-motion). */
pulse?: boolean;
}
export interface AgentCardProps {
/** @deprecated No longer rendered. Kept for back-compat with existing callers. */
leading?: JSX.Element;
/** The agent's name. The primary label. */
name: string;
/** @deprecated No longer rendered. Kept for back-compat with existing callers. */
subtitle?: string;
/** @deprecated No longer rendered. Kept for back-compat with existing callers. */
lastLine?: string;
/** Run status: a tone-colored dot, an optional small label, optionally pulsing. */
status: AgentStatus;
/** Raise a prominent "needs you" pill plus a glowing amber edge. The
* attention-routing signal that pulls focus to this agent. */
needsAttention?: boolean;
/** Selected / focused state. Highlighted border and surface. */
active?: boolean;
/** Promote this agent to focus. Fires on click and on Enter / Space. */
onActivate?: () => void;
/** Alias for {@link AgentCardProps.onActivate}. Both fire if both are set. */
onClick?: () => void;
/** Show a trailing "..." overflow button and fire this on click. The consumer
* wires the actual menu; the card only surfaces the affordance. Click is
* stopped from also activating the card. */
onMenu?: (e: MouseEvent) => void;
/** Extra classes merged over the card. */
class?: string;
}
/**
* AgentCard - the compact representation of one agent in a multi-agent workspace.
*
* In a focus + periphery layout the agents you are not focused on collapse to these
* glanceable cards, arranged as a narrow side RAIL or a wide LIST. The card stays
* deliberately minimal: the agent name, a tone-colored status dot, a "needs you"
* affordance when the agent wants your attention, and a trailing "..." overflow
* button for per-agent actions. Clicking the card promotes the agent back to focus.
*
* It is `w-full` and lets the name truncate, so the same component works in both a
* narrow rail and a wide list without changes - the content adapts to the box.
*
* Status maps to the kit's tool hues so it reads in light and dark from tokens alone:
* working = blue, idle = muted, done = green, error = red, blocked = amber. Setting
* `needsAttention` raises an amber "Needs you" pill and a glowing amber ring so the
* card jumps out of the periphery - the attention-routing signal.
*/
export declare function AgentCard(props: AgentCardProps): JSX.Element;