feat: connect application input and output boundaries

src/bootstrap/main.jsx

@@ -1,13 +1,11 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { QueryClientProvider } from "@tanstack/react-query";
 
 import { BootErrorShell } from "../presentation/boundaries/boot-error-shell.jsx";
-import { AppRouter } from "../presentation/routes/app-router.jsx";
 import { createRuntimeComposition } from "./create-runtime-composition.js";
 import { initializeColorScheme } from "./initialize-color-scheme.js";
 import { BootConfigError } from "./load-runtime-config.js";
 import { ReleaseManifestError } from "./load-release-manifest.js";
+import { RuntimeApplication } from "./runtime-application.jsx";
 import "../presentation/styles/theme.css";
 
 const rootElement = document.getElementById("root");
@@ -21,20 +19,8 @@ const root = createRoot(rootElement);
 async function boot() {
   try {
     const composition = await createRuntimeComposition();
-    initializeColorScheme(composition.ports.storage);
-    root.render(
-      <StrictMode>
-        <QueryClientProvider client={composition.ports.queryClient}>
-          <AppRouter
-            authSession={composition.ports.authSession}
-            basename={composition.config.build.routerBasePath}
-            buildId={composition.release.buildId}
-            storage={composition.ports.storage}
-            telemetry={composition.ports.telemetry}
-          />
-        </QueryClientProvider>
-      </StrictMode>,
-    );
+    initializeColorScheme(composition.application.preferences);
+    root.render(<RuntimeApplication composition={composition} />);
   } catch (error) {
     const safe =
       error instanceof BootConfigError || error instanceof ReleaseManifestError