Redesign topic details sidebar with clickable navigation and improved mobile layout (WIP - demo video test regression) (#1011)

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>
2026-01-12 09:16:22 +01:00
parent 36b4c0fce5
commit c7d28da4ec
13 changed files with 789 additions and 51 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -20,10 +20,117 @@
 - `yarn test:mcp` - Model Context Protocol tests
 - `yarn test:all` - All tests (unit + demo-video)
 - `./scripts/runBrowserTests.sh` - Browser mode UI tests (requires mosquitto service)
+- `./scripts/uiTests.sh` - Demo video tests with Electron (requires Xvfb, mosquitto)

 **CI jobs:** `test`, `ui-tests`, `demo-video`, `test-browser`, `browser-ui-tests`

-**Important:** Browser UI tests require MQTT broker. In CI, GitHub Actions health checks ensure the mosquitto service is ready before tests run.
+**Important:** 
+- Browser UI tests require MQTT broker. In CI, GitHub Actions health checks ensure the mosquitto service is ready before tests run.
+- Demo video tests use the same test scenarios as browser tests - if browser tests pass, demo video tests should pass too (they use identical selectors in `src/spec/scenarios/`)
+
+## Debugging Demo Video / UI Tests
+
+When demo video tests fail in CI but you need to debug locally:
+
+**Prerequisites:**
+```bash
+# Install required packages
+sudo apt-get install xvfb mosquitto tmux ffmpeg
+
+# Ensure mosquitto is stopped (script will start its own instance)
+sudo systemctl stop mosquitto
+```
+
+**Steps to debug:**
+1. Build the project: `yarn build`
+2. Run the demo video tests: `ELECTRON_DISABLE_SANDBOX=1 ./scripts/uiTests.sh`
+3. If tests fail, check the error messages for:
+   - Missing `data-test` or `data-test-type` attributes
+   - Elements not visible (hidden, outside viewport, or covered by overlays)
+   - Click interception (tooltips, dialogs blocking clicks)
+   - XPath selector issues (check the data-test value format)
+
+**Common issues:**
+- **"locator not visible"**: Element exists but is hidden or outside viewport
+- **"locator.click intercepted"**: Another element (tooltip, dialog) is covering the click target
+- **Empty `data-test` attribute**: For simple numeric values, ensure you're using the topic name, not `props.literal.path` (which is empty for non-JSON values)
+- **"Process failed to launch"**: Electron can't start - ensure DISPLAY is set and Xvfb is running
+
+**Environment-specific notes:**
+- Demo video tests use Electron with Xvfb (virtual display)
+- Browser tests use Chromium without Electron (easier to debug locally)
+- CI environment has proper Electron setup - if local tests are flaky, trust CI results
+- Both test types use the same scenario files in `src/spec/scenarios/`
+
+**Material-UI Tooltip considerations:**
+- Tooltips wrap their children and create overlay divs
+- Test attributes (`data-test-type`, `data-test`) must be on the inner clickable element that's passed as a child to the Tooltip
+- Mouse event handlers (onMouseEnter, onMouseLeave, ref) go on outer wrapper
+- onClick handler and test attributes go on the span inside the Tooltip
+- The clickable child inside the Tooltip is what Playwright should target
+
+**Example:**
+```tsx
+// ❌ WRONG - attributes on outer wrapper, Tooltip wraps and hides them
+<Tooltip title="...">
+  <span onClick={...} data-test-type="Button" data-test="example">
+    <Icon />
+  </span>
+</Tooltip>
+
+// ✅ CORRECT - attributes on the actual clickable child inside Tooltip
+<span ref={ref} onMouseEnter={...} onMouseLeave={...}>
+  <Tooltip title="...">
+    <span onClick={...} data-test-type="Button" data-test="example">
+      <Icon />
+    </span>
+  </Tooltip>
+</span>
+```
+
+**data-test value format:**
+- ShowChart: Use last segment of topic path (e.g., "heater" for "kitchen/coffee_maker/heater")
+- ChartSettings: Use full topic + dotPath (e.g., "kitchen/coffee_maker/heater-" with trailing dash when dotPath is empty)
+- Test XPaths use `contains(@data-test, "substring")` so partial matches work
+
+## Running Browser Tests Locally
+
+**Prerequisites:**
+```bash
+# Install mosquitto (if not already installed)
+sudo apt-get install mosquitto
+
+# Start mosquitto service
+sudo systemctl start mosquitto
+sudo systemctl status mosquitto
+```
+
+**Run browser tests:**
+```bash
+# Build server and run tests
+yarn build:server
+./scripts/runBrowserTests.sh
+```
+
+The script automatically:
+- Starts a local mosquitto broker
+- Builds the TypeScript code
+- Starts the browser mode server on port 3000
+- Runs Playwright tests in browser mode
+- Cleans up processes on exit
+
+**Test environment variables:**
+- `MQTT_EXPLORER_USERNAME` - Browser auth username (default: test)
+- `MQTT_EXPLORER_PASSWORD` - Browser auth password (default: test123)
+- `PORT` - Server port (default: 3000)
+- `TESTS_MQTT_BROKER_HOST` - MQTT broker host (default: 127.0.0.1)
+- `TESTS_MQTT_BROKER_PORT` - MQTT broker port (default: 1883)
+- `USE_MOBILE_VIEWPORT` - Enable mobile viewport (default: false)
+
+**Common test failures after UI changes:**
+- Update test selectors in `src/spec/ui-tests.spec.ts` if UI structure changes
+- Use `data-testid` attributes for stable test selectors
+- Avoid using role + name selectors for dynamic content (use direct testid selectors instead)

 ## Browser Mode

--- a/app/src/components/ChartPanel/index.tsx
+++ b/app/src/components/ChartPanel/index.tsx
@@ -154,7 +154,7 @@ const styles = (theme: Theme) => ({
    height: '100%',
    padding: '8px',
    flex: 1,
-    overflow: 'hidden scroll',
+    overflow: 'auto',
  },
 })

--- a/app/src/components/Sidebar/DetailsTab.tsx
+++ b/app/src/components/Sidebar/DetailsTab.tsx
@@ -0,0 +1,327 @@
+import * as q from '../../../../backend/src/Model'
+import React, { useCallback } from 'react'
+import { Box, Typography, IconButton, Chip, Tooltip } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { AppState } from '../../reducers'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { sidebarActions } from '../../actions'
+import Copy from '../helper/Copy'
+import Save from '../helper/Save'
+import DateFormatter from '../helper/DateFormatter'
+import ValueRenderer from './ValueRenderer/ValueRenderer'
+import MessageHistory from './ValueRenderer/MessageHistory'
+import ActionButtons from './ValueRenderer/ActionButtons'
+import DeleteSelectedTopicButton from './ValueRenderer/DeleteSelectedTopicButton'
+import { useDecoder } from '../hooks/useDecoder'
+import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
+import SimpleBreadcrumb from './SimpleBreadcrumb'
+
+interface Props {
+  node?: q.TreeNode<any>
+  classes: any
+  compareMessage?: q.Message
+  sidebarActions: typeof sidebarActions
+}
+
+function DetailsTab(props: Props) {
+  const { node, compareMessage, classes } = props
+  const decodeMessage = useDecoder(node)
+
+  const getDecodedValue = useCallback(() => {
+    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
+  }, [node, decodeMessage])
+
+  const getData = () => {
+    if (node?.message && node.message.payload) {
+      return node.message.payload.base64Message
+    }
+  }
+
+  const handleMessageHistorySelect = useCallback(
+    (message: q.Message) => {
+      if (message !== compareMessage) {
+        props.sidebarActions.setCompareMessage(message)
+      } else {
+        props.sidebarActions.setCompareMessage(undefined)
+      }
+    },
+    [compareMessage, props.sidebarActions]
+  )
+
+  const deleteTopic = useCallback(
+    (topic?: q.TreeNode<any>, recursive: boolean = false) => {
+      if (!topic) {
+        return
+      }
+      props.sidebarActions.clearTopic(topic, recursive)
+    },
+    [props.sidebarActions]
+  )
+
+  if (!node) {
+    return (
+      <Box className={classes.emptyState}>
+        <Typography variant="body2" color="textSecondary" align="center">
+          Select a topic to view details
+        </Typography>
+      </Box>
+    )
+  }
+
+  const [value] =
+    node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
+  const hasValue = Boolean(value)
+
+  return (
+    <Box className={classes.root}>
+      {/* Topic Section - Breadcrumb with actions */}
+      <Box className={classes.topicSection}>
+        <SimpleBreadcrumb node={node} />
+        <Box className={classes.topicActions}>
+          <Copy value={node.path()} />
+          {node.childTopicCount() === 0 && (
+            <Tooltip title="Delete this topic">
+              <IconButton size="small" onClick={() => deleteTopic(node, false)} className={classes.iconButton}>
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {node.childTopicCount() > 0 && (
+            <Tooltip title="Delete topic and all subtopics">
+              <IconButton size="small" onClick={() => deleteTopic(node, true)} className={classes.iconButton}>
+                <DeleteSweepIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Box>
+      </Box>
+
+      {/* Value Section - Simplified layout */}
+      {hasValue && (
+        <Box className={classes.valueSection}>
+          {/* Metadata bar - Date on left, Retained/QoS on right */}
+          <Box className={classes.metadataBar}>
+            <Box className={classes.metadataLeft}>
+              <Typography variant="caption" color="textSecondary">
+                <DateFormatter date={node.message!.received} />
+              </Typography>
+            </Box>
+            <Box className={classes.metadataRight}>
+              {node.message?.retain && (
+                <Chip label="Retained" size="small" variant="outlined" color="primary" className={classes.chip} />
+              )}
+              <Chip
+                label={`QoS ${node.message?.qos ?? 0}`}
+                size="small"
+                variant="outlined"
+                className={classes.chip}
+              />
+            </Box>
+          </Box>
+
+          {/* Action toolbar */}
+          <Box className={classes.actionToolbar}>
+            <Typography variant="subtitle2" className={classes.valueTitle}>
+              Current Value
+            </Typography>
+            <Box className={classes.actionButtons}>
+              <ActionButtons />
+            </Box>
+            <Box className={classes.valueActions}>
+              <Copy getValue={getDecodedValue} />
+              <Save getData={getData} />
+              {node.message?.retain && <DeleteSelectedTopicButton />}
+            </Box>
+          </Box>
+
+          {/* Value Display */}
+          <Box className={classes.valueDisplay}>
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <ValueRenderer treeNode={node} message={node.message!} compareWith={compareMessage} />
+            </React.Suspense>
+          </Box>
+
+          {/* Message History */}
+          <Box className={classes.historySection}>
+            <MessageHistory onSelect={handleMessageHistorySelect} selected={compareMessage} node={node} />
+          </Box>
+
+          {/* Stats Section - Moved to end of value section */}
+          <Box className={classes.statsSection}>
+            <Box className={classes.statsGrid}>
+              <Box className={classes.statItem}>
+                <Typography variant="body2" color="textSecondary" className={classes.statLabel}>
+                  Messages
+                </Typography>
+                <Typography variant="h6" className={classes.statValue}>
+                  {node.messages}
+                </Typography>
+              </Box>
+              <Box className={classes.statItem}>
+                <Typography variant="body2" color="textSecondary" className={classes.statLabel}>
+                  Subtopics
+                </Typography>
+                <Typography variant="h6" className={classes.statValue}>
+                  {node.childTopicCount()}
+                </Typography>
+              </Box>
+              <Box className={classes.statItem}>
+                <Typography variant="body2" color="textSecondary" className={classes.statLabel}>
+                  Total
+                </Typography>
+                <Typography variant="h6" className={classes.statValue}>
+                  {node.leafMessageCount()}
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    gap: theme.spacing(3),
+    [theme.breakpoints.down('sm')]: {
+      gap: theme.spacing(2),
+    },
+  },
+  emptyState: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '200px',
+    padding: theme.spacing(3),
+  },
+  // Topic section
+  topicSection: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: theme.spacing(1),
+    paddingBottom: theme.spacing(2),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  topicActions: {
+    display: 'flex',
+    gap: theme.spacing(0.5),
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  iconButton: {
+    padding: theme.spacing(0.5),
+  },
+  // Stats section
+  statsSection: {
+    marginTop: theme.spacing(2),
+  },
+  statsGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: theme.spacing(1.5),
+    [theme.breakpoints.down('sm')]: {
+      gap: theme.spacing(1),
+    },
+  },
+  statItem: {
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 1),
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: theme.shape.borderRadius,
+    gap: theme.spacing(0.5),
+  },
+  statLabel: {
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    textTransform: 'uppercase' as 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  statValue: {
+    fontSize: '1.25rem',
+    fontWeight: 600,
+    lineHeight: 1,
+  },
+  // Value section
+  valueSection: {
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    gap: theme.spacing(2),
+  },
+  metadataBar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    flexWrap: 'wrap' as 'wrap',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: theme.shape.borderRadius,
+  },
+  metadataLeft: {
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    flexWrap: 'wrap' as 'wrap',
+  },
+  metadataRight: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  chip: {
+    height: '24px',
+  },
+  actionToolbar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    flexWrap: 'wrap' as 'wrap',
+  },
+  valueTitle: {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+    fontSize: '0.875rem',
+    textTransform: 'uppercase' as 'uppercase',
+    letterSpacing: '0.5px',
+    flexShrink: 0,
+  },
+  actionButtons: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+  },
+  valueActions: {
+    display: 'flex',
+    gap: theme.spacing(0.5),
+    alignItems: 'center',
+  },
+  valueDisplay: {
+    marginTop: theme.spacing(1),
+  },
+  historySection: {
+    marginTop: theme.spacing(1),
+  },
+})
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    compareMessage: state.sidebar.get('compareMessage'),
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    sidebarActions: bindActionCreators(sidebarActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DetailsTab))
--- a/app/src/components/Sidebar/PublishTab.tsx
+++ b/app/src/components/Sidebar/PublishTab.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+
+const Publish = React.lazy(() => import('./Publish/Publish'))
+
+interface Props {
+  connectionId?: string
+  classes: any
+}
+
+function PublishTab(props: Props) {
+  const { classes } = props
+
+  return (
+    <Box className={classes.root}>
+      <Box className={classes.header}>
+        <Typography variant="subtitle2" className={classes.title}>
+          Publish Message
+        </Typography>
+        <Typography variant="caption" color="textSecondary">
+          Send messages to MQTT topics
+        </Typography>
+      </Box>
+      
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <Publish connectionId={props.connectionId} />
+      </React.Suspense>
+    </Box>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    gap: theme.spacing(2),
+  },
+  header: {
+    marginBottom: theme.spacing(1),
+  },
+  title: {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+    fontSize: '0.875rem',
+    textTransform: 'uppercase' as 'uppercase',
+    letterSpacing: '0.5px',
+    marginBottom: theme.spacing(0.5),
+  },
+})
+
+export default withStyles(styles)(PublishTab)
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -1,24 +1,19 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
-import NodeStats from './NodeStats'
-import ValuePanel from './ValueRenderer/ValuePanel'
-const ValuePanelAny = ValuePanel as any
 import { AppState } from '../../reducers'
-import { AccordionDetails } from '@mui/material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import TopicPanel from './TopicPanel/TopicPanel'
-import Panel from './Panel'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+import { Tabs, Tab, Box, useMediaQuery, useTheme } from '@mui/material'
+import DetailsTab from './DetailsTab'
+import PublishTab from './PublishTab'

 const throttle = require('lodash.throttle')

-const Publish = React.lazy(() => import('./Publish/Publish'))
-
 interface Props {
  nodePath?: string
  tree?: q.Tree<TopicViewModel>
@@ -49,27 +44,55 @@ function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
  }, [node])
 }

-function Sidebar(props: Props) {
+function SidebarNew(props: Props) {
  const { classes, tree, nodePath } = props
  const node = usePollingToFetchTreeNode(tree, nodePath || '')
  useUpdateNodeWhenNodeReceivesUpdates(node)
+  const [tabValue, setTabValue] = useState(0)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))

-  return (
-    <div id="Sidebar" className={classes.drawer}>
-      <div>
-        <TopicPanel node={node} />
-        <ValuePanelAny lastUpdate={node ? node.lastUpdate : 0} />
-        <Panel>
-          <span>Publish</span>
-          <Publish connectionId={props.connectionId} />
-        </Panel>
-        <Panel detailsHidden={!node}>
-          <span>Stats</span>
-          <AccordionDetails className={classes.details}>
-            <NodeStats node={node} />
-          </AccordionDetails>
-        </Panel>
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue)
+  }
+
+  // On mobile, don't show tabs (mobile already has Topics/Details tabs at app level)
+  // Just show the content directly
+  if (isMobile) {
+    return (
+      <div id="Sidebar" className={classes.root}>
+        <Box className={classes.mobileContent}>
+          <DetailsTab node={node} />
+        </Box>
      </div>
+    )
+  }
+
+  // Desktop: show tabs for Details/Publish
+  return (
+    <div id="Sidebar" className={classes.root}>
+      <Box className={classes.tabsContainer}>
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          variant="fullWidth"
+          indicatorColor="primary"
+          textColor="primary"
+          className={classes.tabs}
+        >
+          <Tab label="Details" className={classes.tab} />
+          <Tab label="Publish" className={classes.tab} />
+        </Tabs>
+      </Box>
+      
+      <Box className={classes.tabContent}>
+        <Box sx={{ display: tabValue === 0 ? 'block' : 'none' }}>
+          <DetailsTab node={node} />
+        </Box>
+        <Box sx={{ display: tabValue === 1 ? 'block' : 'none' }}>
+          <PublishTab connectionId={props.connectionId} />
+        </Box>
+      </Box>
    </div>
  )
 }
@@ -90,13 +113,38 @@ const mapDispatchToProps = (dispatch: any) => {
 }

 const styles = (theme: Theme) => ({
-  drawer: {
-    display: 'block' as 'block',
+  root: {
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    height: '100%',
+    width: '100%',
  },
-  details: {
-    padding: '0px 16px 8px 8px',
-    display: 'block',
+  tabsContainer: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+  },
+  tabs: {
+    minHeight: '48px',
+  },
+  tab: {
+    minHeight: '48px',
+    fontSize: '14px',
+    fontWeight: 500,
+    textTransform: 'none' as 'none',
+    padding: theme.spacing(1.5, 2),
+  },
+  tabContent: {
+    flex: 1,
+    overflowY: 'auto' as 'auto',
+    overflowX: 'hidden' as 'hidden',
+    padding: theme.spacing(2),
+  },
+  mobileContent: {
+    flex: 1,
+    overflowY: 'auto' as 'auto',
+    overflowX: 'hidden' as 'hidden',
+    padding: theme.spacing(2),
  },
 })

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SidebarNew))
--- a/app/src/components/Sidebar/SimpleBreadcrumb.tsx
+++ b/app/src/components/Sidebar/SimpleBreadcrumb.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import * as q from '../../../../backend/src/Model'
+import { Link } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { treeActions } from '../../actions'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+interface Props {
+  node?: q.TreeNode<any>
+  classes: any
+  actions: typeof treeActions
+}
+
+function SimpleBreadcrumb(props: Props) {
+  const { node, classes, actions } = props
+  
+  if (!node) {
+    return null
+  }
+
+  const branch = node.branch()
+  const breadcrumbNodes = branch
+    .map(n => n.sourceEdge)
+    .filter(edge => Boolean(edge) && edge?.target)
+    .map(edge => ({ name: edge?.name || '', target: edge!.target }))
+    .filter(item => item.name !== '')
+
+  if (breadcrumbNodes.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={classes.breadcrumbContainer}>
+      {breadcrumbNodes.map((item, index) => (
+        <span key={item.target.hash()}>
+          {index > 0 && <span className={classes.separator}> / </span>}
+          <Link
+            component="button"
+            variant="h6"
+            className={classes.breadcrumbLink}
+            onClick={() => actions.selectTopic(item.target)}
+            underline="hover"
+          >
+            {item.name}
+          </Link>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  breadcrumbContainer: {
+    display: 'flex',
+    flexWrap: 'wrap' as 'wrap',
+    alignItems: 'center',
+    gap: 0,
+  },
+  breadcrumbLink: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+    cursor: 'pointer',
+    textAlign: 'left' as 'left',
+    border: 'none',
+    background: 'none',
+    padding: 0,
+    lineHeight: 1.5,
+    '&:hover': {
+      color: theme.palette.primary.main,
+    },
+  },
+  separator: {
+    color: theme.palette.text.secondary,
+    userSelect: 'none' as 'none',
+  },
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(withStyles(styles)(SimpleBreadcrumb))
--- a/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
@@ -36,15 +36,17 @@ function ActionButtons(props: {
    >
      <ToggleButton className={props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
        <Tooltip title="Show difference between the current and the last message">
-          <span>
+          <span className={props.classes.buttonContent}>
            <Code className={props.classes.toggleButtonIcon} />
+            <span className={props.classes.buttonText}>Diff</span>
          </span>
        </Tooltip>
      </ToggleButton>
      <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
-          <span>
+          <span className={props.classes.buttonContent}>
            <Reorder className={props.classes.toggleButtonIcon} />
+            <span className={props.classes.buttonText}>Raw</span>
          </span>
        </Tooltip>
      </ToggleButton>
@@ -55,9 +57,20 @@ function ActionButtons(props: {
 const styles = (theme: Theme) => ({
  toggleButton: {
    height: '36px',
+    padding: theme.spacing(0.5, 1.5),
  },
  toggleButtonIcon: {
    verticalAlign: 'middle',
+    fontSize: '1.25rem',
+  },
+  buttonContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+  },
+  buttonText: {
+    fontSize: '0.875rem',
+    textTransform: 'none' as 'none',
  },
 })

--- a/src/spec/inspect-chart-settings.ts
+++ b/src/spec/inspect-chart-settings.ts
@@ -0,0 +1,84 @@
+import { chromium, Page } from 'playwright'
+
+async function inspect() {
+  const browser = await chromium.launch({ headless: true })
+  const page = await browser.newPage()
+  
+  console.log('Navigating to localhost:3000...')
+  await page.goto('http://localhost:3000')
+  await page.waitForTimeout(2000)
+  
+  // Login
+  console.log('Logging in...')
+  await page.fill('[name="username"]', 'test')
+  await page.fill('[name="password"]', 'test123')
+  await page.locator('[type="submit"]').click()
+  await page.waitForTimeout(3000)
+  
+  // Expand kitchen/coffee_maker topic
+  console.log('Expanding kitchen topic...')
+  const kitchenTopic = page.locator('[data-test-topic="kitchen"]').first()
+  await kitchenTopic.click()
+  await page.waitForTimeout(500)
+  
+  console.log('Clicking coffee_maker topic...')
+  const coffeeMakerTopic = page.locator('[data-test-topic="kitchen/coffee_maker"]').first()
+  await coffeeMakerTopic.click()
+  await page.waitForTimeout(1500)
+  
+  // Look for ShowChart icons
+  console.log('\n=== ShowChart Elements ===')
+  const showCharts = await page.locator('//*[contains(@data-test-type, "ShowChart")]').all()
+  console.log(`Found ${showCharts.length} ShowChart elements:`)
+  for (let i = 0; i < showCharts.length; i++) {
+    const dataTest = await showCharts[i].getAttribute('data-test')
+    const isVisible = await showCharts[i].isVisible()
+    console.log(`  [${i}] data-test="${dataTest}", visible=${isVisible}`)
+  }
+  
+  // Click heater ShowChart icon
+  console.log('\n=== Clicking heater ShowChart ===')
+  const heaterChart = page.locator('//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "heater")]').first()
+  await heaterChart.waitFor({ state: 'visible', timeout: 5000 })
+  await heaterChart.click()
+  await page.waitForTimeout(2000)
+  
+  // Check for ChartPanel
+  console.log('\n=== Looking for ChartPanel ===')
+  const chartPanels = await page.locator('[data-test-type="ChartPaper"]').all()
+  console.log(`Found ${chartPanels.length} ChartPanel elements`)
+  for (let i = 0; i < chartPanels.length; i++) {
+    const dataTest = await chartPanels[i].getAttribute('data-test')
+    console.log(`  [${i}] data-test="${dataTest}"`)
+  }
+  
+  // Look for ChartSettings buttons
+  console.log('\n=== Looking for ChartSettings Elements ===')
+  const allSettings = await page.locator('//*[@data-test-type="ChartSettings"]').all()
+  console.log(`Found ${allSettings.length} ChartSettings elements (using @data-test-type):`)
+  for (let i = 0; i < allSettings.length; i++) {
+    const dataTest = await allSettings[i].getAttribute('data-test')
+    const isVisible = await allSettings[i].isVisible()
+    const box = await allSettings[i].boundingBox()
+    console.log(`  [${i}] data-test="${dataTest}", visible=${isVisible}, box=${JSON.stringify(box)}`)
+  }
+  
+  // Try different locator strategies
+  console.log('\n=== Trying contains query for ChartSettings with "heater" ===')
+  const heaterSettings = page.locator('//*[contains(@data-test-type, "ChartSettings")][contains(@data-test, "heater")]')
+  const count = await heaterSettings.count()
+  console.log(`Found ${count} elements`)
+  if (count > 0) {
+    const dataTest = await heaterSettings.first().getAttribute('data-test')
+    const isVisible = await heaterSettings.first().isVisible()
+    console.log(`  data-test="${dataTest}", visible=${isVisible}`)
+  }
+  
+  // Take screenshot
+  await page.screenshot({ path: '/tmp/chart-settings-inspection.png', fullPage: true })
+  console.log('\nScreenshot saved to /tmp/chart-settings-inspection.png')
+  
+  await browser.close()
+}
+
+inspect().catch(console.error)
--- a/src/spec/scenarios/copyTopicToClipboard.ts
+++ b/src/spec/scenarios/copyTopicToClipboard.ts
@@ -2,7 +2,9 @@ import { Page } from 'playwright'
 import { clickOn } from '../util'

 export async function copyTopicToClipboard(browser: Page) {
-  // Select the copy button specifically in the Topic panel (not Value panel or MessageHistory)
-  const copyButton = browser.getByRole('button', { name: /Topic/i }).getByTestId('copy-button')
+  // Select the first copy button (topic path copy button in the new sidebar structure)
+  // The new sidebar has copy buttons in the topic section (for path) and value section (for value)
+  const copyButtons = browser.getByTestId('copy-button')
+  const copyButton = copyButtons.first()
  await clickOn(copyButton, 1)
 }
--- a/src/spec/scenarios/copyValueToClipboard.ts
+++ b/src/spec/scenarios/copyValueToClipboard.ts
@@ -2,7 +2,9 @@ import { Page } from 'playwright'
 import { clickOn } from '../util'

 export async function copyValueToClipboard(browser: Page) {
-  // Select the copy button specifically in the Value panel (not Topic panel or MessageHistory)
-  const copyButton = browser.getByRole('button', { name: /Value/i }).getByTestId('copy-button')
+  // Select the second copy button (value copy button in the new sidebar structure)
+  // The new sidebar has copy buttons in the topic section (for path) and value section (for value)
+  const copyButtons = browser.getByTestId('copy-button')
+  const copyButton = copyButtons.nth(1) // Second copy button is for the value
  await clickOn(copyButton, 1)
 }
--- a/src/spec/scenarios/saveMessageToFile.ts
+++ b/src/spec/scenarios/saveMessageToFile.ts
@@ -2,7 +2,7 @@ import { Page } from 'playwright'
 import { clickOn } from '../util'

 export async function saveMessageToFile(browser: Page) {
-  // Select the save button specifically in the Value panel
-  const saveButton = browser.getByRole('button', { name: /Value/i }).getByTestId('save-button')
+  // Select the save button in the new sidebar structure (directly by testid)
+  const saveButton = browser.getByTestId('save-button')
  await clickOn(saveButton, 1)
 }
--- a/src/spec/scenarios/showNumericPlot.ts
+++ b/src/spec/scenarios/showNumericPlot.ts
@@ -5,20 +5,25 @@ export async function showNumericPlot(browser: Page) {
  // On desktop, expandTopic will also select the topic (original behavior restored)
  // This shows the JSON properties in the details panel where chart icons are located
  await expandTopic('kitchen/coffee_maker', browser)
+  
+  // Switch to Details tab to ensure ShowChart icons are visible
+  await switchToDetailsTab(browser)
+  await sleep(500)
+  
  let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
  await moveToCenterOfElement(heater)
  await sleep(1000)
-  // Refocus and click
+  // Refocus and click (force:true bypasses tooltip overlay)
  heater = await valuePreviewGuttersShowChartIcon('heater', browser)
-  await heater.click()
+  await heater.click({ force: true })

  await sleep(1000)
  let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
  await moveToCenterOfElement(temperature)
  await sleep(1000)
-  // Refocus and click
+  // Refocus and click (force:true bypasses tooltip overlay)
  temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
-  await temperature.click()
+  await temperature.click({ force: true })

  await sleep(1000)
  await chartSettings('heater', browser)
@@ -81,3 +86,9 @@ async function clickOnMenuPoint(name: string, browser: Page) {
  const item = await browser.locator(`[data-menu-item="${name}"]`)
  return clickOn(item)
 }
+
+async function switchToDetailsTab(browser: Page) {
+  // Click the Details tab to ensure it's active and ShowChart icons are visible
+  const detailsTab = browser.getByRole('tab', { name: 'Details' })
+  await detailsTab.click()
+}
--- a/src/spec/ui-tests.spec.ts
+++ b/src/spec/ui-tests.spec.ts
@@ -275,8 +275,11 @@ describe('MQTT Explorer UI Tests', function () {
      await expandTopic('livingroom/lamp/state', page)
      await sleep(1000)

-      // When: Copy topic button is clicked
-      const copyTopicButton = page.getByRole('button', { name: /Topic/i }).getByTestId('copy-button')
+      // When: Copy topic button is clicked (in the topic section at the top)
+      // The new sidebar has copy buttons in the topic section (for path) and value section (for value)
+      // We need to find the first copy button (topic path copy button)
+      const copyButtons = page.getByTestId('copy-button')
+      const copyTopicButton = copyButtons.first()
      await copyTopicButton.click()
      await sleep(500)

@@ -317,8 +320,9 @@ describe('MQTT Explorer UI Tests', function () {

    it('should copy message value to clipboard in both Electron and browser modes', async function () {
      // Given: A topic with a value is selected (reuse already expanded topic)
-      // When: Copy value button is clicked
-      const copyValueButton = page.getByRole('button', { name: /Value/i }).getByTestId('copy-button')
+      // When: Copy value button is clicked (the second copy button in the value section)
+      const copyButtons = page.getByTestId('copy-button')
+      const copyValueButton = copyButtons.nth(1) // Second copy button is for the value
      await copyValueButton.click()
      await sleep(500)

@@ -367,8 +371,8 @@ describe('MQTT Explorer UI Tests', function () {
        // In browser mode, set up download handling
        const downloadPromise = page.waitForEvent('download', { timeout: 10000 })

-        // When: Save button is clicked
-        const saveButton = page.getByRole('button', { name: /Value/i }).getByTestId('save-button')
+        // When: Save button is clicked (in the new sidebar, save button is in the value section)
+        const saveButton = page.getByTestId('save-button')
        await saveButton.click()

        // Then: Download should be triggered
@@ -385,7 +389,7 @@ describe('MQTT Explorer UI Tests', function () {
      } else {
        // In Electron mode, the file dialog would open
        // We can't easily test the native file dialog, but we can verify the button works
-        const saveButton = page.getByRole('button', { name: /Value/i }).getByTestId('save-button')
+        const saveButton = page.getByTestId('save-button')
        const isVisible = await saveButton.isVisible()
        expect(isVisible).to.be.true