Context Manager

An "In scope" panel showing what the AI is working with — header (title + status + token usage), category tabs, a list of context items with status badges and toggles, a detail column for the selected item, and a context-limit warning.

Loading demo: context-manager-realworld

Installation

npx sdaia-ui@latest add context-manager

Usage

import { ContextManager } from "sdaia-ui"

1<ContextManager
2  variant="panel"
3  title="Context"
4  headerStatus="Active"
5  subtitle="12 active items · 2 disabled · ~28k tokens"
6  tabs={tabs}
7  activeTabId={activeTab}
8  onTabChange={setActiveTab}
9  items={items}
10  detail={detail}
11  warning="Context limit nearly full. Some older items may be truncated."
12  onToggleItem={(id, on) => setEnabled(id, on)}
13  onAddContext={() => addContext()}
14/>

Examples

Inline

A compact in-conversation strip — a header, dismissible context chips and Add / Manage actions.

Loading demo: context-manager-inline

A focused "Manage context" dialog — search, a flat item list with toggles and Cancel / Save actions.

Loading demo: context-manager-modal

Brand

Brand style — a high-emphasis, brand-tinted surface with a brand border for a primary, standalone manager.

Loading demo: context-manager-brand

Outline

Outline style — a transparent surface with a neutral border for quietly embedding the manager in busier layouts.

Loading demo: context-manager-outline

API Reference

Prop	Type	Default	Required
variant	'panel' \| 'inline' \| 'modal'	'panel'	optional
surface	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
title	ReactNode	'Context' / 'Manage context'	optional
headerStatus	ReactNode	—	optional
subtitle	ReactNode	—	optional
count	number	—	optional
activeCount	number	—	optional
activeLabel	string	'active'	optional
items	ContextItem[]	[]	optional
onToggleItem	(id: string, on: boolean) => void	—	optional
tabs	ContextTab[]	—	optional
activeTabId / onTabChange	string / (id) => void	—	optional
detail	ContextDetail \| null	—	optional
moreCount	number	—	optional
onRemoveItem	(id: string) => void	—	optional
searchPlaceholder / searchValue / onSearchChange	string / string / (v) => void	—	optional
footerSummary	ReactNode	—	optional
warning	ReactNode	—	optional
addLabel / manageLabel / previewLabel / openSourceLabel / removeLabel / cancelLabel / saveLabel	string	—	optional
onAddContext / onManage / onSearch / onFilter / onSort / onClose / onCancel / onSave / onPreview / onOpenSource / onRemove	() => void	—	optional