# Header

> The Header and Footer rows and the parts that sit in them, Icon, Title, PageLine, Close and Devtools.

The header is the panel's top row: who the assistant is, which page it is on, and the buttons that act on the panel. The footer is an optional row at the bottom.

![The floating panel minimized to its header: the logo, Assistant, On Orders, the threads and search buttons, Restore and Close.](https://superassist.app/_astro/panel-minimized-light.C88th5C3.webp)

## Usage

`Header` with no children renders its default. With children, it renders those. This header names the assistant and keeps only the devtools and Close:

```tsx
<AssistedPanel.Sheet>
  <AssistedPanel.Main>
    <AssistedPanel.Header>
      <AssistedPanel.Icon>
        <ShopLogo />
      </AssistedPanel.Icon>
      <AssistedPanel.Title>Shop assistant</AssistedPanel.Title>
      <AssistedPanel.Devtools>
        <AssistedDevtoolsPanel />
      </AssistedPanel.Devtools>
      <AssistedPanel.Close />
    </AssistedPanel.Header>
    <AssistedPanel.Conversation />
    <AssistedPanel.Composer />
  </AssistedPanel.Main>
</AssistedPanel.Sheet>
```

## What the model sees

Nothing. `PageLine` reads the open page's name, and no part lends anything.

## Parts

| Part                     | Kind      | Renders                                                                                                             |
| ------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
| `AssistedPanel.Header`   | Container | A 40 px row. In a floating panel it is the drag handle, and a double-click maximizes.                               |
| `AssistedPanel.Footer`   | Container | A row with a top border. Nothing without children.                                                                  |
| `AssistedPanel.Icon`     | Container | Its children, else the root's `icon`, else the assistant's logo.                                                    |
| `AssistedPanel.Title`    | Container | Its children, else the root's `title`, else "Assistant".                                                            |
| `AssistedPanel.PageLine` | Container | Its children, else "On" and the open page's name, else the root's `description`. Nothing when all are empty.        |
| `AssistedPanel.Close`    | Leaf      | Closes the panel.                                                                                                   |
| `AssistedPanel.Devtools` | Leaf      | A Bug button that opens its children, else the root's `devtools`, in a window of their own. Nothing without either. |

### Default composition

`Header` with no children renders, in order:

1. `Icon`, or `ThreadDrawerToggle` when `threads="drawer"`.
2. `Title` and `PageLine`, or `ThreadTitle` and `PageLine` when `threads="drawer"`.
3. `ThreadMenu` when `threads` is `true` or `"menu"`.
4. `NewThread` when `threads` is `true`, `"menu"` or `"drawer"`.
5. `ConversationSearchToggle`.
6. `Devtools`.
7. `WindowControls` in a floating panel with `windowControls` on.
8. `Close`, except in an embedded panel.

`Footer` has no default. The embedded root's `Main` has no header, and `threads="side"` places no thread part in the header.

## Props

| Part                                            | Props                                         |
| ----------------------------------------------- | --------------------------------------------- |
| `Header`, `Footer`, `Icon`, `Title`, `PageLine` | `className`, `children`                       |
| `Devtools`                                      | `className`, `children`: the devtools to open |
| `Close`                                         | A button's props and `asChild`                |

With `asChild`, `Close` renders your element in place of its icon button and keeps its behavior. `Devtools` has no `asChild`: its children are the devtools.

The devtools window is 760 by 520 px in the top-left corner, dragged and resized like the panel. The Bug button or the window's Close shuts it.

## See also

- [Threads](https://superassist.app/components/panel/threads.md) for the thread parts the default header places.
- [Mount the devtools](https://superassist.app/how-to/mount-devtools.md).