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

package/src/components/agents/AgentMessageBubble.tsx

@@ -1,82 +1,171 @@
-import { Wrench } from 'lucide-react'
-import {
-  ChatAssistantMessage,
-  ChatStatusRow,
-  ChatThinkingIndicator,
-  ChatToolRow,
-  ChatUserBubble,
-} from '../common/chat/index.js'
-import { AgentThinkingBlock } from './AgentThinkingBlock.js'
-import type { AgentUiMessage } from './agentTypes.js'
-
-export interface AgentMessageBubbleProps {
-  message: AgentUiMessage
-  assistantLabel?: string
-}
-
-export function AgentMessageBubble({
-  message,
-  assistantLabel = 'assistant',
-}: AgentMessageBubbleProps): React.ReactElement | null {
-  switch (message.role) {
-    case 'user':
-      return <ChatUserBubble text={message.content} />
-
-    case 'assistant': {
-      if (message.streaming && !message.content && !message.thinking) {
-        return <ChatThinkingIndicator label={assistantLabel} />
-      }
-
-      return (
-        <>
-          <ChatAssistantMessage
-            content={message.content}
-            name={assistantLabel}
-            streaming={message.streaming}
-            beforeBody={
-              message.thinking ? (
-                <AgentThinkingBlock
-                  thinking={message.thinking}
-                  streaming={message.streaming}
-                />
-              ) : null
-            }
-          />
-          {message.toolCalls?.map(call => (
-            <ChatToolRow
-              key={call.id}
-              icon={<Wrench size={11} />}
-              title={call.name}
-              summary={formatToolSummary(call.arguments)}
-            />
-          ))}
-          {message.activeTool ? (
-            <ChatStatusRow text={`Running ${message.activeTool.name}…`} />
-          ) : null}
-        </>
-      )
-    }
-
-    case 'tool':
-      return (
-        <ChatToolRow
-          icon={<Wrench size={11} />}
-          title="Tool"
-          summary={message.content}
-        />
-      )
-
-    default:
-      return null
-  }
-}
-
-function formatToolSummary(args: Record<string, unknown>): string {
-  const keys = Object.keys(args)
-  if (keys.length === 0) return ''
-  if (keys.length === 1) {
-    const value = args[keys[0]!]
-    return `${keys[0]}: ${String(value).slice(0, 80)}`
-  }
-  return keys.join(', ')
-}
+import { Loader2, Wrench } from 'lucide-react'
+import { keyframes, styled } from 'styled-components'
+import {
+  ChatAssistantMessage,
+  ChatThinkingIndicator,
+  ChatToolRow,
+  ChatUserBubble,
+} 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'
+
+export interface AgentMessageBubbleProps {
+  message: AgentUiMessage
+  assistantLabel?: string
+}
+
+export function AgentMessageBubble({
+  message,
+  assistantLabel = 'assistant',
+}: AgentMessageBubbleProps): React.ReactElement | null {
+  switch (message.role) {
+    case 'user':
+      return <ChatUserBubble text={message.content} />
+
+    case 'assistant': {
+      if (
+        message.streaming &&
+        !message.content &&
+        !message.thinking &&
+        !message.toolCalls?.length
+      ) {
+        return <ChatThinkingIndicator label={assistantLabel} />
+      }
+
+      return (
+        <>
+          <ChatAssistantMessage
+            content={message.content}
+            name={assistantLabel}
+            streaming={message.streaming}
+            beforeBody={
+              message.thinking ? (
+                <AgentThinkingBlock
+                  thinking={message.thinking}
+                  streaming={message.streaming}
+                />
+              ) : null
+            }
+          />
+          {message.toolCalls?.map(call => (
+            <ChatToolRow
+              key={call.id}
+              icon={
+                call.status === 'running' || call.delegatedActivity ? (
+                  <RunningIcon size={11} aria-hidden />
+                ) : (
+                  <Wrench size={11} />
+                )
+              }
+              title={formatAgentToolLabel(call.name)}
+              summary={formatToolRowSummary(call)}
+              details={formatToolRowDetails(call)}
+            />
+          ))}
+        </>
+      )
+    }
+
+    case 'tool':
+      return (
+        <ChatToolRow
+          icon={<Wrench size={11} />}
+          title="Tool result"
+          summary={formatAgentToolRowSummary({
+            id: message.id,
+            name: 'tool',
+            arguments: {},
+            result: message.content,
+            status: 'done',
+          })}
+          details={agentToolResultDetails(message.content)}
+        />
+      )
+
+    default:
+      return null
+  }
+}
+
+function formatToolRowSummary(call: AgentUiToolCall): string {
+  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 {
+  switch (activity.liveTurn.phase) {
+    case AgentLivePhase.Thinking:
+      return 'starting'
+    case AgentLivePhase.Responding:
+      return 'planning tools'
+    case AgentLivePhase.ToolRunning:
+      return 'using tools'
+    case AgentLivePhase.ToolsPending:
+      return 'waiting on tools'
+    case AgentLivePhase.Idle:
+      return activity.snapshotState?.replace(/_/g, ' ') ?? 'running'
+    default:
+      return activity.liveTurn.phase satisfies never
+  }
+}
+
+function delegatedActivitySummary(activity: AgentDelegatedActivity): string {
+  const turn = activity.liveTurn
+  if (turn.activeTool) {
+    return `${activity.childAppSlug} agent using ${formatAgentToolLabel(
+      turn.activeTool.name,
+    )}`
+  }
+  const toolCount = turn.toolCalls.length
+  if (toolCount > 0) {
+    return `${activity.childAppSlug} agent prepared ${toolCount} tool call${
+      toolCount === 1 ? '' : 's'
+    }`
+  }
+  return `${activity.childAppSlug} agent ${delegatedActivityStatus(activity)}`
+}
+
+function delegatedActivityDetails(
+  activity: AgentDelegatedActivity,
+): string[] | undefined {
+  const details: string[] = []
+  const activeTool = activity.liveTurn.activeTool
+  if (activeTool) {
+    details.push(`Running ${formatAgentToolLabel(activeTool.name)}`)
+  }
+  for (const call of activity.liveTurn.toolCalls) {
+    details.push(`Prepared ${formatAgentToolLabel(call.name)}`)
+  }
+  return details.length > 0 ? details : undefined
+}
+
+const spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const RunningIcon = styled(Loader2)`
+  animation: ${spin} 1s linear infinite;
+`

package/src/components/agents/AgentMessageList.tsx

@@ -1,47 +1,50 @@
-import { Fragment, memo } from 'react'
-import { ChatThread, ChatThreadEmpty } from '../common/chat/index.js'
-import { AgentMessageBubble } from './AgentMessageBubble.js'
-import type { AgentUiMessage } from './agentTypes.js'
-import { StyledAgentScroll } from './agentPanelStyles.js'
-
-export function formatAssistantLabel(appName: string): string {
-  const trimmed = appName.trim()
-  if (!trimmed) return 'assistant'
-  return `${trimmed} assistant`
-}
-
-export interface AgentMessageListProps {
-  messages: AgentUiMessage[]
-  assistantLabel?: string
-  emptyMessage?: string
-}
-
-export const AgentMessageList = memo(function AgentMessageList({
-  messages,
-  assistantLabel = 'assistant',
-  emptyMessage = 'Ask the agent about your workspace. Tool calls wait for your approval.',
-}: AgentMessageListProps): React.ReactElement {
-  const scrollKey = messages.map(message => message.id).join('|')
-
-  return (
-    <StyledAgentScroll>
-      <ChatThread
-        scrollKey={scrollKey}
-        emptyMessage={
-          messages.length === 0 ? (
-            <ChatThreadEmpty>{emptyMessage}</ChatThreadEmpty>
-          ) : null
-        }
-      >
-        {messages.map(message => (
-          <Fragment key={message.id}>
-            <AgentMessageBubble
-              message={message}
-              assistantLabel={assistantLabel}
-            />
-          </Fragment>
-        ))}
-      </ChatThread>
-    </StyledAgentScroll>
-  )
-})
+import { Fragment, memo } from 'react'
+import { ChatThread, ChatThreadEmpty } from '../common/chat/index.js'
+import { AgentMessageBubble } from './AgentMessageBubble.js'
+import type { AgentUiMessage } from './agentTypes.js'
+import { StyledAgentScroll } from './agentPanelStyles.js'
+
+export function formatAssistantLabel(appName: string): string {
+  const trimmed = appName.trim()
+  if (!trimmed) return 'assistant'
+  return `${trimmed} assistant`
+}
+
+export interface AgentMessageListProps {
+  messages: AgentUiMessage[]
+  assistantLabel?: string
+  emptyMessage?: string
+  threadHeader?: 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,
+}: AgentMessageListProps): React.ReactElement {
+  const scrollKey = messages.map(message => message.id).join('|')
+
+  return (
+    <StyledAgentScroll data-thread-header={threadHeader ? '' : undefined}>
+      {threadHeader}
+      <ChatThread
+        scrollKey={scrollKey}
+        emptyMessage={
+          messages.length === 0 ? (
+            <ChatThreadEmpty>{emptyMessage}</ChatThreadEmpty>
+          ) : null
+        }
+      >
+        {messages.map(message => (
+          <Fragment key={message.id}>
+            <AgentMessageBubble
+              message={message}
+              assistantLabel={assistantLabel}
+            />
+          </Fragment>
+        ))}
+      </ChatThread>
+    </StyledAgentScroll>
+  )
+})

package/src/components/agents/AgentModelMenu.tsx

@@ -1,55 +1,59 @@
-import {
-  ChatModelMenu,
-  type ChatModelMenuOption,
-  type ChatModelMenuProps,
-} from '../common/chat/ChatModelMenu.js'
-import type { AgentModelOption } from './agentTypes.js'
-import {
-  AGENT_AUTO_MODEL_ID,
-  AGENT_AUTO_MODEL_LABEL,
-  isAgentAutoModelId,
-} from '../../bridge/agentModelTiers.js'
-
-export interface AgentModelMenuProps
-  extends Omit<ChatModelMenuProps, 'options'> {
-  options: readonly AgentModelOption[]
-  /** When true, prepend the Auto routing option. Defaults to true. */
-  includeAuto?: boolean
-}
-
-export function buildAgentModelMenuOptions(
-  catalogOptions: readonly AgentModelOption[],
-  includeAuto = true,
-): ChatModelMenuOption[] {
-  if (!includeAuto) {
-    return catalogOptions
-      .filter(option => !isAgentAutoModelId(option.value))
-      .map(option => ({
-        value: option.value,
-        label: option.label,
-      }))
-  }
-
-  const autoOption: ChatModelMenuOption = {
-    value: AGENT_AUTO_MODEL_ID,
-    label: AGENT_AUTO_MODEL_LABEL,
-  }
-  const mapped = catalogOptions
-    .filter(option => !isAgentAutoModelId(option.value))
-    .map(option => ({
-      value: option.value,
-      label: option.label,
-    }))
-  return [autoOption, ...mapped]
-}
-
-export function AgentModelMenu({
-  options,
-  includeAuto = true,
-  ...menuProps
-}: AgentModelMenuProps): React.ReactElement {
-  const menuOptions = buildAgentModelMenuOptions(options, includeAuto)
-  return <ChatModelMenu {...menuProps} options={menuOptions} />
-}
-
-export { isAgentAutoModelId, AGENT_AUTO_MODEL_ID, AGENT_AUTO_MODEL_LABEL }
+import {
+  ChatModelMenu,
+  type ChatModelMenuOption,
+  type ChatModelMenuProps,
+} from '../common/chat/ChatModelMenu.js'
+import type { AgentModelOption } from './agentTypes.js'
+import {
+  AGENT_AUTO_MODEL_ID,
+  AGENT_AUTO_MODEL_LABEL,
+  isAgentAutoModelId,
+} from '../../bridge/agentModelTiers.js'
+
+export interface AgentModelMenuProps
+  extends Omit<ChatModelMenuProps, 'options'> {
+  options: readonly AgentModelOption[]
+  /** When true, prepend the Auto routing option. Defaults to true. */
+  includeAuto?: boolean
+}
+
+export function buildAgentModelMenuOptions(
+  catalogOptions: readonly AgentModelOption[],
+  includeAuto = true,
+): ChatModelMenuOption[] {
+  if (!includeAuto) {
+    return catalogOptions
+      .filter(option => !isAgentAutoModelId(option.value))
+      .map(option => ({
+        value: option.value,
+        label: option.label,
+        groupLabel: option.groupLabel,
+        meta: option.meta,
+      }))
+  }
+
+  const autoOption: ChatModelMenuOption = {
+    value: AGENT_AUTO_MODEL_ID,
+    label: AGENT_AUTO_MODEL_LABEL,
+  }
+  const mapped = catalogOptions
+    .filter(option => !isAgentAutoModelId(option.value))
+    .map(option => ({
+      value: option.value,
+      label: option.label,
+      groupLabel: option.groupLabel,
+      meta: option.meta,
+    }))
+  return [autoOption, ...mapped]
+}
+
+export function AgentModelMenu({
+  options,
+  includeAuto = true,
+  ...menuProps
+}: AgentModelMenuProps): React.ReactElement {
+  const menuOptions = buildAgentModelMenuOptions(options, includeAuto)
+  return <ChatModelMenu {...menuProps} options={menuOptions} />
+}
+
+export { isAgentAutoModelId, AGENT_AUTO_MODEL_ID, AGENT_AUTO_MODEL_LABEL }