Add a capability-aware debugger target picker

npm_modules/cli/debugger/README.md

@@ -98,6 +98,26 @@ serialized `/api/devtools/targets` response is independently capped at 512 KiB.
 The legacy `/api/status` route intentionally keeps its prior port probing and
 forwarding behavior and does not run registry discovery.
 
+The DevTools panel has two mutually exclusive identity modes. An extension-opened
+inspected page keeps using its exact `sessionId`, `inspectedUrl`, and
+`targetNonce` tuple and never requests the target registry. A directly opened
+panel receives one opaque `targetId`, discovers at most 256 registry entries,
+and never falls back to the first, only, attached, or newly discovered target.
+Only attachable `target-id` entries using the `valdi-daemon` transport and
+advertising both `components` and `snapshot` can be selected. Inspected-page,
+waiting, and unsupported entries remain visible with a disabled explanation.
+Direct snapshot and capability-supported tool requests send only the selected
+opaque `targetId`.
+
+Target changes close the old Console stream before installing the replacement,
+invalidate outstanding snapshot, highlight, Console, and Performance work, and
+clear all target-owned presentation. Console and Performance tabs are enabled
+only when the selected descriptor advertises their capability. A target change
+is blocked while a Performance operation or recording owns the selected target;
+if registry removal forces a detach, the exact previous Performance owner stays
+available solely so the recording can be stopped and retrieved. Registry
+removal never selects another target automatically.
+
 The Data section discovers target-owned providers through a generic custom
 message contract. The persistence module registers its bounded web snapshot as
 the `persistent-store` Storage provider and reports it unavailable on platforms

npm_modules/cli/debugger/devtools-panel.css

@@ -137,6 +137,13 @@ button {
   background: var(--surface-hover);
 }
 
+.main-tab:disabled {
+  background: transparent;
+  color: var(--muted);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .main-tab.selected,
 .detail-tab.selected {
   color: var(--accent);
@@ -209,6 +216,38 @@ button {
   white-space: nowrap;
 }
 
+.target-select-label {
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.target-select {
+  width: min(320px, 42vw);
+  min-width: 120px;
+  height: 22px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  text-overflow: ellipsis;
+}
+
+.target-select[hidden],
+.target-select-label[hidden] {
+  display: none;
+}
+
+.target-picker-status {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .target-metadata {
   overflow: hidden;
   color: var(--muted);
@@ -1023,4 +1062,21 @@ button {
   .target-metadata {
     display: none;
   }
+
+  .target-picker-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .target-select {
+    width: min(230px, 52vw);
+  }
 }

npm_modules/cli/debugger/devtools-panel.html

@@ -18,6 +18,7 @@
             role="tab"
             aria-controls="elementsSection"
             aria-selected="true"
+            tabindex="0"
           >
             Elements
           </button>
@@ -29,6 +30,7 @@
             role="tab"
             aria-controls="performanceSection"
             aria-selected="false"
+            tabindex="-1"
           >
             Performance
           </button>
@@ -40,6 +42,7 @@
             role="tab"
             aria-controls="consoleSection"
             aria-selected="false"
+            tabindex="-1"
           >
             Console
           </button>
@@ -53,9 +56,14 @@
       </header>
 
       <div class="target-toolbar">
-        <span id="targetStatusDot" class="status-dot connecting"></span>
+        <span id="targetStatusDot" class="status-dot connecting" aria-hidden="true"></span>
+        <label id="targetSelectLabel" class="target-select-label" for="targetSelect">Target</label>
+        <select id="targetSelect" class="target-select" aria-describedby="targetPickerStatus">
+          <option value="">Loading debugger targets…</option>
+        </select>
         <span id="targetName" class="target-name">Connecting to inspected Valdi application…</span>
         <span id="targetMetadata" class="target-metadata"></span>
+        <span id="targetPickerStatus" class="target-picker-status" role="status" aria-live="polite"></span>
         <label class="live-toggle" title="Keep the inspected hierarchy current">
           <input id="autoRefreshToggle" type="checkbox" checked /> Live
         </label>
@@ -76,7 +84,12 @@
               </svg>
               <input id="treeFilter" type="search" placeholder="Filter nodes, text, attributes" autocomplete="off" />
               <span id="filterSummary" class="filter-summary"></span>
-              <button id="expandButton" class="icon-button" title="Expand useful nodes" aria-label="Expand useful nodes">
+              <button
+                id="expandButton"
+                class="icon-button"
+                title="Expand useful nodes"
+                aria-label="Expand useful nodes"
+              >
                 <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 6h12M4 10h8M4 14h5M14 12v5M11.5 14.5h5" /></svg>
               </button>
             </div>
@@ -91,7 +104,13 @@
             <div id="treeEmpty" class="empty-state">Waiting for the inspected Valdi renderer…</div>
           </div>
 
-          <div id="splitHandle" class="split-handle" role="separator" aria-label="Resize inspector" aria-orientation="horizontal"></div>
+          <div
+            id="splitHandle"
+            class="split-handle"
+            role="separator"
+            aria-label="Resize inspector"
+            aria-orientation="horizontal"
+          ></div>
 
           <section class="inspector-pane" aria-label="Selected element inspector">
             <div class="inspector-toolbar">
@@ -120,6 +139,7 @@
           data-panel="performance"
           role="tabpanel"
           aria-labelledby="performanceTab"
+          hidden
         >
           <div class="section-header">
             <span>Web preview performance</span>
@@ -136,6 +156,7 @@
           data-panel="console"
           role="tabpanel"
           aria-labelledby="consoleTab"
+          hidden
         >
           <div class="section-header">
             <span>Console output</span>