render_ui & UI guidelines

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.

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

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.

Example

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

Use render_ui for presentation. For plain analysis or questions, just reason over the data tools’ results.

MCP Server

Data API

render_ui & UI guidelines

Compose with brand classes

Charts & tables

Example

Rendering paths

​Compose with brand classes

​Charts & tables

​Example

​Rendering paths

Compose with brand classes

Charts & tables

Example

Rendering paths