JSDoc

CommandPalette({ actions, onClose, placeholder, maxResults, }: CommandPaletteProps): JSX.Element

BottomDrawer({ open, onClose, title, children, heightPercent, closeOnEsc, }: BottomDrawerProps): JSX.Element | null

ConsolePanel(props: ConsolePanelProps): JSX.Element

Resolves an entry to its row-rendering kind, defaulting to 'log'.

entryKind(e: ConsoleEntry): "log" | "group" | "table" | "count" | "time" | "error"

Deep-merges a partial features bag into the defaults. Host is free to pass `features={{ toolbar: { search: false } }}` and only override what matters; everything else stays at default.

resolveFeatures(partial?: PartialConsoleFeatures): ConsoleFeatures

resolveTraceFeatures(partial?: PartialTraceFeatures): TraceFeatures

TraceTree(props: TraceTreeProps): JSX.Element

inferredAdapter(): SchemaAdapter

inferKind(v: unknown): ValueKind

ObjectInspector(props: ObjectInspectorProps): JSX.Element

zodAdapter(rootSchema: ZodTypeAny): SchemaAdapter

resolveInspectorFeatures(partial?: PartialInspectorFeatures): ObjectInspectorFeatures

HttpInspector({ requests, emptyText, }: HttpInspectorProps): JSX.Element

Generic colored-square avatar — used for app tiles, agents, etc. App-agnostic: caller passes the initial + hue, no STATE lookup.

Avatar({ initial, hue, size, title }: AvatarProps): JSX.Element

Chip({ children, on, onClick, onClose, title }: ChipProps): JSX.Element

JsonTree({ value, indent }: JsonTreeProps): JSX.Element

Pip({ kind, size, color, style }: PipProps): JSX.Element

Sparkline({ values, width, height, color, strokeWidth, "aria-label": ariaLabel, }: SparklineProps): JSX.Element

Spinner({ size, color }: SpinnerProps): JSX.Element

StatusIcon({ status, size }: StatusIconProps): JSX.Element

StatusPill({ status, label }: StatusPillProps): JSX.Element

TweakRadio({ label, value, options, onChange, }: { label: string; value: string; options: TweakRadioOption[]; onChange: (v: string) => void; }): JSX.Element

TweakSection({ title, children, }: { title: string; children?: ReactNode; }): JSX.Element

TweakSlider({ label, value, min, max, step, unit, onChange, }: TweakSliderProps): JSX.Element

TweaksPanel({ title, enabled, children, }: TweaksPanelProps): JSX.Element | null

TweakToggle({ label, value, onChange, }: { label: string; value: boolean; onChange: (v: boolean) => void; }): JSX.Element

<T extends Record<string, unknown>>(defaults: T): UseTweaksReturn<T>

Subscribe to a global keydown. - 'cmdk' matches Cmd/Ctrl + K (and preventDefault) - 'esc' matches Escape - any other string matches `e.key === key` `deps` is forwarded to useEffect so consumers can opt into stale-closure fixes; pass [] for once-on-mount.

useKey(key: UseKeySpec, fn: (e: KeyboardEvent) => void, deps?: ReadonlyArray<unknown>): void

onActivateKey(fn: () => void): (e: KeyboardEvent) => void

type CommandAction = {
	id: string;
	label: string;
	cat?: string;
	hint?: string;
	kbd?: string;
	onRun: () => void;
}

type CommandPaletteProps = {
	actions: CommandAction[];
	onClose: () => void;
	placeholder?: string;
	maxResults?: number;
}

type BottomDrawerProps = {
	open: boolean;
	onClose: () => void;
	title?: string;
	children: ReactNode;
	heightPercent?: number;
	closeOnEsc?: boolean;
}

type ColumnsConfig = {
	timestamp: boolean;
	timestampFormat: TimestampFormat;
	source: boolean;
	level: boolean;
	traceChip: boolean;
	rowPrefix: boolean;
	rowExtra: boolean;
}

type ConsoleEntry = | ConsoleEntryLog
	| ConsoleEntryGroup
	| ConsoleEntryTable
	| ConsoleEntryCount
	| ConsoleEntryTime
	| ConsoleEntryError

type ConsoleEntryCount = ConsoleEntryBase & {
	kind: 'count';
	label: string;
	value: number;
}

type ConsoleEntryError = ConsoleEntryBase & {
	kind: 'error';
	msg: string;
	stack?: string[];
	data?: unknown;
}

type ConsoleEntryGroup = ConsoleEntryBase & {
	kind: 'group';
	label: string;
	durationMs?: number;
	status?: ConsoleGroupStatus;
	active?: boolean;
}

type ConsoleEntryLog = ConsoleEntryBase & {
	kind?: 'log';
	msg: string;
	data?: unknown;
	stack?: string[];
}

type ConsoleEntryTable = ConsoleEntryBase & {
	kind: 'table';
	label: string;
	columns: string[];
	rows: unknown[][];
}

type ConsoleEntryTime = ConsoleEntryBase & {
	kind: 'time';
	label: string;
	durationMs: number;
}

type ConsoleFeatures = {
	columns: ColumnsConfig;
	toolbar: ToolbarConfig;
	footer: boolean;
	dataPreview: boolean;
	stackFrames: boolean;
	tableRows: boolean;
	groupAggregations: boolean;
	evalSlot: boolean;
	summarySlot: boolean;
	autoScroll: boolean;
	/** When true, clicking a row selects it and (if the host passes
	 * `renderEntryDetail`) the detail panel renders to the right. Hosts
	 * typically wire this to <ObjectInspector value={entry.data} />. */
	detailPanel: boolean;
	groupCollapseDefault: GroupCollapseDefault;
}

type ConsoleGroupStatus = 'ok' | 'warn' | 'err'

type ConsoleLevel = 'info' | 'warn' | 'error' | 'debug'

type ConsoleLevelOrAll = ConsoleLevel | 'all'

type ConsolePanelProps = {
	entries: ConsoleEntry[];

	emptyText?: string;

	/** Single switchable-features bag. Anything omitted falls back to
	 * DEFAULT_CONSOLE_FEATURES. */
	features?: PartialConsoleFeatures;

	level?: ConsoleLevelOrAll;
	onLevelChange?: (l: ConsoleLevelOrAll) => void;

	source?: string | null;
	onSourceChange?: (s: string | null) => void;

	query?: string;
	onQueryChange?: (q: string) => void;

	sources?: ConsoleSource[];

	paused?: boolean;
	onPausedChange?: (paused: boolean) => void;

	onClear?: () => void;

	collapsed?: Record<string, boolean>;
	onCollapsedChange?: (c: Record<string, boolean>) => void;

	renderRowPrefix?: (entry: ConsoleEntry) => ReactNode | null;
	renderRowExtra?: (entry: ConsoleEntry) => ReactNode | null;

	/** Side-panel content for the selected row. Host typically wires this
	 * to `<ObjectInspector value={entry.data} />`. Renders only when
	 * features.detailPanel === true and an entry is selected. */
	renderEntryDetail?: (entry: ConsoleEntry) => ReactNode | null;
	selectedEntryId?: string | number | null;
	onSelectEntry?: (id: string | number | null) => void;

	evalSlot?: ReactNode | null;
	summarySlot?: ReactNode | null;

	onTraceClick?: (traceId: string) => void;

	className?: string;
	style?: JSX.IntrinsicElements['div']['style'];
}

Source descriptor used to render filter chips. `color` is a CSS color string provided by the host (`var(--something)` or any literal). The reusable component only spreads it; it never inspects the value.

type ConsoleSource = {
	id: string;
	label: string;
	color?: string;
}

type GroupCollapseDefault = | { kind: 'all-expanded' }
	| { kind: 'all-collapsed' }
	| { kind: 'first-n-expanded'; n: number }

type PartialConsoleFeatures = Partial<
	Omit<ConsoleFeatures, 'columns' | 'toolbar' | 'groupCollapseDefault'>
> & {
	columns?: Partial<ColumnsConfig>;
	toolbar?: Partial<ToolbarConfig>;
	groupCollapseDefault?: GroupCollapseDefault;
}

type PartialTraceFeatures = Partial<TraceFeatures>

type Span = {
	id: string;
	parent?: string | null;
	name: string;
	start: number;
	dur: number;
	status?: SpanStatus;
	service?: string;
	tags?: Record<string, unknown>;
}

type SpanStatus = 'ok' | 'warn' | 'error'

type TimestampFormat = 'absolute' | 'absolute-ms' | 'relative' | 'hms' | 'hms-ms'

type ToolbarConfig = {
	enabled: boolean;
	pause: boolean;
	clear: boolean;
	expandCollapseGroups: boolean;
	levelFilter: boolean;
	sourceFilter: boolean;
	search: boolean;
	searchPlaceholder: string;
}

type TraceFeatures = {
	axis: boolean;
	axisTickCount: number;
	durationLabel: boolean;
	serviceLabel: boolean;
	statusColor: boolean;
	hierarchyRail: boolean;
	defaultExpansion: 'all-expanded' | 'roots-only';
	detailPanel: boolean;
}

type TraceTreeProps = {
	spans: Span[];
	selectedSpanId?: string;
	onSelectSpan?: (id: string) => void;
	emptyText?: string;
	renderSpanDetail?: (span: Span) => ReactNode | null;
	features?: PartialTraceFeatures;
	className?: string;
	style?: JSX.IntrinsicElements['div']['style'];
}

type CopyOption = 'json' | 'path' | 'value'

Custom renderer for one node. Applied BEFORE the schema-derived editor (so hosts can fully override). When `match` returns true, the inspector delegates rendering to `view` (read mode) or `edit` (edit mode); if a renderer omits one mode, the inspector falls back to the built-in.

type CustomRenderer = {
	name: string;
	match: (ctx: RendererMatchContext) => boolean;
	view?: (ctx: RendererViewContext) => ReactNode | null;
	edit?: (ctx: RendererEditContext) => ReactNode | null;
}

Result of an in-place edit attempt. Discriminated so consumers can react to validation failures without try/catch.

type EditResult = | { status: 'committed'; path: Path; oldValue: unknown; newValue: unknown }
	| { status: 'rejected'; path: Path; reason: 'validation' | 'type'; message: string }

type ObjectInspectorFeatures = {
	toolbar: boolean;
	search: boolean;
	searchPlaceholder: string;
	expandAllButton: boolean;
	collapseAllButton: boolean;
	sortKeysButton: boolean;
	breadcrumb: boolean;
	typeBadges: boolean;
	docTooltips: boolean;
	cyclicMarker: boolean;
	collapsedPreview: boolean;
	copyButtons: ReadonlyArray<CopyOption>;
	maxStringPreview: number;
	maxArrayPreviewItems: number;
	defaultExpandDepth: number;
	dense: boolean;
	/** Reserved for v2 — JSON / Table / Diff view modes. v1 ships only Tree. */
	viewModes: ReadonlyArray<'tree' | 'json' | 'table' | 'diff'>;
}

type ObjectInspectorMode = 'view' | 'edit'

Visual descriptor — held intentionally minimal so the next UI iteration can change colors/spacing/icons without a prop migration.

type ObjectInspectorProps = {
	value: unknown;

	/** Adapter (preferred). If omitted, falls back to inferred. The bundled
	 * `zodAdapter(schema)` is a separate import so the package has no zod
	 * runtime dep. */
	adapter?: SchemaAdapter;

	mode?: ObjectInspectorMode;

	/** Required when mode === 'edit'. Called once per attempt with a
	 * discriminated EditResult so consumers can react to rejections without
	 * try/catch. */
	onEdit?: (result: EditResult) => void;

	/** Custom renderer registry — applied before built-in renderers in BOTH
	 * view and edit modes. Hosts get total control over per-type chrome
	 * (e.g. photoeditor's LayerNode preview, AAR's AppManifest pill). */
	customRenderers?: ReadonlyArray<CustomRenderer>;

	/** Reserved for v2 diff mode — ignored by v1. Documented now so adding
	 * diff later doesn't break consumers. */
	compareTo?: unknown;

	rootLabel?: string;
	emptyText?: string;

	features?: PartialInspectorFeatures;

	className?: string;
	style?: JSX.IntrinsicElements['div']['style'];
}

type Path = ReadonlyArray<string | number>

type PartialInspectorFeatures = Partial<ObjectInspectorFeatures>

type RendererEditContext = RendererMatchContext & {
	commit: (newValue: unknown) => void;
	cancel: () => void;
}

type RendererMatchContext = {
	value: unknown;
	node: SchemaNode;
	path: Path;
}

type RendererViewContext = RendererMatchContext

Adapter contract — pluggable schema source. Inferred is the default; the bundled zod adapter wraps a ZodSchema. Hosts may write their own.

type SchemaAdapter = {
	name: string;
	/** Resolve a SchemaNode for the value at `path`. */
	nodeFor: (value: unknown, path: Path) => SchemaNode;
	/** Validate a value against the schema at `path`. Returns null on success. */
	validate?: (value: unknown, path: Path) => ValidationError | null;
}

Type-info node returned by a SchemaAdapter. Drives both the type badge and the editor selection.

type SchemaNode = {
	kind: ValueKind;
	label: string;
	doc?: string;
	enum?: ReadonlyArray<string | number | boolean>;
	range?: readonly [number, number];
	lenRange?: readonly [number, number];
	pattern?: string;
	format?: string;
	optional?: boolean;
	readOnly?: boolean;
	/** For discriminated-union: the discriminant property name. The host's
	 * adapter builds this; the inspector uses it to render a tag dropdown. */
	discriminator?: string;
	/** For discriminated-union: the variant labels keyed by discriminant value. */
	variants?: Record<string, SchemaNode>;
}

type ValidationError = {
	message: string;
	path?: Path;
}

Internal classification of a value. Adapters return one of these from `nodeFor()`; renderers dispatch on `kind`. New kinds are non-breaking additions because consumers always handle `'unknown'` as the fallback.

type ValueKind = | 'string'
	| 'number'
	| 'integer'
	| 'boolean'
	| 'null'
	| 'undefined'
	| 'date'
	| 'object'
	| 'array'
	| 'bigint'
	| 'symbol'
	| 'function'
	| 'enum'
	| 'discriminatedUnion'
	| 'unknown'

type HttpCache = 'hit' | 'miss' | 'bypass'

type HttpInspectorProps = {
	requests: HttpRequestRow[];
	emptyText?: string;
}

type HttpMethod = string

type HttpRequestRow = {
	ts: string;
	method: HttpMethod;
	url: string;
	status: number;
	type: string;
	cache: HttpCache;
	sizeBytes: number;
	ms: number;
	initiator: string;
}

type IconName = "Box" | "Activity" | "Graph" | "Terminal" | "Clock" | "Robot" | "Hand" | "Key" | "Search" | "Sun" | "Moon" | "Cmd" | "Drawer" | "Check" | "X" | "Retry" | "Warn" | "Pause" | "Play" | "Chevron" | "ChevronD" | "Plus" | "ExternalLink" | "Copy" | "Filter" | "ArrowUp" | "Telegram" | "Cron" | "Inbox" | "Zap" | "Restart" | "Eye" | "Server"

type IconProps = {
	size?: number;
	stroke?: string;
	fill?: string;
	sw?: number;
	className?: string;
	style?: React.CSSProperties;
	title?: string;
}

type AvatarProps = {
	initial: string;
	hue?: number;
	size?: number;
	title?: string;
}

type ChipProps = {
	children: ReactNode;
	on?: boolean;
	onClick?: (e: MouseEvent) => void;
	onClose?: () => void;
	title?: string;
}

type JsonTreeProps = {
	value: unknown;
	indent?: number;
}

type JsonValue = | null
	| string
	| number
	| boolean
	| JsonValue[]
	| { [key: string]: JsonValue }

type PipKind = 'ok' | 'warn' | 'err' | 'plain'

type PipProps = {
	kind?: PipKind;
	size?: number;
	color?: string;
	style?: React.CSSProperties;
}

Sparkline — tiny inline-SVG line chart for at-a-glance trend display. Single responsibility: render `values` as a normalized polyline inside a fixed-size SVG. No axes, no labels, no chart library — just a polyline suitable for embedding in a tile, row, or status strip. Edge cases: - `values.length === 0` → empty <svg/> (no polyline, no crash). - `values.length === 1` → single dot at midpoint (a polyline of one point is a no-op in SVG, so we render a <circle> instead). - `max === min` → all points clamped to vertical midline (avoids divide-by-zero in normalization; common when every value is 0). Coordinates are rounded to 2 decimals so snapshot/string assertions are stable.

type SparklineProps = {
	values: readonly number[];
	width?: number;
	height?: number;
	/** CSS color (or var(--…)) used for the polyline stroke. */
	color?: string;
	strokeWidth?: number;
	/** Accessible label. Renders as <title> inside the SVG. */
	'aria-label'?: string;
}

type SpinnerProps = {
	size?: number;
	color?: string;
}

type StatusIconProps = {
	status: StatusKind;
	size?: number;
}

type StatusKind = string

type StatusPillProps = {
	status: StatusKind;
	label?: string;
}

type TweakRadioOption = { value: string; label: string }

type TweakSliderProps = {
	label: string;
	value: number;
	min?: number;
	max?: number;
	step?: number;
	unit?: string;
	onChange: (v: number) => void;
}

type TweaksPanelProps = {
	title?: string;
	enabled?: boolean;
	children: ReactNode;
}

type UseTweaksReturn = UseTweaksReturn<T>

type UseKeySpec = string

Sensible defaults: everything visible, all toggles on, all-expanded groups.

const DEFAULT_CONSOLE_FEATURES: ConsoleFeatures

const DEFAULT_TRACE_FEATURES: TraceFeatures

const DEFAULT_INSPECTOR_FEATURES: ObjectInspectorFeatures

const Icon: { readonly Box: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Activity: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Graph: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Terminal: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Clock: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Robot: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Hand: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Key: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Search: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Sun: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Moon: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Cmd: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Drawer: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Check: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly X: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Retry: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Warn: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Pause: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Play: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Chevron: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly ChevronD: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Plus: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly ExternalLink: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Copy: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Filter: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly ArrowUp: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Telegram: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Cron: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Inbox: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Zap: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Restart: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Eye: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; readonly Server: (p: IconProps) => import("/home/runner/work/components/components/node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/jsx-runtime").JSX.Element; }