focus balk onder aan paneel

webui/backend/tests/golden/test_ui_smoke_golden.py

@@ -46,6 +46,8 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('id="right-pane"', body)
         self.assertIn('id="left-items"', body)
         self.assertIn('id="right-items"', body)
+        self.assertIn('id="left-focus-line"', body)
+        self.assertIn('id="right-focus-line"', body)
         self.assertIn('id="function-bar"', body)
         self.assertIn('id="settings-btn"', body)
         self.assertIn('id="rename-btn"', body)

webui/html/app.js

@@ -910,6 +910,24 @@ function scrollCurrentRowIntoView(pane) {
   }
 }
 
+function updatePaneFocusLine(pane) {
+  const model = paneState(pane);
+  const focusLine = document.getElementById(`${pane}-focus-line`);
+  if (!focusLine) {
+    return;
+  }
+  if (!Array.isArray(model.visibleItems) || model.currentRowIndex < 0 || model.currentRowIndex >= model.visibleItems.length) {
+    focusLine.textContent = "—";
+    return;
+  }
+  const item = model.visibleItems[model.currentRowIndex];
+  if (!item) {
+    focusLine.textContent = "—";
+    return;
+  }
+  focusLine.textContent = item.isParent ? "../" : (item.name || "—");
+}
+
 function renderPaneItems(pane) {
   const model = paneState(pane);
   const items = document.getElementById(`${pane}-items`);
@@ -917,6 +935,7 @@ function renderPaneItems(pane) {
 
   if (!Array.isArray(model.visibleItems) || model.visibleItems.length === 0) {
     model.currentRowIndex = -1;
+    updatePaneFocusLine(pane);
     updateActionButtons();
     return;
   }
@@ -1039,6 +1058,7 @@ function renderPaneItems(pane) {
     }
     items.append(row);
   });
+  updatePaneFocusLine(pane);
   updateActionButtons();
 }
 

webui/html/base.css

@@ -112,6 +112,20 @@ h1 {
   background: var(--color-surface);
 }
 
+.pane-focus-line {
+  flex: 0 0 auto;
+  min-height: 24px;
+  padding: 5px 8px 3px 8px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .toolbar {
   display: flex;
   flex-wrap: wrap;

webui/html/index.html

@@ -45,6 +45,7 @@
           </div>
           <ul id="left-items" class="list"></ul>
         </div>
+        <div id="left-focus-line" class="pane-focus-line" aria-live="polite">—</div>
       </section>
 
       <section class="panel pane" id="right-pane" data-pane="right">
@@ -64,6 +65,7 @@
           </div>
           <ul id="right-items" class="list"></ul>
         </div>
+        <div id="right-focus-line" class="pane-focus-line" aria-live="polite">—</div>
       </section>
     </main>