@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

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>
+  )
+}

package/src/components/agents/agentPanelStyles.ts

@@ -4,7 +4,10 @@ import { FlexCol, FlexRow } from '../common/containers/flex.js'
 export const StyledAgentDrawer = styled(FlexCol)`
   flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;
   width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   background: var(--platform-colors-app-viewport);
   margin: 0;
 `
@@ -24,15 +27,14 @@ export const StyledAgentThreadHost = styled.div`
 `
 
 export const StyledAgentScroll = styled.div`
-  position: relative;
+  flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  --platform-agent-thread-header-height: 0px;
-
-  &[data-thread-header] {
-    --platform-agent-thread-header-height: 34px;
-  }
 `
 
 export const StyledAgentFooter = styled.div`
@@ -44,31 +46,6 @@ export const StyledAgentFooter = styled.div`
   background: var(--platform-colors-surface);
 `
 
-/** Delay footer reserve collapse so the portaled chatbox can lead the motion. */
-export const StyledComposerReserveFooter = styled(StyledAgentFooter)`
-  overflow: hidden;
-  gap: var(--platform-spacing-sm);
-  padding-block: 8px 12px;
-  border-top: 1px solid var(--platform-colors-border);
-  transition: padding-block 0.5s linear, gap 0.5s linear,
-    border-color 0.5s linear;
-
-  [data-pure-assistant-tab-active='true'] & {
-    gap: 0;
-    padding-block: 0;
-    border-top-color: transparent;
-  }
-`
-
-export const StyledComposerFooterSpacer = styled.div`
-  min-height: 112px;
-  transition: min-height 0.5s linear;
-
-  [data-pure-assistant-tab-active='true'] & {
-    min-height: 0;
-  }
-`
-
 export const StyledToolCard = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/agents/agentTypes.ts

@@ -12,14 +12,22 @@ export type AgentUiRunState =
 
 export type AgentUiMessageRole = 'user' | 'assistant' | 'tool'
 
-export interface AgentUiToolCall {
-  id: string
-  name: string
-  arguments: Record<string, unknown>
-  result?: string
-  status?: 'running' | 'done'
-  delegatedActivity?: AgentDelegatedActivity
-}
+export interface AgentUiToolCall {
+  id: string
+  name: string
+  arguments: Record<string, unknown>
+  result?: string
+  status?: 'running' | 'done'
+  delegatedActivity?: AgentDelegatedActivity
+  serviceActivity?: AgentToolActivity
+}
+
+export interface AgentToolActivity {
+  detail?: string
+  id: string
+  status: 'done' | 'failed' | 'info' | 'running'
+  title: string
+}
 
 export const AgentLivePhase = {
   Idle: 'idle',
@@ -92,48 +100,24 @@ export interface AgentUiRunUsage {
 export interface AgentDrawerPanelProps {
   messages: AgentUiMessage[]
   assistantLabel?: string
-  liveTurn?: AgentLiveTurn | null
   pendingToolCalls: AgentUiToolCall[]
-  pendingQuestionToolCalls?: AgentUiToolCall[]
-  runState: AgentUiRunState | null
-  busy: boolean
   error: string | null
-  composerValue: string
-  composerDisabled?: boolean
-  composerInputDisabled?: boolean
-  composerSendDisabled?: boolean
-  composerLeading?: React.ReactNode
-  followUps?: AgentUiFollowUp[]
+  composerSlot?: React.ReactNode
   activityHint?: string | null
-  onComposerChange: (value: string) => void
-  onSend: () => void
-  onStop?: () => void
-  onRemoveFollowUp?: (followUpId: string) => void
-  onSendFollowUpNow?: (followUpId: string) => void
   onApproveTools: () => void
   onRejectTools: () => void
   onApproveOne?: (toolCallId: string) => void
   onRejectOne?: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
-  onAnswerQuestionTool?: (
-    toolCallId: string,
-    selectedOptionIds: readonly string[],
-  ) => void | Promise<void>
-  onDeclineQuestionTool?: (
-    toolCallId: string,
-    declineReason: string,
-  ) => void | Promise<void>
+  /** Label for the standing-approval option ("Always approve for Writer"). */
+  approveAlwaysScopeLabel?: string
+  onApproveAlwaysForScope?: (qualifiedName: string, toolCallId: string) => void
   storageHint?: string | null
-  usage?: AgentUiRunUsage | null
+  storageHintAction?: React.ReactNode
+  onStorageHintDismiss?: () => void
   /** Pure Assistant workspace tab is active — shell sets this; UI leaves layout to the host. */
   pureAssistantTabActive?: boolean
-  /** Agent drawer panel is open (including forced-open on Pure Assistant). */
-  drawerOpen?: boolean
-  /** Composer is portaled by the shell — drawer keeps a footer spacer only. */
-  composerPortaled?: boolean
-  /** Shell thread chrome (scope, session actions) — anchored to the message column. */
+  /** Shell thread chrome rendered above the scrollable message column. */
   threadHeader?: React.ReactNode
+  /** Shell-owned content rendered between the message thread and interaction footer. */
+  bottomPanel?: React.ReactNode
 }

package/src/components/agents/index.ts

@@ -3,6 +3,10 @@ export { AgentMessageList, formatAssistantLabel } from './AgentMessageList.js'
 export { AgentMessageBubble } from './AgentMessageBubble.js'
 export { AgentToolPendingList } from './AgentToolPendingList.js'
 export { AgentComposer } from './AgentComposer.js'
+export {
+  QuestionRequestList,
+  type QuestionRequestView,
+} from './QuestionRequestList.js'
 export {
   AgentContextUsageBar,
   formatAgentTokenCount,

package/src/components/assets/asset-library/sidebar/AssetLibraryList.tsx

@@ -12,20 +12,26 @@ const StyledList = styled.div`
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: 14px 24px 24px;
+  /* No top padding: it's inside the scrollport, so a sticky header pinned at
+     top:0 would leave/scroll a gap above it (the "jumps down / white space"). */
+  padding: 0 24px 24px;
 `
 
 const StyledSectionHeading = styled.div`
-  padding: var(--platform-spacing-sm) 2px var(--platform-spacing-xs);
+  /* Full-bleed opaque bar: negative inline margin + matching padding makes the
+     background span the whole sidebar so rows scroll fully under it (they used
+     to overrun/bleed through the label); text stays aligned with the rows. */
+  margin: 0 -24px;
+  padding: var(--platform-spacing-sm) 24px var(--platform-spacing-xs);
   font-size: var(--platform-typography-font-size-xs);
   font-weight: var(--platform-typography-font-weight-medium);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--platform-colors-text-secondary);
-  background: transparent;
+  background: var(--platform-colors-surface);
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 2;
 `
 
 const StyledEmptyList = styled.div`

package/src/components/chrome/WorkspaceTabStrip.tsx

@@ -28,7 +28,7 @@ const StyledScroll = styled.div`
   flex: 1;
   min-width: 0;
   gap: 2px;
-  padding: 5px 8px 0;
+  padding: 5px 10px 0 12px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
@@ -46,7 +46,7 @@ const StyledTab = styled.button<{
   height: 31px;
   max-width: 260px;
   margin-bottom: -1px;
-  padding: 0 8px 0 9px;
+  padding: 0 8px 0 12px;
   border: 1px solid transparent;
   border-bottom-color: transparent;
   border-radius: 11px 11px 0 0;
@@ -120,7 +120,8 @@ const StyledLabel = styled.span`
 
 const StyledTabWordmark = styled(PureAppWordmark)`
   min-width: 0;
-  overflow: hidden;
+  padding-left: 1px;
+  overflow: visible;
 
   > span:last-child {
     overflow: hidden;
@@ -169,6 +170,20 @@ const StyledDocName = styled.span`
   color: var(--pure-chrome-tertiary, #8a857c);
 `
 
+const StyledDevBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--pure-chrome-tertiary, #8a857c);
+  opacity: 0.72;
+`
+
 const StyledClose = styled(X)`
   cursor: pointer;
   opacity: 0.7;
@@ -226,7 +241,7 @@ export function WorkspaceTabStrip({
       <StyledScroll role="tablist" aria-label={ariaLabel}>
         {tabs.map((tab, index) => {
           const active = tab.id === activeTabId
-          const closable = !tab.pinned && onClose
+          const closable = onClose
           return (
             <StyledTab
               key={tab.id}
@@ -306,6 +321,9 @@ export function WorkspaceTabStrip({
                   tab.label
                 )}
               </StyledLabel>
+              {tab.underDevelopment ? (
+                <StyledDevBadge title="Under development">dev</StyledDevBadge>
+              ) : null}
               {closable ? (
                 <StyledClose
                   type="button"

package/src/components/chrome/workspaceTabTypes.ts

@@ -15,6 +15,8 @@ export interface WorkspaceTabItem {
     letter: string
     label?: string
   }
+  /** True while the tab's app is owned by App Builder's dev lifecycle. */
+  underDevelopment?: boolean
   pinned?: boolean
 }
 

package/src/components/common/chat/ChatBox.tsx

@@ -4,10 +4,10 @@ import { Send, Square } from 'lucide-react'
 import { FlexCol } from '../containers/flex.js'
 import { FlexRow } from '../containers/flex.js'
 
-export interface ChatBoxProps {
-  value: string
-  onChange: (value: string) => void
-  onSend: () => void
+export interface ChatBoxProps {
+  value: string
+  onChange: (value: string) => void
+  onSend: () => void
   onStop?: () => void
   sending?: boolean
   disabled?: boolean
@@ -22,10 +22,10 @@ export interface ChatBoxProps {
 
 export const ChatBox = forwardRef<HTMLTextAreaElement, ChatBoxProps>(
   function ChatBox(
-    {
-      value,
-      onChange,
-      onSend,
+    {
+      value,
+      onChange,
+      onSend,
       onStop,
       sending = false,
       disabled = false,
@@ -54,7 +54,7 @@ export const ChatBox = forwardRef<HTMLTextAreaElement, ChatBoxProps>(
     const showStop = sending && onStop
 
     return (
-      <Root $gap="xs">
+      <Root $gap="xs">
         <EditorWrapper>
           {topContent ?? null}
           <Textarea

package/src/components/common/chat/ChatModelMenu.tsx

@@ -2,6 +2,7 @@ import { ChevronDown } from 'lucide-react'
 import { Fragment, useMemo } from 'react'
 import { styled } from 'styled-components'
 import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { CredentialProviderIcon } from '../../credentials/credentialProviderIcon.js'
 import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
 import type { SelectMenuPlacement } from '../dropdown/SelectMenu.js'
 import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
@@ -11,6 +12,7 @@ export interface ChatModelMenuOption {
   label: string
   groupLabel?: string
   meta?: string
+  provider?: string
   disabled?: boolean
   contextWindowTokens?: number
   supportsImageInput?: boolean
@@ -175,6 +177,12 @@ export function ChatModelMenu({
         title={triggerLabel ?? current?.label ?? ariaLabel}
         onClick={toggle}
       >
+        {current?.provider ? (
+          <CredentialProviderIcon
+            credentialId={`${current.provider}.apiKey`}
+            label={current.provider}
+          />
+        ) : null}
         <StyledLabel>{triggerLabel ?? current?.label ?? 'Model'}</StyledLabel>
         <PlatformIcon icon={ChevronDown} size={12} strokeWidth={1.75} />
       </StyledTrigger>
@@ -234,10 +242,20 @@ function ModelMenuOptions({
                 onClose()
               }}
             >
-              <StyledOptionLabel>{option.label}</StyledOptionLabel>
-              {option.meta ? (
-                <StyledOptionMeta>{option.meta}</StyledOptionMeta>
-              ) : null}
+              <StyledOptionContent>
+                {option.provider ? (
+                  <CredentialProviderIcon
+                    credentialId={`${option.provider}.apiKey`}
+                    label={option.provider}
+                  />
+                ) : null}
+                <StyledOptionText>
+                  <StyledOptionLabel>{option.label}</StyledOptionLabel>
+                  {option.meta ? (
+                    <StyledOptionMeta>{option.meta}</StyledOptionMeta>
+                  ) : null}
+                </StyledOptionText>
+              </StyledOptionContent>
             </StyledOption>
           </Fragment>
         )
@@ -269,6 +287,18 @@ const StyledOption = styled.button<{ $selected?: boolean }>`
   }
 `
 
+const StyledOptionContent = styled.span`
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+`
+
+const StyledOptionText = styled.span`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`
+
 const StyledOptionLabel = styled.span`
   font-size: var(--platform-typography-font-size-sm);
   line-height: 1.25;