feat: selected items

webui/html/app.js

@@ -913,19 +913,30 @@ function scrollCurrentRowIntoView(pane) {
 function updatePaneFocusLine(pane) {
   const model = paneState(pane);
   const focusLine = document.getElementById(`${pane}-focus-line`);
-  if (!focusLine) {
+  const nameEl = document.getElementById(`${pane}-focus-name`);
+  const selectedEl = document.getElementById(`${pane}-focus-selected`);
+  if (!focusLine || !nameEl || !selectedEl) {
     return;
   }
+  let label = "—";
   if (!Array.isArray(model.visibleItems) || model.currentRowIndex < 0 || model.currentRowIndex >= model.visibleItems.length) {
-    focusLine.textContent = "—";
-    return;
-  }
+    label = "—";
+  } else {
     const item = model.visibleItems[model.currentRowIndex];
-  if (!item) {
-    focusLine.textContent = "—";
-    return;
+    if (item) {
+      label = item.isParent ? "../" : (item.name || "—");
+    }
+  }
+  nameEl.textContent = label;
+
+  const selectedCount = Array.isArray(model.selectedItems) ? model.selectedItems.length : 0;
+  if (selectedCount > 0) {
+    selectedEl.textContent = `Selected: ${selectedCount} ${selectedCount === 1 ? "item" : "items"}`;
+    selectedEl.classList.remove("hidden");
+  } else {
+    selectedEl.textContent = "";
+    selectedEl.classList.add("hidden");
   }
-  focusLine.textContent = item.isParent ? "../" : (item.name || "—");
 }
 
 function renderPaneItems(pane) {

webui/html/base.css

@@ -137,11 +137,27 @@ h1 {
   color: var(--color-text-muted);
   font-size: 12px;
   line-height: 1.25;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.pane-focus-name {
+  flex: 1 1 auto;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.pane-focus-selected {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  color: var(--color-text-secondary, var(--color-text-primary));
+  opacity: 0.9;
+}
+
 .toolbar {
   display: flex;
   flex-wrap: wrap;

webui/html/index.html

@@ -49,7 +49,10 @@
             <ul id="left-items" class="list"></ul>
           </div>
         </div>
-        <div id="left-focus-line" class="pane-focus-line" aria-live="polite">—</div>
+        <div id="left-focus-line" class="pane-focus-line" aria-live="polite">
+          <span id="left-focus-name" class="pane-focus-name">—</span>
+          <span id="left-focus-selected" class="pane-focus-selected hidden"></span>
+        </div>
       </section>
 
       <section class="panel pane" id="right-pane" data-pane="right">
@@ -73,7 +76,10 @@
             <ul id="right-items" class="list"></ul>
           </div>
         </div>
-        <div id="right-focus-line" class="pane-focus-line" aria-live="polite">—</div>
+        <div id="right-focus-line" class="pane-focus-line" aria-live="polite">
+          <span id="right-focus-name" class="pane-focus-name">—</span>
+          <span id="right-focus-selected" class="pane-focus-selected hidden"></span>
+        </div>
       </section>
     </main>