Inline

A curated set of components an agent composes into a live, cited visual that renders inline in the chat. The agent writes a small TSX module that imports from @rogo-technologies/ui/inline/*; that module runs inside a sandboxed frame and paints on the chat surface. These are the building blocks that keep those components on-brand, accessible, and consistent - instead of the agent hand-rolling structure from raw primitives every time.

In context

Every example on these pages is shown the way the agent chat renders it: the assistant's reply as plain prose, with the component inline beneath it, in the real thread column.

A company snapshot, rendered inlineLoading state

Give me a snapshot of Northwind's FY24 results.

Here's how Northwind closed FY24: revenue, profitability, and the segment split.

Revenue

$4.51B

+12.4%FY24

Gross margin

61.2%

+2.1%+210 bps

EBITDA

$1.34B

+9.7%29.7% margin

Net debt

$2.1B

+5.0%1.6x EBITDA

Revenue trajectory

FY20 – FY24, $B

North America

Largest segment

$2.61B

EMEA

Fastest growing

$1.18B

APAC

$540M

Want me to break any of these segments out further?

Why a dedicated set

Inline components render on the bare chat surface with no chrome around them, so they have to carry their own structure and stay on-brand in both themes. Rather than describe that contract in prose and hope each generation follows it, the rules are baked into components:

Consistency - every KPI tile, breakdown, and chart looks the same across components because they share one implementation.
Refinement in one place - improve StatTile here and every component the agent generates improves, with no app deploy.
Context for agents - each component ships a short usage note (see manifest) that feeds the agent guide, so the model knows when and how to use it.
Safe by construction - the transparent, shadow-free, token-only contract lives in the components, not in a checklist the agent has to remember.

The set

Three kinds of building block, all imported from @rogo-technologies/ui/inline/*:

Inline	Kind	What it's for
`InlineRoot`	Combination of primitives	The transparent, full-width shell every component sits in.
`StatGrid`	Combination of primitives	Responsive grid for KPI tiles.
`StatTile`	Composition	House KPI tile: label, mono figure, delta, sub-line.
`Delta`	Net new	Signed change indicator with a directional triangle.
`MetricRow` / `MetricRowList`	Composition	Separator-divided label/value breakdown list.
`ComparisonTable`	Composition	Compact framed table for comparing entities.
`ChartCard`	Composition	Titled card wrapping the design-system chart container.
`TrendTile`	Net new	KPI tile with a full-bleed sparkline.
`Cite`	Net new	Numbered citation pill wired to the source panel.

Combinations of primitives encode a layout contract (transparent root, responsive grid) so it can't drift.
Compositions wrap existing primitives (Card, Separator, DataTable, the chart container) into an opinionated, on-brand shape.
Net-new components don't exist elsewhere in the library - they're specific to the inline surface.

Anatomy of a component

A component is a single module that default-exports a component built from the set:

tsx

import { InlineRoot } from "@rogo-technologies/ui/inline/root";
import { StatGrid } from "@rogo-technologies/ui/inline/stat-grid";
import { StatTile } from "@rogo-technologies/ui/inline/stat-tile";
import { Delta } from "@rogo-technologies/ui/inline/delta";
import { Cite } from "@rogo-technologies/ui/inline/cite";

export default function Inline() {
  return (
    <InlineRoot>
      <StatGrid columns={4}>
        <StatTile
          label="Revenue"
          value={
            <>
              $4.51B
              <Cite id="capiq-1" />
            </>
          }
          delta={<Delta value={12.4} />}
          sub="FY24"
        />
        {/* … */}
      </StatGrid>
    </InlineRoot>
  );
}

StatGrid + StatTile + Delta + Cite

Revenue

$4.51B

+12.4%vs. FY23

Gross margin

61.2%

+2.1%+210 bps

Op. costs

$1.76B

+8.3%vs. FY23

FCF

$820M

0.0%flat YoY

The manifest

@rogo-technologies/ui/inline/manifest is the single source of truth for the set. Each entry pairs an import specifier with its category, a one-line summary, and an agent-facing usage note:

import { INLINE_MANIFEST, INLINE_IMPORT_SPECIFIERS } from "@rogo-technologies/ui/inline/manifest";

The same manifest feeds three consumers: the component harness builds its runtime module map from it, this documentation renders from it, and the agent guide is generated from the per-component notes. Add a component to the manifest once and every consumer picks it up - the guide and the code can't drift apart.

PreviousThread Outline

NextStat Tile