Each of the four primary sections (Log viewer, Params, Metrics, Dashboards) gets a PopOutButton next to its CollapseToggle/HelpIcon that opens `?section=<id>` in a new tab via window.open. App.tsx branches on that query param to render just the one section full-page, with no NavMenu/FilterBar/sibling chrome — Metrics/Dashboards get the range that was active at pop-out time via startMs/endMs query params (they have no LogTimeline of their own to pick one), Params gets a small self-contained params fetch since it has no LogPreview sibling to share state with, and the popped-out Log viewer owns its own copy of the log/timeline polling state. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "oxc"],
"options": {
"typeAware": true
},
"rules": {
"react/rules-of-hooks": "error",
"react/only-export-components": ["warn", { "allowConstantExport": true }]
}
}
See the Oxlint rules documentation for the full list of rules and categories.