mreo ui

AGENTS.md

@@ -223,3 +223,23 @@ plus `AuthServer.spec.deviceFlow`.
   (a non-fatal "spec.issuer: Required value" warning for the partial AuthServer
   apply is expected).
 - Never commit tokens, persist them in a production build, or log them.
+
+### Drill-down screens: `MasterDetail` + `ResizablePanes`
+
+Navigation here drills list -> detail -> extended detail, so use the shared
+pane components instead of laying out columns by hand.
+
+- `components/panes/ResizablePanes.tsx` - generic stack of panes with
+  draggable dividers (arrow keys when focused, double-click resets, widths
+  persisted per `storageKey`). Fixed panes take a `size`; exactly one pane is
+  flexible. Below `lg` panes stack and dividers disappear.
+- `components/MasterDetail.tsx` - list | detail [| extended] on top of it.
+  The caller owns selection; `renderDetail(item, drill)` gets
+  `drill.openExtended(key)` / `closeExtended()` and `renderExtended(item, key)`
+  fills the third pane, which resets when the selection changes.
+  `layout="stacked"` gives a full-width table with the detail below.
+- Building blocks: `trace/TraceListItem` (narrow rows), `trace/TraceOverviewRow`
+  (table rows), `trace/TraceDetail`, `common/*` (Stat, StatHeader, Segmented,
+  DetailField, BackButton). The waterfall takes `selectedSpanId`/`onSelectSpan`
+  to drive an external inspector pane.
+- Local UI against a local server: `OTEL_URL=http://localhost:8080 npm run dev`.