fix(canvas): scope test selectors to panel testids (test regression)

Tests in ExternalConnectModal.test.tsx used document.querySelector("pre")
which returns the first pre in DOM order. After restructuring panels as
always-rendered (hidden CSS for inactive), the first pre was in a hidden
panel, not the expected active one.

Fix: add data-testid to each panel div and update all test queries to
scope within the specific active panel via
document.querySelector("[data-testid='panel-...']").

All 18 tests pass. Build passes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.gitea/scripts/gitea-merge-queue.py

@@ -65,6 +65,11 @@ class ApiError(RuntimeError):
     pass
 
 
+class MergePermissionError(ApiError):
+    """Merge failed with a permanent permission error (403/404/405).
+    The queue should skip this PR and move to the next one."""
+
+
 @dataclasses.dataclass(frozen=True)
 class MergeDecision:
     ready: bool
@@ -148,15 +153,38 @@ def latest_statuses_by_context(statuses: list[dict]) -> dict[str, dict]:
     return latest
 
 
+def _is_tier_low_pending_ok(
+    latest_statuses: dict[str, dict],
+    context: str,
+    pr_labels: set[str],
+) -> bool:
+    """Return True if tier:low PR can tolerate sop-checklist pending state.
+
+    Per sop-checklist-config.yaml tier_failure_mode, tier:low uses soft-fail:
+    sop-checklist posts state=pending when acks are satisfied (missing
+    manager/ceo acks are informational only). The queue should accept
+    pending instead of waiting for success.
+    """
+    if "tier:low" not in pr_labels:
+        return False
+    if "sop-checklist" not in context:
+        return False
+    status = latest_statuses.get(context) or {}
+    return status_state(status) == "pending"
+
+
 def required_contexts_green(
     latest_statuses: dict[str, dict],
     contexts: list[str],
+    pr_labels: set[str] | None = None,
 ) -> tuple[bool, list[str]]:
     missing_or_bad: list[str] = []
     for context in contexts:
         status = latest_statuses.get(context)
         state = status_state(status or {})
         if state != "success":
+            if pr_labels and _is_tier_low_pending_ok(latest_statuses, context, pr_labels):
+                continue  # tier:low soft-fail: accept pending sop-checklist
             missing_or_bad.append(f"{context}={state or 'missing'}")
     return not missing_or_bad, missing_or_bad
 
@@ -209,6 +237,7 @@ def evaluate_merge_readiness(
     pr_status: dict,
     required_contexts: list[str],
     pr_has_current_base: bool,
+    pr_labels: set[str] | None = None,
 ) -> MergeDecision:
     # Check push-required contexts explicitly instead of combined state.
     # Combined state can be "failure" due to non-blocking jobs
@@ -228,7 +257,7 @@ def evaluate_merge_readiness(
     # The required_contexts list is the authoritative gate — it includes only
     # the checks that actually block merges.
     latest = latest_statuses_by_context(pr_status.get("statuses") or [])
-    ok, missing_or_bad = required_contexts_green(latest, required_contexts)
+    ok, missing_or_bad = required_contexts_green(latest, required_contexts, pr_labels)
     if not ok:
         return MergeDecision(False, "wait", "required contexts not green: " + ", ".join(missing_or_bad))
     return MergeDecision(True, "merge", "ready")
@@ -253,27 +282,32 @@ def get_combined_status(sha: str) -> dict:
     _, combined = api("GET", f"/repos/{OWNER}/{NAME}/commits/{sha}/status")
     if not isinstance(combined, dict):
         raise ApiError(f"status for {sha} response not object")
-    # Fetch full statuses list; 200 covers >99% of real-world runs.
-    # The list is ordered ascending by id (oldest first) — callers must
-    # iterate in reverse to get the newest entry per context.
-    # Best-effort: large repos (main with 550+ statuses) may time out.
-    # On timeout, fall back to the statuses[] already in the combined
-    # response (usually 30 entries — enough for most PRs, enough for
-    # main's early push-required contexts).
+    combined_statuses: list[dict] = combined.get("statuses") or []
     try:
-        _, all_statuses = api(
+        _, all_statuses_raw = api(
             "GET",
             f"/repos/{OWNER}/{NAME}/commits/{sha}/statuses",
             query={"limit": "50"},
         )
-        if isinstance(all_statuses, list):
-            combined["statuses"] = all_statuses
+        if isinstance(all_statuses_raw, list):
+            all_statuses: list[dict] = list(all_statuses_raw)
+        else:
+            all_statuses = []
     except (ApiError, urllib.error.URLError, TimeoutError, OSError) as exc:
-        # URLError covers network-level failures (DNS, refused, timeout).
-        # TimeoutError and OSError cover socket-level timeouts.
         sys.stderr.write(f"::warning::could not fetch full statuses list for {sha[:8]}: {exc}\n")
-        # Fall back to the statuses[] already in the combined response.
-        pass
+        all_statuses = []
+    # Build latest per context: process combined (ascending→reverse=newest
+    # first), then fill gaps from all_statuses (already newest-first).
+    latest: dict[str, dict] = {}
+    for status in reversed(sorted(combined_statuses, key=lambda s: s.get("id") or 0)):
+        ctx = status.get("context")
+        if isinstance(ctx, str) and ctx not in latest:
+            latest[ctx] = status
+    for status in all_statuses:
+        ctx = status.get("context")
+        if isinstance(ctx, str) and ctx not in latest:
+            latest[ctx] = status
+    combined["statuses"] = list(latest.values())
     return combined
 
 
@@ -338,7 +372,16 @@ def merge_pull(pr_number: int, *, dry_run: bool) -> None:
     print(f"::notice::merging PR #{pr_number}")
     if dry_run:
         return
-    api("POST", f"/repos/{OWNER}/{NAME}/pulls/{pr_number}/merge", body=payload, expect_json=False)
+    try:
+        api("POST", f"/repos/{OWNER}/{NAME}/pulls/{pr_number}/merge", body=payload, expect_json=False)
+    except ApiError as exc:
+        # Re-raise permission-like errors so process_once can skip this PR.
+        # 403 = no push access, 404 = repo/pr not found, 405 = not allowed.
+        msg = str(exc)
+        for code in ("403", "404", "405"):
+            if code in msg:
+                raise MergePermissionError(msg) from exc
+        raise  # re-raise other ApiErrors unchanged
 
 
 def process_once(*, dry_run: bool = False) -> int:
@@ -380,11 +423,13 @@ def process_once(*, dry_run: bool = False) -> int:
     commits = get_pull_commits(pr_number)
     current_base = pr_has_current_base(pr, commits, main_sha)
     pr_status = get_combined_status(head_sha)
+    pr_labels = label_names(pr)
     decision = evaluate_merge_readiness(
         main_status=main_status,
         pr_status=pr_status,
         required_contexts=contexts,
         pr_has_current_base=current_base,
+        pr_labels=pr_labels,
     )
 
     print(f"::notice::PR #{pr_number} decision={decision.action}: {decision.reason}")
@@ -407,7 +452,25 @@ def process_once(*, dry_run: bool = False) -> int:
                 "deferring to next tick"
             )
             return 0
-        merge_pull(pr_number, dry_run=dry_run)
+        try:
+            merge_pull(pr_number, dry_run=dry_run)
+        except MergePermissionError as exc:
+            # Permanent merge failure (HTTP 403/404/405). Post a comment so
+            # maintainers know why, then return 0 so this tick is done.
+            # The PR stays in the queue; future ticks can retry after the
+            # permission issue is resolved.
+            sys.stderr.write(f"::error::merge permission error for PR #{pr_number}: {exc}\n")
+            post_comment(
+                pr_number,
+                (
+                    "merge-queue: merge failed with HTTP 405 'User not allowed to merge PR'. "
+                    "No available token has Can-merge permission on this repo. "
+                    "Fix: grant Can-merge to a token, or add a maintain/admin collaborator. "
+                    "Skipping to next queued PR on next tick."
+                ),
+                dry_run=dry_run,
+            )
+            return 0
         return 0
     return 0
 

.gitea/scripts/tests/test_gitea_merge_queue.py

@@ -118,3 +118,13 @@ def test_merge_decision_updates_stale_pr_before_merge():
 
     assert decision.ready is False
     assert decision.action == "update"
+
+
+def test_MergePermissionError_inherits_from_ApiError():
+    assert issubclass(mq.MergePermissionError, mq.ApiError)
+
+
+def test_MergePermissionError_message_preserved():
+    exc = mq.MergePermissionError("POST /merge -> HTTP 405: User not allowed")
+    assert "405" in str(exc)
+    assert "User not allowed" in str(exc)

.gitea/workflows/publish-runtime.yml

@@ -162,6 +162,7 @@ jobs:
             exit 1
           fi
           python -m twine upload \
+            --verbose \
             --repository pypi \
             --username __token__ \
             --password "$PYPI_TOKEN" \

canvas/src/components/ExternalConnectModal.tsx

@@ -15,7 +15,7 @@
 //     ($AGENT_URL). They ARE NOT filled in server-side because the
 //     server doesn't know where the operator's agent will live.
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 
 type Tab = "python" | "curl" | "claude" | "mcp" | "hermes" | "codex" | "openclaw" | "kimi" | "fields";
@@ -84,6 +84,33 @@ export function ExternalConnectModal({ info, onClose }: Props) {
     : "python";
   const [tab, setTab] = useState<Tab>(initialTab);
   const [copiedKey, setCopiedKey] = useState<string | null>(null);
+  const tabRefs = useRef<Map<Tab, HTMLButtonElement | null>>(new Map());
+
+  const handleTabKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>, current: Tab, tabs: Tab[]) => {
+      const idx = tabs.indexOf(current);
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = tabs[(idx + 1) % tabs.length];
+        setTab(next);
+        tabRefs.current.get(next)?.focus();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = tabs[(idx - 1 + tabs.length) % tabs.length];
+        setTab(prev);
+        tabRefs.current.get(prev)?.focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setTab(tabs[0]);
+        tabRefs.current.get(tabs[0])?.focus();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setTab(tabs[tabs.length - 1]);
+        tabRefs.current.get(tabs[tabs.length - 1])?.focus();
+      }
+    },
+    [],
+  );
 
   const copy = useCallback(async (value: string, key: string) => {
     try {
@@ -160,6 +187,19 @@ export function ExternalConnectModal({ info, onClose }: Props) {
     `MOLECULE_WORKSPACE_TOKEN=${info.auth_token}`,
   );
 
+  // Build the tab list once so both the tab bar and keyboard handler
+  // share the same ordered array. Computed here (after all filled* vars)
+  // so TypeScript's block-scoping analysis can reach them.
+  const tabList: Tab[] = [];
+  if (filledUniversalMcp) tabList.push("mcp");
+  tabList.push("python");
+  if (filledChannel) tabList.push("claude");
+  if (filledHermes) tabList.push("hermes");
+  if (filledCodex) tabList.push("codex");
+  if (filledOpenClaw) tabList.push("openclaw");
+  if (filledKimi) tabList.push("kimi");
+  tabList.push("curl", "fields");
+
   return (
     <Dialog.Root open onOpenChange={(o) => !o && onClose()}>
       <Dialog.Portal>
@@ -180,34 +220,18 @@ export function ExternalConnectModal({ info, onClose }: Props) {
             aria-label="Connection snippet format"
             className="mt-4 flex gap-1 border-b border-line"
           >
-            {(() => {
-              // Build the tab order dynamically. Claude Code first
-              // (when offered) since it's the simplest setup; Python
-              // SDK second (full register+heartbeat+inbound); Universal
-              // MCP third (any MCP-aware runtime, outbound-only); curl
-              // for one-shot register; Fields for raw values.
-              // Tab order: Universal MCP first (default, runtime-
-              // agnostic primitives), then runtime-specific channel/
-              // SDK tabs, then curl + Fields. Each runtime tab only
-              // appears when the platform supplies the snippet — no
-              // dead "tab missing snippet" UX.
-              const tabs: Tab[] = [];
-              if (filledUniversalMcp) tabs.push("mcp");
-              tabs.push("python");
-              if (filledChannel) tabs.push("claude");
-              if (filledHermes) tabs.push("hermes");
-              if (filledCodex) tabs.push("codex");
-              if (filledOpenClaw) tabs.push("openclaw");
-              if (filledKimi) tabs.push("kimi");
-              tabs.push("curl", "fields");
-              return tabs;
-            })().map((t) => (
+            {tabList.map((t) => (
               <button
                 key={t}
                 type="button"
                 role="tab"
+                id={`tab-${t}`}
                 aria-selected={tab === t}
+                aria-controls={`panel-${t}`}
+                tabIndex={tab === t ? 0 : -1}
+                ref={(el) => { tabRefs.current.set(t, el); }}
                 onClick={() => setTab(t)}
+                onKeyDown={(e) => handleTabKeyDown(e, t, tabList)}
                 className={`px-3 py-2 text-sm border-b-2 -mb-px transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface ${
                   tab === t
                     ? "border-accent text-ink"
@@ -235,18 +259,39 @@ export function ExternalConnectModal({ info, onClose }: Props) {
             ))}
           </div>
 
-          {/* Snippet area */}
-          <div className="mt-3">
-            {tab === "claude" && filledChannel && (
-              <SnippetBlock
-                value={filledChannel}
-                label="Claude Code channel — polls workspace's A2A; no tunnel needed"
-                copyKey="claude"
-                copied={copiedKey === "claude"}
-                onCopy={() => copy(filledChannel, "claude")}
-              />
-            )}
-            {tab === "python" && (
+          {/* Snippet area — all panels always in the DOM so aria-controls
+              targets are stable. Hidden panels use aria-hidden so screen
+              readers skip them; active panel uses role=tabpanel with
+              aria-labelledby pointing to the tab button. */}
+          <div className="mt-3" data-testid="snippet-panels">
+            {/* Claude Code tab */}
+            <div
+              id="panel-claude"
+              data-testid="panel-claude"
+              role="tabpanel"
+              aria-labelledby="tab-claude"
+              hidden={tab !== "claude" || !filledChannel}
+              className={tab === "claude" && filledChannel ? "" : "hidden"}
+            >
+              {filledChannel && (
+                <SnippetBlock
+                  value={filledChannel}
+                  label="Claude Code channel — polls workspace's A2A; no tunnel needed"
+                  copyKey="claude"
+                  copied={copiedKey === "claude"}
+                  onCopy={() => copy(filledChannel, "claude")}
+                />
+              )}
+            </div>
+            {/* Python SDK tab */}
+            <div
+              id="panel-python"
+              data-testid="panel-python"
+              role="tabpanel"
+              aria-labelledby="tab-python"
+              hidden={tab !== "python"}
+              className={tab === "python" ? "" : "hidden"}
+            >
               <SnippetBlock
                 value={filledPython}
                 label="Python SDK — includes heartbeat loop (push-mode, needs public URL)"
@@ -254,8 +299,16 @@ export function ExternalConnectModal({ info, onClose }: Props) {
                 copied={copiedKey === "python"}
                 onCopy={() => copy(filledPython, "python")}
               />
-            )}
-            {tab === "curl" && (
+            </div>
+            {/* curl tab */}
+            <div
+              id="panel-curl"
+              data-testid="panel-curl"
+              role="tabpanel"
+              aria-labelledby="tab-curl"
+              hidden={tab !== "curl"}
+              className={tab === "curl" ? "" : "hidden"}
+            >
               <SnippetBlock
                 value={filledCurl}
                 label="curl — one-shot register only (no heartbeat)"
@@ -263,53 +316,111 @@ export function ExternalConnectModal({ info, onClose }: Props) {
                 copied={copiedKey === "curl"}
                 onCopy={() => copy(filledCurl, "curl")}
               />
-            )}
-            {tab === "mcp" && filledUniversalMcp && (
-              <SnippetBlock
-                value={filledUniversalMcp}
-                label="Universal MCP — standalone register + heartbeat + tools for any MCP-aware runtime (Claude Code, hermes, codex). Pair with Python or Claude Code tab if you need inbound A2A delivery."
-                copyKey="mcp"
-                copied={copiedKey === "mcp"}
-                onCopy={() => copy(filledUniversalMcp, "mcp")}
-              />
-            )}
-            {tab === "hermes" && filledHermes && (
-              <SnippetBlock
-                value={filledHermes}
-                label="Hermes channel — bridges this workspace's A2A traffic into your hermes-agent session as platform messages (push parity with Claude Code). Long-poll based; no tunnel needed."
-                copyKey="hermes"
-                copied={copiedKey === "hermes"}
-                onCopy={() => copy(filledHermes, "hermes")}
-              />
-            )}
-            {tab === "codex" && filledCodex && (
-              <SnippetBlock
-                value={filledCodex}
-                label="Codex MCP config — wires the molecule MCP server into ~/.codex/config.toml. Outbound tools today; inbound A2A push needs the Python SDK tab paired in (codex's MCP runtime doesn't route arbitrary notifications/* yet)."
-                copyKey="codex"
-                copied={copiedKey === "codex"}
-                onCopy={() => copy(filledCodex, "codex")}
-              />
-            )}
-            {tab === "openclaw" && filledOpenClaw && (
-              <SnippetBlock
-                value={filledOpenClaw}
-                label="OpenClaw MCP config — wires the molecule MCP server via openclaw mcp set + starts the gateway on loopback. Outbound tools today; inbound A2A push on an external openclaw needs the Python SDK tab paired in (a sessions.steer bridge daemon is future work)."
-                copyKey="openclaw"
-                copied={copiedKey === "openclaw"}
-                onCopy={() => copy(filledOpenClaw, "openclaw")}
-              />
-            )}
-            {tab === "kimi" && filledKimi && (
-              <SnippetBlock
-                value={filledKimi}
-                label="Kimi CLI — self-contained Python bridge. Registers, heartbeats, polls for canvas messages, and echoes replies back. NAT-safe (no public URL). Run in a background terminal or via launchd."
-                copyKey="kimi"
-                copied={copiedKey === "kimi"}
-                onCopy={() => copy(filledKimi, "kimi")}
-              />
-            )}
-            {tab === "fields" && (
+            </div>
+            {/* Universal MCP tab */}
+            <div
+              id="panel-mcp"
+              data-testid="panel-mcp"
+              role="tabpanel"
+              aria-labelledby="tab-mcp"
+              hidden={tab !== "mcp" || !filledUniversalMcp}
+              className={tab === "mcp" && filledUniversalMcp ? "" : "hidden"}
+            >
+              {filledUniversalMcp && (
+                <SnippetBlock
+                  value={filledUniversalMcp}
+                  label="Universal MCP — standalone register + heartbeat + tools for any MCP-aware runtime (Claude Code, hermes, codex). Pair with Python or Claude Code tab if you need inbound A2A delivery."
+                  copyKey="mcp"
+                  copied={copiedKey === "mcp"}
+                  onCopy={() => copy(filledUniversalMcp, "mcp")}
+                />
+              )}
+            </div>
+            {/* Hermes tab */}
+            <div
+              id="panel-hermes"
+              data-testid="panel-hermes"
+              role="tabpanel"
+              aria-labelledby="tab-hermes"
+              hidden={tab !== "hermes" || !filledHermes}
+              className={tab === "hermes" && filledHermes ? "" : "hidden"}
+            >
+              {filledHermes && (
+                <SnippetBlock
+                  value={filledHermes}
+                  label="Hermes channel — bridges this workspace's A2A traffic into your hermes-agent session as platform messages (push parity with Claude Code). Long-poll based; no tunnel needed."
+                  copyKey="hermes"
+                  copied={copiedKey === "hermes"}
+                  onCopy={() => copy(filledHermes, "hermes")}
+                />
+              )}
+            </div>
+            {/* Codex tab */}
+            <div
+              id="panel-codex"
+              data-testid="panel-codex"
+              role="tabpanel"
+              aria-labelledby="tab-codex"
+              hidden={tab !== "codex" || !filledCodex}
+              className={tab === "codex" && filledCodex ? "" : "hidden"}
+            >
+              {filledCodex && (
+                <SnippetBlock
+                  value={filledCodex}
+                  label="Codex MCP config — wires the molecule MCP server into ~/.codex/config.toml. Outbound tools today; inbound A2A push needs the Python SDK tab paired in (codex's MCP runtime doesn't route arbitrary notifications/* yet)."
+                  copyKey="codex"
+                  copied={copiedKey === "codex"}
+                  onCopy={() => copy(filledCodex, "codex")}
+                />
+              )}
+            </div>
+            {/* OpenClaw tab */}
+            <div
+              id="panel-openclaw"
+              data-testid="panel-openclaw"
+              role="tabpanel"
+              aria-labelledby="tab-openclaw"
+              hidden={tab !== "openclaw" || !filledOpenClaw}
+              className={tab === "openclaw" && filledOpenClaw ? "" : "hidden"}
+            >
+              {filledOpenClaw && (
+                <SnippetBlock
+                  value={filledOpenClaw}
+                  label="OpenClaw MCP config — wires the molecule MCP server via openclaw mcp set + starts the gateway on loopback. Outbound tools today; inbound A2A push on an external openclaw needs the Python SDK tab paired in (a sessions.steer bridge daemon is future work)."
+                  copyKey="openclaw"
+                  copied={copiedKey === "openclaw"}
+                  onCopy={() => copy(filledOpenClaw, "openclaw")}
+                />
+              )}
+            </div>
+            {/* Kimi tab */}
+            <div
+              id="panel-kimi"
+              data-testid="panel-kimi"
+              role="tabpanel"
+              aria-labelledby="tab-kimi"
+              hidden={tab !== "kimi" || !filledKimi}
+              className={tab === "kimi" && filledKimi ? "" : "hidden"}
+            >
+              {filledKimi && (
+                <SnippetBlock
+                  value={filledKimi}
+                  label="Kimi CLI — self-contained Python bridge. Registers, heartbeats, polls for canvas messages, and echoes replies back. NAT-safe (no public URL). Run in a background terminal or via launchd."
+                  copyKey="kimi"
+                  copied={copiedKey === "kimi"}
+                  onCopy={() => copy(filledKimi, "kimi")}
+                />
+              )}
+            </div>
+            {/* Fields tab */}
+            <div
+              id="panel-fields"
+              data-testid="panel-fields"
+              role="tabpanel"
+              aria-labelledby="tab-fields"
+              hidden={tab !== "fields"}
+              className={tab === "fields" ? "" : "hidden"}
+            >
               <div className="space-y-2">
                 <Field label="workspace_id" value={info.workspace_id} onCopy={() => copy(info.workspace_id, "wsid")} copied={copiedKey === "wsid"} />
                 <Field label="platform_url" value={info.platform_url} onCopy={() => copy(info.platform_url, "url")} copied={copiedKey === "url"} />
@@ -323,7 +434,7 @@ export function ExternalConnectModal({ info, onClose }: Props) {
                 <Field label="registry_endpoint" value={info.registry_endpoint} onCopy={() => copy(info.registry_endpoint, "reg")} copied={copiedKey === "reg"} />
                 <Field label="heartbeat_endpoint" value={info.heartbeat_endpoint} onCopy={() => copy(info.heartbeat_endpoint, "hb")} copied={copiedKey === "hb"} />
               </div>
-            )}
+            </div>
           </div>
 
           <div className="mt-5 flex justify-end gap-2">

canvas/src/components/__tests__/ExternalConnectModal.test.tsx

@@ -131,7 +131,9 @@ describe("ExternalConnectModal — tab switching", () => {
   it("switches to the Python SDK tab and shows the snippet with stamped token", () => {
     renderAndFlush(defaultInfo);
     fireEvent.click(screen.getByRole("tab", { name: /python sdk/i }));
-    const preEl = document.querySelector("pre");
+    // Query within the python panel so we get the right pre (not the first in DOM).
+    const pythonPanel = document.querySelector("[data-testid='panel-python']");
+    const preEl = pythonPanel?.querySelector("pre");
     expect(preEl?.textContent).toContain("AUTH_TOKEN");
     // The placeholder is replaced with the real auth token
     expect(preEl?.textContent).toContain("secret-auth-token-abc");
@@ -140,7 +142,9 @@ describe("ExternalConnectModal — tab switching", () => {
   it("switches to the curl tab and shows the snippet with stamped token", () => {
     renderAndFlush(defaultInfo);
     fireEvent.click(screen.getByRole("tab", { name: /curl/i }));
-    const preEl = document.querySelector("pre");
+    // Query within the curl panel so we get the right pre (not the first in DOM).
+    const curlPanel = document.querySelector("[data-testid='panel-curl']");
+    const preEl = curlPanel?.querySelector("pre");
     expect(preEl?.textContent).toContain("curl");
     expect(preEl?.textContent).toContain("secret-auth-token-abc");
   });
@@ -148,9 +152,11 @@ describe("ExternalConnectModal — tab switching", () => {
   it("switches to the Fields tab and shows raw values", () => {
     renderAndFlush(defaultInfo);
     fireEvent.click(screen.getByRole("tab", { name: /fields/i }));
-    expect(screen.getByText("ws-123")).toBeTruthy();
-    expect(screen.getByText("https://app.example.com")).toBeTruthy();
-    expect(screen.getByText("secret-auth-token-abc")).toBeTruthy();
+    // Query within the fields panel for specific values.
+    const fieldsPanel = document.querySelector("[data-testid='panel-fields']");
+    expect(fieldsPanel?.textContent).toContain("ws-123");
+    expect(fieldsPanel?.textContent).toContain("https://app.example.com");
+    expect(fieldsPanel?.textContent).toContain("secret-auth-token-abc");
   });
 
   it("hides the Hermes tab when hermes_channel_snippet is absent", () => {
@@ -168,7 +174,8 @@ describe("ExternalConnectModal — snippet token stamping", () => {
   it("stamps the real auth_token into the Python snippet instead of the placeholder", () => {
     renderAndFlush(defaultInfo);
     fireEvent.click(screen.getByRole("tab", { name: /python sdk/i }));
-    const preEl = document.querySelector("pre");
+    const pythonPanel = document.querySelector("[data-testid='panel-python']");
+    const preEl = pythonPanel?.querySelector("pre");
     expect(preEl?.textContent).not.toContain("<paste from create response>");
     expect(preEl?.textContent).toContain("secret-auth-token-abc");
   });
@@ -176,7 +183,8 @@ describe("ExternalConnectModal — snippet token stamping", () => {
   it("stamps the real auth_token into the curl snippet", () => {
     renderAndFlush(defaultInfo);
     fireEvent.click(screen.getByRole("tab", { name: /curl/i }));
-    const preEl = document.querySelector("pre");
+    const curlPanel = document.querySelector("[data-testid='panel-curl']");
+    const preEl = curlPanel?.querySelector("pre");
     // curl template uses WORKSPACE_AUTH_TOKEN placeholder, not the generic one
     expect(preEl?.textContent).toContain("secret-auth-token-abc");
   });
@@ -184,7 +192,8 @@ describe("ExternalConnectModal — snippet token stamping", () => {
   it("stamps the real auth_token into the Universal MCP snippet", () => {
     renderAndFlush(defaultInfo);
     // Default tab is Universal MCP
-    const preEl = document.querySelector("pre");
+    const mcpPanel = document.querySelector("[data-testid='panel-mcp']");
+    const preEl = mcpPanel?.querySelector("pre");
     expect(preEl?.textContent).toContain("secret-auth-token-abc");
     expect(preEl?.textContent).not.toContain("<paste from create response>");
   });
@@ -193,8 +202,10 @@ describe("ExternalConnectModal — snippet token stamping", () => {
 describe("ExternalConnectModal — copy functionality", () => {
   it("calls navigator.clipboard.writeText with the snippet text", () => {
     renderAndFlush(defaultInfo);
-    // Default tab is Universal MCP
-    fireEvent.click(screen.getByRole("button", { name: /^copy$/i }));
+    // Default tab is Universal MCP — query the copy button within the mcp panel.
+    const mcpPanel = document.querySelector("[data-testid='panel-mcp']");
+    const copyBtn = mcpPanel?.querySelector("button");
+    if (copyBtn) fireEvent.click(copyBtn);
     expect(clipboardWriteText).toHaveBeenCalledWith(
       expect.stringContaining("secret-auth-token-abc"),
     );
@@ -227,7 +238,8 @@ describe("ExternalConnectModal — missing optional fields", () => {
     };
     renderAndFlush(minimalInfo);
     fireEvent.click(screen.getByRole("tab", { name: /fields/i }));
-    expect(screen.getByText("(missing)")).toBeTruthy();
+    const fieldsPanel = document.querySelector("[data-testid='panel-fields']");
+    expect(fieldsPanel?.textContent).toContain("(missing)");
   });
 
   it("hides the Hermes tab when hermes_channel_snippet is absent", () => {

canvas/src/components/tabs/ChannelsTab.tsx

@@ -262,7 +262,7 @@ export function ChannelsTab({ workspaceId }: Props) {
       </div>
 
       {error && (
-        <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+        <div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
           {error}
         </div>
       )}

canvas/src/components/tabs/DetailsTab.tsx

@@ -157,7 +157,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
               </select>
             </Field>
             {saveError && (
-              <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+              <div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
                 {saveError}
               </div>
             )}
@@ -203,7 +203,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
             {isRestartable && (
               <div className="pt-2">
                 {restartError && (
-                  <div className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+                  <div role="alert" aria-live="assertive" className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
                     {restartError}
                   </div>
                 )}
@@ -307,7 +307,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
       {/* Delete */}
       <Section title="Danger Zone">
         {deleteError && (
-          <div className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+          <div role="alert" aria-live="assertive" className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
             {deleteError}
           </div>
         )}

canvas/src/components/tabs/EventsTab.tsx

@@ -82,7 +82,7 @@ export function EventsTab({ workspaceId }: Props) {
       </div>
 
       {error && (
-        <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+        <div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
           {error}
         </div>
       )}

canvas/src/components/tabs/ExternalConnectionSection.tsx

@@ -102,7 +102,7 @@ export function ExternalConnectionSection({ workspaceId }: Props) {
       </div>
 
       {error && (
-        <div className="mt-2 px-2 py-1 bg-red-900/30 border border-red-800 rounded text-[10px] text-bad">
+        <div role="alert" aria-live="assertive" className="mt-2 px-2 py-1 bg-red-900/30 border border-red-800 rounded text-[10px] text-bad">
           {error}
         </div>
       )}

canvas/src/components/tabs/TracesTab.tsx

@@ -67,7 +67,7 @@ export function TracesTab({ workspaceId }: Props) {
       </div>
 
       {error && (
-        <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
+        <div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
           {error}
         </div>
       )}