@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

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

@@ -12,7 +12,6 @@ import {
 import { AgentDrawerPanel } from './AgentDrawerPanel.js'
 import {
   AgentLivePhase,
-  AgentUiRunState,
   type AgentDrawerPanelProps,
 } from './agentTypes.js'
 
@@ -27,12 +26,7 @@ function baseProps(
     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,
@@ -64,32 +58,10 @@ describe('AgentDrawerPanel composer and steering behavior', () => {
     })
   }
 
-  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', () => {
+  it('renders manual approval controls above the composer slot', () => {
     render(
       baseProps({
+        composerSlot: <textarea aria-label="Composer" />,
         pendingToolCalls: [
           {
             id: 'call-1',
@@ -195,179 +167,4 @@ describe('AgentDrawerPanel composer and steering behavior', () => {
     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,5 +1,4 @@
 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'
@@ -8,49 +7,31 @@ import {
   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 = [],
+  composerSlot = null,
   activityHint = null,
-  onComposerChange,
-  onSend,
-  onStop,
-  onRemoveFollowUp,
-  onSendFollowUpNow,
   onApproveTools,
   onRejectTools,
   onApproveOne,
   onRejectOne,
-  onApproveAlwaysForSession,
-  onAnswerQuestionTool,
-  onDeclineQuestionTool,
+  approveAlwaysScopeLabel,
+  onApproveAlwaysForScope,
   storageHint = null,
-  usage = null,
-  liveTurn = null,
+  storageHintAction = null,
+  onStorageHintDismiss,
   pureAssistantTabActive = false,
-  drawerOpen = true,
-  composerPortaled = false,
   threadHeader = null,
+  bottomPanel = null,
 }: AgentDrawerPanelProps): React.ReactElement {
   const awaitingApproval = pendingToolCalls.length > 0
-  const composerBlocked = composerDisabled
+  void pureAssistantTabActive
 
-  const showFooterComposer = !composerPortaled
-  const reserveComposerFooter = composerPortaled && drawerOpen
   const footerWork = (
     <>
       {awaitingApproval ? (
@@ -61,62 +42,42 @@ export function AgentDrawerPanel({
           onReject={onRejectTools}
           onApproveOne={onApproveOne}
           onRejectOne={onRejectOne}
-          onApproveAlwaysForSession={onApproveAlwaysForSession}
+          approveAlwaysScopeLabel={approveAlwaysScopeLabel}
+          onApproveAlwaysForScope={onApproveAlwaysForScope}
         />
       ) : null}
     </>
   )
-  const hasFooterWork = awaitingApproval
 
   return (
-    <StyledAgentDrawer
-      data-pure-assistant-tab-active={pureAssistantTabActive || undefined}
-    >
+    <StyledAgentDrawer>
       <StyledAgentBody>
         {storageHint ? (
-          <InlineBanner variant="warning">{storageHint}</InlineBanner>
+          <InlineBanner
+            variant="warning"
+            actions={storageHintAction}
+            onDismiss={onStorageHintDismiss}
+          >
+            {storageHint}
+          </InlineBanner>
         ) : null}
         {activityHint ? (
           <InlineBanner variant="warning">{activityHint}</InlineBanner>
         ) : null}
         {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
+        {threadHeader}
         <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}
+      {bottomPanel}
+      <StyledAgentFooter>
+        {footerWork}
+        {composerSlot}
+      </StyledAgentFooter>
     </StyledAgentDrawer>
   )
 }

package/src/components/agents/AgentMessageBubble.tsx

@@ -8,16 +8,17 @@ import {
 } from '../common/chat/index.js'
 import { AgentThinkingBlock } from './AgentThinkingBlock.js'
 import {
-  agentToolResultDetails,
-  formatAgentToolLabel,
-  formatAgentToolRowSummary,
-} from './agentToolDisplay.js'
-import {
-  AgentLivePhase,
-  type AgentDelegatedActivity,
-  type AgentUiMessage,
-  type AgentUiToolCall,
-} from './agentTypes.js'
+  agentToolResultDetails,
+  formatAgentToolLabel,
+  formatAgentToolRowSummary,
+} from './agentToolDisplay.js'
+import {
+  AgentLivePhase,
+  type AgentDelegatedActivity,
+  type AgentToolActivity,
+  type AgentUiMessage,
+  type AgentUiToolCall,
+} from './agentTypes.js'
 
 export interface AgentMessageBubbleProps {
   message: AgentUiMessage
@@ -57,17 +58,17 @@ export function AgentMessageBubble({
               ) : null
             }
           />
-          {message.toolCalls?.map(call => (
-            <ChatToolRow
-              key={call.id}
-              icon={
-                call.status === 'running' || call.delegatedActivity ? (
-                  <RunningIcon size={11} aria-hidden />
-                ) : (
-                  <Wrench size={11} />
+          {message.toolCalls?.map(call => (
+            <ChatToolRow
+              key={call.id}
+              icon={
+                toolCallIsIncomplete(call) || call.delegatedActivity ? (
+                  <RunningIcon size={11} aria-hidden />
+                ) : (
+                  <Wrench size={11} />
                 )
               }
-              title={formatAgentToolLabel(call.name)}
+              title={formatToolRowTitle(call)}
               summary={formatToolRowSummary(call)}
               details={formatToolRowDetails(call)}
             />
@@ -97,21 +98,46 @@ export function AgentMessageBubble({
   }
 }
 
-function formatToolRowSummary(call: AgentUiToolCall): string {
-  if (call.delegatedActivity) {
-    return delegatedActivitySummary(call.delegatedActivity)
-  }
+function formatToolRowSummary(call: AgentUiToolCall): string {
+  if (call.serviceActivity) {
+    return toolActivitySummary(call.serviceActivity)
+  }
+  if (call.delegatedActivity) {
+    return delegatedActivitySummary(call.delegatedActivity)
+  }
   return formatAgentToolRowSummary(call)
-}
-
-function formatToolRowDetails(call: AgentUiToolCall): string[] | undefined {
-  if (call.delegatedActivity) {
-    return delegatedActivityDetails(call.delegatedActivity)
-  }
-  return call.result ? agentToolResultDetails(call.result) : undefined
-}
-
-function delegatedActivityStatus(activity: AgentDelegatedActivity): string {
+}
+
+function formatToolRowTitle(call: AgentUiToolCall): string {
+  if (call.name === 'harness.request_app_development_iteration') {
+    return call.arguments.mode === 'ask'
+      ? 'Asking app builder'
+      : 'Requesting app changes'
+  }
+  return formatAgentToolLabel(call.name)
+}
+
+function formatToolRowDetails(call: AgentUiToolCall): string[] | undefined {
+  if (call.serviceActivity) {
+    return call.serviceActivity.detail ? [call.serviceActivity.detail] : undefined
+  }
+  if (call.delegatedActivity) {
+    return delegatedActivityDetails(call.delegatedActivity)
+  }
+  return call.result ? agentToolResultDetails(call.result) : undefined
+}
+
+function toolCallIsIncomplete(call: AgentUiToolCall): boolean {
+  return call.status !== 'done' && call.result === undefined
+}
+
+function toolActivitySummary(activity: AgentToolActivity): string {
+  return activity.detail
+    ? `${activity.title}: ${activity.detail}`
+    : activity.title
+}
+
+function delegatedActivityStatus(activity: AgentDelegatedActivity): string {
   switch (activity.liveTurn.phase) {
     case AgentLivePhase.Thinking:
       return 'starting'

package/src/components/agents/AgentMessageList.tsx

@@ -14,20 +14,19 @@ export interface AgentMessageListProps {
   messages: AgentUiMessage[]
   assistantLabel?: string
   emptyMessage?: string
-  threadHeader?: React.ReactNode
+  threadFooter?: React.ReactNode
 }
 
 export const AgentMessageList = memo(function AgentMessageList({
   messages,
   assistantLabel = 'assistant',
   emptyMessage = 'Ask the agent about your workspace. Tool calls wait for your approval.',
-  threadHeader = null,
+  threadFooter = null,
 }: AgentMessageListProps): React.ReactElement {
   const scrollKey = messages.map(message => message.id).join('|')
 
   return (
-    <StyledAgentScroll data-thread-header={threadHeader ? '' : undefined}>
-      {threadHeader}
+    <StyledAgentScroll>
       <ChatThread
         scrollKey={scrollKey}
         emptyMessage={
@@ -35,6 +34,7 @@ export const AgentMessageList = memo(function AgentMessageList({
             <ChatThreadEmpty>{emptyMessage}</ChatThreadEmpty>
           ) : null
         }
+        footer={threadFooter}
       >
         {messages.map(message => (
           <Fragment key={message.id}>