Make UIX Broker open /config/logs in full mode

[Mariusthvdb]

since per todays 2026.09.01 Supervisor we got the notification add-on/app Logviewer is taken out of the store, we have to use the builtin log system in HA.

as that opens in abridged Log mode, and Id love a dedicated window to the streaming log, like the Logviewer app provides, I wondered if UIX broker could do that.

Id like to keep the regular landing at /config/logs as is though, so not sure if Broker can do so only in a certain view?

[dcapslock]

OK. Breaking this up.

1. Always open System -> Logs in new tab when not on Companion App (hass.auth.external is absent). TAKE 2. Needs 8.2.0-beta.10

Method:

• we always need an event to listen and event to with Broker. Best option here is both uix-broker-ready and uix_update. The first fires when Broker is ready, so handles first page load. The 2nd fires when panel changes from panel code, so handles checking on panel change. (multiple listen added in 8.2.0-beta.10)
• panel rule to match only running on panel.fullUrlPath being `'config/system'
• host-element rule rule to match on hass.auth.external being absent, which is the case running in browser rather than companion app
• the interaction anchor is the 4th button of ha-config-navigation-list of ha-config-system-navigation. This path is specific enough to match the system log button.
• property directive to set target of the link to _blank (new tab).

  - realm: browser
    reentrant: false
    listen:
      - uix-broker-ready
      - uix_update
    debug: true
    anchor: "&home-assistant"
    rules:
      - type: panel
        path: fullUrlPath
        match: "config/system"
      - anchor: "&home-assistant"
        match: "{!.hass.auth.external}"
    directives:
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item"
        set: target
        value: "_blank"

[dcapslock]

2. Adjusing config/logs to be like single page. Also needs 8.2.0-beta.9

Method:

• Use uix-broker-ready as event
• panel rule (new to beta.9) to match on fullUrlPath being config/logs
• search rule (new to beta.9) to not match when URl has search string ?noUixBroker. Used as a get out if you really want to look at a logs page on desktop without directives applied.
• Directives
  • Property directive to change from abridged to raw logs (Note: This will change out system-log-card to error-log-card).
  • Property directive to set line wrap mode of error_log_card to false.
  • Event directive to make window kioskMode to have no sidebar / menu
  • Property directive to hide toolbar
  • Call diective to call style.setProperty on home-assistat to set --header-height: 0px now toolbar is hidden
  • Call directive to call style.setProperty on home-assistant to set --error-log-card-height: calc(100vh - 199px). This defaults to calc(100vh - 255px) which includes the header height of 56px. This should actually be updated in Frontend and then this would not be required.

  - realm: browser
    listen: uix-broker-ready
    debug: true
    anchor: "&home-assistant"
    rules:
      - type: panel
        path: fullUrlPath
        match: "config/logs"
      - type: search
        path: noUixBroker
        match:
          exists: false
    directives:
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _detail
        value: true
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage div.content error-log-card"
        set: _wrapLines
        value: false
      - type: event
        target: window
        name: hass-kiosk-mode
        data:
          enable: true
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage $ div.toolbar div.toolbar-content"
        set: style.display
        value: "none"
      - type: call
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --header-height
          - 0px
      - type: call
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --error-log-card-height
          - calc(100vh - 199px)

[dcapslock]

If you want to get rid of 16px margin and no error log card border use theming, and also change last line for setting --error-log-card-height

theme...

  uix-config-yaml: |
    "ha-config-logs $ error-log-card $": |
      div.error-log-intro {
        margin: 0px;
      }
      ha-card {
        border: none;
      }

Updated call directive, now setting out calc to reflect stock then adding back 56px (no header) and 32px (no card margin).

      - type: call
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --error-log-card-height
          - calc(100vh - 255px + 56px + 32px)

[dcapslock]

Also, just noticed that the toolbar has the log seelctor (just looked at logs in prod rather then my dev). So you may not want to hide the toolbar. In that case just remove the relevant directives, being 2nd and 3rd last, and update --error-log-card-height to not add back 56px for header height.

[dcapslock]

Now, putting 1 and 2 together...

Result:

Screen.Recording.2026-09-02.at.11.31.31.am.mov

[dcapslock]

One more update - requires 8.2.0-beta.12

• add directive specific rule to only set _selectedLogProvider hard coded option if ?provider= is not set in URL. This allows for direct config/logs?provider=<provider> from any Home Assistant action including button-card and even Broker buttons. :-)

  - realm: browser
    reentrant: false
    listen:
      - uix-broker-ready
      - uix-update
      - uix_update
    debug: true
    anchor: "&home-assistant"
    rules:
      - type: panel
        path: fullUrlPath
        match: "config/system"
      - anchor: "&home-assistant"
        match: "{!.hass.auth.external}"
    directives:
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item"
        set: target
        value: "_blank"
  - realm: browser
    listen: uix-broker-ready
    debug: false
    anchor: "&home-assistant"
    rules:
      - type: panel
        path: fullUrlPath
        match: "config/logs"
      - type: search
        path: noUixBroker
        match:
          exists: false
    directives:
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _detail
        value: true
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage div.content error-log-card"
        set: _wrapLines
        value: false
      - type: event
        target: window
        name: hass-kiosk-mode
        data:
          enable: true
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-config ha-config-logs"
        set: _selectedLogProvider
        value: "core" # Get list of provider from inspecting ha-core-logs and look at _logProviders property
        rules:
          # only apply this directive if the provider does not exist as a search string
          - type: search
            path: provider
            match:
              exists: false
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage $ div.toolbar div.toolbar-content ha-icon-button-arrow-prev"
        set: style.display
        value: "none"
# User next two directives to hide the toolbar, plus adjust value for --error-log-card-height accordingly
#      - type: property
#        anchor: "&home-assistant $ home-assistant-main $ ha-config-logs $ hass-subpage $ div.toolbar div.toolbar-content"
#        set: style.display
#        value: "none"
#      - type: call
#        anchor: "&home-assistant"
#        method: style.setProperty
#        args:
#          - --header-height
#          - 0px
# Remove below directive if not hiding the toolbar and not themeing reduced margin for the error log card
      - type: call
        anchor: "&home-assistant"
        method: style.setProperty
        args:
          - --error-log-card-height
          - calc(100vh - 255px + 32px)
# Use below if hiding toolbar
#          - calc(100vh - 255px + 56px + 32px)
# Use below if not themeing reduced margin for the error log card but hiding the toolbar
#          - calc(100vh - 255px + 56px)

[dcapslock]

... and then if you want a separate supervisor log button in system logs, update the first interactin as below...

  - realm: browser
    reentrant: false
    listen:
      - uix-broker-ready
      - uix-update
      - uix_update
    debug: true
    anchor: "&home-assistant"
    rules:
      - type: panel
        path: fullUrlPath
        match: "config/system"
      - anchor: "&home-assistant"
        match: "{!.hass.auth.external}"
    directives:
      - type: property
        anchor: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item"
        set: target
        value: "_blank"
      # Add a button for direct link to supervisor logs.
      - type: button
        after: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item div.content"
        icon: mdi:package-variant
        tap_action:
          action: url
          url_path: /config/logs?provider=supervisor

[Mariusthvdb]

sweet!
I've tweaked that a tiny bit, to not use the default black color which contrasts too heavily in my themes, and use the open-in-new icon

      - type: button
        after: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item div.content"
        icon: mdi:open-in-new
        color: var(--primary-color)
        tap_action:
          action: url
          url_path: /config/logs?provider=supervisor

[Mariusthvdb]

and set the size on the icon to be a tad more subtle

(note I cant get the --ha-icon-button-size to work, and need this var, same as in the icon for the hass-toggle-menu)

      - type: button
        after: "&home-assistant $ home-assistant-main $ ha-config-system-navigation $ ha-config-navigation-list $ ha-list-item-button:nth-of-type(4) $ a#item div.content"
        icon: mdi:open-in-new
        color: var(--primary-color)
        style:
          --mdc-icon-size: 20px
        tap_action:
          action: url
          url_path: /config/logs?provider=supervisor

[dcapslock]

--ha-icon-button-size is that, the button size. --mdc-icon-size is icon size. You need to adjust both if you want a smallar icon and button togther.

[dcapslock]

Now UIX Guide - https://uix-guides.lf.technology/broker/2026/09/06/broker-config-logs.html