feat(web): add overview system module foundation

apps/web/src/instances/instance-detail.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import type { InstanceContext, InstanceModule } from '../app-shell.js';
@@ -22,6 +23,7 @@ export interface InstanceDetailProps {
   readonly instance?: InstanceContext;
   readonly capabilities?: InstanceCapabilityMap;
   readonly capabilityDataSource?: CapabilityDataSource;
+  readonly moduleContent?: ReactNode;
 }
 
 export const INSTANCE_MODULE_LABELS: Readonly<Record<InstanceModule, string>> = {
@@ -48,6 +50,10 @@ function capabilityFor(map: InstanceCapabilityMap, module: InstanceModule): Inst
   return map[module] ?? { state: 'unknown' };
 }
 
+function canRender(capability: InstanceCapability): boolean {
+  return capability.state === 'supported' || capability.state === 'degraded';
+}
+
 function explanation(capability: InstanceCapability): string | null {
   if (capability.state === 'supported') return null;
   return capability.explanation?.trim() || DEFAULT_EXPLANATIONS[capability.state];
@@ -63,6 +69,7 @@ export function InstanceDetail({
   instance,
   capabilities,
   capabilityDataSource,
+  moduleContent,
 }: InstanceDetailProps) {
   const ownsRoute = instance?.id === instanceId;
   const [loadedCapabilities, setLoadedCapabilities] = useState<InstanceCapabilityMap | undefined>();
@@ -90,8 +97,9 @@ export function InstanceDetail({
         }
       },
       (error: unknown) => {
+        void error;
         if (!controller.signal.aborted && requestRef.current === request) {
-          setLoadError(error instanceof Error ? error.message : 'Capability discovery failed.');
+          setLoadError('Capability discovery failed.');
           setLoading(false);
         }
       },
@@ -166,12 +174,20 @@ export function InstanceDetail({
         <h1>{INSTANCE_MODULE_LABELS[module]}</h1>
         {loading ? <p role="status">Loading capabilities…</p> : null}
         {loadError ? <p role="alert">Capabilities unavailable: {loadError}</p> : null}
-        {!loading && activeCapability.state === 'supported' ? (
-          <p>
-            Inspect {INSTANCE_MODULE_LABELS[module].toLowerCase()} data and available operations.
-          </p>
+        {!loading && canRender(activeCapability) ? (
+          <>
+            {activeCapability.state === 'degraded' ? (
+              <p data-capability-state="degraded">{explanation(activeCapability)}</p>
+            ) : null}
+            {moduleContent ?? (
+              <p>
+                Inspect {INSTANCE_MODULE_LABELS[module].toLowerCase()} data and available
+                operations.
+              </p>
+            )}
+          </>
         ) : null}
-        {!loading && activeCapability.state !== 'supported' ? (
+        {!loading && !canRender(activeCapability) ? (
           <p data-capability-state={activeCapability.state}>{explanation(activeCapability)}</p>
         ) : null}
       </div>