refactor: strip AppShell+Sidebar wrappers from all page components

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

src/pages/Dashboard/Dashboard.tsx

@@ -4,8 +4,6 @@ import { TrendingUp, TrendingDown, ArrowRight, ExternalLink, AlertTriangle } fro
 import styles from './Dashboard.module.css'
 
 // Layout
-import { AppShell } from '../../design-system/layout/AppShell/AppShell'
-import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
 import { TopBar } from '../../design-system/layout/TopBar/TopBar'
 
 // Composites
@@ -287,106 +285,7 @@ export function Dashboard() {
   const totalErrors = processorErrors.length + (hasExchangeError && processorErrors.length === 0 ? 1 : 0)
 
   return (
-    <AppShell
-      sidebar={
-        <Sidebar apps={SIDEBAR_APPS} />
-      }
-      detail={
-        selectedExchange ? (
-          <DetailPanel
-            open={panelOpen}
-            onClose={() => setPanelOpen(false)}
-            title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
-          >
-            {/* Link to full detail page */}
-            <div className={styles.panelSection}>
-              <button
-                className={styles.openDetailLink}
-                onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
-              >
-                Open full details <ArrowRight size={14} style={{ verticalAlign: 'middle' }} />
-              </button>
-            </div>
-
-            {/* Overview */}
-            <div className={styles.panelSection}>
-              <div className={styles.panelSectionTitle}>Overview</div>
-              <div className={styles.overviewGrid}>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Status</span>
-                  <span className={styles.statusCell}>
-                    <StatusDot variant={statusToVariant(selectedExchange.status)} />
-                    <span>{statusLabel(selectedExchange.status)}</span>
-                  </span>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Duration</span>
-                  <MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Route</span>
-                  <span>{selectedExchange.route}</span>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Customer</span>
-                  <MonoText size="sm">{selectedExchange.customer}</MonoText>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Agent</span>
-                  <MonoText size="sm">{selectedExchange.agent}</MonoText>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Correlation</span>
-                  <MonoText size="xs">{selectedExchange.correlationId}</MonoText>
-                </div>
-                <div className={styles.overviewRow}>
-                  <span className={styles.overviewLabel}>Timestamp</span>
-                  <MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
-                </div>
-              </div>
-            </div>
-
-            {/* Errors */}
-            {totalErrors > 0 && (
-              <div className={styles.panelSection}>
-                <div className={styles.panelSectionTitle}>
-                  Errors
-                  {totalErrors > 1 && (
-                    <Badge label={`+${totalErrors - 1} more`} color="error" variant="outlined" />
-                  )}
-                </div>
-                <div className={styles.errorBlock}>
-                  <div className={styles.errorClass}>
-                    {selectedExchange.errorClass ?? processorErrors[0]?.name}
-                  </div>
-                  <div className={styles.errorMessage}>
-                    {selectedExchange.errorMessage ?? `Failed at processor: ${processorErrors[0]?.name}`}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Route Flow */}
-            <div className={styles.panelSection}>
-              <div className={styles.panelSectionTitle}>Route Flow</div>
-              <RouteFlow nodes={routeNodes} />
-            </div>
-
-            {/* Processor Timeline */}
-            <div className={styles.panelSection}>
-              <div className={styles.panelSectionTitle}>
-                Processor Timeline
-                <span className={styles.panelSectionMeta}>{formatDuration(selectedExchange.durationMs)}</span>
-              </div>
-              <ProcessorTimeline
-                processors={selectedExchange.processors}
-                totalMs={selectedExchange.durationMs}
-              />
-            </div>
-          </DetailPanel>
-        ) : undefined
-      }
-    >
+    <>
       {/* Top bar */}
       <TopBar
         breadcrumb={
@@ -444,6 +343,101 @@ export function Dashboard() {
 
       {/* Shortcuts bar */}
       <ShortcutsBar shortcuts={SHORTCUTS} />
-    </AppShell>
+
+      {/* Detail panel (portals itself) */}
+      {selectedExchange && (
+        <DetailPanel
+          open={panelOpen}
+          onClose={() => setPanelOpen(false)}
+          title={`${selectedExchange.orderId} — ${selectedExchange.route}`}
+        >
+          {/* Link to full detail page */}
+          <div className={styles.panelSection}>
+            <button
+              className={styles.openDetailLink}
+              onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
+            >
+              Open full details <ArrowRight size={14} style={{ verticalAlign: 'middle' }} />
+            </button>
+          </div>
+
+          {/* Overview */}
+          <div className={styles.panelSection}>
+            <div className={styles.panelSectionTitle}>Overview</div>
+            <div className={styles.overviewGrid}>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Status</span>
+                <span className={styles.statusCell}>
+                  <StatusDot variant={statusToVariant(selectedExchange.status)} />
+                  <span>{statusLabel(selectedExchange.status)}</span>
+                </span>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Duration</span>
+                <MonoText size="sm">{formatDuration(selectedExchange.durationMs)}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Route</span>
+                <span>{selectedExchange.route}</span>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Customer</span>
+                <MonoText size="sm">{selectedExchange.customer}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Agent</span>
+                <MonoText size="sm">{selectedExchange.agent}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Correlation</span>
+                <MonoText size="xs">{selectedExchange.correlationId}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Timestamp</span>
+                <MonoText size="xs">{selectedExchange.timestamp.toISOString()}</MonoText>
+              </div>
+            </div>
+          </div>
+
+          {/* Errors */}
+          {totalErrors > 0 && (
+            <div className={styles.panelSection}>
+              <div className={styles.panelSectionTitle}>
+                Errors
+                {totalErrors > 1 && (
+                  <Badge label={`+${totalErrors - 1} more`} color="error" variant="outlined" />
+                )}
+              </div>
+              <div className={styles.errorBlock}>
+                <div className={styles.errorClass}>
+                  {selectedExchange.errorClass ?? processorErrors[0]?.name}
+                </div>
+                <div className={styles.errorMessage}>
+                  {selectedExchange.errorMessage ?? `Failed at processor: ${processorErrors[0]?.name}`}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Route Flow */}
+          <div className={styles.panelSection}>
+            <div className={styles.panelSectionTitle}>Route Flow</div>
+            <RouteFlow nodes={routeNodes} />
+          </div>
+
+          {/* Processor Timeline */}
+          <div className={styles.panelSection}>
+            <div className={styles.panelSectionTitle}>
+              Processor Timeline
+              <span className={styles.panelSectionMeta}>{formatDuration(selectedExchange.durationMs)}</span>
+            </div>
+            <ProcessorTimeline
+              processors={selectedExchange.processors}
+              totalMs={selectedExchange.durationMs}
+            />
+          </div>
+        </DetailPanel>
+      )}
+    </>
   )
 }