Skip to content

Add new app panel #28214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

Add new app panel #28214

wants to merge 6 commits into from
+471 −12

Conversation

@balloob
Copy link
Member

@balloob balloob commented Nov 28, 2025 •
edited
Loading

Breaking change

Proposed change

Currently the ingress logic still lives in the panel hosted by the supervisor. This PR makes it available inside Home Assistant without needing the hassio JavaScript or iframe inside an iframe.

As we're having an architecture discussion to rename add-ons to apps, I have named the panel app.

Also added the option to configure the add-on in the panel config, so backend can choose to register panels directly (debug UIs of Z-Wave, Matter, MQTT come to mind).

CleanShot 2025-11-29 at 16 21 10@2x

There is also an option for Home Assistant aware apps to subscribe to the narrow property, to allow hiding the toolbar on mobile, and provide their own interface. To do so, they can call the following functions from their embedded website:

export function toggleHomeAssistantMenu() {
  window.parent.postMessage({ type: "home-assistant/toggle-menu" }, "*");
}
export function subscribeHomeAssistantProperties(callback) {
  const handler = (event) => {
    if (event.data.type === "home-assistant/properties") {
      callback(event.data);
    }
  };
  window.addEventListener("message", handler);
  window.parent.postMessage({ type: "home-assistant/subscribe-properties", hideToolbar: true }, "*");
  return () => {
    window.removeEventListener("message", handler);
    window.parent.postMessage({ type: "home-assistant/unsubscribe-properties" }, "*");
  }
}
export function navigateHomeAssistant(path, options = {}) {
  window.parent.postMessage({ type: "home-assistant/navigate", path, options }, "*");
}

And a test HTML I used for local testing:

<html>
  <button id="toggleMenu">Toggle Menu</button>
  <button id="navigate">Navigate</button><br />
  <button id="unsubscribe">Unsubscribe</button><br />
  Narrow: <span id="narrow"></span><br />
  Route: <span id="route"></span><br />
  <script>
    // Raw commands:
    document.getElementById("toggleMenu").addEventListener("click", () => {
      window.parent.postMessage({ type: "home-assistant/toggle-menu" }, "*");
    });
    document.getElementById("navigate").addEventListener("click", () => {
      window.parent.postMessage({ type: "home-assistant/navigate", path: "/app/d5369777_music_assistant_beta/" + Math.random() }, "*");
    });
    window.addEventListener("message", (event) => {
      if (event.data.type === "home-assistant/properties") {
        document.getElementById("narrow").textContent = event.data.narrow;
        document.getElementById("route").textContent = JSON.stringify(event.data.route);
      }
    });
    window.parent.postMessage({ type: "home-assistant/subscribe-properties", hideToolbar: true }, "*");
    document.getElementById("unsubscribe").addEventListener("click", () => {
      window.parent.postMessage({ type: "home-assistant/unsubscribe-properties" }, "*");
    });
  </script>
</html>

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Example configuration



Additional information



    

  • This PR fixes or closes issue: fixes #
    • 

  • This PR is related to issue or discussion:
    • 

  • Link to documentation pull request:
    • 



Checklist



    

  •  The code change is tested and works locally.
    • 

  •  There is no commented out code in this PR.
    • 

  •  Tests have been added to verify that the new code works.
    • 



If user exposed functionality or configuration variables are added/changed:



    

  
  



      


          

          
  
  

    
  
    
    

  

  

  



          

        
      




  




      

       
            



      

  
        

  

        

  home-assistant[bot]
  

  
            

              
                    home-assistant
  bot

              

              requested changes


              
                  
                    Nov 28, 2025
                  
              
              
            


            



                
    View reviewed changes
  


            





          

  
  
  
              

                      

  

    

      

          
    
    

  


        
            
  
      
              Copy link

  

        
      

    


    

        



        

    

  


  

    

      
          @home-assistant
      

      
            home-assistant
  bot

      

      

      left a comment




      
    


  



                  

                      

  

  
 

  
    

    
Choose a reason for hiding this comment


    

      The reason will be displayed to describe this comment to others. Learn more.
    


    

      
      



  



  
    

      
Hi @claude


It seems you haven't yet signed a CLA. Please do so here.


Once you do that we will be able to review and accept this pull request.


Thanks!

      
    

  
  




                    

                  
  
  

    
  
    
    

  

  

  



                      

                    
                  








      

  
  
  




  








      

  
            


  

  

    
  


  

      


    @balloob
balloob



    mentioned this pull request
    
      Nov 28, 2025
    





  


  

      
     Closed

  





  
  

      
        
      
      


  
    
    
  


    9 tasks
  





  




  

  
  

  
      @balloob
  balloob


        force-pushed
    the
        
      
  claude/add-app-panel-01EXDqzJ6v1xjWjfkfbefyZK


    
 branch
    from
    7b3873e    to
    60d00b8      
    Compare
  



    November 29, 2025 21:23    
    




    







      

  
        





      

  
          

  
  

  
      @balloob
  balloob


        force-pushed
    the
        
      
  claude/add-app-panel-01EXDqzJ6v1xjWjfkfbefyZK


    
 branch
    from
    60d00b8    to
    42cb913      
    Compare
  



    November 29, 2025 21:31    
    









      

  
        





      

  
          

  

    
  


  

      


    @balloob
balloob



    mentioned this pull request
    
      Nov 29, 2025
    





  


  

      
     Draft

  





  
  

      
        
      
      


  
    
    
  


    21 tasks
  





  









      

  
        





      

  
            

    

      
    

    


      


          @github-actions
github-actions
bot



          added
  the 

  Build

  Related to building the code
 label


      Nov 29, 2025

    

  








      

  
        









  
  

    

      

  




      


    


    

      

        
      

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



      

    

  




  
          



      

  

    
    

    

  

    Reviewers
  


    


        

    


  
      @home-assistant
  
    home-assistant[bot]



    
      
        
      
    
    home-assistant[bot] requested changes

  



        

      Requested changes must be addressed to merge this pull request.
  








    

    

  


      
  

    Assignees
  



        


    No one assigned







      


  


  

    Labels
  



    

      

    Build

  Related to building the code
  

    cla-signed









      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
  

    Development
  



            


Successfully merging this pull request may close these issues.





  
  



      
    

  




      

    

  
      

  

    

      2 participants
    

    

        
          @balloob