@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/agents/AgentDrawerPanel.test.tsx

@@ -0,0 +1,361 @@
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { AgentDrawerPanel } from './AgentDrawerPanel.js'
+import {
+  AgentLivePhase,
+  AgentUiRunState,
+  type AgentDrawerPanelProps,
+} from './agentTypes.js'
+
+type ReactActGlobal = typeof globalThis & {
+  IS_REACT_ACT_ENVIRONMENT?: boolean
+}
+
+function baseProps(
+  overrides: Partial<AgentDrawerPanelProps> = {},
+): AgentDrawerPanelProps {
+  return {
+    messages: [],
+    assistantLabel: 'Assistant',
+    pendingToolCalls: [],
+    runState: AgentUiRunState.AwaitingUser,
+    busy: false,
+    error: null,
+    composerValue: 'draft',
+    onComposerChange: vi.fn(),
+    onSend: vi.fn(),
+    onApproveTools: vi.fn(),
+    onRejectTools: vi.fn(),
+    ...overrides,
+  }
+}
+
+describe('AgentDrawerPanel composer and steering behavior', () => {
+  let host: HTMLDivElement
+  let root: Root
+
+  beforeAll(() => {
+    ;(globalThis as ReactActGlobal).IS_REACT_ACT_ENVIRONMENT = true
+  })
+
+  beforeEach(() => {
+    host = document.createElement('div')
+    document.body.appendChild(host)
+    root = createRoot(host)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    host.remove()
+  })
+
+  function render(props: AgentDrawerPanelProps): void {
+    act(() => {
+      root.render(<AgentDrawerPanel {...props} />)
+    })
+  }
+
+  it('keeps the composer textarea editable and replaces send with stop while busy', () => {
+    render(baseProps({ busy: true, onStop: vi.fn() }))
+
+    const textarea = host.querySelector('textarea')
+    const stopButton = host.querySelector('button[aria-label="Stop"]')
+    const sendButton = host.querySelector('button[aria-label="Send"]')
+
+    expect(textarea).toBeInstanceOf(HTMLTextAreaElement)
+    expect((textarea as HTMLTextAreaElement).disabled).toBe(false)
+    expect(stopButton).toBeInstanceOf(HTMLButtonElement)
+    expect((stopButton as HTMLButtonElement).disabled).toBe(false)
+    expect(sendButton).toBeNull()
+  })
+
+  it('keeps the composer textarea editable when the run state is ready', () => {
+    render(baseProps({ runState: AgentUiRunState.Ready }))
+
+    const textarea = host.querySelector('textarea')
+
+    expect(textarea).toBeInstanceOf(HTMLTextAreaElement)
+    expect((textarea as HTMLTextAreaElement).disabled).toBe(false)
+  })
+
+  it('renders manual approval controls and composer together', () => {
+    render(
+      baseProps({
+        pendingToolCalls: [
+          {
+            id: 'call-1',
+            name: 'book.write',
+            arguments: {},
+          },
+        ],
+      }),
+    )
+
+    const buttons = Array.from(host.querySelectorAll('button'))
+    const textarea = host.querySelector('textarea')
+
+    expect(textarea).toBeInstanceOf(HTMLTextAreaElement)
+    expect((textarea as HTMLTextAreaElement).disabled).toBe(false)
+    expect(host.textContent).toContain('Write')
+    expect(buttons.map(button => button.textContent)).toContain('Approve')
+    expect(buttons.map(button => button.textContent)).toContain('Reject')
+    expect(
+      buttons.find(button => button.textContent === 'Approve')?.disabled,
+    ).toBe(false)
+  })
+
+  it('renders delegated child activity in the thread, not approval controls', () => {
+    const delegatedActivity = {
+      delegationId: 'delegation-1',
+      childSessionId: 'child-session',
+      childJobId: 'child-job',
+      childAppSlug: 'tasks',
+      liveTurn: {
+        phase: AgentLivePhase.Responding,
+        thinking: '',
+        text: 'I found three overdue tasks.',
+        toolCalls: [
+          {
+            id: 'child-call-2',
+            name: 'tasks.summarize',
+            arguments: {},
+          },
+        ],
+        activeTool: {
+          toolCallId: 'child-call-1',
+          name: 'tasks.list',
+          arguments: {},
+        },
+      },
+    }
+
+    render(
+      baseProps({
+        pendingToolCalls: [
+          {
+            id: 'call-1',
+            name: 'harness.invoke_agent',
+            arguments: {
+              appSlug: 'tasks',
+              message: 'Check open tasks',
+            },
+            delegatedActivity,
+          },
+        ],
+      }),
+    )
+
+    expect(host.textContent).not.toContain('tasks agent using List')
+    expect(host.textContent).not.toContain('Running List')
+    expect(host.textContent).not.toContain('I found three overdue tasks.')
+
+    render(
+      baseProps({
+        messages: [
+          {
+            id: 'assistant-1',
+            role: 'assistant',
+            content: '',
+            toolCalls: [
+              {
+                id: 'call-1',
+                name: 'harness.invoke_agent',
+                arguments: {
+                  appSlug: 'tasks',
+                  message: 'Check open tasks',
+                },
+                delegatedActivity,
+              },
+            ],
+          },
+        ],
+      }),
+    )
+
+    expect(host.textContent).toContain('tasks agent using List')
+    expect(host.textContent).not.toContain('I found three overdue tasks.')
+
+    const toolRow = host.querySelector('button[aria-expanded]')
+    expect(toolRow).toBeInstanceOf(HTMLButtonElement)
+
+    act(() => {
+      toolRow?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(host.textContent).toContain('Running List')
+    expect(host.textContent).toContain('Prepared Summarize')
+  })
+
+  it('renders persisted follow-up controls above the composer surface', () => {
+    const onRemoveFollowUp = vi.fn()
+    const onSendFollowUpNow = vi.fn()
+    render(
+      baseProps({
+        busy: true,
+        followUps: [
+          {
+            id: 'followup-1',
+            message: 'Look at the second chapter',
+            position: 0,
+          },
+        ],
+        onRemoveFollowUp,
+        onSendFollowUpNow,
+      }),
+    )
+
+    const sendNow = host.querySelector('button[aria-label="Send follow-up now"]')
+    const remove = host.querySelector('button[aria-label="Remove follow-up"]')
+    const textarea = host.querySelector('textarea')
+    const composerSurface = textarea?.parentElement
+
+    expect(host.textContent).not.toContain('Queued follow-ups')
+    expect(host.textContent).toContain('Look at the second chapter')
+    expect(composerSurface?.textContent).not.toContain('Queued follow-ups')
+    expect(composerSurface?.textContent).not.toContain(
+      'Look at the second chapter',
+    )
+    expect(sendNow).toBeInstanceOf(HTMLButtonElement)
+    expect(remove).toBeInstanceOf(HTMLButtonElement)
+
+    act(() => {
+      sendNow?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      remove?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(onSendFollowUpNow).toHaveBeenCalledWith('followup-1')
+    expect(onRemoveFollowUp).toHaveBeenCalledWith('followup-1')
+  })
+
+  it('keeps follow-up play available when the drawer is not busy', () => {
+    const onSendFollowUpNow = vi.fn()
+    render(
+      baseProps({
+        busy: false,
+        followUps: [
+          {
+            id: 'followup-1',
+            message: 'Run this next',
+            position: 0,
+          },
+        ],
+        onSendFollowUpNow,
+      }),
+    )
+
+    const sendNow = host.querySelector('button[aria-label="Send follow-up now"]')
+
+    expect(sendNow).toBeInstanceOf(HTMLButtonElement)
+    expect((sendNow as HTMLButtonElement).disabled).toBe(false)
+
+    act(() => {
+      sendNow?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(onSendFollowUpNow).toHaveBeenCalledWith('followup-1')
+  })
+
+  it('renders question prompts in the composer without approval controls', async () => {
+    const onAnswerQuestionTool = vi.fn()
+    const onDeclineQuestionTool = vi.fn()
+    render(
+      baseProps({
+        busy: true,
+        pendingQuestionToolCalls: [
+          {
+            id: 'question-1',
+            name: 'harness.questions',
+            arguments: {
+              question: 'Which source should I use?',
+              mode: 'single_choice',
+              options: [
+                { id: 'notes', label: 'Notes' },
+                { id: 'files', label: 'Files' },
+              ],
+            },
+          },
+        ],
+        onAnswerQuestionTool,
+        onDeclineQuestionTool,
+      }),
+    )
+
+    const buttons = Array.from(host.querySelectorAll('button'))
+    const notesButton = buttons.find(button => button.textContent === 'Notes')
+    const answerButton = buttons.find(button => button.textContent === 'Answer')
+    const approveButton = buttons.find(
+      button => button.textContent === 'Approve',
+    )
+
+    expect(host.textContent).toContain('Which source should I use?')
+    expect(approveButton).toBeUndefined()
+    expect(notesButton).toBeInstanceOf(HTMLButtonElement)
+    expect(notesButton?.disabled).toBe(false)
+    expect(answerButton).toBeInstanceOf(HTMLButtonElement)
+    expect(answerButton?.disabled).toBe(true)
+
+    act(() => {
+      notesButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(answerButton?.disabled).toBe(false)
+
+    await act(async () => {
+      answerButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await Promise.resolve()
+    })
+
+    expect(onAnswerQuestionTool).toHaveBeenCalledWith('question-1', ['notes'])
+
+    const declineInput = host.querySelector(
+      'input[aria-label="Decline reason"]',
+    ) as HTMLInputElement | null
+    const declineButton = buttons.find(
+      button => button.textContent === 'Decline',
+    )
+    const setter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    )?.set
+
+    await act(async () => {
+      setter?.call(declineInput, 'Need more context')
+      declineInput?.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    })
+    await act(async () => {
+      declineButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await Promise.resolve()
+    })
+
+    expect(onDeclineQuestionTool).toHaveBeenCalledWith(
+      'question-1',
+      'Need more context',
+    )
+  })
+
+  it('collapses question prompts with preserved exiting content', () => {
+    const question = {
+      id: 'question-1',
+      name: 'harness.questions',
+      arguments: {
+        question: 'Which source should I use?',
+        mode: 'single_choice',
+        options: [{ id: 'notes', label: 'Notes' }],
+      },
+    }
+
+    render(baseProps({ pendingQuestionToolCalls: [question] }))
+
+    const openPresence = host.querySelector('[data-animation-direction="y"]')
+    expect(openPresence).toBeInstanceOf(HTMLElement)
+    expect(host.textContent).toContain('Which source should I use?')
+
+    render(baseProps({ pendingQuestionToolCalls: [] }))
+
+    const closingPresence = host.querySelector('[data-animation-direction="y"]')
+    expect(closingPresence).toBeInstanceOf(HTMLElement)
+    expect(closingPresence?.getAttribute('data-open')).toBe('false')
+    expect(host.textContent).toContain('Which source should I use?')
+  })
+})

package/src/components/agents/AgentDrawerPanel.tsx

@@ -1,82 +1,122 @@
-import { InlineBanner } from '../common/feedback/InlineBanner.js'
-import { AgentComposer } from './AgentComposer.js'
-import { AgentContextUsageBar } from './AgentContextUsageBar.js'
-import { AgentMessageList } from './AgentMessageList.js'
-import { AgentToolPendingList } from './AgentToolPendingList.js'
-import type { AgentDrawerPanelProps } from './agentTypes.js'
-import { AgentUiRunState } from './agentTypes.js'
-import {
-  StyledAgentBody,
-  StyledAgentDrawer,
-  StyledAgentFooter,
-} from './agentPanelStyles.js'
-
-export function AgentDrawerPanel({
-  messages,
-  assistantLabel,
-  pendingToolCalls,
-  runState,
-  busy,
-  error,
-  composerValue,
-  composerDisabled = false,
-  composerLeading,
-  onComposerChange,
-  onSend,
-  onStop,
-  onApproveTools,
-  onRejectTools,
-  onApproveOne,
-  onRejectOne,
-  onApproveAlwaysForSession,
-  storageHint = null,
-  usage = null,
-  liveTurn = null,
-}: AgentDrawerPanelProps): React.ReactElement {
-  const awaitingApproval = pendingToolCalls.length > 0
-  const composerBlocked =
-    composerDisabled ||
-    busy ||
-    awaitingApproval ||
-    runState === AgentUiRunState.Ready
-
-  return (
-    <StyledAgentDrawer>
-      <StyledAgentBody>
-        {storageHint ? (
-          <InlineBanner variant="warning">{storageHint}</InlineBanner>
-        ) : null}
-        {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
-        <AgentMessageList messages={messages} assistantLabel={assistantLabel} />
-      </StyledAgentBody>
-      <StyledAgentFooter>
-        {awaitingApproval ? (
-          <AgentToolPendingList
-            toolCalls={pendingToolCalls}
-            busy={busy}
-            onApprove={onApproveTools}
-            onReject={onRejectTools}
-            onApproveOne={onApproveOne}
-            onRejectOne={onRejectOne}
-            onApproveAlwaysForSession={onApproveAlwaysForSession}
-          />
-        ) : (
-          <>
-            {usage || liveTurn?.contextCompaction === 'summarizing' ? (
-              <AgentContextUsageBar usage={usage} liveTurn={liveTurn} />
-            ) : null}
-            <AgentComposer
-            value={composerValue}
-            busy={busy}
-            disabled={composerBlocked}
-            leading={composerLeading}
-            onChange={onComposerChange}
-            onSend={onSend}
-            onStop={onStop}
-          />
-          </>
-        )}
-      </StyledAgentFooter>
-    </StyledAgentDrawer>
-  )
-}
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { AgentComposer } from './AgentComposer.js'
+import { AgentMessageList } from './AgentMessageList.js'
+import { AgentToolPendingList } from './AgentToolPendingList.js'
+import type { AgentDrawerPanelProps } from './agentTypes.js'
+import {
+  StyledAgentBody,
+  StyledAgentDrawer,
+  StyledAgentFooter,
+  StyledAgentThreadHost,
+  StyledComposerFooterSpacer,
+  StyledComposerReserveFooter,
+} from './agentPanelStyles.js'
+
+export function AgentDrawerPanel({
+  messages,
+  assistantLabel,
+  pendingToolCalls,
+  pendingQuestionToolCalls = [],
+  busy,
+  error,
+  composerValue,
+  composerDisabled = false,
+  composerInputDisabled = false,
+  composerSendDisabled = false,
+  composerLeading,
+  followUps = [],
+  activityHint = null,
+  onComposerChange,
+  onSend,
+  onStop,
+  onRemoveFollowUp,
+  onSendFollowUpNow,
+  onApproveTools,
+  onRejectTools,
+  onApproveOne,
+  onRejectOne,
+  onApproveAlwaysForSession,
+  onAnswerQuestionTool,
+  onDeclineQuestionTool,
+  storageHint = null,
+  usage = null,
+  liveTurn = null,
+  pureAssistantTabActive = false,
+  drawerOpen = true,
+  composerPortaled = false,
+  threadHeader = null,
+}: AgentDrawerPanelProps): React.ReactElement {
+  const awaitingApproval = pendingToolCalls.length > 0
+  const composerBlocked = composerDisabled
+
+  const showFooterComposer = !composerPortaled
+  const reserveComposerFooter = composerPortaled && drawerOpen
+  const footerWork = (
+    <>
+      {awaitingApproval ? (
+        <AgentToolPendingList
+          toolCalls={pendingToolCalls}
+          busy={false}
+          onApprove={onApproveTools}
+          onReject={onRejectTools}
+          onApproveOne={onApproveOne}
+          onRejectOne={onRejectOne}
+          onApproveAlwaysForSession={onApproveAlwaysForSession}
+        />
+      ) : null}
+    </>
+  )
+  const hasFooterWork = awaitingApproval
+
+  return (
+    <StyledAgentDrawer
+      data-pure-assistant-tab-active={pureAssistantTabActive || undefined}
+    >
+      <StyledAgentBody>
+        {storageHint ? (
+          <InlineBanner variant="warning">{storageHint}</InlineBanner>
+        ) : null}
+        {activityHint ? (
+          <InlineBanner variant="warning">{activityHint}</InlineBanner>
+        ) : null}
+        {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
+        <StyledAgentThreadHost>
+          <AgentMessageList
+            messages={messages}
+            assistantLabel={assistantLabel}
+            threadHeader={threadHeader}
+          />
+        </StyledAgentThreadHost>
+      </StyledAgentBody>
+      {showFooterComposer ? (
+        <StyledAgentFooter>
+          {footerWork}
+          <AgentComposer
+            value={composerValue}
+            busy={busy}
+            disabled={composerBlocked}
+            inputDisabled={composerInputDisabled}
+            sendDisabled={composerSendDisabled}
+            leading={composerLeading}
+            followUps={followUps}
+            questionToolCalls={pendingQuestionToolCalls}
+            usage={usage}
+            liveTurn={liveTurn}
+            onChange={onComposerChange}
+            onSend={onSend}
+            onStop={onStop}
+            onRemoveFollowUp={onRemoveFollowUp}
+            onSendFollowUpNow={onSendFollowUpNow}
+            onAnswerQuestionTool={onAnswerQuestionTool}
+            onDeclineQuestionTool={onDeclineQuestionTool}
+          />
+        </StyledAgentFooter>
+      ) : reserveComposerFooter || hasFooterWork ? (
+        <StyledComposerReserveFooter aria-hidden={!hasFooterWork}>
+          {footerWork}
+          {reserveComposerFooter ? <StyledComposerFooterSpacer /> : null}
+        </StyledComposerReserveFooter>
+      ) : null}
+    </StyledAgentDrawer>
+  )
+}

package/src/components/agents/AgentFollowUpList.tsx

@@ -0,0 +1,56 @@
+import { Play, Trash2 } from 'lucide-react'
+import { IconButton } from '../common/buttons/IconButton.js'
+import type { AgentUiFollowUp } from './agentTypes.js'
+import {
+  StyledFollowUpActions,
+  StyledFollowUpList,
+  StyledFollowUpRow,
+  StyledFollowUpText,
+} from './agentPanelStyles.js'
+
+export interface AgentFollowUpListProps {
+  followUps: AgentUiFollowUp[]
+  onRemove?: (followUpId: string) => void
+  onSendNow?: (followUpId: string) => void
+}
+
+export function AgentFollowUpList({
+  followUps,
+  onRemove,
+  onSendNow,
+}: AgentFollowUpListProps): React.ReactElement | null {
+  if (followUps.length === 0) return null
+
+  return (
+    <StyledFollowUpList aria-label="Queued follow-ups">
+      {followUps.map(followUp => (
+        <StyledFollowUpRow key={followUp.id}>
+          <StyledFollowUpText title={followUp.message}>
+            {followUp.message}
+          </StyledFollowUpText>
+          <StyledFollowUpActions $align="center" $gap="xs">
+            <IconButton
+              size="sm"
+              aria-label="Send follow-up now"
+              title="Send follow-up now"
+              disabled={!onSendNow}
+              onClick={() => onSendNow?.(followUp.id)}
+            >
+              <Play size={14} />
+            </IconButton>
+            <IconButton
+              size="sm"
+              variant="dangerHover"
+              aria-label="Remove follow-up"
+              title="Remove follow-up"
+              disabled={!onRemove}
+              onClick={() => onRemove?.(followUp.id)}
+            >
+              <Trash2 size={14} />
+            </IconButton>
+          </StyledFollowUpActions>
+        </StyledFollowUpRow>
+      ))}
+    </StyledFollowUpList>
+  )
+}

package/src/components/agents/AgentMarkdown.tsx

@@ -1,12 +1,12 @@
-import {
-  ChatMarkdown,
-  type ChatMarkdownProps,
-} from '../common/chat/ChatMarkdown.js'
-
-export type AgentMarkdownProps = ChatMarkdownProps
-
-export function AgentMarkdown(
-  props: AgentMarkdownProps,
-): React.ReactElement | null {
-  return <ChatMarkdown {...props} />
-}
+import {
+  ChatMarkdown,
+  type ChatMarkdownProps,
+} from '../common/chat/ChatMarkdown.js'
+
+export type AgentMarkdownProps = ChatMarkdownProps
+
+export function AgentMarkdown(
+  props: AgentMarkdownProps,
+): React.ReactElement | null {
+  return <ChatMarkdown {...props} />
+}