feat(dashboard): channel details page — closes #496

dashboard/src/App.tsx

@@ -22,6 +22,7 @@ import { ExportHistoryPage } from './pages/ExportHistoryPage';
 import { NotificationSearchPage } from './pages/NotificationSearchPage';
 import { NotificationPreferencesPage } from './pages/NotificationPreferencesPage';
 import { TemplatesPage } from './pages/TemplatesPage';
+import { ChannelDetailsPage } from './pages/ChannelDetailsPage';
 import { ThemeToggle } from './components/ThemeToggle';
 import { MobileNavDrawer, NAV_ITEMS, type Tab } from './components/MobileNavDrawer';
 import { ToastProvider } from './context/ToastContext';
@@ -42,7 +43,8 @@ type Tab =
   | 'export-history'
   | 'search'
   | 'preferences'
-  | 'templates';
+  | 'templates'
+  | 'channels';
 
 const TAB_ITEMS: { id: Tab; label: string }[] = [
   { id: 'explorer', label: 'Event Explorer' },
@@ -231,6 +233,15 @@ export function App() {
         >
           Templates
         </button>
+        <button
+          role="tab"
+          type="button"
+          aria-selected={tab === 'channels'}
+          className={`app-tabs__btn${tab === 'channels' ? ' app-tabs__btn--active' : ''}`}
+          onClick={() => setTab('channels')}
+        >
+          Channel Details
+        </button>
       </nav>
 
       {tab === 'explorer' && (
@@ -382,6 +393,17 @@ function renderPanel(tab: Tab, events: any[]) {
           <EventExplorerPage />
           <DeliveryHeatmap events={events} />
         </>
+      )}
+      {tab === 'timeline' && <NotificationTimelineView />}
+      {tab === 'activity' && <ActivityFeed />}
+      {tab === 'webhooks' && <WebhookDashboardPage />}
+      {tab === 'export-history' && <ExportHistoryPage />}
+      {tab === 'search' && <NotificationSearchPage />}
+      {tab === 'preferences' && <NotificationPreferencesPage />}
+      {tab === 'templates' && <TemplatesPage />}
+      {tab === 'channels' && <ChannelDetailsPage />}
+    </div>
+  );
       );
     case 'timeline':
       return <NotificationTimelineView />;