From 5812b43de5419d418dcb241fb21ae5225dfd5149 Mon Sep 17 00:00:00 2001
From: Molecule AI Triage Operator <triage-operator@agents.moleculesai.app>
Date: Sat, 18 Apr 2026 01:22:08 +0000
Subject: [PATCH] =?UTF-8?q?fix(gate-6):=20reconcile=20DetailsTab.tsx=20imp?=
 =?UTF-8?q?ort=20=E2=80=94=20merge=20useRef=20(#878)=20with=20useId/cloneE?=
 =?UTF-8?q?lement=20(#875)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #878 landed before this branch and added useRef + deleteButtonRef focus-
management to DetailsTab.tsx. This commit combines that import with the
useId/cloneElement import added here, and preserves the Field component
htmlFor/id wiring from this PR unchanged.

Mechanical conflict resolution by triage-agent; no logic changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/tabs/DetailsTab.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/canvas/src/components/tabs/DetailsTab.tsx b/canvas/src/components/tabs/DetailsTab.tsx
index 4e30b97d..e49e1419 100644
--- a/canvas/src/components/tabs/DetailsTab.tsx
+++ b/canvas/src/components/tabs/DetailsTab.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useId, cloneElement, type ReactElement } from "react";
+import { useState, useEffect, useCallback, useRef, useId, cloneElement, type ReactElement } from "react";
 import { api } from "@/lib/api";
 import { useCanvasStore, type WorkspaceNodeData } from "@/store/canvas";
 import { StatusDot } from "../StatusDot";
@@ -36,6 +36,8 @@ export function DetailsTab({ workspaceId, data }: Props) {
   const updateNodeData = useCanvasStore((s) => s.updateNodeData);
   const removeNode = useCanvasStore((s) => s.removeNode);
   const selectNode = useCanvasStore((s) => s.selectNode);
+  // Ref for the "Delete Workspace" trigger — Cancel returns focus here
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     setName(data.name);
@@ -255,7 +257,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
           </div>
         )}
         {confirmDelete ? (
-          <div className="flex gap-2">
+          <div role="alert" className="flex gap-2">
             <button
               onClick={handleDelete}
               className="px-3 py-1 bg-red-600 hover:bg-red-500 text-xs rounded text-white"
@@ -263,7 +265,12 @@ export function DetailsTab({ workspaceId, data }: Props) {
               Confirm Delete
             </button>
             <button
-              onClick={() => { setConfirmDelete(false); setDeleteError(null); }}
+              onClick={() => {
+                setConfirmDelete(false);
+                setDeleteError(null);
+                // Return focus to the trigger so keyboard users aren't stranded
+                deleteButtonRef.current?.focus();
+              }}
               className="px-3 py-1 bg-zinc-700 hover:bg-zinc-600 text-xs rounded text-zinc-300"
             >
               Cancel
@@ -271,6 +278,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
           </div>
         ) : (
           <button
+            ref={deleteButtonRef}
             onClick={() => setConfirmDelete(true)}
             className="px-3 py-1 bg-zinc-800 hover:bg-red-900 border border-zinc-700 hover:border-red-700 text-xs rounded text-zinc-400 hover:text-red-400 transition-colors"
           >