fix: use self-portaling DetailPanel from design system v0.1.5

DetailPanel now portals itself to #cameleer-detail-panel-root (a div
AppShell places as a sibling of .main in the top-level flex row).
Pages just render <DetailPanel> inline — no manual createPortal,
no context, no prop drilling.

Remove the old #detail-panel-portal div from LayoutShell and the
createPortal wrappers from Dashboard and AgentHealth.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/LayoutShell.tsx

@@ -137,8 +137,6 @@ function LayoutContent() {
       <main style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
         <Outlet />
       </main>
-      {/* Portal target for DetailPanel — pages use createPortal to render here */}
-      <div id="detail-panel-portal" />
     </AppShell>
   );
 }

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -1,5 +1,4 @@
 import { useState, useMemo } from 'react';
-import { createPortal } from 'react-dom';
 import { useParams, Link } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText, ProgressBar,
@@ -504,18 +503,15 @@ export default function AgentHealth() {
         </div>
       )}
 
-      {/* Detail panel — portaled to AppShell level for proper slide-in */}
-      {selectedInstance && document.getElementById('detail-panel-portal') &&
-        createPortal(
-          <DetailPanel
-            open={panelOpen}
-            onClose={() => { setPanelOpen(false); setSelectedInstance(null); }}
-            title={selectedInstance.name ?? selectedInstance.id}
-            tabs={detailTabs}
-          />,
-          document.getElementById('detail-panel-portal')!,
-        )
-      }
+      {/* Detail panel — auto-portals to AppShell level via design system */}
+      {selectedInstance && (
+        <DetailPanel
+          open={panelOpen}
+          onClose={() => { setPanelOpen(false); setSelectedInstance(null); }}
+          title={selectedInstance.name ?? selectedInstance.id}
+          tabs={detailTabs}
+        />
+      )}
     </div>
   );
 }

ui/src/pages/Dashboard/Dashboard.tsx

@@ -1,5 +1,4 @@
 import { useState, useMemo, useCallback } from 'react'
-import { createPortal } from 'react-dom'
 import { useParams, useNavigate } from 'react-router'
 import {
   DataTable,
@@ -415,14 +414,13 @@ export default function Dashboard() {
       {/* Shortcuts bar */}
       <ShortcutsBar shortcuts={SHORTCUTS} />
 
-      {/* Detail panel — portaled to AppShell level for proper slide-in */}
-      {selectedRow && detail && document.getElementById('detail-panel-portal') &&
-        createPortal(
-          <DetailPanel
-            open={panelOpen}
-            onClose={() => setPanelOpen(false)}
-            title={`${detail.routeId} \u2014 ${selectedRow.executionId.slice(0, 12)}`}
-          >
+      {/* Detail panel — auto-portals to AppShell level via design system */}
+      {selectedRow && detail && (
+        <DetailPanel
+          open={panelOpen}
+          onClose={() => setPanelOpen(false)}
+          title={`${detail.routeId} \u2014 ${selectedRow.executionId.slice(0, 12)}`}
+        >
             <div className={styles.panelSection}>
               <button
                 className={styles.openDetailLink}
@@ -498,10 +496,8 @@ export default function Dashboard() {
                 <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>No processor data</div>
               )}
             </div>
-          </DetailPanel>,
-          document.getElementById('detail-panel-portal')!,
-        )
-      }
+          </DetailPanel>
+      )}
     </>
   )
 }