DreamLake

StatusTable

<StatusTable> renders a live test-status board from a test-results.json file served at the site root. DreamLake sites use it for a "current build health" page whose data is regenerated by CI — the docs never claim more than the last run proved.

Usage in MDX

mdx
<StatusTable kind="suites" />
<StatusTable kind="examples" />

Both components are in the MDX component map — no import needed. They fetch /test-results.json on mount (client-side only, cache: no-store so a CI refresh shows immediately) and render an empty state until the file exists.

Data contract

public/test-results.jsonjson
{
  "generated_at": "2026-07-19T12:00:00Z",
  "schema_version": 1,
  "suites": [
    {
      "id": "unit",
      "name": "Unit tests",
      "command": "pnpm test",
      "cwd": ".",
      "status": "pass",
      "duration_s": 12.4,
      "tests": { "total": 240, "pass": 240, "fail": 0, "skip": 0 }
    }
  ],
  "examples": [
    {
      "id": "hello",
      "title": "Hello world",
      "needs_cp": false,
      "source_link": "https://github.com/…",
      "status": "pass"
    }
  ]
}

status is pass | fail | skip (suites also allow pending). Optional fields: exit_code, reason, log_excerpt, doc_link.

TestStatus

The companion inline chip references a single suite or example — drop it next to prose that describes the thing being tested:

mdx
The install path is covered by <TestStatus suite="unit" /> in CI.

Props

ComponentPropTypeDescription
StatusTablekind'suites' | 'examples'Which half of the results file to render (default 'suites').
TestStatussuitestringSuite id to reference.
TestStatusexamplestringExample id to reference (use one of the two).

Edge cases

  • Missing file: a 404 (or invalid JSON) renders a bordered "Could not load test results" note — the page still builds and prerenders fine, since the fetch only happens in the browser.
  • Empty arrays: suites: [] renders a muted "No suites reported yet" hint instead of an empty table.
  • TestStatus with an unknown id renders a muted unknown chip; while the fetch is in flight it shows loading…. A found id renders the status badge plus the file's generated_at age (e.g. 3h ago) — the age is per-run, not per-suite.
  • This docs site does not ship a test-results.json, which is why this page shows the markup as snippets rather than a live embed — a live <StatusTable /> here would render the missing-file state.