@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/resource-tree/data.ts

@@ -0,0 +1,180 @@
+import { Building2, Database, FolderKanban, HardDrive, ListOrdered, Server, type LucideIcon } from '@gntik-ai/icons';
+import type { BreadcrumbItem, TreeNode } from '@gntik-ai/ui';
+
+export type ResourceKind = 'service' | 'database' | 'bucket' | 'queue';
+export type ResourceGroupBy = 'kind' | 'region' | 'team';
+
+export interface TreeResource {
+  id: string;
+  name: string;
+  kind: ResourceKind;
+  team: string;
+  project: string;
+  region: string;
+  status: 'healthy' | 'degraded' | 'stopped';
+  tags: string[];
+  /** ISO date of the last change. */
+  updatedAt: string;
+}
+
+export const kindLabels: Record<ResourceKind, string> = {
+  service: 'Services',
+  database: 'Databases',
+  bucket: 'Buckets',
+  queue: 'Queues',
+};
+export const kindIcons: Record<ResourceKind, LucideIcon> = {
+  service: Server,
+  database: Database,
+  bucket: HardDrive,
+  queue: ListOrdered,
+};
+export const groupByLabels: Record<ResourceGroupBy, string> = { kind: 'Kind', region: 'Region', team: 'Team' };
+
+export const resourceTreeBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Resources' },
+];
+
+export const treeResources: TreeResource[] = [
+  {
+    id: 'r1',
+    name: 'orders-api',
+    kind: 'service',
+    team: 'Commerce',
+    project: 'checkout',
+    region: 'eu-west-1',
+    status: 'healthy',
+    tags: ['production', 'pci', 'tier-1'],
+    updatedAt: '2026-09-30',
+  },
+  {
+    id: 'r2',
+    name: 'orders-db',
+    kind: 'database',
+    team: 'Commerce',
+    project: 'checkout',
+    region: 'eu-west-1',
+    status: 'healthy',
+    tags: ['production', 'pci', 'backups', 'encrypted'],
+    updatedAt: '2026-09-28',
+  },
+  {
+    id: 'r3',
+    name: 'payment-events',
+    kind: 'queue',
+    team: 'Commerce',
+    project: 'checkout',
+    region: 'eu-west-1',
+    status: 'degraded',
+    tags: ['production', 'on-call'],
+    updatedAt: '2026-10-02',
+  },
+  {
+    id: 'r4',
+    name: 'catalog-web',
+    kind: 'service',
+    team: 'Commerce',
+    project: 'catalog',
+    region: 'us-east-1',
+    status: 'healthy',
+    tags: ['production'],
+    updatedAt: '2026-09-21',
+  },
+  {
+    id: 'r5',
+    name: 'catalog-images',
+    kind: 'bucket',
+    team: 'Commerce',
+    project: 'catalog',
+    region: 'us-east-1',
+    status: 'healthy',
+    tags: ['public', 'cdn', 'production'],
+    updatedAt: '2026-09-12',
+  },
+  {
+    id: 'r6',
+    name: 'usage-collector',
+    kind: 'service',
+    team: 'Platform',
+    project: 'metering',
+    region: 'eu-west-1',
+    status: 'healthy',
+    tags: ['internal', 'tier-1'],
+    updatedAt: '2026-09-29',
+  },
+  {
+    id: 'r7',
+    name: 'usage-warehouse',
+    kind: 'database',
+    team: 'Platform',
+    project: 'metering',
+    region: 'eu-west-1',
+    status: 'stopped',
+    tags: ['analytics', 'staging'],
+    updatedAt: '2026-08-30',
+  },
+  {
+    id: 'r8',
+    name: 'audit-archive',
+    kind: 'bucket',
+    team: 'Platform',
+    project: 'compliance',
+    region: 'ap-south-1',
+    status: 'healthy',
+    tags: ['retention-7y', 'encrypted', 'worm', 'legal-hold'],
+    updatedAt: '2026-09-02',
+  },
+  {
+    id: 'r9',
+    name: 'export-jobs',
+    kind: 'queue',
+    team: 'Platform',
+    project: 'compliance',
+    region: 'ap-south-1',
+    status: 'healthy',
+    tags: ['internal'],
+    updatedAt: '2026-09-25',
+  },
+];
+
+/** Team → project tree with resource counts. Node ids: `team:<name>` and `project:<name>`. */
+export function buildResourceTree(rows: readonly TreeResource[]): TreeNode[] {
+  const teams = [...new Set(rows.map((r) => r.team))];
+  return teams.map((team) => {
+    const inTeam = rows.filter((r) => r.team === team);
+    const projects = [...new Set(inTeam.map((r) => r.project))];
+    return {
+      id: `team:${team}`,
+      label: team,
+      icon: Building2,
+      meta: String(inTeam.length),
+      children: projects.map((p) => ({
+        id: `project:${p}`,
+        label: p,
+        icon: FolderKanban,
+        meta: String(inTeam.filter((r) => r.project === p).length),
+      })),
+    };
+  });
+}
+
+/** Rows under a tree node id (`team:…`, `project:…`); `null` = all. */
+export function rowsUnder(rows: readonly TreeResource[], nodeId: string | null): TreeResource[] {
+  if (!nodeId) return [...rows];
+  const [type, name] = nodeId.split(':');
+  return rows.filter((r) => (type === 'team' ? r.team === name : r.project === name));
+}
+
+/** Groups rows by a field, in first-seen order. */
+export function groupRows(
+  rows: readonly TreeResource[],
+  by: ResourceGroupBy,
+): Array<{ key: string; label: string; rows: TreeResource[] }> {
+  const keys = [...new Set(rows.map((r) => r[by]))];
+  return keys.map((key) => ({
+    key,
+    label: by === 'kind' ? kindLabels[key as ResourceKind] : key,
+    rows: rows.filter((r) => r[by] === key),
+  }));
+}

package/src/resource-tree/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Resource tree',
+  family: 'Resources',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Resource index with a team → project TreeList (counts, single selection) beside grouped DataTables (group by kind, region or team; one SectionHeader + table per group), StatusTag status and OverflowList tags.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'section-header', 'data-table'],
+};

package/src/run-trace/Page.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import RunTracePage from './Page';
+
+// Dock the inspector as on a large screen (jsdom matches no media query).
+const originalMatchMedia = window.matchMedia;
+beforeAll(() => {
+  window.matchMedia = (query: string) =>
+    ({ ...originalMatchMedia(query), matches: query.includes('min-width') }) as MediaQueryList;
+});
+afterAll(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
+describe('RunTracePage', () => {
+  it('renders the run header, waterfall, cost, log and the span inspector', { timeout: 15000 }, async () => {
+    render(<RunTracePage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Answer support question' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Spans' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Tokens and cost' })).toBeInTheDocument();
+    const panel = screen.getByRole('complementary', { name: 'Span inspector' });
+    // The first running child span is selected: live timer, input JSON, no output yet.
+    expect(within(panel).getByText('generate answer')).toBeInTheDocument();
+    expect(within(panel).getByRole('timer', { name: 'generate answer elapsed time' })).toBeInTheDocument();
+    expect(within(panel).getByRole('tree', { name: 'generate answer input' })).toBeInTheDocument();
+    expect(within(panel).getByText('Waiting for the span to finish…')).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('selecting a span shows its input and output', { timeout: 15000 }, async () => {
+    const onSelectSpan = vi.fn();
+    render(<RunTracePage onSelectSpan={onSelectSpan} />);
+    await userEvent.click(screen.getByRole('button', { name: /lookup_order \(retry\)/ }));
+    expect(onSelectSpan).toHaveBeenCalledWith(expect.objectContaining({ id: 'lookup-retry' }));
+    const panel = screen.getByRole('complementary', { name: 'Span inspector' });
+    expect(within(panel).getByRole('tree', { name: 'tool: lookup_order (retry) output' })).toHaveTextContent('shipped');
+    expect(within(panel).queryByRole('timer')).toBeNull();
+  });
+
+  it('closes the inspector and shows actions only when handlers are given', { timeout: 15000 }, async () => {
+    const onRerun = vi.fn();
+    render(
+      <RunTracePage
+        onRerun={onRerun}
+        run={{ id: 'run_1', name: 'Nightly eval', status: 'succeeded', model: 'm', environment: 'staging' }}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: 'Cancel run' })).toBeNull();
+    await userEvent.click(screen.getAllByRole('button', { name: 'Re-run' })[0]!);
+    expect(onRerun).toHaveBeenCalledOnce();
+    await userEvent.click(screen.getByRole('button', { name: 'Toggle span inspector' }));
+    expect(screen.queryByRole('complementary', { name: 'Span inspector' })).toBeNull();
+  });
+});

package/src/run-trace/Page.tsx

@@ -0,0 +1,242 @@
+import {
+  LogViewer,
+  PageHeader,
+  TokenCostCard,
+  TraceWaterfall,
+  formatSpanDuration,
+  type LogLine,
+  type TokenUsagePeriod,
+  type TraceSpan,
+} from '@gntik-ai/blocks';
+import { RotateCcw, Square } from '@gntik-ai/icons';
+import {
+  Badge,
+  Grid,
+  HStack,
+  InspectorLayout,
+  InspectorToggle,
+  JsonViewer,
+  Page,
+  Stack,
+  StatusTag,
+  Timer,
+  Timestamp,
+  type BreadcrumbItem,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  traceBreadcrumbs,
+  traceLogs,
+  traceRun,
+  traceSpanDetails,
+  traceSpans,
+  traceUsage,
+  type SpanDetail,
+  type TraceRun,
+} from './data';
+
+export interface RunTraceProps {
+  /** The run: name, status, start time, model, environment. Omit `startedAt` to start "now". */
+  run: Omit<TraceRun, 'startedAt'> & { startedAt?: string };
+  spans: TraceSpan[];
+  /** Inputs, outputs and running state per span id. */
+  spanDetails: Record<string, SpanDetail>;
+  logs: LogLine[];
+  /** Token usage and cost of the run (one period hides the period switch). */
+  usage: TokenUsagePeriod[];
+  currency: string;
+  /** Span selected initially (defaults to the first running span, else the root). */
+  defaultSelectedId: string;
+  onSelectSpan: (span: TraceSpan) => void;
+  /** Header actions; omitted ones are hidden. */
+  onCancel: () => void;
+  onRerun: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+function SpanPanel({
+  span,
+  detail,
+  runStart,
+}: {
+  span: TraceSpan | undefined;
+  detail: SpanDetail | undefined;
+  runStart: number;
+}) {
+  if (!span) return <p className="text-[13px] text-muted-foreground">Select a span to see its inputs and outputs.</p>;
+  const running = detail?.running ?? false;
+  return (
+    <Stack gap={4}>
+      <div>
+        <h3 className="font-mono text-[13px] font-semibold text-foreground">{span.name}</h3>
+        <HStack gap={2} wrap className="mt-1.5">
+          <Badge size="sm" className="font-mono">
+            {span.kind}
+          </Badge>
+          <StatusTag size="sm" status={running ? 'running' : span.status === 'error' ? 'failed' : 'succeeded'} />
+        </HStack>
+      </div>
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[12.5px]">
+        <dt className="text-muted-foreground">Started</dt>
+        <dd className="font-mono">+{formatSpanDuration(span.start)}</dd>
+        <dt className="text-muted-foreground">{running ? 'Elapsed' : 'Duration'}</dt>
+        <dd>
+          {running ? (
+            <Timer start={runStart + span.start} size="sm" aria-label={`${span.name} elapsed time`} />
+          ) : (
+            <span className="font-mono">{formatSpanDuration(span.duration)}</span>
+          )}
+        </dd>
+        {Object.entries(span.attributes ?? {}).map(([key, value]) => (
+          <div key={key} className="contents">
+            <dt className="font-mono text-muted-foreground">{key}</dt>
+            <dd className="min-w-0 truncate font-mono">{value}</dd>
+          </div>
+        ))}
+      </dl>
+      <section aria-label="Input">
+        <h3 className="mb-2 text-[12px] font-semibold tracking-wide text-muted-foreground uppercase">Input</h3>
+        {detail?.input === undefined ? (
+          <p className="text-[12.5px] text-muted-foreground">No input recorded.</p>
+        ) : (
+          <JsonViewer
+            key={`${span.id}-in`}
+            data={detail.input}
+            label={`${span.name} input`}
+            defaultExpandDepth={2}
+            maxHeight={240}
+          />
+        )}
+      </section>
+      <section aria-label="Output">
+        <h3 className="mb-2 text-[12px] font-semibold tracking-wide text-muted-foreground uppercase">Output</h3>
+        {detail?.output === undefined ? (
+          <p className="text-[12.5px] text-muted-foreground">
+            {running ? 'Waiting for the span to finish…' : 'No output recorded.'}
+          </p>
+        ) : (
+          <JsonViewer
+            key={`${span.id}-out`}
+            data={detail.output}
+            label={`${span.name} output`}
+            defaultExpandDepth={2}
+            maxHeight={240}
+          />
+        )}
+      </section>
+    </Stack>
+  );
+}
+
+/**
+ * Run trace: ConsoleShell + InspectorLayout. The main area holds the run header, the
+ * TraceWaterfall, token cost and the run log; the inspector shows the selected span's
+ * attributes, a live Timer while it runs and its input / output in JsonViewers.
+ */
+export default function RunTracePage(props: Partial<RunTraceProps>) {
+  const {
+    run = traceRun,
+    spans = traceSpans,
+    spanDetails = traceSpanDetails,
+    logs = traceLogs,
+    usage = traceUsage,
+    currency = 'USD',
+    defaultSelectedId,
+    onSelectSpan,
+    onCancel,
+    onRerun,
+    breadcrumbs = traceBreadcrumbs,
+    currentHref = '/runs',
+    shell,
+  } = props;
+  const extent = Math.max(0, ...spans.map((s) => s.start + s.duration));
+  // Without a start time the demo run "started" `extent` ms before mount, so timers read sensibly.
+  const [fallbackStart] = useState(() => Date.now() - extent);
+  const runStart = run.startedAt ? new Date(run.startedAt).getTime() : fallbackStart;
+  const firstRunning = spans.find((s) => spanDetails[s.id]?.running && s.parentId);
+  const [selectedId, setSelectedId] = useState(
+    defaultSelectedId ?? firstRunning?.id ?? spans.find((s) => !s.parentId)?.id,
+  );
+  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const selected = spans.find((s) => s.id === selectedId);
+  const isRunning = run.status === 'running';
+
+  const actions = [
+    ...(onCancel && isRunning
+      ? [{ label: 'Cancel run', icon: Square, variant: 'secondary' as const, onClick: onCancel }]
+      : []),
+    ...(onRerun ? [{ label: 'Re-run', icon: RotateCcw, variant: 'primary' as const, onClick: onRerun }] : []),
+  ];
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <InspectorLayout
+        panelTitle="Span inspector"
+        panelWidth={360}
+        open={inspectorOpen}
+        onOpenChange={setInspectorOpen}
+        panel={
+          <SpanPanel span={selected} detail={selectedId ? spanDetails[selectedId] : undefined} runStart={runStart} />
+        }
+      >
+        <Page
+          width="wide"
+          header={
+            <PageHeader
+              breadcrumbs={null}
+              title={run.name}
+              status={run.status}
+              meta={[
+                { label: 'Run', value: run.id, mono: true },
+                { label: 'Started', value: <Timestamp value={new Date(runStart)} /> },
+                {
+                  label: isRunning ? 'Elapsed' : 'Duration',
+                  value: isRunning ? (
+                    <Timer start={runStart} format="compact" showStatus={false} aria-label="Run elapsed time" />
+                  ) : (
+                    formatSpanDuration(extent)
+                  ),
+                },
+                { label: 'Model', value: run.model, mono: true },
+                { label: 'Environment', value: run.environment },
+              ]}
+              tabs={null}
+              actions={actions}
+            />
+          }
+        >
+          <TraceWaterfall
+            titleAs="h2"
+            title="Spans"
+            spans={spans}
+            defaultSelectedId={selectedId}
+            onSelect={(span) => {
+              setSelectedId(span.id);
+              setInspectorOpen(true);
+              onSelectSpan?.(span);
+            }}
+          />
+          <HStack justify="end">
+            <InspectorToggle label="Toggle span inspector" />
+          </HStack>
+          <Grid cols={{ base: 1, lg: 3 }} gap={4}>
+            <TokenCostCard
+              titleAs="h2"
+              title="Tokens and cost"
+              description={`${run.model} · this run`}
+              periods={usage}
+              currency={currency}
+            />
+            <div className="min-w-0 lg:col-span-2">
+              <LogViewer titleAs="h2" title="Run log" lines={logs} height={260} defaultFollow />
+            </div>
+          </Grid>
+        </Page>
+      </InspectorLayout>
+    </ConsoleShell>
+  );
+}

package/src/run-trace/data.ts

@@ -0,0 +1,171 @@
+import type { LogLine, TokenUsagePeriod, TraceSpan } from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** Inputs, outputs and live state of one span, shown in the inspector. */
+export interface SpanDetail {
+  /** JSON-serialisable input of the span (request, prompt, tool arguments…). */
+  input?: unknown;
+  /** JSON-serialisable output; omit while the span is still running. */
+  output?: unknown;
+  /** The span has not finished yet: the inspector shows a live Timer. */
+  running?: boolean;
+}
+
+/** Summary of the run the trace belongs to. */
+export interface TraceRun {
+  id: string;
+  name: string;
+  /** StatusTag key: running, succeeded, failed… */
+  status: string;
+  /** When the run started (ISO). Running spans time themselves from `startedAt + span.start`. */
+  startedAt: string;
+  model: string;
+  environment: string;
+}
+
+export const traceRun: TraceRun = {
+  id: 'run_8c41f2',
+  name: 'Answer support question',
+  status: 'running',
+  startedAt: '2026-05-04T09:12:03.000Z',
+  model: 'general-large',
+  environment: 'production',
+};
+
+export const traceBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Runs', href: '/runs' },
+  { label: traceRun.id, mono: true },
+];
+
+export const traceSpans: TraceSpan[] = [
+  {
+    id: 'root',
+    name: 'POST /v1/answer',
+    kind: 'http',
+    start: 0,
+    duration: 4200,
+    status: 'ok',
+    attributes: { 'http.method': 'POST', 'request.id': 'req_7f3a' },
+  },
+  {
+    id: 'retrieve',
+    parentId: 'root',
+    name: 'retrieve context',
+    kind: 'retrieval',
+    start: 40,
+    duration: 380,
+    status: 'ok',
+    attributes: { documents: 6 },
+  },
+  {
+    id: 'embed',
+    parentId: 'retrieve',
+    name: 'embed query',
+    kind: 'llm',
+    start: 45,
+    duration: 115,
+    status: 'ok',
+    attributes: { model: 'embed-small', 'tokens.input': 24 },
+  },
+  {
+    id: 'search',
+    parentId: 'retrieve',
+    name: 'vector search',
+    kind: 'retrieval',
+    start: 170,
+    duration: 240,
+    status: 'ok',
+    attributes: { index: 'docs-v3', topK: 6 },
+  },
+  {
+    id: 'lookup',
+    parentId: 'root',
+    name: 'tool: lookup_order',
+    kind: 'tool',
+    start: 440,
+    duration: 150,
+    status: 'error',
+    attributes: { error: 'timeout after 150ms' },
+  },
+  {
+    id: 'lookup-retry',
+    parentId: 'root',
+    name: 'tool: lookup_order (retry)',
+    kind: 'tool',
+    start: 600,
+    duration: 240,
+    status: 'ok',
+    attributes: { attempt: 2 },
+  },
+  {
+    id: 'generate',
+    parentId: 'root',
+    name: 'generate answer',
+    kind: 'llm',
+    start: 860,
+    duration: 3340,
+    status: 'ok',
+    attributes: { model: 'general-large', temperature: 0.2 },
+  },
+];
+
+export const traceSpanDetails: Record<string, SpanDetail> = {
+  root: {
+    input: {
+      method: 'POST',
+      path: '/v1/answer',
+      body: { question: 'Where is my order 10482?', customerId: 'cus_2291' },
+    },
+    running: true,
+  },
+  retrieve: {
+    input: { query: 'Where is my order 10482?', topK: 6 },
+    output: { documents: ['shipping-policy.md', 'order-status.md', 'returns.md'], scores: [0.91, 0.88, 0.62] },
+  },
+  embed: { input: { model: 'embed-small', text: 'Where is my order 10482?' }, output: { dimensions: 768, tokens: 24 } },
+  search: { input: { index: 'docs-v3', topK: 6 }, output: { hits: 6, tookMs: 236 } },
+  lookup: {
+    input: { tool: 'lookup_order', arguments: { orderId: '10482' } },
+    output: { error: { code: 'timeout', message: 'timeout after 150ms' } },
+  },
+  'lookup-retry': {
+    input: { tool: 'lookup_order', arguments: { orderId: '10482' }, attempt: 2 },
+    output: { orderId: '10482', status: 'shipped', carrier: 'Parcel Co', eta: '2026-05-06' },
+  },
+  generate: {
+    input: {
+      model: 'general-large',
+      temperature: 0.2,
+      messages: [
+        { role: 'system', content: 'Answer using the retrieved documents and tool results.' },
+        { role: 'user', content: 'Where is my order 10482?' },
+      ],
+    },
+    running: true,
+  },
+};
+
+export const traceUsage: TokenUsagePeriod[] = [
+  { id: 'run', label: 'This run', inputTokens: 4_180, outputTokens: 312, cost: 0.021, budget: 0.05 },
+];
+
+const LOGS: Array<[LogLine['level'], string, string]> = [
+  ['info', 'gateway', 'POST /v1/answer accepted (req_7f3a)'],
+  ['debug', 'retriever', 'embedding query with embed-small (24 tokens)'],
+  ['info', 'retriever', 'vector search on docs-v3 returned 6 hits in 236ms'],
+  ['debug', 'agent', 'calling tool lookup_order {"orderId":"10482"}'],
+  ['error', 'tools', 'lookup_order timed out after 150ms'],
+  ['warn', 'agent', 'retrying lookup_order (attempt 2 of 3)'],
+  ['info', 'tools', 'lookup_order returned status=shipped'],
+  ['info', 'agent', 'generating answer with general-large (temperature 0.2)'],
+  ['debug', 'agent', 'streaming tokens…'],
+];
+
+/** Run log, oldest first. */
+export const traceLogs: LogLine[] = LOGS.map(([level, source, message], i) => ({
+  id: `log-${i}`,
+  timestamp: `09:12:0${3 + Math.floor(i / 3)}.${String(100 + i * 87).padStart(3, '0')}`,
+  level,
+  source,
+  message,
+}));

package/src/run-trace/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Run trace',
+  family: 'AI',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Trace of one AI run inside the console: run header with a live elapsed Timer, TraceWaterfall of spans, token cost and the run log; a pinnable inspector shows the selected span with a live Timer while it runs and its input / output in JsonViewers.',
+  layout: 'InspectorLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'trace-waterfall', 'token-cost-card', 'log-viewer'],
+};