From 6dbb1db5a1a172d169cf9b9fd2c87401453a3e32 Mon Sep 17 00:00:00 2001
From: core-devops <core-devops@moleculesai.app>
Date: Thu, 11 Jun 2026 04:48:08 -0700
Subject: [PATCH] fix(canvas): namespace WorkspacePanelTabs ids per instance
 (duplicate #tab-chat broke chat E2E)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The concierge Settings pane embeds a SECOND WorkspacePanelTabs
(ConciergeShell.tsx:598) and the component hardcodes id={`tab-${id}`} /
id={`panel-${id}`} — two mounted instances produce duplicate DOM ids:
invalid HTML, aria-controls pointing at the wrong element, and the chat
E2E failing on every main commit since the embed landed:

  Error: strict mode violation: locator('#tab-chat') resolved to 2 elements
    1) ... aka getByRole('tab', { name: 'Chat' })            <- SidePanel
    2) ... aka getByTestId('settings-pane-platform')...      <- concierge embed

(run 348090 on 79550255: all 7 chat-desktop tests; the mobile suite
passes because the embed isn't mounted there.)

Fix: add an idPrefix prop (default "" so the primary map SidePanel keeps
its stable #tab-chat hooks); the concierge embed passes "concierge-".
The roving-focus getElementById and the tabpanel ids/labels use the
prefix too. staging-concierge.spec.ts updated to the namespaced ids.

canvas unit suite: 185 files / 2649 tests green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 canvas/e2e/staging-concierge.spec.ts          | 11 ++++++----
 canvas/src/components/WorkspacePanelTabs.tsx  | 22 ++++++++++++++-----
 .../components/concierge/ConciergeShell.tsx   |  6 ++++-
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/canvas/e2e/staging-concierge.spec.ts b/canvas/e2e/staging-concierge.spec.ts
index 79d047b0..a3d316bc 100644
--- a/canvas/e2e/staging-concierge.spec.ts
+++ b/canvas/e2e/staging-concierge.spec.ts
@@ -418,7 +418,10 @@ test.describe("concierge Settings — two tabs", () => {
       wsTablist,
       "platform-agent Settings tab did not embed WorkspacePanelTabs",
     ).toBeVisible({ timeout: 15_000 });
-    await expect(page.locator("#tab-config")).toHaveAttribute(
+    // concierge-embedded WorkspacePanelTabs namespaces its ids with
+    // "concierge-" (duplicate-id fix); the bare #tab-* ids belong to the
+    // map SidePanel instance only.
+    await expect(page.locator("#concierge-tab-config")).toHaveAttribute(
       "aria-selected",
       "true",
     );
@@ -434,8 +437,8 @@ test.describe("concierge Settings — two tabs", () => {
       "schedule",
     ]) {
       await expect(
-        page.locator(`#tab-${id}`),
-        `WorkspacePanelTabs is missing #tab-${id}`,
+        page.locator(`#concierge-tab-${id}`),
+        `WorkspacePanelTabs is missing #concierge-tab-${id}`,
       ).toHaveCount(1);
     }
 
@@ -469,7 +472,7 @@ test.describe("concierge Settings — Config tab dropdowns", () => {
     ).toBeVisible({ timeout: 15_000 });
     // The runtime <select> sits under the "Runtime" label inside the Config
     // panel. Use the label association for a stable hook.
-    const runtimeByLabel = page.locator('#panel-config').getByLabel("Runtime", {
+    const runtimeByLabel = page.locator('#concierge-panel-config').getByLabel("Runtime", {
       exact: true,
     });
     await expect(
diff --git a/canvas/src/components/WorkspacePanelTabs.tsx b/canvas/src/components/WorkspacePanelTabs.tsx
index 7b7ad17c..d5281ebb 100644
--- a/canvas/src/components/WorkspacePanelTabs.tsx
+++ b/canvas/src/components/WorkspacePanelTabs.tsx
@@ -64,6 +64,16 @@ interface Props {
   onTabChange?: (tab: PanelTab) => void;
   /** Initial tab for the uncontrolled (local-state) mode. Defaults to "chat". */
   defaultTab?: PanelTab;
+  /**
+   * Namespace for the tab/panel element ids (`{idPrefix}tab-chat`,
+   * `{idPrefix}panel-chat`). The primary map SidePanel keeps the default ""
+   * (stable `#tab-chat` hooks for tests/tools); any EMBEDDED instance MUST
+   * pass a unique prefix — two instances with the default collide on
+   * duplicate DOM ids, which is invalid HTML, breaks aria-controls, and
+   * broke the chat E2E with a Playwright strict-mode violation
+   * (`locator('#tab-chat') resolved to 2 elements`).
+   */
+  idPrefix?: string;
 }
 
 /**
@@ -75,7 +85,7 @@ interface Props {
  * Does NOT render the workspace header / meta pills / resize handle / footer —
  * those are host chrome and stay in the host (SidePanel for the map).
  */
-export function WorkspacePanelTabs({ node, activeTab, onTabChange, defaultTab = "chat" }: Props) {
+export function WorkspacePanelTabs({ node, activeTab, onTabChange, defaultTab = "chat", idPrefix = "" }: Props) {
   const restartWorkspace = useCanvasStore((s) => s.restartWorkspace);
 
   // Controlled when both props are present; otherwise own the state locally.
@@ -109,7 +119,7 @@ export function WorkspacePanelTabs({ node, activeTab, onTabChange, defaultTab =
             else if (e.key === "End") { e.preventDefault(); next = WORKSPACE_PANEL_TABS.length - 1; }
             if (next !== null) {
               setTab(WORKSPACE_PANEL_TABS[next].id);
-              requestAnimationFrame(() => { const el = document.getElementById(`tab-${WORKSPACE_PANEL_TABS[next!].id}`); el?.focus(); el?.scrollIntoView({ block: "nearest", inline: "nearest" }); });
+              requestAnimationFrame(() => { const el = document.getElementById(`${idPrefix}tab-${WORKSPACE_PANEL_TABS[next!].id}`); el?.focus(); el?.scrollIntoView({ block: "nearest", inline: "nearest" }); });
             }
           }}
         >
@@ -117,10 +127,10 @@ export function WorkspacePanelTabs({ node, activeTab, onTabChange, defaultTab =
             <button
               type="button"
               key={t.id}
-              id={`tab-${t.id}`}
+              id={`${idPrefix}tab-${t.id}`}
               role="tab"
               aria-selected={tab === t.id}
-              aria-controls={`panel-${t.id}`}
+              aria-controls={`${idPrefix}panel-${t.id}`}
               tabIndex={tab === t.id ? 0 : -1}
               onClick={() => setTab(t.id)}
               className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 ${
@@ -167,8 +177,8 @@ export function WorkspacePanelTabs({ node, activeTab, onTabChange, defaultTab =
       {/* Tab Content */}
       <div
         role="tabpanel"
-        id={`panel-${tab}`}
-        aria-labelledby={`tab-${tab}`}
+        id={`${idPrefix}panel-${tab}`}
+        aria-labelledby={`${idPrefix}tab-${tab}`}
         tabIndex={0}
         className="flex-1 overflow-y-auto focus:outline-none"
       >
diff --git a/canvas/src/components/concierge/ConciergeShell.tsx b/canvas/src/components/concierge/ConciergeShell.tsx
index d2c614d8..d56a6141 100644
--- a/canvas/src/components/concierge/ConciergeShell.tsx
+++ b/canvas/src/components/concierge/ConciergeShell.tsx
@@ -595,7 +595,11 @@ export function ConciergeShell() {
                       </div>
                       {platformRoot ? (
                         <div className={s.embedPanel}>
-                          <WorkspacePanelTabs key={platformRoot.id} node={platformRoot} defaultTab="config" />
+                          {/* idPrefix: this is a SECOND WorkspacePanelTabs instance —
+                              without a namespace its tab/panel ids collide with the
+                              map SidePanel's (#tab-chat duplicated → invalid HTML,
+                              broken aria-controls, Playwright strict-mode failures). */}
+                          <WorkspacePanelTabs key={platformRoot.id} node={platformRoot} defaultTab="config" idPrefix="concierge-" />
                         </div>
                       ) : (
                         <div className={s.scardDesc}>
-- 
2.52.0