feat(web): add jobs audit and settings workspaces

apps/web/src/app-shell.tsx

@@ -1,3 +1,4 @@
+import { AuditPage, type AuditDataSource } from './audit/audit-page.js';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
@@ -16,12 +17,14 @@ import {
 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 { JobsPage, type JobsDataSource } from './jobs/jobs-page.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 { InstanceSettingsPage } from './settings/instance-settings-page.js';
 import {
   InstanceDetail,
   INSTANCE_MODULE_LABELS,
@@ -85,6 +88,8 @@ export interface AppShellProps {
   notificationsDataSource?: NotificationsDataSource;
   automationDataSource?: AutomationDataSource;
   otaDataSource?: OtaDataSource;
+  jobsDataSource?: JobsDataSource;
+  auditDataSource?: AuditDataSource;
   eventStreamClient?: EventStreamClient;
 }
 
@@ -161,6 +166,8 @@ function Page({
   notificationsDataSource,
   automationDataSource,
   otaDataSource,
+  jobsDataSource,
+  auditDataSource,
   fleetRefreshSignal,
   detailRefreshSignal,
 }: {
@@ -180,6 +187,8 @@ function Page({
   notificationsDataSource: NotificationsDataSource | undefined;
   automationDataSource: AutomationDataSource | undefined;
   otaDataSource: OtaDataSource | undefined;
+  jobsDataSource: JobsDataSource | undefined;
+  auditDataSource: AuditDataSource | undefined;
   fleetRefreshSignal: number;
   detailRefreshSignal: number;
 }): ReactNode {
@@ -206,6 +215,38 @@ function Page({
         {...(instanceDataSource ? { dataSource: instanceDataSource } : {})}
       />
     );
+  if (route.kind === 'jobs')
+    return (
+      <JobsPage
+        {...(jobsDataSource ? { dataSource: jobsDataSource } : {})}
+        refreshSignal={fleetRefreshSignal}
+      />
+    );
+  if (route.kind === 'audit')
+    return (
+      <AuditPage
+        {...(auditDataSource ? { dataSource: auditDataSource } : {})}
+        refreshSignal={fleetRefreshSignal}
+      />
+    );
+  if (route.kind === 'settings-instances')
+    return (
+      <InstanceSettingsPage
+        {...(fleetDataSource ? { dataSource: fleetDataSource } : {})}
+        {...(fleetData ? { initialData: fleetData } : {})}
+        refreshSignal={fleetRefreshSignal}
+      />
+    );
+  if (route.kind === 'settings-system')
+    return (
+      <section aria-labelledby="system-settings-title">
+        <h1 id="system-settings-title">System settings</h1>
+        <p role="status">
+          System settings are unavailable because the control plane does not expose a settings
+          contract.
+        </p>
+      </section>
+    );
   if (route.kind === 'not-found')
     return (
       <section>
@@ -361,6 +402,8 @@ export function AppShell({
   notificationsDataSource,
   automationDataSource,
   otaDataSource,
+  jobsDataSource,
+  auditDataSource,
   eventStreamClient,
 }: AppShellProps) {
   const defaultEventStreamClient = useMemo(() => createEventStreamClient(), []);
@@ -422,6 +465,8 @@ export function AppShell({
             notificationsDataSource={notificationsDataSource}
             automationDataSource={automationDataSource}
             otaDataSource={otaDataSource}
+            jobsDataSource={jobsDataSource}
+            auditDataSource={auditDataSource}
             fleetRefreshSignal={refresh.fleet}
             detailRefreshSignal={refresh.detail}
           />