# Oscar FES Inspector — Panel-Manager Fix

## What
The FES inspector dispatcher (`oscar-fes-inspector/oscar-inspector-dispatcher.js`)
was creating raw `<div>` panels appended to `document.body`. Operator couldn't
drag, resize, dock, or minimize them.

## Why
The original implementation predated `OscarPanelManager` (the dock-based panel
system). The dev panel and CMS module editor use the panel manager; the FES
inspector didn't.

## How (the fix)
Both `openInspector` (widgets) and `openSectionInspector` (sections) now host
their panel body inside the panel manager:

```js
const mgrApi = window.OscarPanelManager;
if (mgrApi) {
  if (!mgrApi.get || !mgrApi.get()) mgrApi.create && mgrApi.create();
  const mgr = mgrApi.get ? mgrApi.get() : null;
  if (mgr && typeof mgr.addPanel === 'function') {
    mgr.addPanel({
      id: 'fes-section-inspector-section.default',  // sections
      // or: 'fes-inspector-' + typeKey,              // widgets
      title: 'Edit: Section · S-1',
      content: panel,
      position: { x: 60, y: 80, w: 380, h: 560 }
    });
    mgr.dock('fes-section-inspector-section.default', 'right');
  } else {
    document.body.appendChild(panel);
  }
} else {
  document.body.appendChild(panel);
}
```

## Bugs fixed during integration
1. **Raw `<div>` not hosted** — dispatcher appended to body. Now uses panel manager.
2. **Wrong dock id** — `mgr.dock()` was called with the WIDGET id while the section
   panel was added with a section-specific id. Fixed: dock call uses the same id
   as addPanel.
3. **Section's id was wrong** — regex over-replaced and made the widget's id
   `'fes-section-inspector-section.default'`. Fixed: widget uses
   `'fes-inspector-' + typeKey`, section uses `'fes-section-inspector-section.default'`.
4. **Section's title was wrong** — same regex bug. Widget title uses
   `mod.moduleType + badgeTag`, section title uses `'Edit: Section · S-' + (sectionIndex + 1)`.
5. **Missing `readSectionSettings`** — Python regex surgery in earlier edit ate
   the function. Reconstructed from the widget equivalent (reads `data-settings` +
   computed styles for layout/background).

## Verified
- S-8 click → `docked-active` on right edge, draggable, resizable
- W-1 click → `docked-active` on right edge (separate panel id)
- Both panels coexist, close button removes from manager

## Cross-project rule
**Every new panel MUST use `OscarPanelManager.addPanel()`.** Never a raw `<div>`.
The panel manager is the only panel system. Reference patterns:
- `app-fragments/oscar-cms-panel/runtime/editor-shell.js`
- `app-fragments/oscar-dev-panel/oscar-dev-panel.js`

## Files
- `app-fragments/oscar-fes-inspector/oscar-inspector-dispatcher.js` (27645 bytes)
- `app-fragments/oscar-fes-inspector/oscar-inspector-dispatcher.css` (2429 bytes)
- `app-fragments/oscar-panel-manager/oscar-panel-manager.js` (37185 bytes, reference)
- `app-fragments/oscar-trace/oscar-trace.js` (caller, badge click handler)
- `app-fragments/oscar-dev-panel/oscar-dev-panel.js` (reference pattern)