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

package/src/components/agent-feedback/index.ts

@@ -1,5 +1,5 @@
-export {
-  ScreenAnnotationAgentDialog,
-  type ScreenAnnotationAgentDialogProps,
-  type ScreenAnnotationAgentPayload,
-} from './ScreenAnnotationAgentDialog.js'
+export {
+  ScreenAnnotationAgentDialog,
+  type ScreenAnnotationAgentDialogProps,
+  type ScreenAnnotationAgentPayload,
+} from './ScreenAnnotationAgentDialog.js'

package/src/components/agents/AgentComposer.tsx

@@ -1,34 +1,135 @@
-import { ChatBox } from '../common/chat/ChatBox.js'
-
-export interface AgentComposerProps {
-  value: string
-  disabled?: boolean
-  busy?: boolean
-  leading?: React.ReactNode
-  onChange: (value: string) => void
-  onSend: () => void
-  onStop?: () => void
-}
-
-export function AgentComposer({
-  value,
-  disabled = false,
-  busy = false,
-  leading,
-  onChange,
-  onSend,
-  onStop,
-}: AgentComposerProps): React.ReactElement {
-  return (
-    <ChatBox
-      value={value}
-      disabled={disabled}
-      sending={busy}
-      placeholder="Message the agent…"
-      leading={leading}
-      onChange={onChange}
-      onSend={onSend}
-      onStop={onStop}
-    />
-  )
-}
+import { styled } from 'styled-components'
+import { ChatBox } from '../common/chat/ChatBox.js'
+import { CollapsibleGrid } from '../common/containers/CollapsibleGrid.js'
+import { AgentContextUsageBar } from './AgentContextUsageBar.js'
+import { AgentFollowUpList } from './AgentFollowUpList.js'
+import { AgentQuestionPromptList } from './AgentQuestionPromptList.js'
+import type {
+  AgentLiveTurn,
+  AgentUiFollowUp,
+  AgentUiToolCall,
+  AgentUiRunUsage,
+} from './agentTypes.js'
+
+export interface AgentComposerProps {
+  value: string
+  disabled?: boolean
+  inputDisabled?: boolean
+  sendDisabled?: boolean
+  busy?: boolean
+  leading?: React.ReactNode
+  followUps?: AgentUiFollowUp[]
+  questionToolCalls?: AgentUiToolCall[]
+  usage?: AgentUiRunUsage | null
+  liveTurn?: AgentLiveTurn | null
+  onChange: (value: string) => void
+  onSend: () => void
+  onStop?: () => void
+  onRemoveFollowUp?: (followUpId: string) => void
+  onSendFollowUpNow?: (followUpId: string) => void
+  onAnswerQuestionTool?: (
+    toolCallId: string,
+    selectedOptionIds: readonly string[],
+  ) => void | Promise<void>
+  onDeclineQuestionTool?: (
+    toolCallId: string,
+    declineReason: string,
+  ) => void | Promise<void>
+}
+
+const StyledRoot = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+`
+
+const StyledComposerSurfaceAnchor = styled.div`
+  position: relative;
+  width: 100%;
+`
+
+const StyledQuestionPresence = styled(CollapsibleGrid)`
+  z-index: auto;
+  width: 100%;
+
+  &[data-open='false'] {
+    pointer-events: none;
+  }
+`
+
+const StyledUsageCorner = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  z-index: 1;
+  pointer-events: none;
+`
+
+export function AgentComposer({
+  value,
+  disabled = false,
+  inputDisabled = false,
+  sendDisabled = false,
+  busy = false,
+  leading,
+  followUps = [],
+  questionToolCalls = [],
+  usage = null,
+  liveTurn = null,
+  onChange,
+  onSend,
+  onStop,
+  onRemoveFollowUp,
+  onSendFollowUpNow,
+  onAnswerQuestionTool,
+  onDeclineQuestionTool,
+}: AgentComposerProps): React.ReactElement {
+  const showUsage =
+    liveTurn?.contextCompaction === 'summarizing' ||
+    Boolean(usage && (usage.totalTokens > 0 || usage.contextFillTokens))
+  const hasQuestions = questionToolCalls.length > 0
+
+  return (
+    <StyledRoot>
+      <AgentFollowUpList
+        followUps={followUps}
+        onRemove={onRemoveFollowUp}
+        onSendNow={onSendFollowUpNow}
+      />
+      <StyledQuestionPresence
+        open={hasQuestions}
+        animationDirection="y"
+        indent={false}
+        preserveChildrenOnExit
+        aria-hidden={!hasQuestions}
+      >
+        <AgentQuestionPromptList
+          toolCalls={questionToolCalls}
+          onAnswer={onAnswerQuestionTool}
+          onDecline={onDeclineQuestionTool}
+        />
+      </StyledQuestionPresence>
+      <StyledComposerSurfaceAnchor>
+        {showUsage ? (
+          <StyledUsageCorner>
+            <AgentContextUsageBar usage={usage} liveTurn={liveTurn} />
+          </StyledUsageCorner>
+        ) : null}
+        <ChatBox
+          value={value}
+          disabled={disabled}
+          inputDisabled={inputDisabled}
+          sendDisabled={sendDisabled}
+          sending={busy}
+          placeholder="Message the agent…"
+          leading={leading}
+          onChange={onChange}
+          onSend={onSend}
+          onStop={onStop}
+        />
+      </StyledComposerSurfaceAnchor>
+    </StyledRoot>
+  )
+}

package/src/components/agents/AgentContextUsageBar.tsx

@@ -1,127 +1,127 @@
-import { styled } from 'styled-components'
-import { contextUsagePercent } from '../../agents/runtime/contextWindowUsage.js'
-import type { AgentLiveTurn, AgentUiRunUsage } from './agentTypes.js'
-
-export function formatAgentTokenCount(value: number): string {
-  if (value >= 1_000_000) {
-    const millions = value / 1_000_000
-    const rounded =
-      millions >= 10
-        ? Math.round(millions)
-        : Number(millions.toFixed(1).replace(/\.0$/, ''))
-    return `${rounded}M`
-  }
-  if (value >= 1000) {
-    return `${Math.round(value / 1000)}k`
-  }
-  return String(value)
-}
-
-export interface AgentContextUsageBarProps {
-  usage?: AgentUiRunUsage | null
-  liveTurn?: AgentLiveTurn | null
-}
-
-const DONUT_SIZE = 12
-const DONUT_STROKE = 2
-const DONUT_RADIUS = (DONUT_SIZE - DONUT_STROKE) / 2
-const DONUT_CIRCUMFERENCE = 2 * Math.PI * DONUT_RADIUS
-
-export function AgentContextUsageBar({
-  usage,
-  liveTurn,
-}: AgentContextUsageBarProps): React.ReactElement | null {
-  if (liveTurn?.contextCompaction === 'summarizing') {
-    return (
-      <Root aria-label="Summarizing context" $active>
-        Summarizing context…
-      </Root>
-    )
-  }
-
-  const hasUsage = usage && (usage.totalTokens > 0 || usage.contextFillTokens)
-  if (!hasUsage) return null
-
-  const prefix = usage?.estimated ? '~' : ''
-  const fill = usage?.contextFillTokens ?? usage?.totalTokens ?? 0
-  const total = fill > 0 ? formatAgentTokenCount(fill) : null
-  const percent = usage ? contextUsagePercent(usage) : undefined
-  const label =
-    total && usage?.contextWindowTokens
-      ? `${prefix}${total} / ${formatAgentTokenCount(usage.contextWindowTokens)}`
-      : total
-        ? `${prefix}${total} tokens`
-        : null
-
-  if (!label) return null
-
-  return (
-    <Root
-      aria-label={
-        percent != null ? `Context usage ${percent}%` : 'Context usage'
-      }
-    >
-      {percent != null ? (
-        <Donut
-          width={DONUT_SIZE}
-          height={DONUT_SIZE}
-          viewBox={`0 0 ${DONUT_SIZE} ${DONUT_SIZE}`}
-          aria-hidden
-        >
-          <DonutTrack
-            cx={DONUT_SIZE / 2}
-            cy={DONUT_SIZE / 2}
-            r={DONUT_RADIUS}
-          />
-          <DonutFill
-            cx={DONUT_SIZE / 2}
-            cy={DONUT_SIZE / 2}
-            r={DONUT_RADIUS}
-            $percent={percent}
-          />
-        </Donut>
-      ) : null}
-      <Label>{label}</Label>
-    </Root>
-  )
-}
-
-const Root = styled.span<{ $active?: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  color: var(--platform-colors-text-disabled);
-  font-size: 11px;
-  line-height: 1.4;
-  white-space: nowrap;
-  font-style: ${({ $active }) => ($active ? 'italic' : 'normal')};
-`
-
-const Donut = styled.svg`
-  flex: none;
-`
-
-const donutRing = `
-  fill: none;
-  stroke-width: ${DONUT_STROKE};
-`
-
-const DonutTrack = styled.circle`
-  ${donutRing}
-  stroke: var(--platform-colors-border);
-`
-
-const DonutFill = styled.circle<{ $percent: number }>`
-  ${donutRing}
-  stroke: var(--platform-colors-accent);
-  stroke-dasharray: ${DONUT_CIRCUMFERENCE};
-  stroke-dashoffset: ${({ $percent }) =>
-    DONUT_CIRCUMFERENCE * (1 - $percent / 100)};
-  stroke-linecap: round;
-  transform: rotate(-90deg);
-  transform-origin: center;
-`
-
-const Label = styled.span`
-  line-height: 1.4;
-`
+import { styled } from 'styled-components'
+import { contextUsagePercent } from '../../agents/runtime/contextWindowUsage.js'
+import type { AgentLiveTurn, AgentUiRunUsage } from './agentTypes.js'
+
+export function formatAgentTokenCount(value: number): string {
+  if (value >= 1_000_000) {
+    const millions = value / 1_000_000
+    const rounded =
+      millions >= 10
+        ? Math.round(millions)
+        : Number(millions.toFixed(1).replace(/\.0$/, ''))
+    return `${rounded}M`
+  }
+  if (value >= 1000) {
+    return `${Math.round(value / 1000)}k`
+  }
+  return String(value)
+}
+
+export interface AgentContextUsageBarProps {
+  usage?: AgentUiRunUsage | null
+  liveTurn?: AgentLiveTurn | null
+}
+
+const DONUT_SIZE = 12
+const DONUT_STROKE = 2
+const DONUT_RADIUS = (DONUT_SIZE - DONUT_STROKE) / 2
+const DONUT_CIRCUMFERENCE = 2 * Math.PI * DONUT_RADIUS
+
+export function AgentContextUsageBar({
+  usage,
+  liveTurn,
+}: AgentContextUsageBarProps): React.ReactElement | null {
+  if (liveTurn?.contextCompaction === 'summarizing') {
+    return (
+      <Root aria-label="Summarizing context" $active>
+        Summarizing context…
+      </Root>
+    )
+  }
+
+  const hasUsage = usage && (usage.totalTokens > 0 || usage.contextFillTokens)
+  if (!hasUsage) return null
+
+  const prefix = usage?.estimated ? '~' : ''
+  const fill = usage?.contextFillTokens ?? usage?.totalTokens ?? 0
+  const total = fill > 0 ? formatAgentTokenCount(fill) : null
+  const percent = usage ? contextUsagePercent(usage) : undefined
+  const label =
+    total && usage?.contextWindowTokens
+      ? `${prefix}${total} / ${formatAgentTokenCount(usage.contextWindowTokens)}`
+      : total
+        ? `${prefix}${total} tokens`
+        : null
+
+  if (!label) return null
+
+  return (
+    <Root
+      aria-label={
+        percent != null ? `Context usage ${percent}%` : 'Context usage'
+      }
+    >
+      {percent != null ? (
+        <Donut
+          width={DONUT_SIZE}
+          height={DONUT_SIZE}
+          viewBox={`0 0 ${DONUT_SIZE} ${DONUT_SIZE}`}
+          aria-hidden
+        >
+          <DonutTrack
+            cx={DONUT_SIZE / 2}
+            cy={DONUT_SIZE / 2}
+            r={DONUT_RADIUS}
+          />
+          <DonutFill
+            cx={DONUT_SIZE / 2}
+            cy={DONUT_SIZE / 2}
+            r={DONUT_RADIUS}
+            $percent={percent}
+          />
+        </Donut>
+      ) : null}
+      <Label>{label}</Label>
+    </Root>
+  )
+}
+
+const Root = styled.span<{ $active?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--platform-colors-text-disabled);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  font-style: ${({ $active }) => ($active ? 'italic' : 'normal')};
+`
+
+const Donut = styled.svg`
+  flex: none;
+`
+
+const donutRing = `
+  fill: none;
+  stroke-width: ${DONUT_STROKE};
+`
+
+const DonutTrack = styled.circle`
+  ${donutRing}
+  stroke: var(--platform-colors-border);
+`
+
+const DonutFill = styled.circle<{ $percent: number }>`
+  ${donutRing}
+  stroke: var(--platform-colors-accent);
+  stroke-dasharray: ${DONUT_CIRCUMFERENCE};
+  stroke-dashoffset: ${({ $percent }) =>
+    DONUT_CIRCUMFERENCE * (1 - $percent / 100)};
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: center;
+`
+
+const Label = styled.span`
+  line-height: 1.4;
+`