# Data parts

> The parts that show and set what the model runs with, SettingsToggle, SettingsPanel, ContextDisplay, ContextBreakdown and QuotaBanner.

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:

```tsx
<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.

## See also

- [How a turn is answered](https://superassist.app/explanation/how-a-turn-is-answered.md#the-page-adds-what-it-lends), for which settings reach the agent.
- [Composer](https://superassist.app/components/panel/composer.md) for `ModelSelector`.