ContextPanel

A panel listing what is in the model’s context window — files, messages, tool output — with each item’s kind, priority, and token count under a one-line total. Turn on showTokenShare to append each item’s share of the panel’s tokens and make it obvious which items dominate the window.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

ContextPanel(
  showTokenShare: true,
  usage: const TokenUsage(
    input: 9200,
    output: 3100,
    contextUsed: 12300,
    contextLimit: 200000,
  ),
  items: const <ContextItem>[
    ContextItem(
      id: 'a',
      label: 'lib/main.dart',
      kind: ContextItemKind.file,
      tokenCount: 410,
    ),
    ContextItem(
      id: 'b',
      label: 'pubspec.yaml',
      kind: ContextItemKind.file,
      tokenCount: 120,
    ),
    ContextItem(
      id: 'c',
      label: 'dart test',
      kind: ContextItemKind.command,
      tokenCount: 90,
    ),
  ],
)

Constructors

ContextPanel()

Parameter	Type	Default	Description
items:	List<ContextItem>	required	Context items to display, select, activate, and copy.
usage:	TokenUsage?	—	Optional overall token usage, shown in the summary line (such as 12k/200k 6%) and exposed through semantics. Without it, the summary shows the items’ combined tokens.
controller:	ContextPanelController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the panel should request focus when mounted.
label:	String	'Context'	Semantic and visual label for the panel.
maxVisible:	int	6	Maximum visible rows before the list scrolls.
showTokenShare:	bool	false	Append each item’s share of the items’ combined tokens to its count, such as 1k (12%). Off by default. Makes it obvious at a glance which items dominate the context window. Items with no tokens, or when the total is zero, get no share suffix.
copySelection:	bool	true	Whether Ctrl+C and semantic copy export the selected item.
copyOptions:	ContextPanelCopyOptions	const ContextPanelCopyOptions()	Clipboard/export options for selected-item copy.
onSelect:	void Function(ContextPanelSelectResult result)?	—	Called when a context item is activated.
onCopy:	void Function(ContextPanelCopyResult result)?	—	Called after a copy attempt completes.

Source

ContextPanel is defined in packages/fleury/lib/src/catalog/context_panel.dart.

Category: Agent surfaces · All widgets

Live demo

contextpanel_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => ContextPanel(
  showTokenShare: true,
  usage: const TokenUsage(
    input: 9200,
    output: 3100,
    contextUsed: 12300,
    contextLimit: 200000,
  ),
  items: const <ContextItem>[
    ContextItem(
      id: 'a',
      label: 'lib/main.dart',
      kind: ContextItemKind.file,
      tokenCount: 410,
    ),
    ContextItem(
      id: 'b',
      label: 'pubspec.yaml',
      kind: ContextItemKind.file,
      tokenCount: 120,
    ),
    ContextItem(
      id: 'c',
      label: 'dart test',
      kind: ContextItemKind.command,
      tokenCount: 90,
    ),
  ],
);

Live preview

Live

ⓘ how this demo runs ⛶ Expand