> ## Documentation Index
> Fetch the complete documentation index at: https://docs.enfors.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# render_ui & UI guidelines

> Display Enfors data as a branded, interactive view.

`render_ui` displays Enfors data as a **branded, interactive view**. Whenever a client
shows agents, sessions, decisions, metrics, or anything computed during analysis, it
should call `render_ui` rather than putting HTML in the text reply.

```text theme={null}
render_ui(html: str, title: str = "") -> dict
```

* `html` — HTML for the document **body**. The shell wraps it with the Enfors brand
  (background, fonts, colors).
* `title` — optional short title for the preview tab.

Returns a dict with `html`, `title`, and `preview_html` (a fully self-contained branded
document).

## Compose with brand classes

The shell provides the brand — compose with these classes instead of hand-picking colors:

| Class                                             | Purpose                         |
| ------------------------------------------------- | ------------------------------- |
| `card`                                            | bordered, rounded container     |
| `grid`                                            | responsive auto-fit columns     |
| `badge`, `badge-clay`, `badge-moss`, `badge-blue` | pill labels                     |
| `stat`                                            | big display-font number         |
| `stat-label`                                      | small uppercased caption        |
| `bar` + `fill`                                    | progress bar                    |
| `muted`                                           | dimmed text                     |
| `table`                                           | plain `<table>` is auto-branded |
| `h1` / `h2`                                       | display-font headers            |
| `code`                                            | mono inline code                |

Raw brand tokens if needed: clay `#b96a3a` (primary), moss `#5b6b3f` (success),
ink-blue `#2a3a52`, ink `#1a1815`, paper `#faf6ec`, line `#d8d1bd`, mute `#6f6a5e`,
background `#f1ece0`. Fonts: Fraunces (headings), Inter Tight (body), JetBrains Mono (IDs).

## Charts & tables

<Warning>
  External scripts are blocked by CSP — no chart libraries or CDN JS. Use inline `<svg>`
  or the `.bar` / `.fill` progress bars for charts. Use plain `<table>` for tables.
</Warning>

## Example

```html theme={null}
<h1>Agents</h1>
<div class="grid">
  <div class="card">
    <div class="stat">245</div>
    <div class="stat-label">decisions · Misha</div>
  </div>
  <div class="card">
    <div class="stat">$12.40</div>
    <div class="stat-label">total cost</div>
    <div class="bar"><div class="fill" style="width:72%"></div></div>
  </div>
</div>

<h2>Recent sessions</h2>
<table>
  <tr><th>Session</th><th>Decisions</th><th>Verdict</th></tr>
  <tr><td><code>sess_8f2a</code></td><td>14</td><td><span class="badge badge-moss">complete</span></td></tr>
  <tr><td><code>sess_1b9c</code></td><td>6</td><td><span class="badge badge-clay">partial</span></td></tr>
</table>
```

## Rendering paths

* **MCP-app hosts (claude.ai web):** the host renders a sandboxed iframe automatically.
* **Claude Code Desktop:** write the result's `preview_html` to `.claude/ui/index.html`,
  then open it in the preview panel — do this on every render so the panel stays current.
* **Other hosts:** also give a one-line plain-text summary of the key numbers as a
  fallback.

<Tip>
  Use `render_ui` for *presentation*. For plain analysis or questions, just reason over the
  data tools' results.
</Tip>