@proteos/ui 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -55,7 +55,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
-    "@proteos/sdk": "0.31.0"
+    "@proteos/sdk": "0.32.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

package/src/components/draft-message-composer/create-draft-message-client.ts

@@ -0,0 +1,27 @@
+import type { ConversationClient } from '@proteos/sdk'
+
+import type { DraftMessageClient } from './types'
+
+/**
+ * One-liner adapter from the sdk ConversationClient (web app:
+ * `useSdk().conversation`; custom components: `useSdk().conversations`) to
+ * the composer's injected client. Type-only sdk import — no runtime coupling.
+ */
+export function createDraftMessageClient(
+  conversation: Pick<ConversationClient, 'messages' | 'conversations' | 'connections'>,
+): DraftMessageClient {
+  return {
+    getMessage: (messageId) => conversation.messages.get(messageId),
+    getConversation: (conversationId) => conversation.conversations.get(conversationId),
+    updateDraft: (messageId, patch) => conversation.messages.updateDraft(messageId, patch),
+    sendDraft: (messageId) => conversation.messages.sendDraft(messageId),
+    rejectDraft: (messageId) => conversation.messages.rejectDraft(messageId),
+    searchRecipients: async (connectionId, q) =>
+      (
+        await conversation.connections.listContactAddresses(connectionId, {
+          page_size: 100,
+          ...(q ? { q } : {}),
+        })
+      ).data,
+  }
+}

package/src/components/draft-message-composer/draft-message-actions-store.test.ts

@@ -0,0 +1,62 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  __resetDraftMessageActions,
+  type DraftMessageActions,
+  registerDraftMessageActions,
+  useDraftMessageActions,
+} from './draft-message-actions-store'
+
+const actions = (isBusy = false): DraftMessageActions => ({
+  send: () => Promise.resolve(),
+  reject: () => Promise.resolve(),
+  saveDraft: () => Promise.resolve(),
+  isBusy,
+})
+
+describe('draft-message-actions-store', () => {
+  beforeEach(() => {
+    __resetDraftMessageActions()
+  })
+
+  it('exposes registered actions and null after unregister', () => {
+    const { result } = renderHook(() => useDraftMessageActions('m-1'))
+    expect(result.current).toBeNull()
+
+    let unregister = () => {}
+    act(() => {
+      unregister = registerDraftMessageActions('m-1', actions())
+    })
+    expect(result.current).not.toBeNull()
+    expect(result.current?.isBusy).toBe(false)
+
+    act(() => unregister())
+    expect(result.current).toBeNull()
+  })
+
+  it('re-registration updates isBusy for subscribers', () => {
+    const { result } = renderHook(() => useDraftMessageActions('m-1'))
+    act(() => {
+      registerDraftMessageActions('m-1', actions(false))
+    })
+    act(() => {
+      registerDraftMessageActions('m-1', actions(true))
+    })
+    expect(result.current?.isBusy).toBe(true)
+  })
+
+  it('last-registered wins; a stale unregister does not clear the winner', () => {
+    const { result } = renderHook(() => useDraftMessageActions('m-1'))
+    const first = actions(false)
+    const second = actions(true)
+    let unregisterFirst = () => {}
+    act(() => {
+      unregisterFirst = registerDraftMessageActions('m-1', first)
+      registerDraftMessageActions('m-1', second)
+    })
+    act(() => unregisterFirst())
+    expect(result.current).not.toBeNull()
+    expect(result.current?.isBusy).toBe(true)
+  })
+})

package/src/components/draft-message-composer/draft-message-actions-store.ts

@@ -0,0 +1,81 @@
+import { useSyncExternalStore } from 'react'
+
+/* =========================================================================
+   Draft-actions registry — how EXTERNAL controls (a task-list row's
+   "Execute" button, any sibling in the same realm) drive a mounted
+   DraftMessageComposer without a ref. The composer registers its imperative
+   handlers per message id on mount and unregisters on unmount; callers grab
+   them with useDraftMessageActions and get real promises back. Outcomes
+   additionally flow through the outcome store + onSent/onRejected.
+
+   Same per-JS-realm scope as the outcome store (per page in the web app,
+   per iframe in the component runtime). Multiple composers mounted for one
+   message id: the last-registered wins.
+   ========================================================================= */
+
+export interface DraftMessageActions {
+  /** Persists dirty edits, then delivers — the internal Send button's path. */
+  send(): Promise<void>
+  /** Declines the draft. Bypasses the inline confirm — the external UI owns confirmation. */
+  reject(): Promise<void>
+  /** Persists the current edits without sending. */
+  saveDraft(): Promise<void>
+  /** True while the composer is saving/sending/rejecting — disable external buttons. */
+  isBusy: boolean
+}
+
+const actionsByMessageId = new Map<string, DraftMessageActions>()
+const listenersByMessageId = new Map<string, Set<() => void>>()
+
+function notify(messageId: string): void {
+  for (const listener of listenersByMessageId.get(messageId) ?? []) listener()
+}
+
+/**
+ * Registers a composer's handlers for its message id; returns the
+ * unregister. Re-register (a fresh object) whenever isBusy flips so
+ * subscribers re-render. Unregistering only clears the entry while it still
+ * owns it (last-registered wins across overlapping mounts).
+ */
+export function registerDraftMessageActions(
+  messageId: string,
+  actions: DraftMessageActions,
+): () => void {
+  actionsByMessageId.set(messageId, actions)
+  notify(messageId)
+  return () => {
+    if (actionsByMessageId.get(messageId) === actions) {
+      actionsByMessageId.delete(messageId)
+      notify(messageId)
+    }
+  }
+}
+
+/**
+ * The mounted composer's actions for this draft, or null while none is
+ * mounted (disable the external button).
+ */
+export function useDraftMessageActions(messageId: string): DraftMessageActions | null {
+  return useSyncExternalStore(
+    (listener) => {
+      let listeners = listenersByMessageId.get(messageId)
+      if (!listeners) {
+        listeners = new Set()
+        listenersByMessageId.set(messageId, listeners)
+      }
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+        if (listeners.size === 0) listenersByMessageId.delete(messageId)
+      }
+    },
+    () => actionsByMessageId.get(messageId) ?? null,
+    () => null,
+  )
+}
+
+/** Test-only escape hatch — clears every registration and listener. */
+export function __resetDraftMessageActions(): void {
+  actionsByMessageId.clear()
+  listenersByMessageId.clear()
+}

package/src/components/draft-message-composer/draft-message-composer.stories.tsx

@@ -0,0 +1,175 @@
+import type { ContactAddress, Conversation, Message } from '@proteos/sdk'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '../button'
+import { useDraftMessageActions } from './draft-message-actions-store'
+import { DraftMessageComposer } from './draft-message-composer'
+import { useDraftMessageOutcome } from './draft-message-outcome-store'
+import type { DraftMessageClient } from './types'
+
+/* Self-contained mock client — every story runs without a backend. */
+
+function fixtureMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: 'draft-1',
+    org_id: 'org-1',
+    conversation_id: 'conv-1',
+    connection_id: 'conn-1',
+    channel: 'email',
+    direction: 'outbound',
+    external_message_id: '',
+    sender: { name: 'Ava (agent)' },
+    recipients: [
+      { external_id: 'alice@example.com', name: 'Alice Prieto', role: 'to' },
+      { external_id: 'bob@example.com', name: 'Bob Ortega', role: 'cc' },
+    ],
+    content: [
+      {
+        type: 'text',
+        text: 'Hi Alice,\n\nsharing the quarterly numbers ahead of our call — headline: +18% QoQ.\n\nBest,\nAva',
+      },
+    ],
+    status: 'draft',
+    occurred_at: new Date().toISOString(),
+    metadata: {},
+    error: '',
+    created_at: new Date().toISOString(),
+    created_by: { type: 'agent', id: 'agent-1' },
+    updated_at: new Date().toISOString(),
+    updated_by: { type: 'agent', id: 'agent-1' },
+    ...overrides,
+  }
+}
+
+const directory: ContactAddress[] = [
+  { name: 'Alice Prieto', value: 'alice@example.com' } as ContactAddress,
+  { name: 'Bob Ortega', value: 'bob@example.com' } as ContactAddress,
+  { name: 'Carol Nguyen', value: 'carol@example.com' } as ContactAddress,
+]
+
+function client(
+  options: {
+    message?: Partial<Message>
+    conversation?: Partial<Conversation>
+    sendResult?: Partial<Message>
+    loadDelayMs?: number
+  } = {},
+): DraftMessageClient {
+  const message = fixtureMessage(options.message)
+  const conversation = {
+    id: 'conv-1',
+    subject: 'Quarterly numbers',
+    status: 'draft',
+    channel: message.channel,
+    ...options.conversation,
+  } as Conversation
+  const delay = <T,>(value: T): Promise<T> =>
+    new Promise((resolve) => setTimeout(() => resolve(value), options.loadDelayMs ?? 250))
+  return {
+    getMessage: () => delay(message),
+    getConversation: () => delay(conversation),
+    updateDraft: (_, patch) =>
+      delay(fixtureMessage({ ...options.message, content: patch.content })),
+    sendDraft: () =>
+      delay(fixtureMessage({ ...options.message, status: 'sent', ...options.sendResult })),
+    rejectDraft: () => delay(fixtureMessage({ ...options.message, status: 'rejected' })),
+    searchRecipients: (_, q) =>
+      delay(
+        directory.filter((address) => (address.name ?? '').toLowerCase().includes(q.toLowerCase())),
+      ),
+  }
+}
+
+const meta: Meta<typeof DraftMessageComposer> = {
+  title: 'Conversations/DraftMessageComposer',
+  component: DraftMessageComposer,
+  parameters: { layout: 'padded' },
+}
+export default meta
+
+type Story = StoryObj<typeof DraftMessageComposer>
+
+/** Originate email draft: subject + recipients editable. */
+export const EmailDraft: Story = {
+  args: { messageId: 'draft-1', client: client() },
+}
+
+/** Reply draft into a live thread: subject locked (derived from the thread). */
+export const EmailReplyDraft: Story = {
+  args: {
+    messageId: 'draft-1',
+    client: client({ conversation: { status: 'active', subject: 're: Quarterly numbers' } }),
+  },
+}
+
+/** Chat draft (Slack): body only, recipients read-only. */
+export const ChatDraft: Story = {
+  args: {
+    messageId: 'draft-1',
+    client: client({
+      message: {
+        channel: 'slack',
+        recipients: [{ external_id: 'U123', name: 'Alice Prieto', role: 'to' }],
+      },
+      conversation: { status: 'active', subject: '', channel: 'slack' },
+    }),
+  },
+}
+
+/** The human sends, delivery fails — terminal failure surface. */
+export const SendFails: Story = {
+  args: {
+    messageId: 'draft-1',
+    client: client({ sendResult: { status: 'failed', error: 'smtp 550 mailbox unavailable' } }),
+  },
+}
+
+/** Already decided elsewhere. */
+export const AlreadyRejected: Story = {
+  args: { messageId: 'draft-1', client: client({ message: { status: 'rejected' } }) },
+}
+
+export const SlowLoad: Story = {
+  args: { messageId: 'draft-1', client: client({ loadDelayMs: 3000 }) },
+}
+
+/** Task-list embedding: hidden internal actions, an external Execute button
+ *  drives send via useDraftMessageActions, outcome observed by a sibling. */
+export const ExternalControls: Story = {
+  render: () => {
+    const storyClient = client()
+    function TaskRow() {
+      const actions = useDraftMessageActions('draft-1')
+      const outcome = useDraftMessageOutcome('draft-1')
+      return (
+        <div className="flex items-center gap-3 border border-rule rounded-[10px] px-3 py-2">
+          <span className="text-[13px] text-ink flex-1">Task: send the quarterly update</span>
+          <span className="font-mono text-[11px] text-ink-3">
+            {outcome?.type ?? 'pending review'}
+          </span>
+          <Button
+            size="sm"
+            isDisabled={!actions || actions.isBusy || !!outcome}
+            onPress={() => void actions?.send()}
+          >
+            Execute task
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            isDisabled={!actions || actions.isBusy || !!outcome}
+            onPress={() => void actions?.reject()}
+          >
+            Discard
+          </Button>
+        </div>
+      )
+    }
+    return (
+      <div className="flex flex-col gap-3 max-w-2xl">
+        <TaskRow />
+        <DraftMessageComposer messageId="draft-1" client={storyClient} showActions={false} />
+      </div>
+    )
+  },
+}

package/src/components/draft-message-composer/draft-message-composer.test.tsx

@@ -0,0 +1,276 @@
+import type { Conversation, Message } from '@proteos/sdk'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { __resetDraftMessageActions, useDraftMessageActions } from './draft-message-actions-store'
+import { DraftMessageComposer } from './draft-message-composer'
+import { __resetDraftMessageOutcomes, useDraftMessageOutcome } from './draft-message-outcome-store'
+import type { DraftMessageClient } from './types'
+
+function draftMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: 'draft-1',
+    org_id: 'org-1',
+    conversation_id: 'conv-1',
+    connection_id: 'conn-1',
+    channel: 'email',
+    direction: 'outbound',
+    external_message_id: '',
+    sender: { name: 'Ava Agent' },
+    recipients: [{ external_id: 'a@x.io', name: 'Alice', role: 'to' }],
+    content: [{ type: 'text', text: 'agent draft body' }],
+    status: 'draft',
+    occurred_at: '2026-07-22T10:00:00Z',
+    metadata: {},
+    error: '',
+    created_at: '2026-07-22T10:00:00Z',
+    created_by: { type: 'agent', id: 'agent-1' },
+    updated_at: '2026-07-22T10:00:00Z',
+    updated_by: { type: 'agent', id: 'agent-1' },
+    ...overrides,
+  }
+}
+
+function draftConversation(overrides: Partial<Conversation> = {}): Conversation {
+  return {
+    id: 'conv-1',
+    subject: 'quarterly numbers',
+    status: 'draft',
+    channel: 'email',
+    ...overrides,
+  } as Conversation
+}
+
+function mockClient(overrides: Partial<DraftMessageClient> = {}): DraftMessageClient {
+  return {
+    getMessage: vi.fn().mockResolvedValue(draftMessage()),
+    getConversation: vi.fn().mockResolvedValue(draftConversation()),
+    updateDraft: vi
+      .fn()
+      .mockImplementation((_, patch) => Promise.resolve(draftMessage({ content: patch.content }))),
+    sendDraft: vi.fn().mockResolvedValue(draftMessage({ status: 'sent' })),
+    rejectDraft: vi.fn().mockResolvedValue(draftMessage({ status: 'rejected' })),
+    searchRecipients: vi.fn().mockResolvedValue([]),
+    ...overrides,
+  }
+}
+
+function OutcomeProbe({ messageId }: { messageId: string }) {
+  const outcome = useDraftMessageOutcome(messageId)
+  return <output data-testid="outcome">{outcome?.type ?? 'none'}</output>
+}
+
+function ExternalControls({ messageId }: { messageId: string }) {
+  const actions = useDraftMessageActions(messageId)
+  return (
+    <button
+      type="button"
+      disabled={!actions || actions.isBusy}
+      onClick={() => void actions?.send()}
+    >
+      Execute task
+    </button>
+  )
+}
+
+describe('DraftMessageComposer', () => {
+  beforeEach(() => {
+    __resetDraftMessageOutcomes()
+    __resetDraftMessageActions()
+  })
+
+  it('loads the draft into the composer (email: body + subject)', async () => {
+    render(<DraftMessageComposer messageId="draft-1" client={mockClient()} />)
+    expect(await screen.findByDisplayValue('agent draft body')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('quarterly numbers')).toBeInTheDocument()
+    expect(screen.getByText('Draft · awaiting review')).toBeInTheDocument()
+  })
+
+  it('renders terminal cards for already-decided drafts', async () => {
+    render(
+      <DraftMessageComposer
+        messageId="draft-1"
+        client={mockClient({
+          getMessage: vi.fn().mockResolvedValue(draftMessage({ status: 'rejected' })),
+        })}
+      />,
+    )
+    expect(await screen.findByText('This draft was rejected.')).toBeInTheDocument()
+  })
+
+  it('renders a load error with retry', async () => {
+    const getMessage = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('boom'))
+      .mockResolvedValue(draftMessage())
+    render(<DraftMessageComposer messageId="draft-1" client={mockClient({ getMessage })} />)
+    expect(await screen.findByText(/boom/)).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'retry' }))
+    expect(await screen.findByDisplayValue('agent draft body')).toBeInTheDocument()
+  })
+
+  it('Save draft persists the edited body as one text block', async () => {
+    const client = mockClient()
+    render(<DraftMessageComposer messageId="draft-1" client={client} />)
+    const body = await screen.findByDisplayValue('agent draft body')
+    await userEvent.clear(body)
+    await userEvent.type(body, 'sharper body')
+    await userEvent.click(screen.getByRole('button', { name: 'Save draft' }))
+    await waitFor(() => expect(client.updateDraft).toHaveBeenCalledTimes(1))
+    const patch = vi.mocked(client.updateDraft).mock.calls[0]?.[1]
+    expect(patch?.content).toEqual([{ type: 'text', text: 'sharper body' }])
+    expect(patch?.subject).toBe('quarterly numbers')
+  })
+
+  it('Send persists dirty edits first, fires onSent and the outcome store', async () => {
+    const client = mockClient()
+    const calls: string[] = []
+    vi.mocked(client.updateDraft).mockImplementation(async (_, patch) => {
+      calls.push('update')
+      return draftMessage({ content: patch.content })
+    })
+    vi.mocked(client.sendDraft).mockImplementation(async () => {
+      calls.push('send')
+      return draftMessage({ status: 'sent' })
+    })
+    const onSent = vi.fn()
+    render(
+      <>
+        <DraftMessageComposer messageId="draft-1" client={client} onSent={onSent} />
+        <OutcomeProbe messageId="draft-1" />
+      </>,
+    )
+    const body = await screen.findByDisplayValue('agent draft body')
+    await userEvent.type(body, ' — edited')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+
+    await screen.findByText('This draft was sent.')
+    expect(calls).toEqual(['update', 'send'])
+    expect(onSent).toHaveBeenCalledTimes(1)
+    expect(screen.getByTestId('outcome')).toHaveTextContent('sent')
+  })
+
+  it('a failed delivery is terminal with no callback and no outcome', async () => {
+    const client = mockClient({
+      sendDraft: vi.fn().mockResolvedValue(draftMessage({ status: 'failed', error: 'smtp 550' })),
+    })
+    const onSent = vi.fn()
+    render(
+      <>
+        <DraftMessageComposer messageId="draft-1" client={client} onSent={onSent} />
+        <OutcomeProbe messageId="draft-1" />
+      </>,
+    )
+    await screen.findByDisplayValue('agent draft body')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    expect(await screen.findByText(/Sending failed — smtp 550/)).toBeInTheDocument()
+    expect(onSent).not.toHaveBeenCalled()
+    expect(screen.getByTestId('outcome')).toHaveTextContent('none')
+  })
+
+  it('a transport failure keeps the edits and shows a banner', async () => {
+    const client = mockClient({ sendDraft: vi.fn().mockRejectedValue(new Error('network down')) })
+    render(<DraftMessageComposer messageId="draft-1" client={client} />)
+    const body = await screen.findByDisplayValue('agent draft body')
+    await userEvent.type(body, ' more')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    expect(await screen.findByText(/network down — your edits are kept/)).toBeInTheDocument()
+    expect(screen.getByDisplayValue('agent draft body more')).toBeInTheDocument()
+  })
+
+  it('removing every recipient ships explicit empty groups (clear, not keep)', async () => {
+    const client = mockClient()
+    render(<DraftMessageComposer messageId="draft-1" client={client} />)
+    await screen.findByDisplayValue('agent draft body')
+    // Remove the only To chip, then save.
+    await userEvent.click(screen.getByRole('button', { name: 'Remove' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Save draft' }))
+    await waitFor(() => expect(client.updateDraft).toHaveBeenCalledTimes(1))
+    const patch = vi.mocked(client.updateDraft).mock.calls[0]?.[1]
+    expect(patch?.to).toEqual([])
+    expect(patch?.cc).toEqual([])
+    expect(patch?.bcc).toEqual([])
+  })
+
+  it('an originate draft with no recipients refuses to send', async () => {
+    const client = mockClient()
+    render(<DraftMessageComposer messageId="draft-1" client={client} showActions={false} />)
+    render(<ExternalControls messageId="draft-1" />)
+    await screen.findByDisplayValue('agent draft body')
+    await userEvent.click(screen.getByRole('button', { name: 'Remove' }))
+    const execute = screen.getByRole('button', { name: 'Execute task' })
+    await waitFor(() => expect(execute).toBeEnabled())
+    await userEvent.click(execute)
+    expect(await screen.findByText(/Add at least one recipient/)).toBeInTheDocument()
+    expect(client.sendDraft).not.toHaveBeenCalled()
+  })
+
+  it('Reject is a two-step confirm, fires onRejected and the outcome store', async () => {
+    const client = mockClient()
+    const onRejected = vi.fn()
+    render(
+      <>
+        <DraftMessageComposer messageId="draft-1" client={client} onRejected={onRejected} />
+        <OutcomeProbe messageId="draft-1" />
+      </>,
+    )
+    await screen.findByDisplayValue('agent draft body')
+    await userEvent.click(screen.getByRole('button', { name: 'Reject' }))
+    expect(client.rejectDraft).not.toHaveBeenCalled()
+    await userEvent.click(screen.getByRole('button', { name: 'Confirm reject' }))
+    await screen.findByText('This draft was rejected.')
+    expect(onRejected).toHaveBeenCalledTimes(1)
+    expect(screen.getByTestId('outcome')).toHaveTextContent('rejected')
+  })
+
+  it('chat drafts render without subject or recipient rows', async () => {
+    const client = mockClient({
+      getMessage: vi.fn().mockResolvedValue(draftMessage({ channel: 'slack' })),
+      getConversation: vi.fn().mockResolvedValue({
+        id: 'conv-1',
+        subject: '',
+        status: 'active',
+        channel: 'slack',
+      } as Conversation),
+    })
+    render(<DraftMessageComposer messageId="draft-1" client={client} />)
+    expect(await screen.findByDisplayValue('agent draft body')).toBeInTheDocument()
+    expect(screen.queryByPlaceholderText('Subject')).not.toBeInTheDocument()
+  })
+
+  it('showActions=false hides the action row and lets a sibling drive send', async () => {
+    const client = mockClient()
+    render(
+      <>
+        <DraftMessageComposer messageId="draft-1" client={client} showActions={false} />
+        <ExternalControls messageId="draft-1" />
+        <OutcomeProbe messageId="draft-1" />
+      </>,
+    )
+    await screen.findByDisplayValue('agent draft body')
+    expect(screen.queryByRole('button', { name: 'Reject' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Save draft' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Send' })).not.toBeInTheDocument()
+
+    const execute = screen.getByRole('button', { name: 'Execute task' })
+    await waitFor(() => expect(execute).toBeEnabled())
+    await userEvent.click(execute)
+    await screen.findByText('This draft was sent.')
+    expect(screen.getByTestId('outcome')).toHaveTextContent('sent')
+  })
+
+  it('unregisters its actions after reaching a terminal state', async () => {
+    const client = mockClient()
+    render(
+      <>
+        <DraftMessageComposer messageId="draft-1" client={client} />
+        <ExternalControls messageId="draft-1" />
+      </>,
+    )
+    await screen.findByDisplayValue('agent draft body')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    await screen.findByText('This draft was sent.')
+    expect(screen.getByRole('button', { name: 'Execute task' })).toBeDisabled()
+  })
+})