Add

src/components/labs/LabContent.tsx

@@ -198,6 +198,64 @@ async function copyTextToClipboard(text: string) {
   }
 }
 
+function enhanceHarnessSelectors(root: HTMLElement) {
+  const harnessButtons = Array.from(
+    root.querySelectorAll<HTMLButtonElement>("button[data-harness-choice]"),
+  );
+  const harnessBranches = Array.from(
+    root.querySelectorAll<HTMLElement>("[data-harness-branch]"),
+  );
+
+  if (harnessButtons.length === 0 || harnessBranches.length === 0) {
+    return () => {};
+  }
+
+  const supportedHarnesses = new Set(
+    harnessButtons
+      .map((button) => button.dataset.harnessChoice?.trim())
+      .filter((value): value is string => Boolean(value)),
+  );
+
+  let selectedHarness: string | null = null;
+
+  const syncHarnessSelection = () => {
+    for (const button of harnessButtons) {
+      const harnessId = button.dataset.harnessChoice?.trim() ?? "";
+      const isSelected = selectedHarness !== null && harnessId === selectedHarness;
+      button.setAttribute("aria-pressed", isSelected ? "true" : "false");
+      button.dataset.selected = isSelected ? "true" : "false";
+    }
+
+    for (const branch of harnessBranches) {
+      const harnessId = branch.dataset.harnessBranch?.trim() ?? "";
+      const shouldHide =
+        selectedHarness === null || harnessId !== selectedHarness;
+      branch.hidden = shouldHide;
+      branch.setAttribute("aria-hidden", shouldHide ? "true" : "false");
+    }
+  };
+
+  syncHarnessSelection();
+
+  const handleHarnessClick = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const button = target.closest<HTMLButtonElement>("button[data-harness-choice]");
+    if (!button || !root.contains(button)) return;
+
+    const harnessId = button.dataset.harnessChoice?.trim() ?? "";
+    if (!supportedHarnesses.has(harnessId)) return;
+
+    event.preventDefault();
+    selectedHarness = selectedHarness === harnessId ? null : harnessId;
+    syncHarnessSelection();
+  };
+
+  root.addEventListener("click", handleHarnessClick);
+  return () => {
+    root.removeEventListener("click", handleHarnessClick);
+  };
+}
+
 export function LabContent({ className, html }: LabContentProps) {
   const containerRef = useRef<HTMLElement>(null);
   const [zoomedImage, setZoomedImage] = useState<ZoomedImageState | null>(null);
@@ -273,6 +331,7 @@ export function LabContent({ className, html }: LabContentProps) {
     }
 
     enhanceSettingsLists(root);
+    const cleanupHarnessSelectors = enhanceHarnessSelectors(root);
 
     const handleRootClick = (event: Event) => {
       const target = event.target as HTMLElement;
@@ -320,6 +379,7 @@ export function LabContent({ className, html }: LabContentProps) {
 
     root.addEventListener("click", handleRootClick);
     return () => {
+      cleanupHarnessSelectors();
       root.removeEventListener("click", handleRootClick);
     };
   }, [html]);