feat(web): add cellular and network module slices

apps/web/src/app-shell.tsx

@@ -6,8 +6,13 @@ 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 { InstanceEditor, type InstanceDataSource } from './instances/instance-crud.js';
+import { CellularModule, type CellularDataSource } from './instances/cellular-module.js';
+import {
+  DeviceNetworkModule,
+  type DeviceNetworkDataSource,
+} from './instances/device-network-module.js';
 import { OverviewSystemPage, type OverviewDataSource } from './instances/overview-system.js';
+import { InstanceEditor, type InstanceDataSource } from './instances/instance-crud.js';
 import {
   InstanceDetail,
   INSTANCE_MODULE_LABELS,
@@ -63,6 +68,8 @@ export interface AppShellProps {
   capabilities?: InstanceCapabilityMap;
   capabilityDataSource?: CapabilityDataSource;
   overviewDataSource?: OverviewDataSource;
+  cellularDataSource?: CellularDataSource;
+  deviceNetworkDataSource?: DeviceNetworkDataSource;
   eventStreamClient?: EventStreamClient;
 }
 
@@ -131,6 +138,8 @@ function Page({
   capabilities,
   capabilityDataSource,
   overviewDataSource,
+  cellularDataSource,
+  deviceNetworkDataSource,
   fleetRefreshSignal,
   detailRefreshSignal,
 }: {
@@ -142,6 +151,8 @@ function Page({
   capabilities: InstanceCapabilityMap | undefined;
   capabilityDataSource: CapabilityDataSource | undefined;
   overviewDataSource: OverviewDataSource | undefined;
+  cellularDataSource: CellularDataSource | undefined;
+  deviceNetworkDataSource: DeviceNetworkDataSource | undefined;
   fleetRefreshSignal: number;
   detailRefreshSignal: number;
 }): ReactNode {
@@ -196,6 +207,28 @@ function Page({
               ),
             }
           : {})}
+        {...(module === 'cellular' && instance
+          ? {
+              moduleContent: (
+                <CellularModule
+                  instance={instance}
+                  {...(cellularDataSource ? { dataSource: cellularDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
+        {...(module === 'device-network' && instance
+          ? {
+              moduleContent: (
+                <DeviceNetworkModule
+                  instance={instance}
+                  {...(deviceNetworkDataSource ? { dataSource: deviceNetworkDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
       />
     );
   }
@@ -227,6 +260,8 @@ export function AppShell({
   capabilities,
   capabilityDataSource,
   overviewDataSource,
+  cellularDataSource,
+  deviceNetworkDataSource,
   eventStreamClient,
 }: AppShellProps) {
   const defaultEventStreamClient = useMemo(() => createEventStreamClient(), []);
@@ -280,6 +315,8 @@ export function AppShell({
             capabilities={capabilities}
             capabilityDataSource={capabilityDataSource}
             overviewDataSource={overviewDataSource}
+            cellularDataSource={cellularDataSource}
+            deviceNetworkDataSource={deviceNetworkDataSource}
             fleetRefreshSignal={refresh.fleet}
             detailRefreshSignal={refresh.detail}
           />