feat(web): complete capability-driven instance modules

apps/web/src/app-shell.tsx

@@ -6,15 +6,22 @@ import { createEventStreamClient, type EventStreamClient } from './events/event-
 
 import { FleetPage, type FleetDataSource, type FleetSnapshot } from './fleet/fleet-page.js';
 import { createFleetApiDataSource } from './fleet/fleet-api-data-source.js';
+import { AutomationModule, type AutomationDataSource } from './instances/automation-module.js';
 import { CallsModule, type CallsDataSource } from './instances/calls-module.js';
 import { CellularModule, type CellularDataSource } from './instances/cellular-module.js';
 import {
   DeviceNetworkModule,
   type DeviceNetworkDataSource,
 } from './instances/device-network-module.js';
+import { EsimModule, type EsimDataSource } from './instances/esim-module.js';
 import { OverviewSystemPage, type OverviewDataSource } from './instances/overview-system.js';
 import { InstanceEditor, type InstanceDataSource } from './instances/instance-crud.js';
 import { MessagesModule, type MessagesDataSource } from './instances/messages-module.js';
+import {
+  NotificationsModule,
+  type NotificationsDataSource,
+} from './instances/notifications-module.js';
+import { OtaModule, type OtaDataSource } from './instances/ota-module.js';
 import {
   InstanceDetail,
   INSTANCE_MODULE_LABELS,
@@ -74,6 +81,10 @@ export interface AppShellProps {
   deviceNetworkDataSource?: DeviceNetworkDataSource;
   messagesDataSource?: MessagesDataSource;
   callsDataSource?: CallsDataSource;
+  esimDataSource?: EsimDataSource;
+  notificationsDataSource?: NotificationsDataSource;
+  automationDataSource?: AutomationDataSource;
+  otaDataSource?: OtaDataSource;
   eventStreamClient?: EventStreamClient;
 }
 
@@ -146,6 +157,10 @@ function Page({
   deviceNetworkDataSource,
   messagesDataSource,
   callsDataSource,
+  esimDataSource,
+  notificationsDataSource,
+  automationDataSource,
+  otaDataSource,
   fleetRefreshSignal,
   detailRefreshSignal,
 }: {
@@ -161,6 +176,10 @@ function Page({
   deviceNetworkDataSource: DeviceNetworkDataSource | undefined;
   messagesDataSource: MessagesDataSource | undefined;
   callsDataSource: CallsDataSource | undefined;
+  esimDataSource: EsimDataSource | undefined;
+  notificationsDataSource: NotificationsDataSource | undefined;
+  automationDataSource: AutomationDataSource | undefined;
+  otaDataSource: OtaDataSource | undefined;
   fleetRefreshSignal: number;
   detailRefreshSignal: number;
 }): ReactNode {
@@ -259,6 +278,50 @@ function Page({
               ),
             }
           : {})}
+        {...(module === 'esim' && instance
+          ? {
+              moduleContent: (
+                <EsimModule
+                  instance={instance}
+                  {...(esimDataSource ? { dataSource: esimDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
+        {...(module === 'notifications' && instance
+          ? {
+              moduleContent: (
+                <NotificationsModule
+                  instance={instance}
+                  {...(notificationsDataSource ? { dataSource: notificationsDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
+        {...(module === 'automation' && instance
+          ? {
+              moduleContent: (
+                <AutomationModule
+                  instance={instance}
+                  {...(automationDataSource ? { dataSource: automationDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
+        {...(module === 'ota' && instance
+          ? {
+              moduleContent: (
+                <OtaModule
+                  instance={instance}
+                  {...(otaDataSource ? { dataSource: otaDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
       />
     );
   }
@@ -294,6 +357,10 @@ export function AppShell({
   deviceNetworkDataSource,
   messagesDataSource,
   callsDataSource,
+  esimDataSource,
+  notificationsDataSource,
+  automationDataSource,
+  otaDataSource,
   eventStreamClient,
 }: AppShellProps) {
   const defaultEventStreamClient = useMemo(() => createEventStreamClient(), []);
@@ -351,6 +418,10 @@ export function AppShell({
             deviceNetworkDataSource={deviceNetworkDataSource}
             messagesDataSource={messagesDataSource}
             callsDataSource={callsDataSource}
+            esimDataSource={esimDataSource}
+            notificationsDataSource={notificationsDataSource}
+            automationDataSource={automationDataSource}
+            otaDataSource={otaDataSource}
             fleetRefreshSignal={refresh.fleet}
             detailRefreshSignal={refresh.detail}
           />