Improve the inspector page name for modern debugger (#15375)

* visual studio 2026 strict check fix

* Add HostTargetMetadata with app name and device name for inspector page naming

* lint:fix

* Change files

* revert VS 2026 strict checks fix

* review comments

Author: iamAbhi-916

change/react-native-windows-8863778a-7158-453c-abaf-e5c40ed489bc.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add HostTargetMetadata with app name and device name for inspector page naming",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/ReactHost/ReactHost.cpp

@@ -285,10 +285,32 @@ class ReactInspectorHostTargetDelegate : public jsinspector_modern::HostTargetDe
   ReactInspectorHostTargetDelegate(Mso::WeakPtr<ReactHost> &&reactHost) noexcept : m_reactHost(std::move(reactHost)) {}
 
   jsinspector_modern::HostTargetMetadata getMetadata() override {
-    // TODO: (vmoroz) provide more info
-    return {
-        .integrationName = "React Native Windows (Host)",
-    };
+    jsinspector_modern::HostTargetMetadata metadata{};
+    metadata.integrationName = "React Native Windows (Host)";
+    metadata.platform = "windows";
+
+    if (Mso::CntPtr<ReactHost> reactHost = m_reactHost.GetStrongPtr()) {
+      const ReactOptions &options = reactHost->Options();
+      if (!options.Identity.empty()) {
+        std::string identity = options.Identity;
+        // Replace illegal characters with underscore
+        for (char &c : identity) {
+          if (c == '\\' || c == '/' || c == ':' || c == '*' || c == '?' || c == '"' || c == '<' || c == '>' ||
+              c == '|') {
+            c = '_';
+          }
+        }
+        metadata.appDisplayName = identity;
+      }
+    }
+
+    wchar_t computerName[MAX_COMPUTERNAME_LENGTH + 1];
+    DWORD size = MAX_COMPUTERNAME_LENGTH + 1;
+    if (GetComputerNameW(computerName, &size)) {
+      metadata.deviceName = winrt::to_string(computerName);
+    }
+
+    return metadata;
   }
 
   void onReload(jsinspector_modern::HostTargetDelegate::PageReloadRequest const &request) override {
@@ -589,9 +611,20 @@ void ReactHost::AddInspectorPage() noexcept {
   jsinspector_modern::InspectorTargetCapabilities capabilities;
   capabilities.nativePageReloads = true;
   capabilities.prefersFuseboxFrontend = true;
-  // TODO: (vmoroz) improve the page name
+
+  auto metadata = m_inspectorHostTargetDelegate->getMetadata();
+  std::string pageName;
+  if (metadata.appDisplayName.has_value() && !metadata.appDisplayName.value().empty()) {
+    pageName = metadata.appDisplayName.value();
+  } else {
+    pageName = "React Native Windows (Experimental)";
+  }
+  if (metadata.deviceName.has_value() && !metadata.deviceName.value().empty()) {
+    pageName += " (" + metadata.deviceName.value() + ")";
+  }
+
   inspectorPageId = jsinspector_modern::getInspectorInstance().addPage(
-      "React Native Windows (Experimental)",
+      pageName,
       "Hermes",
       [weakInspectorHostTarget =
            std::weak_ptr(m_inspectorHostTarget)](std::unique_ptr<jsinspector_modern::IRemoteConnection> remote)

vnext/src-win/src/private/specs_DEPRECATED/components/Xaml/XamlHostNativeComponent.js

@@ -7,8 +7,8 @@
 
 'use strict';
 
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {ViewProps} from 'react-native';
+import {codegenNativeComponent} from 'react-native';
 import type {HostComponent} from '../../../../../src/private/types/HostComponent';
 
 type XamlHostProps = $ReadOnly<{|