@puredesktop/puredesktop-ui-bridge 2.1.8 → 2.1.9

package/src/components/agents/AgentQuestionPromptList.tsx

@@ -1,9 +1,8 @@
-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'
+import {
+  QuestionRequestList,
+  type QuestionRequestView,
+} from './QuestionRequestList.js'
 
 type QuestionMode = 'single_choice' | 'multiple_choice'
 
@@ -31,85 +30,6 @@ export interface AgentQuestionPromptListProps {
   ) => 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: var(--platform-radius-sm);
-  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);
-  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);
-  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
 }
@@ -140,126 +60,28 @@ function parseQuestionPrompt(
   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])
-
+function requestFromToolCall(
+  toolCall: AgentUiToolCall,
+): QuestionRequestView | null {
+  const prompt = parseQuestionPrompt(toolCall)
   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]
-    })
+  return {
+    id: toolCall.id,
+    questions: [
+      {
+        id: toolCall.id,
+        multiple: prompt.mode === 'multiple_choice',
+        options: prompt.options.map(option => ({
+          value: option.id,
+          label: option.label,
+          ...(option.description ? { description: option.description } : {}),
+        })),
+        question: prompt.question,
+      },
+    ],
+    rejectRequiresReason: true,
   }
-
-  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({
@@ -267,18 +89,18 @@ export function AgentQuestionPromptList({
   onAnswer,
   onDecline,
 }: AgentQuestionPromptListProps): React.ReactElement | null {
-  if (toolCalls.length === 0) return null
+  const requests = toolCalls.flatMap((toolCall): QuestionRequestView[] => {
+    const request = requestFromToolCall(toolCall)
+    return request ? [request] : []
+  })
 
   return (
-    <StyledList aria-label="Questions from agent">
-      {toolCalls.map(toolCall => (
-        <AgentQuestionPrompt
-          key={toolCall.id}
-          toolCall={toolCall}
-          onAnswer={onAnswer}
-          onDecline={onDecline}
-        />
-      ))}
-    </StyledList>
+    <QuestionRequestList
+      requests={requests}
+      onAnswer={(requestId, answers) => onAnswer?.(requestId, answers[0] ?? [])}
+      onReject={(requestId, reason) =>
+        reason ? onDecline?.(requestId, reason) : undefined
+      }
+    />
   )
 }

package/src/components/agents/AgentToolApprovalActions.tsx

@@ -3,17 +3,15 @@ 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'
+const APPROVE_ALWAYS_SCOPE = 'approve-always-scope'
 
 export interface AgentToolApprovalActionsProps {
   toolCall: AgentUiToolCall
   busy?: boolean
   onApproveThisTime: (toolCallId: string) => void
   onRejectThisTime: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
+  approveAlwaysScopeLabel?: string
+  onApproveAlwaysForScope?: (qualifiedName: string, toolCallId: string) => void
 }
 
 export function AgentToolApprovalActions({
@@ -21,25 +19,29 @@ export function AgentToolApprovalActions({
   busy = false,
   onApproveThisTime,
   onRejectThisTime,
-  onApproveAlwaysForSession,
+  approveAlwaysScopeLabel,
+  onApproveAlwaysForScope,
 }: AgentToolApprovalActionsProps): React.ReactElement {
+  const showScopeOption = Boolean(
+    onApproveAlwaysForScope && approveAlwaysScopeLabel,
+  )
   return (
     <StyledToolStageActions>
-      {onApproveAlwaysForSession ? (
+      {showScopeOption ? (
         <ChatModelMenu
           primaryActionLabel="Approve"
           onPrimaryAction={() => onApproveThisTime(toolCall.id)}
-          value={APPROVE_ALWAYS_SESSION}
+          value={APPROVE_ALWAYS_SCOPE}
           options={[
             {
-              value: APPROVE_ALWAYS_SESSION,
-              label: 'Always approve for this session',
+              value: APPROVE_ALWAYS_SCOPE,
+              label: approveAlwaysScopeLabel!,
             },
           ]}
           disabled={busy}
           menuPlacement="above"
           aria-label="Approve"
-          onSelect={() => onApproveAlwaysForSession(toolCall.name, toolCall.id)}
+          onSelect={() => onApproveAlwaysForScope!(toolCall.name, toolCall.id)}
         />
       ) : (
         <Button

package/src/components/agents/AgentToolPendingList.tsx

@@ -8,10 +8,8 @@ export interface AgentToolPendingListProps {
   onReject: () => void
   onApproveOne?: (toolCallId: string) => void
   onRejectOne?: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
+  approveAlwaysScopeLabel?: string
+  onApproveAlwaysForScope?: (qualifiedName: string, toolCallId: string) => void
 }
 
 export function AgentToolPendingList({
@@ -21,7 +19,8 @@ export function AgentToolPendingList({
   onReject,
   onApproveOne,
   onRejectOne,
-  onApproveAlwaysForSession,
+  approveAlwaysScopeLabel,
+  onApproveAlwaysForScope,
 }: AgentToolPendingListProps): React.ReactElement | null {
   if (toolCalls.length === 0) return null
 
@@ -33,7 +32,8 @@ export function AgentToolPendingList({
       onRejectAll={onReject}
       onApproveOne={onApproveOne ?? onApprove}
       onRejectOne={onRejectOne ?? onReject}
-      onApproveAlwaysForSession={onApproveAlwaysForSession}
+      approveAlwaysScopeLabel={approveAlwaysScopeLabel}
+      onApproveAlwaysForScope={onApproveAlwaysForScope}
     />
   )
 }

package/src/components/agents/AgentToolPendingReview.tsx

@@ -16,10 +16,8 @@ export interface AgentToolPendingReviewProps {
   onRejectAll: () => void
   onApproveOne: (toolCallId: string) => void
   onRejectOne: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
+  approveAlwaysScopeLabel?: string
+  onApproveAlwaysForScope?: (qualifiedName: string, toolCallId: string) => void
 }
 
 export function AgentToolPendingReview({
@@ -29,7 +27,8 @@ export function AgentToolPendingReview({
   onRejectAll,
   onApproveOne,
   onRejectOne,
-  onApproveAlwaysForSession,
+  approveAlwaysScopeLabel,
+  onApproveAlwaysForScope,
 }: AgentToolPendingReviewProps): React.ReactElement | null {
   const [index, setIndex] = useState(0)
   const count = toolCalls.length
@@ -88,7 +87,8 @@ export function AgentToolPendingReview({
             busy={busy}
             onApproveThisTime={onApproveOne}
             onRejectThisTime={onRejectOne}
-            onApproveAlwaysForSession={onApproveAlwaysForSession}
+            approveAlwaysScopeLabel={approveAlwaysScopeLabel}
+            onApproveAlwaysForScope={onApproveAlwaysForScope}
           />
         }
       />

package/src/components/agents/QuestionRequestList.tsx

@@ -0,0 +1,278 @@
+import { useEffect, 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'
+
+export interface QuestionOptionView {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface QuestionView {
+  id: string
+  question: string
+  multiple?: boolean
+  custom?: boolean
+  options: QuestionOptionView[]
+}
+
+export interface QuestionRequestView {
+  id: string
+  questions: QuestionView[]
+  rejectRequiresReason?: boolean
+}
+
+export interface QuestionRequestListProps {
+  requests: QuestionRequestView[]
+  onAnswer?: (requestId: string, answers: string[][]) => void | Promise<void>
+  onReject?: (requestId: string, reason?: 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: var(--platform-radius-sm);
+  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);
+  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 StyledInput = 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);
+  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 QuestionRequest({
+  request,
+  onAnswer,
+  onReject,
+}: {
+  request: QuestionRequestView
+  onAnswer?: QuestionRequestListProps['onAnswer']
+  onReject?: QuestionRequestListProps['onReject']
+}): React.ReactElement {
+  const [answers, setAnswers] = useState<string[][]>([])
+  const [rejectReason, setRejectReason] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    setAnswers(request.questions.map(() => []))
+    setRejectReason('')
+    setSubmitting(false)
+  }, [request.id, request.questions.length])
+
+  const setQuestionAnswer = (index: number, value: string): void => {
+    const question = request.questions[index]
+    setAnswers(current => {
+      const next = [...current]
+      const selected = next[index] ?? []
+      next[index] = question.multiple
+        ? selected.includes(value)
+          ? selected.filter(item => item !== value)
+          : [...selected, value]
+        : [value]
+      return next
+    })
+  }
+
+  const submitAnswer = async (): Promise<void> => {
+    if (!onAnswer || submitting || !answers.every(answer => answer.length)) {
+      return
+    }
+    setSubmitting(true)
+    try {
+      await onAnswer(request.id, answers)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const submitReject = async (): Promise<void> => {
+    if (!onReject || submitting) return
+    const reason = rejectReason.trim()
+    if (request.rejectRequiresReason && !reason) return
+    setSubmitting(true)
+    try {
+      await onReject(request.id, reason || undefined)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const canAnswer =
+    Boolean(onAnswer) && answers.length > 0 && answers.every(answer => answer.length)
+  const canReject =
+    Boolean(onReject) &&
+    (!request.rejectRequiresReason || rejectReason.trim().length > 0)
+
+  return (
+    <StyledPrompt>
+      {request.questions.map((question, index) => (
+        <FlexCol key={question.id} $gap="sm">
+          <StyledQuestion size="sm" weight="medium">
+            {question.question}
+          </StyledQuestion>
+          <StyledOptionGrid>
+            {question.options.map(option => {
+              const selected = answers[index]?.includes(option.value) ?? false
+              return (
+                <StyledOptionButton
+                  key={option.value}
+                  type="button"
+                  disabled={submitting}
+                  $selected={selected}
+                  aria-pressed={selected}
+                  onClick={() => setQuestionAnswer(index, option.value)}
+                >
+                  <Text size="sm" weight="medium">
+                    {option.label}
+                  </Text>
+                  {option.description ? (
+                    <Text size="sm" tone="secondary">
+                      {option.description}
+                    </Text>
+                  ) : null}
+                </StyledOptionButton>
+              )
+            })}
+          </StyledOptionGrid>
+          {question.custom ? (
+            <StyledInput
+              value={answers[index]?.[0] ?? ''}
+              disabled={submitting}
+              placeholder="Custom answer"
+              aria-label="Custom answer"
+              onChange={event => {
+                const value = event.target.value
+                setAnswers(current => {
+                  const next = [...current]
+                  next[index] = value.trim() ? [value] : []
+                  return next
+                })
+              }}
+            />
+          ) : null}
+        </FlexCol>
+      ))}
+      <FlexRow $align="center" $justify="between" $gap="sm">
+        {request.rejectRequiresReason ? (
+          <StyledInput
+            value={rejectReason}
+            disabled={submitting}
+            placeholder="Decline reason"
+            aria-label="Decline reason"
+            onChange={event => setRejectReason(event.target.value)}
+          />
+        ) : null}
+        {onReject ? (
+          <Button
+            size="sm"
+            variant="subtle"
+            disabled={!canReject || submitting}
+            loading={submitting}
+            onClick={() => void submitReject()}
+          >
+            Decline
+          </Button>
+        ) : null}
+        <Button
+          size="sm"
+          variant="primary"
+          disabled={!canAnswer || submitting}
+          loading={submitting}
+          onClick={() => void submitAnswer()}
+        >
+          Answer
+        </Button>
+      </FlexRow>
+    </StyledPrompt>
+  )
+}
+
+export function QuestionRequestList({
+  requests,
+  onAnswer,
+  onReject,
+}: QuestionRequestListProps): React.ReactElement | null {
+  if (requests.length === 0) return null
+
+  return (
+    <StyledList aria-label="Questions from agent">
+      {requests.map(request => (
+        <QuestionRequest
+          key={request.id}
+          request={request}
+          onAnswer={onAnswer}
+          onReject={onReject}
+        />
+      ))}
+    </StyledList>
+  )
+}