Data parts

The data parts show what the model runs with and let the user change it. Only ContextDisplay is in a default composition, in the composer’s controls; place the rest where you want them. Each renders nothing until it has data, so a part with nothing to show takes no space.

Usage

Give the root models, then place the parts. This embedded panel puts a context ring and a settings button in its header, a breakdown and a quota banner in the settings panel, and a context bar in its footer:

<AssistedPanel.Embedded models={models}>
  <AssistedPanel.Main>
    <AssistedPanel.Header>
      <AssistedPanel.Title />
      <AssistedPanel.ContextDisplay />
      <AssistedPanel.SettingsToggle />
    </AssistedPanel.Header>
    <AssistedPanel.SettingsPanel>
      <AssistedPanel.ContextBreakdown />
      <AssistedPanel.QuotaBanner
        used={42}
        limit={50}
        unit="messages"
        resetsIn="3h"
        upgradeLabel="Upgrade"
      />
    </AssistedPanel.SettingsPanel>
    <AssistedPanel.Conversation />
    <AssistedPanel.Composer />
    <AssistedPanel.Footer>
      <AssistedPanel.ContextDisplay variant="bar" className="flex-1" />
    </AssistedPanel.Footer>
  </AssistedPanel.Main>
</AssistedPanel.Embedded>

What the model sees

SettingsPanel adds to every message: its temperature as callSettings.temperature, and its system prompt box appended to system. Super Assist applies both to the turn. The model choice comes from the composer’s ModelSelector, as config.modelName, and Super Assist answers on the agent’s own model instead. The display parts send nothing.

Parts

Part	Kind	Renders
`AssistedPanel.SettingsToggle`	Leaf	A settings button that swaps the conversation for the settings panel. Nothing without the root’s `models`.
`AssistedPanel.SettingsPanel`	Container	The model, a system prompt box and a temperature slider, then its children. Shown only while the toggle is on.
`AssistedPanel.ContextDisplay`	Leaf	How much of the model’s context window the thread uses, as a ring, a bar or text.
`AssistedPanel.ContextBreakdown`	Leaf	The window split into segments, Prompt and Reply by default.
`AssistedPanel.QuotaBanner`	Leaf	A banner with the user’s quota, as you pass it.

Where the data comes from

Part	Reads
`SettingsPanel`	The root’s `models` and the model the composer picked. Its own state for the prompt and the temperature.
`ContextDisplay`	The thread’s token usage from the last reply’s `metadata.usage`, and the window from `modelContextWindow` or the picked model’s `contextWindow`.
`ContextBreakdown`	The same usage, or your `segments`, and the window from `limit` or the picked model’s `contextWindow`.
`QuotaBanner`	Its props only.

ContextDisplay and ContextBreakdown read usage from a reply’s metadata.usage. Super Assist’s replies carry none, so ContextDisplay renders nothing and ContextBreakdown shows only the segments you pass.

Props

SettingsToggle

A button’s props and asChild. It sets aria-pressed while the settings show.

SettingsPanel

Prop	Type	Description
`toggles`	`readonly SettingToggle[]`	Switches under the slider: `{ key, label, detail, on }`.
`onToggle`	`(key: string) => void`	Called with a switch’s `key` when the user flips it.
`className`	`string`	Classes for its column.
`children`	`ReactNode`	Rendered below the settings.

ContextDisplay

Prop	Type	Description
`variant`	`"ring" \| "bar" \| "text"`	`"ring"` by default.
`modelContextWindow`	`number`	The window in tokens, over the model’s own.
`usage`	`TokenUsage`	Token usage to show, over the thread’s own.
`segments`	`readonly { label, tokens }[]`	What the window holds by part: System, Tools, Messages. The popover then shows the breakdown, colored in order.
`side`	`"top" \| "bottom" \| "left" \| "right"`	Where its popover opens.
`className`	`string`

ContextBreakdown

Prop	Type	Description
`segments`	`readonly ContextSegment[]`	`{ label, tokens, tint }`, `tint` a class for the segment’s color. Replaces Prompt and Reply.
`limit`	`number`	The window in tokens, over the model’s own.
`className`	`string`

QuotaBanner

Prop	Type	Required	Description
`used`	`number`	Yes	What the user has used.
`limit`	`number`	Yes	Their limit.
`unit`	`string`	Yes	What is counted, such as “messages”.
`resetsIn`	`string`	Yes	When it resets, such as “3h”.
`upgradeLabel`	`string`	Yes	The upgrade button’s label.
`onUpgrade`	`() => void`	No	Called when the user presses it.

It also takes a div’s props.