@puredesktop/puredesktop-ui-bridge 2.1.7 → 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/AgentToolCallCard.tsx

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

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/ContextPicker.tsx

@@ -0,0 +1,239 @@
+/**
+ * ContextPicker — Cmd-K-style overlay for choosing an object whose markdown
+ * context document should be attached as agent context.
+ *
+ * Generic on purpose: `search` and `onPick` are injected, so the shell
+ * drawer (IPC-backed) and plugin apps (bridge-backed `context.search`) use
+ * the same component — and agents use the same backing functions via the
+ * built-in `harness.context_search` / `harness.context_read` tools.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+
+import type { PlatformContextSearchHit } from '../../context/contextAccess.js'
+import { SearchField } from '../common/inputs/SearchField.js'
+
+export interface ContextPickerProps {
+  open: boolean
+  onClose: () => void
+  /** Search context-enabled objects — empty query lists everything. */
+  search: (query: string) => Promise<PlatformContextSearchHit[]>
+  /** Called with the chosen object; owner fetches markdown via context.read. */
+  onPick: (hit: PlatformContextSearchHit) => void | Promise<void>
+  title?: string
+  placeholder?: string
+}
+
+const Backdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  background: color-mix(
+    in srgb,
+    var(--platform-color-background, #101014) 45%,
+    transparent
+  );
+`
+
+const Panel = styled.div`
+  width: min(560px, calc(100vw - 48px));
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--platform-color-border, #2a2a32);
+  background: var(--platform-color-surface, #17171c);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+`
+
+const PanelTitle = styled.div`
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--platform-color-text-muted, #8b8b95);
+  padding: 2px 4px 0;
+`
+
+const Results = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`
+
+const ResultRow = styled.li<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  background: ${({ $active }) =>
+    $active
+      ? 'var(--platform-color-surface-raised, #22222a)'
+      : 'transparent'};
+`
+
+const ResultTitle = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--platform-color-text, #e8e8ee);
+`
+
+const KindBadge = styled.span`
+  flex: none;
+  font-size: 11px;
+  font-weight: 400;
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--platform-color-border, #2a2a32);
+  color: var(--platform-color-text-muted, #8b8b95);
+`
+
+const EmptyNote = styled.div`
+  padding: 14px 10px;
+  font-size: 13px;
+  color: var(--platform-color-text-muted, #8b8b95);
+`
+
+export function ContextPicker({
+  open,
+  onClose,
+  search,
+  onPick,
+  title = 'Add context',
+  placeholder = 'Search manuscripts, books, documents…',
+}: ContextPickerProps): React.ReactElement | null {
+  const [query, setQuery] = useState('')
+  const [hits, setHits] = useState<PlatformContextSearchHit[]>([])
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [searching, setSearching] = useState(false)
+  const requestSeq = useRef(0)
+
+  const runSearch = useCallback(
+    (value: string) => {
+      const seq = ++requestSeq.current
+      setSearching(true)
+      void search(value)
+        .then(results => {
+          if (requestSeq.current !== seq) return
+          setHits(results)
+          setActiveIndex(0)
+        })
+        .catch(() => {
+          if (requestSeq.current !== seq) return
+          setHits([])
+        })
+        .finally(() => {
+          if (requestSeq.current === seq) setSearching(false)
+        })
+    },
+    [search],
+  )
+
+  useEffect(() => {
+    if (!open) return
+    setQuery('')
+    runSearch('')
+  }, [open, runSearch])
+
+  useEffect(() => {
+    if (!open) return
+    const timer = window.setTimeout(() => runSearch(query), 140)
+    return () => window.clearTimeout(timer)
+  }, [open, query, runSearch])
+
+  const pick = useCallback(
+    (hit: PlatformContextSearchHit | undefined) => {
+      if (!hit) return
+      void onPick(hit)
+      onClose()
+    },
+    [onClose, onPick],
+  )
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onClose()
+        return
+      }
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setActiveIndex(index => Math.min(index + 1, hits.length - 1))
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setActiveIndex(index => Math.max(index - 1, 0))
+        return
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        pick(hits[activeIndex])
+      }
+    },
+    [activeIndex, hits, onClose, pick],
+  )
+
+  if (!open) return null
+
+  return (
+    <Backdrop
+      onMouseDown={event => {
+        if (event.target === event.currentTarget) onClose()
+      }}
+    >
+      <Panel role="dialog" aria-label={title} onKeyDown={onKeyDown}>
+        <PanelTitle>{title}</PanelTitle>
+        <SearchField
+          value={query}
+          onValueChange={setQuery}
+          placeholder={placeholder}
+          autoFocus
+        />
+        <Results role="listbox">
+          {hits.map((hit, index) => (
+            <ResultRow
+              key={hit.packagePath}
+              role="option"
+              aria-selected={index === activeIndex}
+              $active={index === activeIndex}
+              onMouseEnter={() => setActiveIndex(index)}
+              onMouseDown={event => {
+                event.preventDefault()
+                pick(hit)
+              }}
+            >
+              <ResultTitle>{hit.title}</ResultTitle>
+              <KindBadge>{hit.kind}</KindBadge>
+            </ResultRow>
+          ))}
+          {hits.length === 0 ? (
+            <EmptyNote>
+              {searching ? 'Searching…' : 'No matching objects.'}
+            </EmptyNote>
+          ) : null}
+        </Results>
+      </Panel>
+    </Backdrop>
+  )
+}