Add observability for LLM topic context inclusion (#1038)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>

app/src/components/Layout/TitleBar.tsx

@@ -1,35 +1,36 @@
 import * as React from 'react'
 import CloudOff from '@mui/icons-material/CloudOff'
 import Logout from '@mui/icons-material/Logout'
-import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
 import Menu from '@mui/icons-material/Menu'
-import PauseButton from './PauseButton'
-import SearchBar from './SearchBar'
 import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
-import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { connectionActions, globalActions, settingsActions } from '../../actions'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
+import { connectionActions, globalActions, settingsActions } from '../../actions'
+import { AppState } from '../../reducers'
+import SearchBar from './SearchBar'
+import PauseButton from './PauseButton'
+import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 import { isBrowserMode } from '../../utils/browserMode'
 import { useAuth } from '../../contexts/AuthContext'
 
+const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
+
 const styles = (theme: Theme) => ({
   title: {
-    display: 'none' as 'none',
+    display: 'none' as const,
     [theme.breakpoints.up(750)]: {
-      display: 'block' as 'block',
+      display: 'block' as const,
     },
     [theme.breakpoints.up('md')]: {
-      display: 'block' as 'block',
+      display: 'block' as const,
     },
-    whiteSpace: 'nowrap' as 'nowrap',
+    whiteSpace: 'nowrap' as const,
   },
   disconnectIcon: {
     [theme.breakpoints.down('xs')]: {
-      display: 'none' as 'none',
+      display: 'none' as const,
     },
     marginRight: '8px',
     paddingLeft: '8px',
@@ -42,14 +43,14 @@ const styles = (theme: Theme) => ({
     margin: 'auto 8px auto auto',
     // Hide on mobile (<=768px)
     [theme.breakpoints.down('md')]: {
-      display: 'none' as 'none',
+      display: 'none' as const,
     },
   },
   logout: {
     margin: 'auto 0 auto 8px',
     // Hide on mobile (<=768px)
     [theme.breakpoints.down('md')]: {
-      display: 'none' as 'none',
+      display: 'none' as const,
     },
   },
   disconnectLabel: {
@@ -76,13 +77,13 @@ class TitleBar extends React.PureComponent<Props, {}> {
   private handleLogout = async () => {
     // Disconnect first
     this.props.actions.connection.disconnect()
-    
+
     // Clear credentials from sessionStorage
     if (typeof sessionStorage !== 'undefined') {
       sessionStorage.removeItem('mqtt-explorer-username')
       sessionStorage.removeItem('mqtt-explorer-password')
     }
-    
+
     // Reload page to reset all state and show login dialog
     if (typeof window !== 'undefined') {
       window.location.reload()
@@ -117,7 +118,7 @@ class TitleBar extends React.PureComponent<Props, {}> {
             Disconnect <CloudOff className={classes.disconnectIcon} />
           </Button>
           <LogoutButton classes={classes} onLogout={this.handleLogout} />
-          <ConnectionHealthIndicatorAny withBackground={true} />
+          <ConnectionHealthIndicatorAny withBackground />
         </Toolbar>
       </AppBar>
     )
@@ -127,36 +128,28 @@ class TitleBar extends React.PureComponent<Props, {}> {
 // Separate component to use hooks
 function LogoutButton({ classes, onLogout }: { classes: any; onLogout: () => void }) {
   const { authDisabled } = useAuth()
-  
+
   if (!isBrowserMode || authDisabled) {
     return null
   }
 
   return (
-    <Button
-      className={classes.logout}
-      sx={{ color: 'primary.contrastText' }}
-      onClick={onLogout}
-    >
+    <Button className={classes.logout} sx={{ color: 'primary.contrastText' }} onClick={onLogout}>
       Logout <Logout className={classes.disconnectIcon} />
     </Button>
   )
 }
 
-const mapStateToProps = (state: AppState) => {
-  return {
-    topicFilter: state.settings.get('topicFilter'),
-  }
-}
+const mapStateToProps = (state: AppState) => ({
+  topicFilter: state.settings.get('topicFilter'),
+})
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: {
-      settings: bindActionCreators(settingsActions, dispatch),
-      global: bindActionCreators(globalActions, dispatch),
-      connection: bindActionCreators(connectionActions, dispatch),
-    },
-  }
-}
+const mapDispatchToProps = (dispatch: any) => ({
+  actions: {
+    settings: bindActionCreators(settingsActions, dispatch),
+    global: bindActionCreators(globalActions, dispatch),
+    connection: bindActionCreators(connectionActions, dispatch),
+  },
+})
 
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))