opt-devtool
A devtools layer that consolidates the development-time diagnostic experience for opt-ui, opt-datagrid, opt-editor, and opt-shell inside a single global overlay — including the built-in opt-ui debugger.
reopt designUpdated
dev-only overlay, opt-ui debugger migration, datagrid/editor/harness bridge, cross-module inspection surface를 담당합니다.
1. Why it's a separate package
opt-devtool is not UI exposed to the product runtime — it's the devtool layer used to read state and verify boundaries while building each opt module in the design project. The debugger that used to live inside opt-ui moved here so a single mounted overlay can host per-module snapshot tabs together.
Built-in opt-ui debugger
Ships with default tabs for focus tracing, tab order, spatial navigation, and composite bounds.
Plugin registry
opt-datagrid, opt-editor, brandapp, opt-shell, and theme bridges register per-page snapshots in the same overlay. editor and brandapp get dedicated top-level tabs.
Development-only runtime
It is not part of the production product UI — its purpose is to help diagnose causes, verify contracts, and inspect workflows during development.
2. Root mount
Wrap the registry with OptDevtoolProvider at the app root, and render OptDevtool once in development mode. Each screen then registers its own tab via a bridge hook.
import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
<OptDevtoolProvider>
{children}
{process.env.NODE_ENV === "development" ? <OptDevtool /> : null}
</OptDevtoolProvider>
</body>
</html>
);
}3. Entrypoints and bridges
Import the root overlay from @reopt-ai/opt-devtool, and import engine bridge hooks from subpath exports. The package exports datagrid, editor, brandapp, harness, theme, and ui as separate entrypoints.
import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";
import { OPT_DEVTOOL_CONFIGURE_EVENT } from "@reopt-ai/opt-devtool/ui";
import { useDataGridDevtoolBridge } from "@reopt-ai/opt-devtool/datagrid";
import { useEditorDevtoolBridge } from "@reopt-ai/opt-devtool/editor";
import { useBrandappDevtoolBridge } from "@reopt-ai/opt-devtool/brandapp";
import { useShellDevtoolBridge } from "@reopt-ai/opt-devtool/harness";
import { useThemeDevtoolBridge } from "@reopt-ai/opt-devtool/theme";4. Overlay surface
| Area | Role |
|---|---|
| opt-ui | Traces the focused element, component chain, tab order, event log, and spatial candidates. |
| DataGrid | Exposes active cell, selection, editing state, visible region, history, and draft errors as snapshots. |
| Editor | Reads spec version, selection IDs and types, root and element count, undo/redo, focus target, external stream, and state store key count. |
| Brandapp | Exposes Brandapp ID, masked client ID, auth/env/EAV/AI state, and route wiring as snapshots. |
| Harness | Shows manifest, density, content width, state boundary, and adapter chrome state per page shell. |
| Theme | Consumes Shell theme events and displays preset/generated tokens, seed palette, and contrast pairs. |