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

package/src/components/agents/AgentQuestionPromptList.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../common/buttons/Button.js'
+import { FlexCol, FlexRow } from '../common/containers/flex.js'
+import { Text } from '../common/typography/Text.js'
+import type { AgentUiToolCall } from './agentTypes.js'
+
+type QuestionMode = 'single_choice' | 'multiple_choice'
+
+interface QuestionOption {
+  id: string
+  label: string
+  description?: string
+}
+
+interface ParsedQuestionPrompt {
+  question: string
+  mode: QuestionMode
+  options: QuestionOption[]
+}
+
+export interface AgentQuestionPromptListProps {
+  toolCalls: AgentUiToolCall[]
+  onAnswer?: (
+    toolCallId: string,
+    selectedOptionIds: readonly string[],
+  ) => void | Promise<void>
+  onDecline?: (
+    toolCallId: string,
+    declineReason: string,
+  ) => void | Promise<void>
+}
+
+const StyledList = styled(FlexCol)`
+  gap: 6px;
+`
+
+const StyledPrompt = styled(FlexCol)`
+  gap: var(--platform-spacing-sm);
+  padding: 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-bg);
+`
+
+const StyledQuestion = styled(Text)`
+  line-height: 1.35;
+`
+
+const StyledOptionGrid = styled.div`
+  display: grid;
+  gap: 6px;
+`
+
+const StyledOptionButton = styled.button<{ $selected: boolean }>`
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'var(--platform-colors-accent)'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-sm, 6px);
+  background: ${({ $selected }) =>
+    $selected
+      ? 'color-mix(in srgb, var(--platform-colors-accent) 10%, var(--platform-colors-bg))'
+      : 'var(--platform-colors-surface)'};
+  color: var(--platform-colors-text);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--platform-transition-fast),
+    border-color var(--platform-transition-fast);
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--platform-colors-border-strong);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`
+
+const StyledDeclineInput = styled.input`
+  min-width: 0;
+  flex: 1 1 auto;
+  height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm, 6px);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+
+  &:focus {
+    outline: none;
+    border-color: var(--platform-colors-accent);
+  }
+`
+
+function stringValue(value: unknown): string | null {
+  return typeof value === 'string' && value.trim() ? value.trim() : null
+}
+
+function parseQuestionPrompt(
+  toolCall: AgentUiToolCall,
+): ParsedQuestionPrompt | null {
+  const question = stringValue(toolCall.arguments.question)
+  const mode =
+    toolCall.arguments.mode === 'single_choice' ||
+    toolCall.arguments.mode === 'multiple_choice'
+      ? toolCall.arguments.mode
+      : null
+  const rawOptions = Array.isArray(toolCall.arguments.options)
+    ? toolCall.arguments.options
+    : []
+  const options = rawOptions.flatMap((item): QuestionOption[] => {
+    if (!item || typeof item !== 'object') return []
+    const record = item as Record<string, unknown>
+    const id = stringValue(record.id)
+    const label = stringValue(record.label)
+    if (!id || !label) return []
+    const description = stringValue(record.description)
+    return [{ id, label, ...(description ? { description } : {}) }]
+  })
+
+  if (!question || !mode || options.length === 0) return null
+  return { question, mode, options }
+}
+
+function AgentQuestionPrompt({
+  toolCall,
+  onAnswer,
+  onDecline,
+}: {
+  toolCall: AgentUiToolCall
+  onAnswer?: (
+    toolCallId: string,
+    selectedOptionIds: readonly string[],
+  ) => void | Promise<void>
+  onDecline?: (
+    toolCallId: string,
+    declineReason: string,
+  ) => void | Promise<void>
+}): React.ReactElement | null {
+  const prompt = useMemo(() => parseQuestionPrompt(toolCall), [toolCall])
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [declineReason, setDeclineReason] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    setSelectedIds([])
+    setDeclineReason('')
+    setSubmitting(false)
+  }, [toolCall.id])
+
+  if (!prompt) return null
+
+  const toggleOption = (optionId: string): void => {
+    setSelectedIds(current => {
+      if (prompt.mode === 'single_choice') return [optionId]
+      return current.includes(optionId)
+        ? current.filter(id => id !== optionId)
+        : [...current, optionId]
+    })
+  }
+
+  const submitAnswer = async (): Promise<void> => {
+    if (!onAnswer || selectedIds.length === 0 || submitting) return
+    setSubmitting(true)
+    try {
+      await onAnswer(toolCall.id, selectedIds)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const submitDecline = async (): Promise<void> => {
+    const trimmedReason = declineReason.trim()
+    if (!onDecline || !trimmedReason || submitting) return
+    setSubmitting(true)
+    try {
+      await onDecline(toolCall.id, trimmedReason)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const canAnswer = selectedIds.length > 0 && Boolean(onAnswer) && !submitting
+  const canDecline =
+    declineReason.trim().length > 0 && Boolean(onDecline) && !submitting
+
+  return (
+    <StyledPrompt>
+      <StyledQuestion size="sm" weight="medium">
+        {prompt.question}
+      </StyledQuestion>
+      <StyledOptionGrid>
+        {prompt.options.map(option => {
+          const selected = selectedIds.includes(option.id)
+          return (
+            <StyledOptionButton
+              key={option.id}
+              type="button"
+              disabled={submitting}
+              $selected={selected}
+              aria-pressed={selected}
+              onClick={() => toggleOption(option.id)}
+            >
+              <Text size="sm" weight="medium">
+                {option.label}
+              </Text>
+              {option.description ? (
+                <Text size="sm" tone="secondary">
+                  {option.description}
+                </Text>
+              ) : null}
+            </StyledOptionButton>
+          )
+        })}
+      </StyledOptionGrid>
+      <FlexRow $align="center" $justify="between" $gap="sm">
+        <StyledDeclineInput
+          value={declineReason}
+          disabled={submitting}
+          placeholder="Decline reason"
+          aria-label="Decline reason"
+          onChange={event => setDeclineReason(event.target.value)}
+        />
+        <Button
+          size="sm"
+          variant="subtle"
+          disabled={!canDecline}
+          loading={submitting}
+          onClick={() => void submitDecline()}
+        >
+          Decline
+        </Button>
+        <Button
+          size="sm"
+          variant="primary"
+          disabled={!canAnswer}
+          loading={submitting}
+          onClick={() => void submitAnswer()}
+        >
+          Answer
+        </Button>
+      </FlexRow>
+    </StyledPrompt>
+  )
+}
+
+export function AgentQuestionPromptList({
+  toolCalls,
+  onAnswer,
+  onDecline,
+}: AgentQuestionPromptListProps): React.ReactElement | null {
+  if (toolCalls.length === 0) return null
+
+  return (
+    <StyledList aria-label="Questions from agent">
+      {toolCalls.map(toolCall => (
+        <AgentQuestionPrompt
+          key={toolCall.id}
+          toolCall={toolCall}
+          onAnswer={onAnswer}
+          onDecline={onDecline}
+        />
+      ))}
+    </StyledList>
+  )
+}

package/src/components/agents/AgentThinkingBlock.tsx

@@ -1,66 +1,66 @@
-import { useState } from 'react'
-import { Brain } from 'lucide-react'
-import { styled } from 'styled-components'
-import { ChatMarkdown } from '../common/chat/ChatMarkdown.js'
-import { ChatToolRow } from '../common/chat/ChatToolRow.js'
-
-export interface AgentThinkingBlockProps {
-  thinking: string
-  streaming?: boolean
-}
-
-export function AgentThinkingBlock({
-  thinking,
-  streaming = false,
-}: AgentThinkingBlockProps): React.ReactElement | null {
-  const [open, setOpen] = useState(false)
-
-  if (!thinking && !streaming) {
-    return null
-  }
-
-  if (!thinking && streaming) {
-    return (
-      <ChatToolRow icon={<Brain size={11} />} title="Thinking" summary="…" />
-    )
-  }
-
-  return (
-    <Root>
-      <Toggle
-        type="button"
-        onClick={() => setOpen(value => !value)}
-        aria-expanded={open}
-      >
-        <ChatToolRow
-          icon={<Brain size={11} />}
-          title="Thinking"
-          summary={open ? 'Hide' : 'Show'}
-        />
-      </Toggle>
-      {open ? (
-        <ThinkingBody>
-          <ChatMarkdown content={thinking} streaming={streaming} />
-        </ThinkingBody>
-      ) : null}
-    </Root>
-  )
-}
-
-const Root = styled.div`
-  width: 100%;
-`
-
-const Toggle = styled.button`
-  display: block;
-  width: 100%;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-`
-
-const ThinkingBody = styled.div`
-  padding-top: 4px;
-`
+import { useState } from 'react'
+import { Brain } from 'lucide-react'
+import { styled } from 'styled-components'
+import { ChatMarkdown } from '../common/chat/ChatMarkdown.js'
+import { ChatToolRow } from '../common/chat/ChatToolRow.js'
+
+export interface AgentThinkingBlockProps {
+  thinking: string
+  streaming?: boolean
+}
+
+export function AgentThinkingBlock({
+  thinking,
+  streaming = false,
+}: AgentThinkingBlockProps): React.ReactElement | null {
+  const [open, setOpen] = useState(false)
+
+  if (!thinking && !streaming) {
+    return null
+  }
+
+  if (!thinking && streaming) {
+    return (
+      <ChatToolRow icon={<Brain size={11} />} title="Thinking" summary="…" />
+    )
+  }
+
+  return (
+    <Root>
+      <Toggle
+        type="button"
+        onClick={() => setOpen(value => !value)}
+        aria-expanded={open}
+      >
+        <ChatToolRow
+          icon={<Brain size={11} />}
+          title="Thinking"
+          summary={open ? 'Hide' : 'Show'}
+        />
+      </Toggle>
+      {open ? (
+        <ThinkingBody>
+          <ChatMarkdown content={thinking} streaming={streaming} />
+        </ThinkingBody>
+      ) : null}
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  width: 100%;
+`
+
+const Toggle = styled.button`
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+`
+
+const ThinkingBody = styled.div`
+  padding-top: 4px;
+`

package/src/components/agents/AgentToolApprovalActions.tsx

@@ -1,65 +1,65 @@
-import { Button } from '../common/buttons/Button.js'
-import { ChatModelMenu } from '../common/chat/ChatModelMenu.js'
-import type { AgentUiToolCall } from './agentTypes.js'
-import { StyledToolStageActions } from './agentPanelStyles.js'
-
-const APPROVE_ALWAYS_SESSION = 'approve-always-session'
-
-export interface AgentToolApprovalActionsProps {
-  toolCall: AgentUiToolCall
-  busy?: boolean
-  onApproveThisTime: (toolCallId: string) => void
-  onRejectThisTime: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
-}
-
-export function AgentToolApprovalActions({
-  toolCall,
-  busy = false,
-  onApproveThisTime,
-  onRejectThisTime,
-  onApproveAlwaysForSession,
-}: AgentToolApprovalActionsProps): React.ReactElement {
-  return (
-    <StyledToolStageActions>
-      {onApproveAlwaysForSession ? (
-        <ChatModelMenu
-          primaryActionLabel="Approve"
-          onPrimaryAction={() => onApproveThisTime(toolCall.id)}
-          value={APPROVE_ALWAYS_SESSION}
-          options={[
-            {
-              value: APPROVE_ALWAYS_SESSION,
-              label: 'Always approve for this session',
-            },
-          ]}
-          disabled={busy}
-          menuPlacement="above"
-          aria-label="Approve"
-          onSelect={() =>
-            onApproveAlwaysForSession(toolCall.name, toolCall.id)
-          }
-        />
-      ) : (
-        <Button
-          size="sm"
-          disabled={busy}
-          onClick={() => onApproveThisTime(toolCall.id)}
-        >
-          Approve
-        </Button>
-      )}
-      <Button
-        size="sm"
-        variant="subtle"
-        disabled={busy}
-        onClick={() => onRejectThisTime(toolCall.id)}
-      >
-        Reject
-      </Button>
-    </StyledToolStageActions>
-  )
-}
+import { Button } from '../common/buttons/Button.js'
+import { ChatModelMenu } from '../common/chat/ChatModelMenu.js'
+import type { AgentUiToolCall } from './agentTypes.js'
+import { StyledToolStageActions } from './agentPanelStyles.js'
+
+const APPROVE_ALWAYS_SESSION = 'approve-always-session'
+
+export interface AgentToolApprovalActionsProps {
+  toolCall: AgentUiToolCall
+  busy?: boolean
+  onApproveThisTime: (toolCallId: string) => void
+  onRejectThisTime: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+}
+
+export function AgentToolApprovalActions({
+  toolCall,
+  busy = false,
+  onApproveThisTime,
+  onRejectThisTime,
+  onApproveAlwaysForSession,
+}: AgentToolApprovalActionsProps): React.ReactElement {
+  return (
+    <StyledToolStageActions>
+      {onApproveAlwaysForSession ? (
+        <ChatModelMenu
+          primaryActionLabel="Approve"
+          onPrimaryAction={() => onApproveThisTime(toolCall.id)}
+          value={APPROVE_ALWAYS_SESSION}
+          options={[
+            {
+              value: APPROVE_ALWAYS_SESSION,
+              label: 'Always approve for this session',
+            },
+          ]}
+          disabled={busy}
+          menuPlacement="above"
+          aria-label="Approve"
+          onSelect={() =>
+            onApproveAlwaysForSession(toolCall.name, toolCall.id)
+          }
+        />
+      ) : (
+        <Button
+          size="sm"
+          disabled={busy}
+          onClick={() => onApproveThisTime(toolCall.id)}
+        >
+          Approve
+        </Button>
+      )}
+      <Button
+        size="sm"
+        variant="subtle"
+        disabled={busy}
+        onClick={() => onRejectThisTime(toolCall.id)}
+      >
+        Reject
+      </Button>
+    </StyledToolStageActions>
+  )
+}

package/src/components/agents/AgentToolCallCard.tsx

@@ -1,8 +1,12 @@
 import { Text } from '../common/typography/Text.js'
 import type { AgentUiToolCall } from './agentTypes.js'
+import {
+  formatAgentToolLabel,
+  formatAgentToolSummary,
+} from './agentToolDisplay.js'
 import { formatToolCallArguments } from './formatToolCallArguments.js'
 import { StyledToolArgs, StyledToolCard } from './agentPanelStyles.js'
-
+
 export interface AgentToolCallCardProps {
   toolCall: AgentUiToolCall
   footer?: React.ReactNode
@@ -11,14 +15,15 @@ export interface AgentToolCallCardProps {
 export function AgentToolCallCard({
   toolCall,
   footer,
-}: AgentToolCallCardProps): React.ReactElement {
-  return (
-    <StyledToolCard>
-      <Text weight="medium" size="sm">
-        {toolCall.name}
-      </Text>
+}: AgentToolCallCardProps): React.ReactElement {
+  return (
+    <StyledToolCard>
+      <Text weight="medium" size="sm">
+        {formatAgentToolLabel(toolCall.name)}
+      </Text>
       <StyledToolArgs>
-        {formatToolCallArguments(toolCall.arguments)}
+        {formatAgentToolSummary(toolCall.name, toolCall.arguments) ||
+          formatToolCallArguments(toolCall.arguments)}
       </StyledToolArgs>
       {footer}
     </StyledToolCard>

package/src/components/agents/AgentToolPendingList.tsx

@@ -1,39 +1,39 @@
-import type { AgentUiToolCall } from './agentTypes.js'
-import { AgentToolPendingReview } from './AgentToolPendingReview.js'
-
-export interface AgentToolPendingListProps {
-  toolCalls: AgentUiToolCall[]
-  busy?: boolean
-  onApprove: () => void
-  onReject: () => void
-  onApproveOne?: (toolCallId: string) => void
-  onRejectOne?: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
-}
-
-export function AgentToolPendingList({
-  toolCalls,
-  busy = false,
-  onApprove,
-  onReject,
-  onApproveOne,
-  onRejectOne,
-  onApproveAlwaysForSession,
-}: AgentToolPendingListProps): React.ReactElement | null {
-  if (toolCalls.length === 0) return null
-
-  return (
-    <AgentToolPendingReview
-      toolCalls={toolCalls}
-      busy={busy}
-      onApproveAll={onApprove}
-      onRejectAll={onReject}
-      onApproveOne={onApproveOne ?? onApprove}
-      onRejectOne={onRejectOne ?? onReject}
-      onApproveAlwaysForSession={onApproveAlwaysForSession}
-    />
-  )
-}
+import type { AgentUiToolCall } from './agentTypes.js'
+import { AgentToolPendingReview } from './AgentToolPendingReview.js'
+
+export interface AgentToolPendingListProps {
+  toolCalls: AgentUiToolCall[]
+  busy?: boolean
+  onApprove: () => void
+  onReject: () => void
+  onApproveOne?: (toolCallId: string) => void
+  onRejectOne?: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+}
+
+export function AgentToolPendingList({
+  toolCalls,
+  busy = false,
+  onApprove,
+  onReject,
+  onApproveOne,
+  onRejectOne,
+  onApproveAlwaysForSession,
+}: AgentToolPendingListProps): React.ReactElement | null {
+  if (toolCalls.length === 0) return null
+
+  return (
+    <AgentToolPendingReview
+      toolCalls={toolCalls}
+      busy={busy}
+      onApproveAll={onApprove}
+      onRejectAll={onReject}
+      onApproveOne={onApproveOne ?? onApprove}
+      onRejectOne={onRejectOne ?? onReject}
+      onApproveAlwaysForSession={onApproveAlwaysForSession}
+    />
+  )
+}