feat(web): add messages and calls module slices

apps/web/src/app-shell.tsx

@@ -6,6 +6,7 @@ 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 { CallsModule, type CallsDataSource } from './instances/calls-module.js';
 import { CellularModule, type CellularDataSource } from './instances/cellular-module.js';
 import {
   DeviceNetworkModule,
@@ -13,6 +14,7 @@ import {
 } 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 { MessagesModule, type MessagesDataSource } from './instances/messages-module.js';
 import {
   InstanceDetail,
   INSTANCE_MODULE_LABELS,
@@ -70,6 +72,8 @@ export interface AppShellProps {
   overviewDataSource?: OverviewDataSource;
   cellularDataSource?: CellularDataSource;
   deviceNetworkDataSource?: DeviceNetworkDataSource;
+  messagesDataSource?: MessagesDataSource;
+  callsDataSource?: CallsDataSource;
   eventStreamClient?: EventStreamClient;
 }
 
@@ -140,6 +144,8 @@ function Page({
   overviewDataSource,
   cellularDataSource,
   deviceNetworkDataSource,
+  messagesDataSource,
+  callsDataSource,
   fleetRefreshSignal,
   detailRefreshSignal,
 }: {
@@ -153,6 +159,8 @@ function Page({
   overviewDataSource: OverviewDataSource | undefined;
   cellularDataSource: CellularDataSource | undefined;
   deviceNetworkDataSource: DeviceNetworkDataSource | undefined;
+  messagesDataSource: MessagesDataSource | undefined;
+  callsDataSource: CallsDataSource | undefined;
   fleetRefreshSignal: number;
   detailRefreshSignal: number;
 }): ReactNode {
@@ -229,6 +237,28 @@ function Page({
               ),
             }
           : {})}
+        {...(module === 'messages' && instance
+          ? {
+              moduleContent: (
+                <MessagesModule
+                  instance={instance}
+                  {...(messagesDataSource ? { dataSource: messagesDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
+        {...(module === 'calls' && instance
+          ? {
+              moduleContent: (
+                <CallsModule
+                  instance={instance}
+                  {...(callsDataSource ? { dataSource: callsDataSource } : {})}
+                  refreshSignal={detailRefreshSignal}
+                />
+              ),
+            }
+          : {})}
       />
     );
   }
@@ -262,6 +292,8 @@ export function AppShell({
   overviewDataSource,
   cellularDataSource,
   deviceNetworkDataSource,
+  messagesDataSource,
+  callsDataSource,
   eventStreamClient,
 }: AppShellProps) {
   const defaultEventStreamClient = useMemo(() => createEventStreamClient(), []);
@@ -317,6 +349,8 @@ export function AppShell({
             overviewDataSource={overviewDataSource}
             cellularDataSource={cellularDataSource}
             deviceNetworkDataSource={deviceNetworkDataSource}
+            messagesDataSource={messagesDataSource}
+            callsDataSource={callsDataSource}
             fleetRefreshSignal={refresh.fleet}
             detailRefreshSignal={refresh.detail}
           />