diff --git a/tests/test_run/test_log_stream_handler.py b/tests/test_run/test_log_stream_handler.py
index 1f41df8..71093cd 100644
--- a/tests/test_run/test_log_stream_handler.py
+++ b/tests/test_run/test_log_stream_handler.py
@@ -46,10 +46,11 @@ def test_is_running_initially_false(self):
             h = LogStreamHandler()
         assert h.is_running is False
 
-    def test_log_queue_is_queue(self):
+    def test_clients_is_empty_set(self):
         with patch("th_cli.test_run.log_stream_handler.LogsHTTPServer"):
             h = LogStreamHandler()
-        assert isinstance(h.log_queue, queue.Queue)
+        assert isinstance(h._clients, set)
+        assert len(h._clients) == 0
 
     def test_log_file_path_initially_none(self):
         with patch("th_cli.test_run.log_stream_handler.LogsHTTPServer"):
@@ -163,24 +164,23 @@ def test_sets_is_running_false(self):
 
         assert h.is_running is False
 
-    def test_puts_none_sentinel_into_queue(self):
+    def test_broadcasts_none_sentinel_on_stop(self):
         h, mock_srv = _make_handler()
         h.is_running = True
+        client_q = queue.Queue()
+        h._clients.add(client_q)
 
         with patch("th_cli.test_run.log_stream_handler.logger"):
             h.stop()
 
-        assert h.log_queue.get_nowait() is None
+        assert client_q.get_nowait() is None
 
-    def test_skips_sentinel_when_queue_full(self):
+    def test_stop_does_not_raise_when_client_queue_full(self):
         h, mock_srv = _make_handler()
         h.is_running = True
-        # Fill the queue to capacity
-        for _ in range(h.log_queue.maxsize):
-            try:
-                h.log_queue.put_nowait("entry")
-            except queue.Full:
-                break
+        client_q = queue.Queue(maxsize=1)
+        client_q.put_nowait("existing")  # fill to capacity
+        h._clients.add(client_q)
 
         with patch("th_cli.test_run.log_stream_handler.logger"):
             h.stop()  # must not raise
@@ -196,45 +196,54 @@ class TestAddLogEntry:
     def test_noop_when_not_running(self):
         h, _ = _make_handler()
         h.is_running = False
-        h.add_log_entry(message="ignored")
-        assert h.log_queue.empty()
+        with patch.object(h, "_broadcast") as mock_bcast:
+            h.add_log_entry(message="ignored")
+        mock_bcast.assert_not_called()
 
     def test_adds_entry_to_queue_when_running(self):
         h, _ = _make_handler()
         h.is_running = True
+        client_q = queue.Queue()
+        h._clients.add(client_q)
         h.add_log_entry(message="hello", level="INFO")
-        entry = h.log_queue.get_nowait()
+        entry = client_q.get_nowait()
         assert entry["message"] == "hello"
         assert entry["level"] == "INFO"
 
     def test_auto_generates_timestamp_when_not_provided(self):
         h, _ = _make_handler()
         h.is_running = True
+        client_q = queue.Queue()
+        h._clients.add(client_q)
         h.add_log_entry(message="msg")
-        entry = h.log_queue.get_nowait()
+        entry = client_q.get_nowait()
         assert "timestamp" in entry
         assert entry["timestamp"] is not None
 
     def test_uses_provided_timestamp(self):
         h, _ = _make_handler()
         h.is_running = True
+        client_q = queue.Queue()
+        h._clients.add(client_q)
         h.add_log_entry(message="msg", timestamp="2025-01-01T00:00:00")
-        entry = h.log_queue.get_nowait()
+        entry = client_q.get_nowait()
         assert entry["timestamp"] == "2025-01-01T00:00:00"
 
     def test_level_uppercased(self):
         h, _ = _make_handler()
         h.is_running = True
+        client_q = queue.Queue()
+        h._clients.add(client_q)
         h.add_log_entry(message="msg", level="warning")
-        entry = h.log_queue.get_nowait()
+        entry = client_q.get_nowait()
         assert entry["level"] == "WARNING"
 
     def test_silently_drops_when_queue_full(self):
         h, _ = _make_handler()
         h.is_running = True
-        # Fill queue to max
-        for _ in range(h.log_queue.maxsize):
-            h.log_queue.put_nowait({"message": "x"})
+        client_q = queue.Queue(maxsize=1)
+        client_q.put_nowait({"message": "x"})  # fill to capacity
+        h._clients.add(client_q)
         h.add_log_entry(message="overflow")  # must not raise
 
 
diff --git a/tests/test_run/test_logs_http_server.py b/tests/test_run/test_logs_http_server.py
index 106f310..c5a586f 100644
--- a/tests/test_run/test_logs_http_server.py
+++ b/tests/test_run/test_logs_http_server.py
@@ -45,6 +45,12 @@ def _make_handler(path="/", server_attrs=None):
     handler.path = path
 
     mock_server = MagicMock()
+    # Set sensible defaults for the broadcast-pattern attributes so stream_logs()
+    # doesn't hit MagicMock internals (e.g. deepcopy of threading.Lock).
+    mock_server.active_clients = set()
+    mock_server.clients_lock = threading.Lock()
+    mock_server.tree_state = {}   # empty dict avoids deepcopy branch
+    mock_server.tree_lock = None
     for attr, value in (server_attrs or {}).items():
         setattr(mock_server, attr, value)
     handler.server = mock_server
@@ -64,6 +70,14 @@ def _make_handler(path="/", server_attrs=None):
     return handler
 
 
+def _pre_filled_queue(*items):
+    """Return a queue pre-loaded with items for use when patching queue.Queue."""
+    q = queue.Queue()
+    for item in items:
+        q.put(item)
+    return q
+
+
 # ---------------------------------------------------------------------------
 # do_GET routing
 # ---------------------------------------------------------------------------
@@ -202,49 +216,41 @@ def test_data_is_valid_json(self):
 @pytest.mark.unit
 class TestStreamLogs:
     def test_sends_sse_headers(self):
-        q = queue.Queue()
-        q.put(None)  # immediate end-of-stream
-        h = _make_handler(server_attrs={"log_queue": q})
-
-        with patch("th_cli.test_run.logs_http_server.logger"):
-            h.stream_logs()
+        h = _make_handler()
+        with patch("th_cli.test_run.logs_http_server.queue.Queue", return_value=_pre_filled_queue(None)):
+            with patch("th_cli.test_run.logs_http_server.logger"):
+                h.stream_logs()
 
         assert h._response_code == 200
         assert h._headers_sent.get("Content-Type") == "text/event-stream"
 
     def test_sends_end_event_on_none_sentinel(self):
-        q = queue.Queue()
-        q.put(None)
-        h = _make_handler(server_attrs={"log_queue": q})
+        h = _make_handler()
         sent_events = []
-        original_send = h._send_sse_event
         h._send_sse_event = lambda ev, data: sent_events.append(ev) or True
 
-        with patch("th_cli.test_run.logs_http_server.logger"):
-            h.stream_logs()
+        with patch("th_cli.test_run.logs_http_server.queue.Queue", return_value=_pre_filled_queue(None)):
+            with patch("th_cli.test_run.logs_http_server.logger"):
+                h.stream_logs()
 
         assert "end" in sent_events
 
     def test_streams_log_entries_from_queue(self):
-        q = queue.Queue()
-        q.put({"message": "hello", "level": "INFO", "timestamp": "2025-01-01"})
-        q.put(None)
-        h = _make_handler(server_attrs={"log_queue": q})
+        h = _make_handler()
         sent_events = []
         h._send_sse_event = lambda ev, data: sent_events.append((ev, data)) or True
 
-        with patch("th_cli.test_run.logs_http_server.logger"):
-            h.stream_logs()
+        entry = {"message": "hello", "level": "INFO", "timestamp": "2025-01-01"}
+        with patch("th_cli.test_run.logs_http_server.queue.Queue", return_value=_pre_filled_queue(entry, None)):
+            with patch("th_cli.test_run.logs_http_server.logger"):
+                h.stream_logs()
 
         log_events = [d for ev, d in sent_events if ev == "log"]
         assert len(log_events) == 1
         assert log_events[0]["message"] == "hello"
 
     def test_stops_when_send_sse_returns_false(self):
-        q = queue.Queue()
-        q.put({"message": "msg", "level": "INFO", "timestamp": "t"})
-        q.put({"message": "msg2", "level": "INFO", "timestamp": "t"})
-        h = _make_handler(server_attrs={"log_queue": q})
+        h = _make_handler()
         call_count = [0]
 
         def _send(ev, data):
@@ -254,33 +260,33 @@ def _send(ev, data):
             return False  # disconnect immediately
 
         h._send_sse_event = _send
+        entry1 = {"message": "msg", "level": "INFO", "timestamp": "t"}
+        entry2 = {"message": "msg2", "level": "INFO", "timestamp": "t"}
+        with patch("th_cli.test_run.logs_http_server.queue.Queue", return_value=_pre_filled_queue(entry1, entry2)):
+            with patch("th_cli.test_run.logs_http_server.logger"):
+                h.stream_logs()
 
-        with patch("th_cli.test_run.logs_http_server.logger"):
-            h.stream_logs()
-
-        # Should not have kept reading after disconnect
         assert call_count[0] <= 3
 
-    def test_no_log_queue_on_server_returns_early(self):
-        h = _make_handler(server_attrs={"log_queue": None})
+    def test_no_active_clients_on_server_returns_early(self):
+        h = _make_handler(server_attrs={"active_clients": None, "clients_lock": None})
         with patch("th_cli.test_run.logs_http_server.logger"):
             h.stream_logs()
-        # Should have sent 200 headers but not crashed
         assert h._response_code == 200
 
     def test_debug_log_at_100_entries(self):
-        """Covers line 134: `if sent_count % 100 == 0` debug message."""
-        q = queue.Queue()
-        # Put 100 log entries then sentinel
-        for i in range(100):
-            q.put({"message": f"msg{i}", "level": "INFO", "timestamp": "t"})
-        q.put(None)
-
-        h = _make_handler(server_attrs={"log_queue": q})
-        with patch("th_cli.test_run.logs_http_server.logger") as mock_logger:
-            h.stream_logs()
+        """Covers line `if sent_count % 100 == 0` debug message."""
+        entries = [{"message": f"msg{i}", "level": "INFO", "timestamp": "t"} for i in range(100)]
+        entries.append(None)  # sentinel
+        pre_q = queue.Queue()
+        for e in entries:
+            pre_q.put(e)
+
+        h = _make_handler()
+        with patch("th_cli.test_run.logs_http_server.queue.Queue", return_value=pre_q):
+            with patch("th_cli.test_run.logs_http_server.logger") as mock_logger:
+                h.stream_logs()
 
-        # 100 entries should have triggered the debug log
         mock_logger.debug.assert_called()
 
 
@@ -381,7 +387,8 @@ def test_server_thread_initially_none(self):
 class TestLogsHTTPServerStart:
     def test_creates_threading_http_server(self):
         srv = LogsHTTPServer(port=0)
-        q = queue.Queue()
+        clients = set()
+        lock = threading.Lock()
 
         with patch("th_cli.test_run.logs_http_server.ThreadingHTTPServer") as mock_cls:
             mock_ths = MagicMock()
@@ -390,23 +397,32 @@ def test_creates_threading_http_server(self):
                 mock_thread = MagicMock()
                 mock_thread_cls.return_value = mock_thread
                 with patch("th_cli.test_run.logs_http_server.logger"):
-                    srv.start(log_queue=q, test_run_title="Run")
+                    srv.start(active_clients=clients, clients_lock=lock, tree_state={}, test_run_title="Run")
 
         mock_cls.assert_called_once()
         mock_thread.start.assert_called_once()
 
     def test_sets_server_attributes(self):
         srv = LogsHTTPServer(port=0)
-        q = queue.Queue()
+        clients = set()
+        lock = threading.Lock()
 
         with patch("th_cli.test_run.logs_http_server.ThreadingHTTPServer") as mock_cls:
             mock_ths = MagicMock()
             mock_cls.return_value = mock_ths
             with patch("th_cli.test_run.logs_http_server.threading.Thread", return_value=MagicMock()):
                 with patch("th_cli.test_run.logs_http_server.logger"):
-                    srv.start(log_queue=q, test_run_title="MyTitle", local_ip="1.2.3.4", log_file_path="/tmp/f.log")
-
-        assert mock_ths.log_queue is q
+                    srv.start(
+                        active_clients=clients,
+                        clients_lock=lock,
+                        tree_state={},
+                        test_run_title="MyTitle",
+                        local_ip="1.2.3.4",
+                        log_file_path="/tmp/f.log",
+                    )
+
+        assert mock_ths.active_clients is clients
+        assert mock_ths.clients_lock is lock
         assert mock_ths.test_run_title == "MyTitle"
         assert mock_ths.local_ip == "1.2.3.4"
         assert mock_ths.log_file_path == "/tmp/f.log"
@@ -416,7 +432,7 @@ def test_propagates_oserror(self):
         with patch("th_cli.test_run.logs_http_server.ThreadingHTTPServer", side_effect=OSError("port in use")):
             with patch("th_cli.test_run.logs_http_server.logger"):
                 with pytest.raises(OSError):
-                    srv.start(log_queue=queue.Queue(), test_run_title="run")
+                    srv.start(active_clients=set(), clients_lock=threading.Lock(), tree_state={}, test_run_title="run")
 
 
 # ---------------------------------------------------------------------------
diff --git a/th_cli/test_run/log_stream_handler.py b/th_cli/test_run/log_stream_handler.py
index 0c56aca..aace9cb 100644
--- a/th_cli/test_run/log_stream_handler.py
+++ b/th_cli/test_run/log_stream_handler.py
@@ -16,7 +16,8 @@
 import datetime
 import queue
 import socket
-from typing import Optional
+import threading
+from typing import Any, Optional
 
 from loguru import logger
 
@@ -34,10 +35,15 @@ def __init__(self, port: int = 8998):
         """
         self.port = port
         self.http_server = LogsHTTPServer(port=port)
-        self.log_queue: queue.Queue = queue.Queue(maxsize=1000)
+        # Per-client broadcast set — each connected SSE client owns its own queue.
+        self._clients: set = set()
+        self._clients_lock = threading.Lock()
+        # Mutable dict kept in-place so the server's reference always reflects current state.
+        self.tree_state: dict = {}
+        self.tree_lock = threading.Lock()
         self.is_running = False
         self.log_file_path: Optional[str] = None
-        
+
     def start(self, test_run_title: str = "Test Execution", log_file_path: Optional[str] = None) -> str:
         """Start the log streaming HTTP server.
         
@@ -51,7 +57,7 @@ def start(self, test_run_title: str = "Test Execution", log_file_path: Optional[
         if self.is_running:
             logger.warning("Log stream handler already running")
             return self._get_log_viewer_url()
-        
+
         try:
             # Store log file path for download functionality
             self.log_file_path = log_file_path
@@ -61,78 +67,197 @@ def start(self, test_run_title: str = "Test Execution", log_file_path: Optional[
             
             # Start HTTP server
             self.http_server.start(
-                log_queue=self.log_queue,
+                active_clients=self._clients,
+                clients_lock=self._clients_lock,
+                tree_state=self.tree_state,
                 test_run_title=test_run_title,
                 local_ip=local_ip,
                 log_file_path=log_file_path,
+                tree_lock=self.tree_lock
             )
-            
+
             self.is_running = True
-            
+
             viewer_url = f"http://{local_ip}:{self.port}"
             logger.info(f"Log stream viewer started: {viewer_url}")
-            
+
             return viewer_url
-            
+
         except Exception as e:
             logger.error(f"Failed to start log stream handler: {e}")
             raise
-    
+
     def stop(self):
         """Stop the log streaming HTTP server."""
         if not self.is_running:
             return
-        
+
         try:
-            # Signal end of stream
-            if not self.log_queue.full():
-                try:
-                    self.log_queue.put_nowait(None)
-                except queue.Full:
-                    pass
-            
-            # Stop HTTP server
+            self._broadcast(None)
+            with self._clients_lock:
+                self._clients.clear()
+
             self.http_server.stop()
-            
             self.is_running = False
             logger.info("Log stream handler stopped")
-            
+
         except Exception as e:
             logger.error(f"Error stopping log stream handler: {e}")
-    
-    def add_log_entry(
-        self,
-        message: str,
-        level: str = "INFO",
-        timestamp: Optional[str] = None
-    ):
-        """Add a log entry to the stream.
-        
-        Args:
-            message: Log message text
-            level: Log level (INFO, WARNING, ERROR, DEBUG, etc.)
-            timestamp: ISO format timestamp (auto-generated if not provided)
-        """
+
+    def add_log_entry(self, message: str, level: str = "INFO", timestamp: Optional[str] = None):
+        """Add a log entry to the stream."""
         if not self.is_running:
             return
-        
+
         if timestamp is None:
             timestamp = datetime.datetime.now().isoformat()
-        
+
         log_entry = {
             "message": message,
             "level": level.upper(),
             "timestamp": timestamp,
         }
-        
+
+        self._broadcast(log_entry)
+
+    # ------------------------------------------------------------------
+    # Tree management
+    # ------------------------------------------------------------------
+
+    def init_tree(self, run: Any) -> None:
+        """Build the tree from a TestRunExecutionWithChildren and broadcast it.
+
+        Keeps tree_state mutated in-place so the server's reference stays valid
+        for clients that connect (or reconnect) after this point.
+        """
+        if not self.is_running:
+            return
+
         try:
-            # Try to add to queue without blocking
-            self.log_queue.put_nowait(log_entry)
-        except queue.Full:
-            # Queue is full, skip this entry silently to avoid blocking
-            # This is acceptable for real-time streaming when no browser is connected
+            tree = self._build_tree(run)
+            with self.tree_lock:
+                self.tree_state.clear()
+                self.tree_state.update(tree)
+
+            self._broadcast({"type": "tree_init", "data": dict(tree)})
+        except Exception as e:
+            logger.debug(f"Error initialising tree: {e}")
+
+    def update_tree_node(
+        self,
+        state: str,
+        suite_idx: Optional[int] = None,
+        case_idx: Optional[int] = None,
+        step_idx: Optional[int] = None,
+    ) -> None:
+        """Update a single node's state and queue a tree_update event.
+
+        Pass only the indices that identify the target level:
+          - suite_idx=None              → run-level update
+          - suite_idx=N, case_idx=None  → suite-level update
+          - suite_idx=N, case_idx=M, step_idx=None → case-level update
+          - suite_idx=N, case_idx=M, step_idx=K    → step-level update
+        """
+        if not self.is_running:
+            return
+
+        if suite_idx is None:
+            node_type = "run"
+        elif case_idx is None:
+            node_type = "suite"
+        elif step_idx is None:
+            node_type = "case"
+        else:
+            node_type = "step"
+
+        # Mutate tree_state in-place (kept consistent for reconnecting clients).
+        try:
+            with self.tree_lock:
+                if node_type == "run":
+                    self.tree_state["state"] = state
+                elif node_type == "suite":
+                    self.tree_state["suites"][suite_idx]["state"] = state
+                elif node_type == "case":
+                    self.tree_state["suites"][suite_idx]["cases"][case_idx]["state"] = state
+                else:
+                    self.tree_state["suites"][suite_idx]["cases"][case_idx]["steps"][step_idx]["state"] = state
+        except (IndexError, KeyError, TypeError):
             pass
-    
+
+        event = {
+            "type": "tree_update",
+            "node_type": node_type,
+            "suite_idx": suite_idx,
+            "case_idx": case_idx,
+            "step_idx": step_idx,
+            "state": state,
+        }
+
+        self._broadcast(event)
+
+    # ------------------------------------------------------------------
+    # Internals
+    # ------------------------------------------------------------------
+
+    def _broadcast(self, event) -> None:
+        """Put event into every active client's queue; drops silently if a queue is full."""
+        with self._clients_lock:
+            clients = list(self._clients)
+        for q in clients:
+            try:
+                q.put_nowait(event)
+            except queue.Full:
+                pass
+
+    def _build_tree(self, run: Any) -> dict:
+        """Construct a plain-dict tree from a TestRunExecutionWithChildren."""
+        tree: dict = {
+            "title": getattr(run, "title", "Test Run"),
+            "state": self._get_state(run),
+            "suites": [],
+        }
+
+        for suite_idx, suite in enumerate(getattr(run, "test_suite_executions", []) or []):
+            smeta = getattr(suite, "test_suite_metadata", None)
+            suite_node: dict = {
+                "index": suite_idx,
+                "title": getattr(smeta, "title", f"Suite {suite_idx}") if smeta else f"Suite {suite_idx}",
+                "state": self._get_state(suite),
+                "cases": [],
+            }
+
+            for case_idx, case in enumerate(getattr(suite, "test_case_executions", []) or []):
+                cmeta = getattr(case, "test_case_metadata", None)
+                case_node: dict = {
+                    "index": case_idx,
+                    "title": getattr(cmeta, "title", f"Case {case_idx}") if cmeta else f"Case {case_idx}",
+                    "public_id": getattr(cmeta, "public_id", "") if cmeta else "",
+                    "state": self._get_state(case),
+                    "steps": [],
+                }
+
+                for step_idx, step in enumerate(getattr(case, "test_step_executions", []) or []):
+                    case_node["steps"].append({
+                        "index": step_idx,
+                        "title": getattr(step, "title", f"Step {step_idx}"),
+                        "state": self._get_state(step),
+                    })
+
+                suite_node["cases"].append(case_node)
+
+            tree["suites"].append(suite_node)
+
+        return tree
+
+    def _get_state(self, obj: Any) -> str:
+        try:
+            state = getattr(obj, "state", None)
+            if state is None:
+                return "pending"
+            return state.value if hasattr(state, "value") else str(state)
+        except Exception:
+            return "pending"
+
     def _get_local_ip(self) -> str:
         """Get the local IP address of the machine.
         
@@ -149,7 +274,7 @@ def _get_local_ip(self) -> str:
             return local_ip
         except Exception:
             return "localhost"
-    
+
     def _get_log_viewer_url(self) -> str:
         """Get the URL for the log viewer.
         
diff --git a/th_cli/test_run/log_viewer.html b/th_cli/test_run/log_viewer.html
index 4e38ca6..9d8a88e 100644
--- a/th_cli/test_run/log_viewer.html
+++ b/th_cli/test_run/log_viewer.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <title>Real-Time Log Viewer</title>
     <style>
+        *, *::before, *::after {{ box-sizing: border-box; }}
+
         body {{
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: #f5f5f5;
@@ -11,216 +13,298 @@
             padding: 0;
             display: flex;
             flex-direction: column;
-            min-height: 100vh;
+            height: 100vh;
+            overflow: hidden;
         }}
 
+        /* ── Top header ─────────────────────────────────────────────── */
         .matter-header {{
             background: white;
             border-bottom: 1px solid #e0e0e0;
-            padding: 12px 20px;
+            padding: 10px 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            flex-shrink: 0;
+            z-index: 10;
         }}
 
-        .header-start {{
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }}
-
-        .header-title {{
-            font-size: 18px;
-            font-weight: 600;
-            color: #333;
-            margin: 0;
-        }}
-
-        .header-end {{
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }}
+        .header-start {{ display: flex; align-items: center; gap: 15px; }}
+        .header-title {{ font-size: 17px; font-weight: 600; color: #333; margin: 0; }}
+        .header-end   {{ display: flex; align-items: center; gap: 12px; }}
 
         .cli-indicator {{
             background: #2196F3;
             color: white;
-            padding: 4px 8px;
+            padding: 3px 8px;
             border-radius: 12px;
             font-size: 11px;
             font-weight: 500;
         }}
 
-        .version-info {{
-            font-size: 12px;
-            color: #666;
-            text-align: right;
-        }}
+        .version-info {{ font-size: 12px; color: #666; text-align: right; }}
 
         .status-indicator {{
             display: flex;
             align-items: center;
-            gap: 8px;
-            padding: 4px 10px;
+            gap: 7px;
+            padding: 3px 10px;
             border-radius: 12px;
             font-size: 11px;
             font-weight: 500;
         }}
-
-        .status-indicator.connected {{
-            background: #e8f5e9;
-            color: #2e7d32;
-            border: 1px solid #4caf50;
-        }}
-
-        .status-indicator.disconnected {{
-            background: #ffebee;
-            color: #c62828;
-            border: 1px solid #f44336;
-        }}
+        .status-indicator.connected    {{ background: #e8f5e9; color: #2e7d32; border: 1px solid #4caf50; }}
+        .status-indicator.disconnected {{ background: #ffebee; color: #c62828; border: 1px solid #f44336; }}
 
         .status-dot {{
-            width: 8px;
-            height: 8px;
+            width: 7px; height: 7px;
             border-radius: 50%;
             animation: pulse 2s infinite;
         }}
+        .status-indicator.connected .status-dot    {{ background: #4caf50; }}
+        .status-indicator.disconnected .status-dot {{ background: #f44336; }}
 
-        .status-indicator.connected .status-dot {{
-            background: #4caf50;
-        }}
+        @keyframes pulse {{ 0%,100% {{ opacity:1; }} 50% {{ opacity:0.4; }} }}
 
-        .status-indicator.disconnected .status-dot {{
-            background: #f44336;
+        /* ── Refresh notification banner ────────────────────────────── */
+        .refresh-banner {{
+            background: #e3f2fd;
+            border-bottom: 1px solid #90caf9;
+            padding: 8px 20px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 13px;
+            color: #0d47a1;
+            flex-shrink: 0;
         }}
-
-        @keyframes pulse {{
-            0%, 100% {{ opacity: 1; }}
-            50% {{ opacity: 0.5; }}
+        .refresh-banner.hidden {{ display: none; }}
+        .refresh-banner .banner-icon {{ font-size: 16px; }}
+        .refresh-banner .banner-msg  {{ flex: 1; }}
+        .refresh-banner .btn-reload {{
+            background: #1976d2;
+            color: white;
+            border: none;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            font-weight: 500;
         }}
+        .refresh-banner .btn-reload:hover {{ background: #1565c0; }}
+        .refresh-banner .btn-dismiss {{
+            background: transparent;
+            color: #1976d2;
+            border: 1px solid #90caf9;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+        }}
+        .refresh-banner .btn-dismiss:hover {{ background: #bbdefb; }}
 
+        /* ── Main area (tree + content) ─────────────────────────────── */
         .main-content {{
             flex: 1;
-            padding: 20px;
             display: flex;
-            justify-content: center;
-            align-items: flex-start;
+            flex-direction: row;
             overflow: hidden;
+            padding: 12px;
+            gap: 12px;
         }}
 
-        .p-dialog {{
+        /* ── Tree panel ─────────────────────────────────────────────── */
+        .tree-panel {{
+            width: 280px;
+            min-width: 220px;
+            max-width: 340px;
             background: white;
             border-radius: 8px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-            width: 95%;
-            max-width: 1400px;
-            margin: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             display: flex;
             flex-direction: column;
-            max-height: calc(100vh - 120px);
+            overflow: hidden;
+            flex-shrink: 0;
         }}
 
-        .p-dialog-header {{
-            padding: 16px 20px;
+        .tree-panel-header {{
+            padding: 10px 14px;
+            background: #fafafa;
             border-bottom: 1px solid #e0e0e0;
+            font-size: 12px;
+            font-weight: 600;
+            color: #555;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            flex-shrink: 0;
+        }}
+
+        .tree-empty {{
+            flex: 1;
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: #bbb;
+            font-size: 12px;
+            text-align: center;
+        }}
+
+        .tree-content {{
+            flex: 1;
+            overflow-y: auto;
+            padding: 6px 0;
+        }}
+
+        /* ── Tree nodes ─────────────────────────────────────────────── */
+        .tree-node {{
+            display: flex;
+            align-items: flex-start;
+            gap: 4px;
+            padding: 4px 8px;
+            cursor: pointer;
+            border-radius: 4px;
+            margin: 1px 4px;
+            transition: background 0.15s;
+            font-size: 12px;
+            line-height: 1.4;
+        }}
+        .tree-node:hover {{ background: #f0f4ff; }}
+
+        .tree-node.level-run   {{ padding-left: 8px;  font-weight: 600; font-size: 12px; }}
+        .tree-node.level-suite {{ padding-left: 16px; font-weight: 600; }}
+        .tree-node.level-case  {{ padding-left: 28px; font-weight: 500; color: #444; }}
+        .tree-node.level-step  {{ padding-left: 40px; color: #555; cursor: pointer; }}
+        .tree-node.level-step:hover {{ background: #e8f0fe; }}
+
+        .tree-toggle {{
+            flex-shrink: 0;
+            width: 14px;
+            font-size: 10px;
+            color: #999;
+            margin-top: 1px;
+            user-select: none;
+            transition: transform 0.15s;
+        }}
+        .tree-toggle.expanded {{ transform: rotate(90deg); }}
+
+        .tree-state-icon {{
+            flex-shrink: 0;
+            width: 16px;
+            text-align: center;
+            font-size: 11px;
+            margin-top: 1px;
+        }}
+
+        .tree-label {{
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }}
+
+        .tree-public-id {{
+            font-size: 10px;
+            color: #888;
+            flex-shrink: 0;
+        }}
+
+        /* State colours for tree icons */
+        .s-pending       {{ color: #bdbdbd; }}
+        .s-executing     {{ color: #1976d2; animation: pulse 1.2s infinite; }}
+        .s-passed        {{ color: #388e3c; }}
+        .s-failed        {{ color: #d32f2f; }}
+        .s-error         {{ color: #d32f2f; }}
+        .s-skipped       {{ color: #9e9e9e; }}
+        .s-not_applicable{{ color: #9e9e9e; }}
+        .s-cancelled     {{ color: #9e9e9e; }}
+
+        /* Node background highlight for executing */
+        .tree-node.executing {{ background: #e3f2fd; }}
+
+        /* Children container */
+        .tree-children {{ overflow: hidden; }}
+        .tree-children.collapsed {{ display: none; }}
+
+        /* ── Content / log panel ────────────────────────────────────── */
+        .content-panel {{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }}
+
+        .p-dialog-header {{
+            padding: 14px 18px;
+            border-bottom: 1px solid #e0e0e0;
             background: #fafafa;
             border-radius: 8px 8px 0 0;
             flex-shrink: 0;
         }}
 
-        .p-dialog-title {{
-            font-size: 18px;
-            font-weight: 600;
-            color: #333;
-        }}
+        .p-dialog-title {{ font-size: 16px; font-weight: 600; color: #333; }}
 
         .p-dialog-content {{
-            padding: 20px;
+            padding: 14px;
             flex: 1;
             overflow: hidden;
             display: flex;
             flex-direction: column;
+            gap: 10px;
         }}
 
-        .subheader {{
-            font-size: 16px;
-            color: #555;
-            margin-bottom: 15px;
-            font-weight: 500;
+        .status-info {{
+            background: #e8f5e9;
+            border: 1px solid #4caf50;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            color: #2e7d32;
+            flex-shrink: 0;
         }}
 
+        /* ── Controls bar ───────────────────────────────────────────── */
         .controls {{
             background: #fafafa;
             border: 1px solid #e0e0e0;
             border-radius: 4px;
-            padding: 12px;
-            margin-bottom: 15px;
+            padding: 10px 12px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             flex-wrap: wrap;
-            gap: 10px;
+            gap: 8px;
             flex-shrink: 0;
         }}
 
-        .control-group {{
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            flex-wrap: wrap;
-        }}
+        .control-group {{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }}
 
         .btn {{
             background: white;
             color: #333;
             border: 1px solid #ccc;
-            padding: 6px 14px;
+            padding: 5px 12px;
             border-radius: 4px;
-            font-size: 13px;
+            font-size: 12px;
             cursor: pointer;
             transition: all 0.2s;
             font-weight: 500;
         }}
+        .btn:hover  {{ background: #f0f0f0; border-color: #999; }}
+        .btn.active {{ background: #2196F3; border-color: #2196F3; color: white; }}
+        .btn.download {{ background: #4caf50; border-color: #4caf50; color: white; }}
+        .btn.download:hover {{ background: #45a049; }}
 
-        .btn:hover {{
-            background: #f0f0f0;
-            border-color: #999;
-        }}
-
-        .btn.active {{
-            background: #2196F3;
-            border-color: #2196F3;
-            color: white;
-        }}
+        .log-count {{ font-size: 12px; color: #666; padding: 0 6px; }}
 
-        .btn.download {{
-            background: #4caf50;
-            border-color: #4caf50;
-            color: white;
-        }}
-
-        .btn.download:hover {{
-            background: #45a049;
-        }}
-
-        .log-count {{
-            font-size: 12px;
-            color: #666;
-            padding: 0 10px;
-        }}
-
-        .filter-group {{
-            display: flex;
-            gap: 6px;
-            flex-wrap: wrap;
-        }}
+        .filter-group {{ display: flex; gap: 5px; flex-wrap: wrap; }}
 
         .filter-btn {{
-            padding: 4px 10px;
+            padding: 3px 9px;
             font-size: 11px;
             border-radius: 4px;
             border: 1px solid #ddd;
@@ -229,171 +313,96 @@
             font-weight: 500;
         }}
 
-        .filter-btn.level-info {{
-            background: #e3f2fd;
-            color: #1976d2;
-            border-color: #90caf9;
-        }}
-
-        .filter-btn.level-warning {{
-            background: #fff3e0;
-            color: #f57c00;
-            border-color: #ffb74d;
-        }}
-
-        .filter-btn.level-error {{
-            background: #ffebee;
-            color: #c62828;
-            border-color: #ef5350;
-        }}
-
-        .filter-btn.level-debug {{
-            background: #fafafa;
-            color: #757575;
-            border-color: #e0e0e0;
-        }}
-
-        .filter-btn.level-chiptool {{
-            background: #e0f2f1;
-            color: #00796b;
-            border-color: #4db6ac;
-        }}
-
-        .filter-btn.level-python {{
-            background: #f3e5f5;
-            color: #6a1b9a;
-            border-color: #ba68c8;
-        }}
-
-        .filter-btn.active {{
-            opacity: 1;
-            font-weight: 600;
-            border-width: 2px;
-        }}
+        .filter-btn.level-info     {{ background: #e3f2fd; color: #1976d2; border-color: #90caf9; }}
+        .filter-btn.level-warning  {{ background: #fff3e0; color: #f57c00; border-color: #ffb74d; }}
+        .filter-btn.level-error    {{ background: #ffebee; color: #c62828; border-color: #ef5350; }}
+        .filter-btn.level-debug    {{ background: #fafafa; color: #757575; border-color: #e0e0e0; }}
+        .filter-btn.level-chiptool {{ background: #e0f2f1; color: #00796b; border-color: #4db6ac; }}
+        .filter-btn.level-python   {{ background: #f3e5f5; color: #6a1b9a; border-color: #ba68c8; }}
 
-        .filter-btn:not(.active) {{
-            opacity: 0.4;
-        }}
+        .filter-btn.active     {{ opacity: 1; font-weight: 600; border-width: 2px; }}
+        .filter-btn:not(.active) {{ opacity: 0.4; }}
+        .filter-btn:hover      {{ opacity: 1; }}
 
-        .filter-btn:hover {{
-            opacity: 1;
+        .search-box {{
+            padding: 5px 10px;
+            background: white;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            color: #333;
+            font-size: 12px;
+            font-family: inherit;
+            width: 180px;
         }}
+        .search-box:focus {{ outline: none; border-color: #2196F3; }}
 
+        /* ── Log container ──────────────────────────────────────────── */
         .log-container {{
             flex: 1;
             overflow-y: auto;
             font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-            font-size: 13px;
+            font-size: 12px;
             line-height: 1.5;
             background: #fafafa;
             border: 1px solid #e0e0e0;
             border-radius: 4px;
-            padding: 10px;
+            padding: 8px;
         }}
 
         .log-entry {{
-            padding: 4px 8px;
-            margin: 2px 0;
+            padding: 3px 7px;
+            margin: 1px 0;
             border-left: 3px solid transparent;
             word-wrap: break-word;
             white-space: pre-wrap;
-            transition: background 0.1s;
             background: white;
             border-radius: 2px;
         }}
+        .log-entry:hover {{ background: #f5f5f5; }}
 
-        .log-entry:hover {{
-            background: #f5f5f5;
-        }}
-
-        .log-entry.level-info {{
-            border-left-color: #2196F3;
-        }}
-
-        .log-entry.level-warning {{
-            border-left-color: #ff9800;
-            background: #fff8e1;
-        }}
-
-        .log-entry.level-error {{
-            border-left-color: #f44336;
-            background: #ffebee;
-        }}
-
-        .log-entry.level-debug {{
-            border-left-color: #9e9e9e;
-            background: #fafafa;
-        }}
-
-        .log-entry.level-success {{
-            border-left-color: #4caf50;
-            background: #e8f5e9;
-        }}
-
-        .log-entry.level-chiptool {{
-            border-left-color: #009688;
-            background: #e0f2f1;
-        }}
-
-        .log-entry.level-python_test {{
-            border-left-color: #9c27b0;
-            background: #f3e5f5;
-        }}
-
-        .log-timestamp {{
-            color: #666;
-            font-weight: 500;
-            margin-right: 10px;
-        }}
+        .log-entry.level-info       {{ border-left-color: #2196F3; }}
+        .log-entry.level-warning    {{ border-left-color: #ff9800; background: #fff8e1; }}
+        .log-entry.level-error      {{ border-left-color: #f44336; background: #ffebee; }}
+        .log-entry.level-debug      {{ border-left-color: #9e9e9e; background: #fafafa; }}
+        .log-entry.level-success    {{ border-left-color: #4caf50; background: #e8f5e9; }}
+        .log-entry.level-chiptool   {{ border-left-color: #009688; background: #e0f2f1; }}
+        .log-entry.level-python_test{{ border-left-color: #9c27b0; background: #f3e5f5; }}
 
+        .log-timestamp {{ color: #666; font-weight: 500; margin-right: 8px; }}
         .log-level {{
             font-weight: 700;
-            margin-right: 10px;
-            padding: 2px 6px;
+            margin-right: 8px;
+            padding: 1px 5px;
             border-radius: 3px;
             font-size: 10px;
             display: inline-block;
-            min-width: 50px;
+            min-width: 48px;
             text-align: center;
         }}
+        .log-level.INFO       {{ background: #2196F3; color: white; }}
+        .log-level.WARNING    {{ background: #ff9800; color: white; }}
+        .log-level.ERROR      {{ background: #f44336; color: white; }}
+        .log-level.DEBUG      {{ background: #9e9e9e; color: white; }}
+        .log-level.SUCCESS    {{ background: #4caf50; color: white; }}
+        .log-level.CHIPTOOL   {{ background: #009688; color: white; }}
+        .log-level.PYTHON_TEST{{ background: #9c27b0; color: white; }}
 
-        .log-level.INFO {{
-            background: #2196F3;
-            color: white;
-        }}
+        .log-message {{ color: #333; }}
 
-        .log-level.WARNING {{
-            background: #ff9800;
-            color: white;
-        }}
+        .highlight {{ background: #ffeb3b; color: #000; padding: 0 2px; border-radius: 2px; }}
 
-        .log-level.ERROR {{
-            background: #f44336;
-            color: white;
-        }}
-
-        .log-level.DEBUG {{
-            background: #9e9e9e;
-            color: white;
-        }}
-
-        .log-level.SUCCESS {{
-            background: #4caf50;
-            color: white;
-        }}
-
-        .log-level.CHIPTOOL {{
-            background: #009688;
-            color: white;
-        }}
-
-        .log-level.PYTHON_TEST {{
-            background: #9c27b0;
-            color: white;
+        /* Step scroll-target: a faint horizontal rule rendered in the log pane when a
+           step's DOM-index anchor is resolved. No server-side markers needed. */
+        .step-jump-target {{
+            outline: 2px solid #7c4dff;
+            outline-offset: -1px;
+            border-radius: 2px;
         }}
 
-        .log-message {{
-            color: #333;
+        /* Log entry that anchors a step ("Executing Test Step: …") — subtle indicator */
+        .step-anchor-entry {{
+            border-left-color: #7c4dff !important;
+            font-weight: 500;
         }}
 
         .empty-state {{
@@ -403,425 +412,723 @@
             justify-content: center;
             height: 100%;
             color: #999;
-            font-size: 14px;
-        }}
-
-        .empty-state-icon {{
-            font-size: 48px;
-            margin-bottom: 16px;
-            opacity: 0.5;
-        }}
-
-        .log-container::-webkit-scrollbar {{
-            width: 10px;
-        }}
-
-        .log-container::-webkit-scrollbar-track {{
-            background: #f1f1f1;
-        }}
-
-        .log-container::-webkit-scrollbar-thumb {{
-            background: #ccc;
-            border-radius: 5px;
-        }}
-
-        .log-container::-webkit-scrollbar-thumb:hover {{
-            background: #999;
-        }}
-
-        .search-box {{
-            padding: 6px 10px;
-            background: white;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            color: #333;
             font-size: 13px;
-            font-family: inherit;
-            width: 200px;
-        }}
-
-        .search-box:focus {{
-            outline: none;
-            border-color: #2196F3;
-        }}
-
-        .highlight {{
-            background: #ffeb3b;
-            color: #000;
-            padding: 0 2px;
-            border-radius: 2px;
-        }}
-
-        .status-info {{
-            background: #e8f5e9;
-            border: 1px solid #4caf50;
-            padding: 10px;
-            border-radius: 4px;
-            margin-bottom: 15px;
-            font-size: 13px;
-            color: #2e7d32;
         }}
+        .empty-state-icon {{ font-size: 40px; margin-bottom: 12px; opacity: 0.5; }}
+
+        /* ── Scrollbars ─────────────────────────────────────────────── */
+        .log-container::-webkit-scrollbar,
+        .tree-content::-webkit-scrollbar {{ width: 8px; }}
+        .log-container::-webkit-scrollbar-track,
+        .tree-content::-webkit-scrollbar-track  {{ background: #f1f1f1; }}
+        .log-container::-webkit-scrollbar-thumb,
+        .tree-content::-webkit-scrollbar-thumb  {{ background: #ccc; border-radius: 4px; }}
+        .log-container::-webkit-scrollbar-thumb:hover,
+        .tree-content::-webkit-scrollbar-thumb:hover {{ background: #999; }}
     </style>
 </head>
 <body>
-    <div class="matter-header">
-        <div class="header-start">
-            <div class="header-title">Matter Certification Tool</div>
+
+<!-- ── Top header ─────────────────────────────────────────────────── -->
+<div class="matter-header">
+    <div class="header-start">
+        <div class="header-title">Matter Certification Tool</div>
+    </div>
+    <div class="header-end">
+        <div id="statusIndicator" class="status-indicator disconnected">
+            <span class="status-dot"></span>
+            <span id="statusText">Connecting...</span>
         </div>
-        <div class="header-end">
-            <div id="statusIndicator" class="status-indicator disconnected">
-                <span class="status-dot"></span>
-                <span id="statusText">Connecting...</span>
-            </div>
-            <div class="cli-indicator">CLI</div>
-            <div class="version-info">
-                <div>Log Viewer</div>
-                <div style="font-size: 10px; color: #999;">Real-Time Stream</div>
+        <div class="cli-indicator">CLI</div>
+        <div class="version-info">
+            <div>Log Viewer</div>
+            <div style="font-size:10px;color:#999;">Real-Time Stream</div>
+        </div>
+    </div>
+</div>
+
+<!-- ── Refresh notification banner ─────────────────────────────────── -->
+<div id="refreshBanner" class="refresh-banner hidden">
+    <span class="banner-icon">&#8505;</span>
+    <span class="banner-msg">
+        New execution started: <strong id="newRunTitle"></strong>
+    </span>
+    <button class="btn-reload" onclick="switchToNewExecution()">Switch to new execution</button>
+    <button class="btn-dismiss" onclick="dismissBanner()">Stay here</button>
+</div>
+
+<!-- ── Main area ───────────────────────────────────────────────────── -->
+<div class="main-content">
+
+    <!-- Tree sidebar -->
+    <div class="tree-panel">
+        <div class="tree-panel-header">&#9776; Execution Tree</div>
+        <div class="tree-empty" id="treeEmpty">
+            <div>
+                <div style="font-size:28px;margin-bottom:8px;">&#9203;</div>
+                <div>Waiting for<br>execution to start&hellip;</div>
             </div>
         </div>
+        <div id="treeContent" class="tree-content" style="display:none;"></div>
     </div>
 
-    <div class="main-content">
-        <div class="p-dialog" role="dialog">
-            <div class="p-dialog-header">
-                <span class="p-dialog-title">📋 Real-Time Log Viewer - {test_run_title}</span>
+    <!-- Log content panel -->
+    <div class="content-panel">
+        <div class="p-dialog-header">
+            <span class="p-dialog-title">&#128203; Real-Time Log Viewer &mdash; {test_run_title}</span>
+        </div>
+
+        <div class="p-dialog-content">
+            <div class="status-info">
+                &#128268; Live logs streaming in real-time from test execution
             </div>
 
-            <div class="p-dialog-content">
-                <div class="status-info">
-                    &#128268; Live logs streaming in real-time from test execution
+            <div class="controls">
+                <div class="control-group">
+                    <button id="clearBtn"      class="btn"          onclick="clearLogs()">Clear</button>
+                    <button id="autoScrollBtn" class="btn active"   onclick="toggleAutoScroll()">Auto-scroll</button>
+                    <button id="downloadBtn"   class="btn download" onclick="downloadLogs()">Download Logs</button>
+                    <input  type="text" id="searchBox" class="search-box"
+                            placeholder="Search logs&hellip;" oninput="filterLogs()">
+                    <span class="log-count">Logs: <span id="logCount">0</span></span>
                 </div>
-
-                <div class="controls">
-                    <div class="control-group">
-                        <button id="clearBtn" class="btn" onclick="clearLogs()">Clear</button>
-                        <button id="autoScrollBtn" class="btn active" onclick="toggleAutoScroll()">Auto-scroll</button>
-                        <button id="downloadBtn" class="btn download" onclick="downloadLogs()">Download Logs</button>
-                        <input type="text" id="searchBox" class="search-box" placeholder="Search logs..." oninput="filterLogs()">
-                        <span class="log-count">Logs: <span id="logCount">0</span></span>
-                    </div>
-                    <div class="filter-group">
-                        <button class="filter-btn level-info active" onclick="toggleFilter('INFO')">INFO</button>
-                        <button class="filter-btn level-warning active" onclick="toggleFilter('WARNING')">WARN</button>
-                        <button class="filter-btn level-error active" onclick="toggleFilter('ERROR')">ERROR</button>
-                        <button class="filter-btn level-debug" onclick="toggleFilter('DEBUG')">DEBUG</button>
-                        <button class="filter-btn level-chiptool active" onclick="toggleFilter('CHIPTOOL')">CHIP</button>
-                        <button class="filter-btn level-python active" onclick="toggleFilter('PYTHON_TEST')">PYTHON</button>
-                    </div>
+                <div class="filter-group">
+                    <button class="filter-btn level-info     active" onclick="toggleFilter(this, 'INFO')">INFO</button>
+                    <button class="filter-btn level-warning  active" onclick="toggleFilter(this, 'WARNING')">WARN</button>
+                    <button class="filter-btn level-error    active" onclick="toggleFilter(this, 'ERROR')">ERROR</button>
+                    <button class="filter-btn level-debug"           onclick="toggleFilter(this, 'DEBUG')">DEBUG</button>
+                    <button class="filter-btn level-chiptool active" onclick="toggleFilter(this, 'CHIPTOOL')">CHIP</button>
+                    <button class="filter-btn level-python   active" onclick="toggleFilter(this, 'PYTHON_TEST')">PYTHON</button>
                 </div>
+            </div>
 
-                <div class="log-container" id="logContainer">
-                    <div class="empty-state">
-                        <div class="empty-state-icon">📡</div>
-                        <div>Waiting for logs...</div>
-                        <div style="font-size: 12px; margin-top: 8px; color: #bbb;">Logs will appear here in real-time as tests execute</div>
+            <div class="log-container" id="logContainer">
+                <div class="empty-state">
+                    <div class="empty-state-icon">&#128225;</div>
+                    <div>Waiting for logs&hellip;</div>
+                    <div style="font-size:11px;margin-top:6px;color:#bbb;">
+                        Logs will appear here in real-time as tests execute
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <script>
-        let eventSource = null;
-        let autoScroll = true;
-        let logCount = 0;
-        let activeFilters = new Set(['INFO', 'WARNING', 'ERROR', 'CHIPTOOL', 'PYTHON_TEST', 'SUCCESS']);
-        let allLogs = [];
-        let logBatchQueue = [];
-        let batchProcessing = false;
-        let lastBatchTime = 0;
-        const BATCH_INTERVAL_MS = 50;
-        const MAX_BATCH_SIZE = 50;
-
-        function connectToLogStream() {{
-            const statusIndicator = document.getElementById('statusIndicator');
-            const statusText = document.getElementById('statusText');
-            
-            eventSource = new EventSource('/api/logs/stream');
-            
-            eventSource.addEventListener('connected', function(e) {{
-                console.log('Connected to log stream');
-                statusIndicator.className = 'status-indicator connected';
-                statusText.textContent = 'Connected';
-            }});
-            
-            eventSource.addEventListener('log', function(e) {{
-                const logEntry = JSON.parse(e.data);
-                logBatchQueue.push(logEntry);
-                scheduleBatchProcessing();
-            }});
-            
-            eventSource.addEventListener('keepalive', function(e) {{
-                // Silent keepalive
-            }});
-            
-            eventSource.addEventListener('end', function(e) {{
-                console.log('Log stream ended');
-                statusIndicator.className = 'status-indicator disconnected';
-                statusText.textContent = 'Stream Ended';
-                eventSource.close();
-                processBatchImmediately();
-            }});
-            
-            eventSource.onerror = function(e) {{
-                console.error('EventSource error:', e);
-                statusIndicator.className = 'status-indicator disconnected';
-                statusText.textContent = 'Disconnected';
-                
-                processBatchImmediately();
-                
-                setTimeout(() => {{
-                    if (eventSource.readyState === EventSource.CLOSED) {{
-                        console.log('Attempting to reconnect...');
-                        statusText.textContent = 'Reconnecting...';
-                        connectToLogStream();
+    </div><!-- .content-panel -->
+
+</div><!-- .main-content -->
+
+<script>
+    // ── State ────────────────────────────────────────────────────────
+    let eventSource      = null;
+    let autoScroll       = true;
+    let logCount         = 0;
+    let activeFilters    = new Set(['INFO', 'WARNING', 'ERROR', 'CHIPTOOL', 'PYTHON_TEST', 'SUCCESS']);
+    let allLogs          = [];
+    let logBatchQueue    = [];
+    let batchProcessing  = false;
+    let lastBatchTime    = 0;
+    let wasDisconnected  = false;
+    let currentRunTitle  = '{test_run_title}';  // initial title injected by server
+
+    // When true, all incoming SSE events from a new execution are ignored so the
+    // current page content (old execution) stays untouched until the user chooses.
+    let newExecutionPending  = false;
+
+    // Events that arrive while newExecutionPending is true get buffered here.
+    // On same-execution reconnect they are replayed; on new-execution they are discarded.
+    let pendingEventBuffer   = [];
+
+    // Interval handle for /api/status polling after a clean stream end.
+    let statusPollInterval   = null;
+
+    // Maps stepId → log-entry index at the moment the step became 'executing'.
+    const stepLogIndex = {{}};
+
+    // Maps step title → ordered list of stepIds built from the tree snapshot.
+    let stepTitleToIds = {{}};
+
+    const BATCH_INTERVAL_MS = 50;
+    const MAX_BATCH_SIZE    = 50;
+
+    // ── /api/status polling ──────────────────────────────────────────
+    // Used after a clean stream end so we never auto-connect a new SSE session
+    // (which would overwrite the page before the user has seen the banner).
+    function startStatusPolling() {{
+        if (statusPollInterval) return;
+        const indicator = document.getElementById('statusIndicator');
+        const statusTxt = document.getElementById('statusText');
+        statusTxt.textContent = 'Stream Ended — watching for next execution…';
+        statusPollInterval = setInterval(() => {{
+            fetch('/api/status')
+                .then(r => r.json())
+                .then(s => {{
+                    if (s.run_title && s.run_title !== currentRunTitle) {{
+                        stopStatusPolling();
+                        newExecutionPending = true;
+                        showRefreshBanner(s.run_title);
                     }}
-                }}, 3000);
-            }};
-        }}
-
-        function scheduleBatchProcessing() {{
-            if (batchProcessing) return;
-            
-            const now = Date.now();
-            const timeSinceLastBatch = now - lastBatchTime;
-            
-            if (timeSinceLastBatch >= BATCH_INTERVAL_MS || logBatchQueue.length >= MAX_BATCH_SIZE) {{
-                processBatch();
-            }} else {{
-                batchProcessing = true;
-                setTimeout(processBatch, BATCH_INTERVAL_MS - timeSinceLastBatch);
+                }})
+                .catch(() => {{}});  // server not up yet — keep polling
+        }}, 3000);
+    }}
+
+    function stopStatusPolling() {{
+        if (statusPollInterval) {{
+            clearInterval(statusPollInterval);
+            statusPollInterval = null;
+        }}
+    }}
+
+    // ── SSE connection ───────────────────────────────────────────────
+    function connectToLogStream() {{
+        const indicator = document.getElementById('statusIndicator');
+        const statusTxt = document.getElementById('statusText');
+
+        eventSource = new EventSource('/api/logs/stream');
+
+        eventSource.addEventListener('connected', function(e) {{
+            indicator.className = 'status-indicator connected';
+            statusTxt.textContent = 'Connected';
+
+            if (wasDisconnected) {{
+                // Preemptively block incoming events until the status check resolves.
+                // Events are buffered (not silently dropped) so they can be replayed
+                // if it turns out to be the same execution reconnecting.
+                newExecutionPending = true;
+                pendingEventBuffer = [];
+                fetch('/api/status')
+                    .then(r => r.json())
+                    .then(s => {{
+                        if (s.run_title && s.run_title !== currentRunTitle) {{
+                            pendingEventBuffer = [];  // Discard — new execution
+                            showRefreshBanner(s.run_title);
+                            // newExecutionPending stays true — banner is the gate
+                        }} else {{
+                            // Same execution reconnected (e.g. network hiccup) — replay buffered events
+                            newExecutionPending = false;
+                            replayBuffered();
+                        }}
+                    }})
+                    .catch(() => {{
+                        newExecutionPending = false;
+                        replayBuffered();
+                    }});
             }}
-        }}
+            wasDisconnected = false;
+        }});
 
-        function processBatchImmediately() {{
-            if (logBatchQueue.length > 0) {{
-                processBatch();
-            }}
-        }}
+        eventSource.addEventListener('log', function(e) {{
+            if (newExecutionPending) {{ pendingEventBuffer.push({{type:'log', data:JSON.parse(e.data)}}); return; }}
+            logBatchQueue.push(JSON.parse(e.data));
+            scheduleBatchProcessing();
+        }});
 
-        function processBatch() {{
-            if (logBatchQueue.length === 0) {{
-                batchProcessing = false;
-                return;
-            }}
-            
-            const container = document.getElementById('logContainer');
-            const emptyState = container.querySelector('.empty-state');
-            
-            if (emptyState) {{
-                container.innerHTML = '';
-            }}
-            
-            const fragment = document.createDocumentFragment();
-            const batchSize = Math.min(logBatchQueue.length, MAX_BATCH_SIZE);
-            const batch = logBatchQueue.splice(0, batchSize);
-            
-            batch.forEach(entry => {{
-                allLogs.push(entry);
-                logCount++;
-                
-                const logDiv = createLogElement(entry);
-                fragment.appendChild(logDiv);
-            }});
-            
-            container.appendChild(fragment);
-            
-            document.getElementById('logCount').textContent = logCount;
-            
-            if (autoScroll) {{
-                container.scrollTop = container.scrollHeight;
-            }}
-            
-            lastBatchTime = Date.now();
-            batchProcessing = false;
-            
-            if (logBatchQueue.length > 0) {{
-                scheduleBatchProcessing();
-            }}
-        }}
+        eventSource.addEventListener('tree_init', function(e) {{
+            if (newExecutionPending) {{ pendingEventBuffer.push({{type:'tree_init', data:JSON.parse(e.data)}}); return; }}
+            renderTree(JSON.parse(e.data));
+        }});
 
-        function createLogElement(entry) {{
-            const logDiv = document.createElement('div');
-            const level = entry.level || 'INFO';
-            logDiv.className = `log-entry level-${{level.toLowerCase()}}`;
-            logDiv.dataset.level = level;
-            logDiv.dataset.message = entry.message || '';
-            
-            const timestamp = entry.timestamp || new Date().toISOString();
-            const timeStr = new Date(timestamp).toLocaleTimeString('en-US', {{ hour12: false }});
-            
-            logDiv.innerHTML = `<span class="log-timestamp">${{timeStr}}</span><span class="log-level ${{level}}">${{level}}</span><span class="log-message">${{escapeHtml(entry.message || '')}}</span>`;
-            
-            if (!activeFilters.has(level)) {{
-                logDiv.style.display = 'none';
+        eventSource.addEventListener('tree_update', function(e) {{
+            if (newExecutionPending) {{ pendingEventBuffer.push({{type:'tree_update', data:JSON.parse(e.data)}}); return; }}
+            const update = JSON.parse(e.data);
+            if (update.node_type === 'step' && update.state === 'executing') {{
+                const stepId = `step-${{update.suite_idx}}-${{update.case_idx}}-${{update.step_idx}}`;
+                stepLogIndex[stepId] = logCount;
             }}
-            
-            return logDiv;
-        }}
+            applyTreeUpdate(update);
+        }});
 
-        function addLogEntry(entry) {{
-            logBatchQueue.push(entry);
-            scheduleBatchProcessing();
-        }}
+        eventSource.addEventListener('step_marker', function(e) {{
+            // Legacy event — no-op; step markers are no longer emitted by the server.
+        }});
 
-        function clearLogs() {{
-            const container = document.getElementById('logContainer');
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">📋</div>
-                    <div>Logs cleared</div>
-                </div>
-            `;
-            allLogs = [];
-            logCount = 0;
-            document.getElementById('logCount').textContent = '0';
-        }}
-
-        function toggleAutoScroll() {{
-            autoScroll = !autoScroll;
-            const btn = document.getElementById('autoScrollBtn');
-            btn.classList.toggle('active', autoScroll);
-            
-            if (autoScroll) {{
-                const container = document.getElementById('logContainer');
-                container.scrollTop = container.scrollHeight;
-            }}
-        }}
+        eventSource.addEventListener('keepalive', function(e) {{
+            // silent
+        }});
 
-        function toggleFilter(level) {{
-            if (activeFilters.has(level)) {{
-                activeFilters.delete(level);
-            }} else {{
-                activeFilters.add(level);
-            }}
-            
-            const btn = event.target;
-            btn.classList.toggle('active');
-            
-            filterLogs();
-        }}
-
-        function filterLogs() {{
-            const searchText = document.getElementById('searchBox').value.toLowerCase();
-            const logEntries = document.querySelectorAll('.log-entry');
-            
-            logEntries.forEach(entry => {{
-                const level = entry.dataset.level;
-                const message = entry.dataset.message.toLowerCase();
-                
-                const levelMatch = activeFilters.has(level);
-                const searchMatch = !searchText || message.includes(searchText);
-                
-                entry.style.display = (levelMatch && searchMatch) ? 'block' : 'none';
-                
-                if (searchText && searchMatch) {{
-                    const messageEl = entry.querySelector('.log-message');
-                    const originalText = entry.dataset.message;
-                    const regex = new RegExp(`(${{escapeRegex(searchText)}})`, 'gi');
-                    messageEl.innerHTML = escapeHtml(originalText).replace(regex, '<span class="highlight">$1</span>');
-                }} else {{
-                    const messageEl = entry.querySelector('.log-message');
-                    messageEl.textContent = entry.dataset.message;
+        eventSource.addEventListener('end', function(e) {{
+            // Execution finished cleanly. Close the SSE connection and switch to
+            // polling so we never auto-flow new-execution data into the current page.
+            indicator.className = 'status-indicator disconnected';
+            eventSource.close();
+            processBatchImmediately();
+            wasDisconnected = true;
+            startStatusPolling();
+        }});
+
+        eventSource.onerror = function(e) {{
+            // Unexpected connection drop (e.g. network hiccup mid-execution).
+            // Reconnect normally; the connected handler will verify the title.
+            indicator.className = 'status-indicator disconnected';
+            statusTxt.textContent = 'Disconnected';
+            wasDisconnected = true;
+            processBatchImmediately();
+
+            setTimeout(() => {{
+                if (eventSource.readyState === EventSource.CLOSED) {{
+                    statusTxt.textContent = 'Reconnecting…';
+                    connectToLogStream();
                 }}
-            }});
+            }}, 3000);
+        }};
+    }}
+
+    // ── Refresh banner ───────────────────────────────────────────────
+    function showRefreshBanner(newTitle) {{
+        document.getElementById('newRunTitle').textContent = newTitle;
+        document.getElementById('refreshBanner').classList.remove('hidden');
+    }}
+
+    function switchToNewExecution() {{
+        window.location.reload();
+    }}
+
+    function dismissBanner() {{
+        // User wants to stay on the current execution's data.
+        // Stop polling, clear buffer, and close any open SSE connection.
+        stopStatusPolling();
+        pendingEventBuffer = [];
+        newExecutionPending = false;
+        if (eventSource && eventSource.readyState !== EventSource.CLOSED) {{
+            eventSource.close();
+        }}
+        document.getElementById('refreshBanner').classList.add('hidden');
+        document.getElementById('statusIndicator').className = 'status-indicator disconnected';
+        document.getElementById('statusText').textContent = 'Stream Ended';
+    }}
+
+    function replayBuffered() {{
+        const buffered = pendingEventBuffer;
+        pendingEventBuffer = [];
+        for (const evt of buffered) {{
+            if (evt.type === 'log') {{
+                logBatchQueue.push(evt.data);
+            }} else if (evt.type === 'tree_init') {{
+                renderTree(evt.data);
+            }} else if (evt.type === 'tree_update') {{
+                const update = evt.data;
+                if (update.node_type === 'step' && update.state === 'executing') {{
+                    const stepId = `step-${{update.suite_idx}}-${{update.case_idx}}-${{update.step_idx}}`;
+                    stepLogIndex[stepId] = logCount;
+                }}
+                applyTreeUpdate(update);
+            }}
         }}
+        if (buffered.length > 0) scheduleBatchProcessing();
+    }}
+
+    // ── Tree rendering ───────────────────────────────────────────────
+    const STATE_ICONS = {{
+        pending:        {{ icon: '○', cls: 's-pending'        }},  // ○
+        executing:      {{ icon: '▶', cls: 's-executing'      }},  // ▶
+        passed:         {{ icon: '✓', cls: 's-passed'         }},  // ✓
+        failed:         {{ icon: '✗', cls: 's-failed'         }},  // ✗
+        error:          {{ icon: '⚠', cls: 's-error'          }},  // ⚠
+        skipped:        {{ icon: '⊘', cls: 's-skipped'        }},  // ⊘
+        not_applicable: {{ icon: '—', cls: 's-not_applicable' }},  // —
+        cancelled:      {{ icon: '×', cls: 's-cancelled'      }},  // ×
+    }};
+
+    function stateInfo(state) {{
+        return STATE_ICONS[state] || STATE_ICONS['pending'];
+    }}
+
+    function renderTree(tree) {{
+        document.getElementById('treeEmpty').style.display   = 'none';
+        const content = document.getElementById('treeContent');
+        content.style.display = 'block';
+        content.innerHTML = '';
+
+        // Build title → [stepId, …] lookup so createLogElement() can anchor
+        // "Executing Test Step: <title>" log lines to the correct tree node.
+        stepTitleToIds = {{}};
+        (tree.suites || []).forEach((suite, si) => {{
+            (suite.cases || []).forEach((cas, ci) => {{
+                (cas.steps || []).forEach((step, ki) => {{
+                    const id = `step-${{si}}-${{ci}}-${{ki}}`;
+                    if (!stepTitleToIds[step.title]) stepTitleToIds[step.title] = [];
+                    stepTitleToIds[step.title].push(id);
+                }});
+            }});
+        }});
 
-        function downloadLogs() {{
-            // First try server download (if server is still running)
-            fetch('/download_logs')
-                .then(response => {{
-                    if (response.ok) {{
-                        return response.blob();
-                    }}
-                    throw new Error('Server not available');
-                }})
-                .then(blob => {{
-                    // Server download successful
-                    const url = window.URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = 'test_run_logs.log';
-                    document.body.appendChild(a);
-                    a.click();
-                    window.URL.revokeObjectURL(url);
-                    document.body.removeChild(a);
-                }})
-                .catch(error => {{
-                    // Server not available, use client-side download
-                    console.log('Server unavailable, using client-side download');
-                    downloadLogsClientSide();
+        // Run node
+        const runEl = makeNode('run', 'tree-run', null, null, null, tree.title, '', tree.state, false);
+        content.appendChild(runEl);
+
+        // Suites
+        const suitesEl = document.createElement('div');
+        suitesEl.className = 'tree-children';
+        suitesEl.id = 'children-run';
+
+        (tree.suites || []).forEach((suite, si) => {{
+            const suiteEl = makeNode('suite', `tree-suite-${{si}}`, si, null, null, suite.title, '', suite.state, true);
+            suitesEl.appendChild(suiteEl);
+
+            const casesEl = document.createElement('div');
+            casesEl.className = 'tree-children';
+            casesEl.id = `children-suite-${{si}}`;
+
+            (suite.cases || []).forEach((cas, ci) => {{
+                const caseEl = makeNode('case', `tree-case-${{si}}-${{ci}}`, si, ci, null,
+                                        cas.title, cas.public_id, cas.state, true);
+                casesEl.appendChild(caseEl);
+
+                const stepsEl = document.createElement('div');
+                stepsEl.className = 'tree-children';
+                stepsEl.id = `children-case-${{si}}-${{ci}}`;
+
+                (cas.steps || []).forEach((step, ki) => {{
+                    const stepEl = makeNode('step', `tree-step-${{si}}-${{ci}}-${{ki}}`, si, ci, ki,
+                                           step.title, '', step.state, false);
+                    stepsEl.appendChild(stepEl);
                 }});
-        }}
 
-        function downloadLogsClientSide() {{
-            // Build log content from stored logs
-            let logContent = '';
-            allLogs.forEach(entry => {{
-                const timestamp = entry.timestamp || new Date().toISOString();
-                const level = entry.level || 'INFO';
-                const message = entry.message || '';
-                // Replace literal \n strings with actual newlines, then add entry
-                const cleanMessage = message.replace(/\\n/g, '\n');
-                logContent += `${{timestamp}} [${{level}}] ${{cleanMessage}}\n`;
+                casesEl.appendChild(stepsEl);
             }});
 
-            if (logContent === '') {{
-                alert('No logs to download');
-                return;
-            }}
+            suitesEl.appendChild(casesEl);
+        }});
 
-            // Create blob and download
-            const blob = new Blob([logContent], {{ type: 'text/plain;charset=utf-8' }});
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            
-            // Generate filename with current timestamp
-            const now = new Date();
-            const dateStr = now.toISOString().slice(0,19).replace(/[T:]/g, '-');
-            a.download = `test_run_logs_${{dateStr}}.log`;
-            
-            document.body.appendChild(a);
-            a.click();
-            window.URL.revokeObjectURL(url);
-            document.body.removeChild(a);
-            
-            console.log(`Downloaded ${{allLogs.length}} log entries client-side`);
-        }}
-
-        function escapeHtml(text) {{
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }}
-
-        function escapeRegex(text) {{
-            return text.replace(/[.*+?^${{}}()|[\\]\\\\]/g, '\\\\$&');
-        }}
-
-        document.getElementById('logContainer').addEventListener('scroll', function() {{
-            const container = this;
-            const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
-            
-            if (!isNearBottom && autoScroll) {{
-                autoScroll = false;
-                document.getElementById('autoScrollBtn').classList.remove('active');
-            }} else if (isNearBottom && !autoScroll) {{
-                autoScroll = true;
-                document.getElementById('autoScrollBtn').classList.add('active');
+        content.appendChild(suitesEl);
+
+        // Auto-expand the first suite and its cases if there is only one suite.
+        if ((tree.suites || []).length === 1) {{
+            const firstSuiteChildren = document.getElementById('children-suite-0');
+            if (firstSuiteChildren) {{
+                firstSuiteChildren.classList.remove('collapsed');
+                const toggleEl = document.querySelector('#tree-suite-0 .tree-toggle');
+                if (toggleEl) toggleEl.classList.add('expanded');
+            }}
+            if ((tree.suites[0].cases || []).length === 1) {{
+                const firstCaseChildren = document.getElementById('children-case-0-0');
+                if (firstCaseChildren) {{
+                    firstCaseChildren.classList.remove('collapsed');
+                    const toggleEl = document.querySelector('#tree-case-0-0 .tree-toggle');
+                    if (toggleEl) toggleEl.classList.add('expanded');
+                }}
+            }}
+        }}
+    }}
+
+    function makeNode(level, id, si, ci, ki, label, publicId, state, hasChildren) {{
+        const info = stateInfo(state);
+        const div  = document.createElement('div');
+        div.className = `tree-node level-${{level}}${{state === 'executing' ? ' executing' : ''}}`;
+        div.id = id;
+
+        // Toggle arrow (for collapsible nodes)
+        const toggle = document.createElement('span');
+        toggle.className = hasChildren ? 'tree-toggle expanded' : 'tree-toggle';
+        toggle.textContent = hasChildren ? '▶' : '';
+        if (!hasChildren) toggle.style.visibility = 'hidden';
+
+        // State icon
+        const icon = document.createElement('span');
+        icon.className = `tree-state-icon ${{info.cls}}`;
+        icon.textContent = info.icon;
+
+        // Label
+        const labelEl = document.createElement('span');
+        labelEl.className = 'tree-label';
+        labelEl.title = label;
+        labelEl.textContent = label;
+
+        div.appendChild(toggle);
+        div.appendChild(icon);
+        div.appendChild(labelEl);
+
+        if (publicId) {{
+            const pid = document.createElement('span');
+            pid.className = 'tree-public-id';
+            pid.textContent = publicId;
+            div.appendChild(pid);
+        }}
+
+        // Click behaviour
+        if (level === 'step' && si !== null && ci !== null && ki !== null) {{
+            div.addEventListener('click', () => scrollToStep(`step-${{si}}-${{ci}}-${{ki}}`));
+        }} else if (hasChildren) {{
+            div.addEventListener('click', () => toggleChildren(div, id, level, si, ci));
+        }}
+
+        return div;
+    }}
+
+    function toggleChildren(nodeEl, id, level, si, ci) {{
+        let childrenId;
+        if (level === 'run')   childrenId = 'children-run';
+        else if (level === 'suite') childrenId = `children-suite-${{si}}`;
+        else if (level === 'case')  childrenId = `children-case-${{si}}-${{ci}}`;
+
+        const children = document.getElementById(childrenId);
+        if (!children) return;
+
+        const toggle = nodeEl.querySelector('.tree-toggle');
+        const collapsed = children.classList.toggle('collapsed');
+        if (toggle) toggle.classList.toggle('expanded', !collapsed);
+    }}
+
+    function applyTreeUpdate(update) {{
+        const {{ node_type, suite_idx, case_idx, step_idx, state }} = update;
+        let nodeId;
+
+        if      (node_type === 'run')   nodeId = 'tree-run';
+        else if (node_type === 'suite') nodeId = `tree-suite-${{suite_idx}}`;
+        else if (node_type === 'case')  nodeId = `tree-case-${{suite_idx}}-${{case_idx}}`;
+        else                            nodeId = `tree-step-${{suite_idx}}-${{case_idx}}-${{step_idx}}`;
+
+        const el = document.getElementById(nodeId);
+        if (!el) return;
+
+        const info     = stateInfo(state);
+        const iconEl   = el.querySelector('.tree-state-icon');
+        if (iconEl) {{
+            iconEl.className  = `tree-state-icon ${{info.cls}}`;
+            iconEl.textContent = info.icon;
+        }}
+
+        // Highlight executing node, remove from others at the same level
+        if (state === 'executing') {{
+            el.classList.add('executing');
+        }} else {{
+            el.classList.remove('executing');
+        }}
+
+        // Auto-expand parent children containers when a child becomes active
+        if (state === 'executing') {{
+            if (node_type === 'suite') {{
+                const c = document.getElementById(`children-suite-${{suite_idx}}`);
+                if (c) expandChildren(el, c);
+            }} else if (node_type === 'case') {{
+                const ps = document.getElementById(`children-suite-${{suite_idx}}`);
+                const pc = document.getElementById(`children-case-${{suite_idx}}-${{case_idx}}`);
+                if (ps) expandChildren(document.getElementById(`tree-suite-${{suite_idx}}`), ps);
+                if (pc) expandChildren(el, pc);
+            }} else if (node_type === 'step') {{
+                const pc = document.getElementById(`children-case-${{suite_idx}}-${{case_idx}}`);
+                if (pc) expandChildren(document.getElementById(`tree-case-${{suite_idx}}-${{case_idx}}`), pc);
             }}
+        }}
+    }}
+
+    function expandChildren(nodeEl, childrenEl) {{
+        if (!childrenEl || !childrenEl.classList.contains('collapsed')) return;
+        // Children start un-collapsed unless user toggled them; nothing to do if already open.
+        childrenEl.classList.remove('collapsed');
+        if (nodeEl) {{
+            const toggle = nodeEl.querySelector('.tree-toggle');
+            if (toggle) toggle.classList.add('expanded');
+        }}
+    }}
+
+    // ── Step jump ────────────────────────────────────────────────────
+    function scrollToStep(stepId) {{
+        // Tier 1 — precise: "Executing Test Step: <title>" log entry was tagged with
+        // id="anchor-<stepId>" by createLogElement(). Always at the correct position.
+        const anchor = document.getElementById(`anchor-${{stepId}}`);
+        if (anchor) {{ _jumpTo(anchor); return; }}
+
+        // Tier 2 — approximate: fall back to the log-count index recorded when the
+        // step's tree_update(executing) event arrived. Useful for Python sub-steps
+        // that produce no "Executing Test Step:" line.
+        const targetIndex = stepLogIndex[stepId];
+        if (targetIndex !== undefined) {{
+            const entries = document.querySelectorAll('#logContainer .log-entry');
+            if (entries.length) _jumpTo(entries[Math.min(targetIndex, entries.length - 1)]);
+        }}
+    }}
+
+    function _jumpTo(el) {{
+        autoScroll = false;
+        document.getElementById('autoScrollBtn').classList.remove('active');
+        document.querySelectorAll('.step-jump-target').forEach(e => e.classList.remove('step-jump-target'));
+        el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
+        el.classList.add('step-jump-target');
+        setTimeout(() => el.classList.remove('step-jump-target'), 2000);
+    }}
+
+    // ── Log batch processing ─────────────────────────────────────────
+    function scheduleBatchProcessing() {{
+        if (batchProcessing) return;
+        const now = Date.now();
+        if (now - lastBatchTime >= BATCH_INTERVAL_MS || logBatchQueue.length >= MAX_BATCH_SIZE) {{
+            processBatch();
+        }} else {{
+            batchProcessing = true;
+            setTimeout(processBatch, BATCH_INTERVAL_MS - (now - lastBatchTime));
+        }}
+    }}
+
+    function processBatchImmediately() {{
+        if (logBatchQueue.length > 0) processBatch();
+    }}
+
+    function processBatch() {{
+        if (logBatchQueue.length === 0) {{ batchProcessing = false; return; }}
+
+        const container  = document.getElementById('logContainer');
+        const emptyState = container.querySelector('.empty-state');
+        if (emptyState) container.innerHTML = '';
+
+        const fragment  = document.createDocumentFragment();
+        const batchSize = Math.min(logBatchQueue.length, MAX_BATCH_SIZE);
+        const batch     = logBatchQueue.splice(0, batchSize);
+
+        batch.forEach(entry => {{
+            allLogs.push(entry);
+            logCount++;
+            fragment.appendChild(createLogElement(entry));
         }});
 
-        window.addEventListener('load', function() {{
-            connectToLogStream();
-        }});
+        container.appendChild(fragment);
+        document.getElementById('logCount').textContent = logCount;
+
+        if (autoScroll) container.scrollTop = container.scrollHeight;
+
+        lastBatchTime  = Date.now();
+        batchProcessing = false;
+
+        if (logBatchQueue.length > 0) scheduleBatchProcessing();
+    }}
+
+    function createLogElement(entry) {{
+        const div   = document.createElement('div');
+        const level = entry.level || 'INFO';
+        div.className      = `log-entry level-${{level.toLowerCase()}}`;
+        div.dataset.level  = level;
+        div.dataset.message = entry.message || '';
+
+        const timestamp = entry.timestamp || new Date().toISOString();
+        const timeStr   = new Date(timestamp).toLocaleTimeString('en-US', {{ hour12: false }});
+
+        div.innerHTML =
+            `<span class="log-timestamp">${{timeStr}}</span>` +
+            `<span class="log-level ${{level}}">${{level}}</span>` +
+            `<span class="log-message">${{escapeHtml(entry.message || '')}}</span>`;
+
+        // If this log line marks the start of a step, tag it as the scroll anchor.
+        // Matching against "Executing Test Step: <title>" is reliable because these
+        // entries arrive in the correct stream position (unlike TestStepUpdate events).
+        const stepMatch = (entry.message || '').match(/^Executing Test Step:\s+(.+)$/);
+        if (stepMatch) {{
+            const title = stepMatch[1].trim();
+            const ids   = stepTitleToIds[title];
+            if (ids && ids.length > 0) {{
+                // Pick the first step with this title that has no anchor yet.
+                const targetId = ids.find(id => !document.getElementById(`anchor-${{id}}`));
+                if (targetId) {{
+                    div.id = `anchor-${{targetId}}`;
+                    div.classList.add('step-anchor-entry');
+                }}
+            }}
+        }}
 
-        window.addEventListener('beforeunload', function() {{
-            if (eventSource) {{
-                eventSource.close();
+        if (!activeFilters.has(level)) div.style.display = 'none';
+
+        return div;
+    }}
+
+    // ── Controls ─────────────────────────────────────────────────────
+    function clearLogs() {{
+        const container = document.getElementById('logContainer');
+        container.innerHTML =
+            '<div class="empty-state"><div class="empty-state-icon">&#128203;</div><div>Logs cleared</div></div>';
+        allLogs   = [];
+        logCount  = 0;
+        document.getElementById('logCount').textContent = '0';
+    }}
+
+    function toggleAutoScroll() {{
+        autoScroll = !autoScroll;
+        document.getElementById('autoScrollBtn').classList.toggle('active', autoScroll);
+        if (autoScroll) {{
+            const c = document.getElementById('logContainer');
+            c.scrollTop = c.scrollHeight;
+        }}
+    }}
+
+    function toggleFilter(btn, level) {{
+        if (activeFilters.has(level)) {{ activeFilters.delete(level); }}
+        else                          {{ activeFilters.add(level);    }}
+        event.target.classList.toggle('active');
+        filterLogs();
+    }}
+
+    function filterLogs() {{
+        const searchText = document.getElementById('searchBox').value.toLowerCase();
+        document.querySelectorAll('.log-entry').forEach(entry => {{
+            const level   = entry.dataset.level;
+            const message = entry.dataset.message.toLowerCase();
+            const levelOk  = activeFilters.has(level);
+            const searchOk = !searchText || message.includes(searchText);
+            entry.style.display = (levelOk && searchOk) ? 'block' : 'none';
+
+            if (searchText && searchOk) {{
+                const msgEl = entry.querySelector('.log-message');
+                const regex = new RegExp(`(${{escapeRegex(searchText)}})`, 'gi');
+                msgEl.innerHTML = escapeHtml(entry.dataset.message).replace(regex, '<span class="highlight">$1</span>');
+            }} else {{
+                const msgEl = entry.querySelector('.log-message');
+                if (msgEl) msgEl.textContent = entry.dataset.message;
             }}
         }});
-    </script>
+    }}
+
+    function downloadLogs() {{
+        fetch('/download_logs')
+            .then(r => {{ if (!r.ok) throw new Error(); return r.blob(); }})
+            .then(blob => triggerDownload(blob, 'test_run_logs.log'))
+            .catch(() => downloadLogsClientSide());
+    }}
+
+    function downloadLogsClientSide() {{
+        let content = '';
+        allLogs.forEach(e => {{
+            const ts  = e.timestamp || new Date().toISOString();
+            const lvl = e.level || 'INFO';
+            content += `${{ts}} [${{lvl}}] ${{(e.message || '').replace(/\\n/g, '\n')}}\n`;
+        }});
+        if (!content) {{ alert('No logs to download'); return; }}
+        const dateStr = new Date().toISOString().slice(0,19).replace(/[T:]/g, '-');
+        triggerDownload(new Blob([content], {{ type: 'text/plain;charset=utf-8' }}),
+                        `test_run_logs_${{dateStr}}.log`);
+    }}
+
+    function triggerDownload(blob, filename) {{
+        const url = URL.createObjectURL(blob);
+        const a   = document.createElement('a');
+        a.href = url; a.download = filename;
+        document.body.appendChild(a); a.click();
+        URL.revokeObjectURL(url); document.body.removeChild(a);
+    }}
+
+    // ── Helpers ──────────────────────────────────────────────────────
+    function escapeHtml(text) {{
+        const d = document.createElement('div');
+        d.textContent = text;
+        return d.innerHTML;
+    }}
+
+    function escapeRegex(text) {{
+        return text.replace(/[.*+?^${{}}()|[\]\\]/g, '\\$&');
+    }}
+
+    // ── Auto-scroll detection ────────────────────────────────────────
+    document.getElementById('logContainer').addEventListener('scroll', function() {{
+        const c = this;
+        const nearBottom = c.scrollHeight - c.scrollTop - c.clientHeight < 100;
+        if (!nearBottom && autoScroll) {{
+            autoScroll = false;
+            document.getElementById('autoScrollBtn').classList.remove('active');
+        }} else if (nearBottom && !autoScroll) {{
+            autoScroll = true;
+            document.getElementById('autoScrollBtn').classList.add('active');
+        }}
+    }});
+
+    // ── Init ─────────────────────────────────────────────────────────
+    window.addEventListener('load', connectToLogStream);
+    window.addEventListener('beforeunload', () => {{ if (eventSource) eventSource.close(); }});
+</script>
 </body>
 </html>
diff --git a/th_cli/test_run/logging.py b/th_cli/test_run/logging.py
index 05fdcd6..1ed327b 100644
--- a/th_cli/test_run/logging.py
+++ b/th_cli/test_run/logging.py
@@ -104,10 +104,17 @@ def stop_log_streaming():
 
 def get_log_stream_url() -> Optional[str]:
     """Get the URL for the log viewer if streaming is enabled.
-    
+
     Returns:
         URL string or None if streaming is not enabled
     """
     if _log_stream_handler and _log_stream_handler.is_running:
         return _log_stream_handler._get_log_viewer_url()
     return None
+
+
+def get_log_stream_handler() -> Optional["LogStreamHandler"]:
+    """Return the active LogStreamHandler, or None if streaming is disabled."""
+    if _log_stream_handler and _log_stream_handler.is_running:
+        return _log_stream_handler
+    return None
diff --git a/th_cli/test_run/logs_http_server.py b/th_cli/test_run/logs_http_server.py
index 3a14027..23ab7f2 100644
--- a/th_cli/test_run/logs_http_server.py
+++ b/th_cli/test_run/logs_http_server.py
@@ -13,6 +13,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+import copy
+import datetime
 import html
 import json
 import queue
@@ -28,6 +30,7 @@
 ENDPOINT_ROOT = "/"
 ENDPOINT_LOGS_STREAM = "/api/logs/stream"
 ENDPOINT_DOWNLOAD_LOGS = "/download_logs"
+ENDPOINT_STATUS = "/api/status"
 
 
 class LogStreamingHandler(BaseHTTPRequestHandler):
@@ -41,54 +44,66 @@ def do_GET(self):
             self.stream_logs()
         elif self.path == ENDPOINT_DOWNLOAD_LOGS:
             self.download_logs()
+        elif self.path == ENDPOINT_STATUS:
+            self.serve_status()
         else:
             logger.warning(f"404 for GET {self.path}")
             self.send_error(404)
-    
+
+    def serve_status(self):
+        """Return current run title and start time as JSON (used for new-execution detection)."""
+        status = {
+            "run_title": getattr(self.server, "test_run_title", ""),
+            "start_time": getattr(self.server, "start_time", ""),
+        }
+        body = json.dumps(status).encode("utf-8")
+        self.send_response(200)
+        self.send_header("Content-Type", "application/json")
+        self.send_header("Content-Length", str(len(body)))
+        self.send_header("Cache-Control", "no-cache")
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.end_headers()
+        self.wfile.write(body)
+
     def download_logs(self):
         """Serve the log file for download using chunked streaming."""
         log_file_path = getattr(self.server, "log_file_path", None)
-        
+
         if not log_file_path or not Path(log_file_path).exists():
             self.send_error(404, "Log file not found")
             return
-        
+
         try:
             file_path = Path(log_file_path)
             filename = file_path.name
             file_size = file_path.stat().st_size
-            
-            # Send headers
+
             self.send_response(200)
             self.send_header("Content-Type", "text/plain; charset=utf-8")
             self.send_header("Content-Disposition", f'attachment; filename="{filename}"')
             self.send_header("Content-Length", str(file_size))
             self.send_header("Access-Control-Allow-Origin", "*")
             self.end_headers()
-            
-            # Stream file in chunks to avoid loading entire file into memory
-            CHUNK_SIZE = 65536  # 64KB chunks
-            bytes_sent = 0
 
-            with open(log_file_path, 'rb') as f:
+            CHUNK_SIZE = 65536  # 64 KB
+            bytes_sent = 0
+            with open(log_file_path, "rb") as f:
                 while chunk := f.read(CHUNK_SIZE):
                     self.wfile.write(chunk)
                     bytes_sent += len(chunk)
 
             logger.info(f"Log file downloaded: {filename} ({bytes_sent} bytes)")
-            
+
         except (BrokenPipeError, ConnectionResetError, ConnectionAbortedError):
             # Client disconnected during download - normal, not an error
             logger.debug("Client disconnected during log file download")
         except Exception as e:
             logger.error(f"Error serving log file: {e}")
-            # Note: Can't send error response because headers were already sent
 
     def stream_logs(self):
-        """Stream logs using Server-Sent Events (SSE)."""
+        """Stream logs (and tree events) using Server-Sent Events (SSE)."""
         logger.info("Client connected for log stream")
-        
-        # Send SSE headers
+
         self.send_response(200)
         self.send_header("Content-Type", "text/event-stream")
         self.send_header("Cache-Control", "no-cache")
@@ -96,74 +111,108 @@ def stream_logs(self):
         self.send_header("Access-Control-Allow-Origin", "*")
         self.end_headers()
 
-        # Get the log queue from the server
-        log_queue = getattr(self.server, "log_queue", None)
-        if not log_queue:
-            logger.error("No log queue found on server for streaming")
+        # Create a per-client queue and register it in the broadcast set.
+        # Each SSE client owns its own queue so events are never stolen between connections.
+        client_queue: queue.Queue = queue.Queue(maxsize=500)
+        active_clients = getattr(self.server, "active_clients", None)
+        clients_lock = getattr(self.server, "clients_lock", None)
+        if active_clients is None or clients_lock is None:
+            logger.error("No active_clients/clients_lock found on server")
+            return
+        with clients_lock:
+            active_clients.add(client_queue)
+
+        # Send initial connection event.
+        if not self._send_sse_event("connected", {"message": "Log stream connected"}):
+            with clients_lock:
+                active_clients.discard(client_queue)
             return
 
-        logger.info("Starting to stream logs to client via SSE")
+        # Send current tree snapshot if available — covers reconnecting clients
+        # that arrive after init_tree() was called.
+        tree_state: dict = getattr(self.server, "tree_state", {})
+        tree_lock = getattr(self.server, "tree_lock", None)
+        sent_tree_snapshot = False
+        if tree_state:
+            if tree_lock:
+                with tree_lock:
+                    tree_copy = copy.deepcopy(tree_state)
+            else:
+                tree_copy = copy.deepcopy(tree_state)
+            if not self._send_sse_event("tree_init", tree_copy):
+                with clients_lock:
+                    active_clients.discard(client_queue)
+                return
+            sent_tree_snapshot = True
+
+        logger.info("Starting to stream events to client via SSE")
         sent_count = 0
         client_disconnected = False
-        
+
         try:
-            # Send initial connection message
-            if not self._send_sse_event("connected", {"message": "Log stream connected"}):
-                logger.debug("Client disconnected during initial connection")
-                return
-            
             while not client_disconnected:
                 try:
-                    # Get log entry from queue with timeout
-                    log_entry = log_queue.get(timeout=1.0)
-                    
-                    if log_entry is None:  # Signal to stop
-                        logger.info("Received end-of-stream signal for logs")
-                        self._send_sse_event("end", {"message": "Log stream ended"})
-                        break
-
-                    # Send log entry as SSE event
-                    if not self._send_sse_event("log", log_entry):
-                        logger.debug("Client disconnected while streaming")
-                        client_disconnected = True
-                        break
-                        
-                    sent_count += 1
-                    
-                    if sent_count % 100 == 0:
-                        logger.debug(f"Sent {sent_count} log entries to client")
-
+                    entry = client_queue.get(timeout=1.0)
                 except queue.Empty:
-                    # Send keepalive to prevent connection timeout
                     if not self._send_sse_event("keepalive", {"timestamp": time.time()}):
-                        logger.debug("Client disconnected during keepalive")
                         client_disconnected = True
-                        break
                     continue
                 except Exception as e:
-                    logger.debug(f"Error streaming log: {e}")
+                    logger.debug(f"Queue read error: {e}")
                     break
 
+                if entry is None:  # End-of-stream sentinel
+                    self._send_sse_event("end", {"message": "Log stream ended"})
+                    break
+
+                if not isinstance(entry, dict):
+                    continue
+
+                entry_type = entry.get("type", "log")
+
+                if entry_type == "tree_init":
+                    # Skip queue duplicate if we already sent the snapshot on connect.
+                    if sent_tree_snapshot:
+                        continue
+                    if not self._send_sse_event("tree_init", entry.get("data", entry)):
+                        client_disconnected = True
+                    else:
+                        sent_tree_snapshot = True
+
+                elif entry_type == "tree_update":
+                    if not self._send_sse_event("tree_update", entry):
+                        client_disconnected = True
+
+                else:
+                    # Regular log entry (no "type" key, or type=="log").
+                    if not self._send_sse_event("log", entry):
+                        client_disconnected = True
+                    else:
+                        sent_count += 1
+                        if sent_count % 100 == 0:
+                            logger.debug(f"Sent {sent_count} log entries to client")
+
         except BrokenPipeError:
             logger.debug("Client disconnected (broken pipe)")
         except Exception as e:
             logger.debug(f"Log streaming error: {e}")
+        finally:
+            with clients_lock:
+                active_clients.discard(client_queue)
 
-        logger.info(f"Log stream ended, total entries sent: {sent_count}")
+        logger.info(f"Log stream ended, total log entries sent: {sent_count}")
 
     def _send_sse_event(self, event_type: str, data: dict) -> bool:
         """Send a Server-Sent Event.
-        
-        Returns:
-            True if event was sent successfully, False if client disconnected
+
+        Returns True if sent successfully, False if the client disconnected.
         """
         try:
             event_data = f"event: {event_type}\ndata: {json.dumps(data)}\n\n"
-            self.wfile.write(event_data.encode('utf-8'))
+            self.wfile.write(event_data.encode("utf-8"))
             self.wfile.flush()
             return True
         except (BrokenPipeError, ConnectionResetError, ConnectionAbortedError):
-            # Client disconnected - this is normal, not an error
             return False
         except Exception as e:
             logger.debug(f"Error sending SSE event: {e}")
@@ -180,27 +229,16 @@ def serve_log_viewer(self):
             with open(template_path, "r", encoding="utf-8") as f:
                 html_template = f.read()
 
-            # Replace placeholders
-            html_content = html_template.format(
-                test_run_title=html.escape(test_run_title)
-            )
+            html_content = html_template.format(test_run_title=html.escape(test_run_title))
         except Exception as e:
             logger.error(f"Failed to load HTML template: {e}")
-            # Fallback to simple HTML
             html_content = f"""
-            <html>
-            <head><title>Log Viewer Error</title></head>
-            <body>
-                <h1>Error loading log viewer interface</h1>
-                <p>Template error: {html.escape(str(e))}</p>
-                <p>Test Run: {html.escape(test_run_title)}</p>
-            </body>
-            </html>
+            <html><head><title>Log Viewer Error</title></head>
+            <body><h1>Error loading log viewer</h1><p>{html.escape(str(e))}</p></body></html>
             """
 
         self.send_response(200)
         self.send_header("Content-Type", "text/html; charset=utf-8")
-        # Prevent caching
         self.send_header("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0")
         self.send_header("Pragma", "no-cache")
         self.send_header("Expires", "0")
@@ -209,12 +247,12 @@ def serve_log_viewer(self):
         self.wfile.write(html_content.encode("utf-8"))
 
     def log_message(self, format, *args):
-        """Suppress HTTP access logs to avoid clutter."""
+        """Suppress default HTTP access log output."""
         pass
 
 
 class LogsHTTPServer:
-    """Manages HTTP server for real-time log streaming."""
+    """Manages the HTTP server for real-time log streaming."""
 
     def __init__(self, port: int = 8998):
         """Initialize the logs HTTP server.
@@ -228,29 +266,38 @@ def __init__(self, port: int = 8998):
 
     def start(
         self,
-        log_queue: queue.Queue,
+        active_clients: set,
+        clients_lock: threading.Lock,
+        tree_state: dict,
         test_run_title: str = "Test Execution",
         local_ip: Optional[str] = None,
         log_file_path: Optional[str] = None,
+        tree_lock: Optional[threading.Lock] = None,
     ):
-        """Start HTTP server for log streaming.
-        
+        """Start the HTTP server for log streaming.
+
         Args:
-            log_queue: Queue containing log entries to stream
-            test_run_title: Title of the test run for display
-            local_ip: Local IP address for display (defaults to localhost)
-            log_file_path: Path to log file for download functionality
+            active_clients: Shared set of per-client queues; broadcast puts into all of them.
+            clients_lock: Lock protecting active_clients mutations.
+            tree_state: Mutable dict shared with LogStreamHandler; mutated in-place
+                so clients connecting after init_tree() receive a current snapshot.
+            test_run_title: Title shown in the browser UI.
+            local_ip: LAN IP used for display purposes.
+            log_file_path: Path to the on-disk log file for download.
+            tree_lock: Lock protecting tree_state reads/writes.
         """
         try:
-            # Use ThreadingHTTPServer for better concurrency
             self.server = ThreadingHTTPServer(("0.0.0.0", self.port), LogStreamingHandler)
             self.server.allow_reuse_address = True
 
-            # Set required attributes on the server
-            self.server.log_queue = log_queue
+            self.server.active_clients = active_clients
+            self.server.clients_lock = clients_lock
+            self.server.tree_state = tree_state  # shared reference — mutated externally
+            self.server.tree_lock = tree_lock
             self.server.test_run_title = test_run_title
             self.server.local_ip = local_ip or "localhost"
             self.server.log_file_path = log_file_path
+            self.server.start_time = datetime.datetime.now().isoformat()
 
             logger.info(f"Logs HTTP server configured for test run: {test_run_title}")
 
@@ -270,7 +317,7 @@ def run_server():
             raise
 
     def stop(self):
-        """Stop HTTP server."""
+        """Stop the HTTP server."""
         if self.server:
             try:
                 self.server.shutdown()
diff --git a/th_cli/test_run/websocket.py b/th_cli/test_run/websocket.py
index e60da91..a368ce6 100644
--- a/th_cli/test_run/websocket.py
+++ b/th_cli/test_run/websocket.py
@@ -39,6 +39,7 @@
 from th_cli.config import config
 from th_cli.shared_constants import MessageTypeEnum
 
+from .logging import get_log_stream_handler
 from .prompt_manager import handle_file_upload_request, handle_prompt
 from .socket_schemas import (
     PromptRequest,
@@ -163,6 +164,13 @@ async def __log_test_run_update(self, update: TestRunUpdate) -> None:
             await self.__display_manual_pairing_code()
             self._chip_server_info_displayed = True
 
+        handler = get_log_stream_handler()
+        if handler:
+            if update.state.value == "executing":
+                handler.init_tree(self.run)
+            else:
+                handler.update_tree_node(state=update.state.value)
+
         test_run_text = colorize_hierarchy_prefix("Test Run", HierarchyEnum.TEST_RUN.value)
         colored_state = colorize_state(update.state.value)
         click.echo(f"{test_run_text} {colored_state}")
@@ -219,6 +227,13 @@ def __log_test_suite_update(self, update: TestSuiteUpdate) -> None:
         colored_state = colorize_state(update.state.value)
         click.echo(f"  - {colored_title} {colored_state}")
 
+        handler = get_log_stream_handler()
+        if handler:
+            handler.update_tree_node(
+                state=update.state.value,
+                suite_idx=update.test_suite_execution_index,
+            )
+
     def __log_test_case_update(self, update: TestCaseUpdate) -> None:
         case = self.__case(index=update.test_case_execution_index, suite_index=update.test_suite_execution_index)
         title = case.test_case_metadata.title
@@ -266,6 +281,14 @@ def __log_test_case_update(self, update: TestCaseUpdate) -> None:
             if case_key in self.test_case_step_errors:
                 del self.test_case_step_errors[case_key]
 
+        handler = get_log_stream_handler()
+        if handler:
+            handler.update_tree_node(
+                state=update.state.value,
+                suite_idx=update.test_suite_execution_index,
+                case_idx=update.test_case_execution_index,
+            )
+
     def __log_test_step_update(self, update: TestStepUpdate) -> None:
         step = self.__step(
             index=update.test_step_execution_index,
@@ -284,6 +307,15 @@ def __log_test_step_update(self, update: TestStepUpdate) -> None:
             self.test_case_step_errors.setdefault(case_key, []).extend(update.errors)
             logger.debug(f"Tracked {len(update.errors)} error(s) for test case {case_key}: {update.errors}")
 
+        handler = get_log_stream_handler()
+        if handler:
+            handler.update_tree_node(
+                state=update.state.value,
+                suite_idx=update.test_suite_execution_index,
+                case_idx=update.test_case_execution_index,
+                step_idx=update.test_step_execution_index,
+            )
+
     def __handle_log_record(self, records: list[TestLogRecord]) -> None:
         for record in records:
             logger.log(record.level, record.message)