fix(mothership): let the blocked Edit button's tooltip open

A disabled button gets no hover or focus, so the tooltip explaining why the
Edit button was blocked never opened. It is now aria-disabled, ignores
clicks while blocked, and keeps its label for screen readers.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.dom.test.tsx

@@ -0,0 +1,77 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+/** The queued message renders its content through the real block registry. */
+vi.unmock('@/blocks/registry')
+
+import { QueuedMessages } from '@/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages'
+
+const mounted: Array<() => void> = []
+
+/** jsdom has no ResizeObserver; the queue measures its width with one. */
+class ResizeObserverMock {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+}
+
+function renderQueue(admissionUnknown: boolean) {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  const onEdit = vi.fn()
+  act(() => {
+    root.render(
+      <QueuedMessages
+        messageQueue={[{ id: 'held-first', content: 'inspect the workspace', admissionUnknown }]}
+        editingQueuedId={null}
+        dispatchingHeadId={null}
+        onRemove={() => {}}
+        onSendNow={async () => {}}
+        onEdit={onEdit}
+        onCancelEdit={() => {}}
+      />
+    )
+  })
+  mounted.push(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+  const editButton = container.querySelector<HTMLButtonElement>(
+    'button[aria-label="Edit queued message"], button[aria-label^="May already be sent"]'
+  )
+  if (!editButton) throw new Error('Edit button not rendered')
+  return { editButton, onEdit }
+}
+
+describe('QueuedMessages edit button', () => {
+  afterEach(() => {
+    for (const unmount of mounted.splice(0)) unmount()
+  })
+
+  it('keeps a message that may already be sent from being edited, and says why', () => {
+    const { editButton, onEdit } = renderQueue(true)
+
+    /** Still focusable and hoverable, so its tooltip can explain why. */
+    expect(editButton.disabled).toBe(false)
+    expect(editButton.getAttribute('aria-disabled')).toBe('true')
+    expect(editButton.getAttribute('aria-label')).toBe(
+      'May already be sent; editing could send a second message'
+    )
+    act(() => editButton.click())
+    expect(onEdit).not.toHaveBeenCalled()
+  })
+
+  it('edits an ordinary queued message', () => {
+    const { editButton, onEdit } = renderQueue(false)
+
+    act(() => editButton.click())
+    expect(onEdit).toHaveBeenCalledWith('held-first')
+  })
+})

apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx

@@ -75,6 +75,11 @@ export function QueuedMessages({
             const isEditing = msg.id === editingQueuedId
             const isDispatching = msg.id === dispatchingHeadId
             const editBlocked = isDispatching || msg.admissionUnknown === true
+            const editLabel = isDispatching
+              ? 'Sending now'
+              : msg.admissionUnknown
+                ? 'May already be sent; editing could send a second message'
+                : 'Edit queued message'
             return (
               <div
                 key={msg.id}
@@ -141,31 +146,24 @@ export function QueuedMessages({
                     <>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
+                          {/* aria-disabled, not disabled: a disabled button gets no hover or
+                              focus, so the tooltip saying why could never open. */}
                           <button
-                            aria-label={
-                              isDispatching
-                                ? 'Sending now'
-                                : msg.admissionUnknown
-                                  ? 'May already be sent; editing could send a second message'
-                                  : 'Edit queued message'
-                            }
+                            aria-label={editLabel}
+                            aria-disabled={editBlocked}
                             type='button'
-                            disabled={editBlocked}
                             onClick={(e) => {
                               e.stopPropagation()
+                              if (editBlocked) return
                               onEdit(msg.id)
                             }}
-                            className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover-hover:bg-transparent disabled:hover-hover:text-[var(--text-icon)]'
+                            className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)] aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover-hover:bg-transparent aria-disabled:hover-hover:text-[var(--text-icon)]'
                           >
                             <Pencil className='size-[13px]' />
                           </button>
                         </Tooltip.Trigger>
                         <Tooltip.Content side='top' sideOffset={4}>
-                          {isDispatching
-                            ? 'Sending now'
-                            : msg.admissionUnknown
-                              ? 'May already be sent; editing could send a second message'
-                              : 'Edit queued message'}
+                          {editLabel}
                         </Tooltip.Content>
                       </Tooltip.Root>