@puredesktop/puredesktop-ui-bridge 2.1.8 → 2.1.9

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;
 `
@@ -23,17 +26,15 @@ export const StyledAgentThreadHost = styled.div`
   width: 100%;
 `
 
-export const StyledAgentScroll = styled.div<{ $threadHeaderHeight: number }>`
-  position: relative;
+export const StyledAgentScroll = styled.div`
+  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: ${({ $threadHeaderHeight }) =>
-      $threadHeaderHeight}px;
-  }
 `
 
 export const StyledAgentFooter = styled.div`
@@ -45,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,50 +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
-  /** Reserved top space for an absolute thread header. */
-  threadHeaderHeight?: number
+  /** 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;

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;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { styled } from 'styled-components'
 
 export interface ChatThreadProps {
@@ -17,21 +17,36 @@ export function ChatThread({
   scrollKey,
   className,
 }: ChatThreadProps): React.ReactElement {
+  const containerRef = useRef<HTMLDivElement>(null)
   const endRef = useRef<HTMLDivElement>(null)
   const rafRef = useRef<number>(0)
-
-  useEffect(() => {
+  const scrollToEnd = useCallback(() => {
     if (rafRef.current) cancelAnimationFrame(rafRef.current)
     rafRef.current = requestAnimationFrame(() => {
-      endRef.current?.scrollIntoView({ behavior: 'smooth' })
+      endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
     })
+  }, [])
+
+  useEffect(() => {
+    scrollToEnd()
     return () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current)
     }
-  }, [children, scrollKey, footer])
+  }, [children, footer, scrollKey, scrollToEnd])
+
+  useLayoutEffect(() => {
+    const node = containerRef.current
+    if (!node || typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(() => {
+      scrollToEnd()
+    })
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [scrollToEnd])
 
   return (
-    <Container className={className}>
+    <Container ref={containerRef} className={className} data-agent-thread-scroll>
       {emptyMessage}
       {children}
       {footer}
@@ -48,7 +63,8 @@ const Container = styled.div`
   min-height: 0;
   overflow-y: auto;
   padding: calc(16px + var(--platform-agent-thread-header-height, 0px)) 24px
-    16px;
+    calc(16px + var(--platform-agent-composer-reserve-height, 0px));
+  scroll-padding-bottom: var(--platform-agent-composer-reserve-height, 0px);
 `
 
 export const ChatThreadEmpty = styled.div`

package/src/components/common/connections/ProviderConnection.test.tsx

@@ -0,0 +1,208 @@
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { OAuthCredentialStatus } from '../../../bridge/credentials.mjs'
+import {
+  ProviderConnection,
+  type ProviderConnectionClient,
+} from './ProviderConnection.js'
+
+function statusOf(
+  overrides: Partial<OAuthCredentialStatus> = {},
+): OAuthCredentialStatus {
+  return {
+    id: 'google.oauth',
+    kind: 'oauth',
+    provider: 'google',
+    configured: false,
+    connected: false,
+    scopes: [],
+    needsReconnect: false,
+    ...overrides,
+  }
+}
+
+function mockClient(
+  status: OAuthCredentialStatus,
+): ProviderConnectionClient & {
+  setOAuthConfig: ReturnType<typeof vi.fn>
+  connectOAuth: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+} {
+  let current = status
+  return {
+    status: vi.fn(async () => current),
+    setOAuthConfig: vi.fn(async () => {
+      current = statusOf({ configured: true })
+      return { ok: true }
+    }),
+    connectOAuth: vi.fn(async () => {
+      current = statusOf({
+        configured: true,
+        connected: true,
+        email: 'adam@pure.science',
+      })
+      return { email: 'adam@pure.science' }
+    }),
+    disconnect: vi.fn(async () => {
+      current = statusOf({ configured: true })
+      return { ok: true }
+    }),
+  }
+}
+
+let host: HTMLDivElement | null = null
+let root: Root | null = null
+
+async function render(element: React.ReactElement): Promise<void> {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  await act(async () => {
+    root?.render(element)
+  })
+}
+
+afterEach(async () => {
+  await act(async () => {
+    root?.unmount()
+  })
+  host?.remove()
+  host = null
+  root = null
+})
+
+describe('ProviderConnection', () => {
+  it('shows config fields when unconfigured and clears the secret after save', async () => {
+    const client = mockClient(statusOf())
+    await render(
+      <ProviderConnection
+        credentialId="google.oauth"
+        title="Google account"
+        client={client}
+      />,
+    )
+
+    const clientIdInput = host?.querySelector<HTMLInputElement>(
+      '#google\\.oauth-client-id',
+    )
+    const secretInput = host?.querySelector<HTMLInputElement>(
+      '#google\\.oauth-client-secret',
+    )
+    expect(clientIdInput).toBeTruthy()
+    expect(secretInput?.type).toBe('password')
+
+    await act(async () => {
+      clientIdInput?.focus()
+    })
+    // Drive the controlled inputs through React's onChange.
+    const setNativeValue = (input: HTMLInputElement, value: string) => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      )?.set
+      setter?.call(input, value)
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+    await act(async () => {
+      if (clientIdInput) setNativeValue(clientIdInput, 'client-id')
+      if (secretInput) setNativeValue(secretInput, 'client-secret')
+    })
+
+    const save = Array.from(host?.querySelectorAll('button') ?? []).find(button =>
+      button.textContent?.includes('Save'),
+    )
+    expect(save?.disabled).toBe(false)
+    await act(async () => {
+      save?.click()
+    })
+
+    expect(client.setOAuthConfig).toHaveBeenCalledWith({
+      id: 'google.oauth',
+      clientId: 'client-id',
+      clientSecret: 'client-secret',
+    })
+    // Write-only: after save the secret is gone from the DOM entirely.
+    expect(host?.innerHTML).not.toContain('client-secret')
+    // Now configured: the sign-in button is offered.
+    expect(host?.textContent).toContain('Sign in with Google')
+  })
+
+  it('shows the connected identity and never any secret material', async () => {
+    const client = mockClient(
+      statusOf({
+        configured: true,
+        connected: true,
+        email: 'adam@pure.science',
+      }),
+    )
+    await render(
+      <ProviderConnection
+        credentialId="google.oauth"
+        title="Google account"
+        client={client}
+      />,
+    )
+
+    expect(host?.textContent).toContain('Connected as adam@pure.science')
+    expect(host?.textContent).toContain('Disconnect')
+    expect(host?.querySelector('input')).toBeNull()
+  })
+
+  it('surfaces reconnect prominently when the grant is revoked', async () => {
+    const client = mockClient(
+      statusOf({
+        configured: true,
+        connected: false,
+        needsReconnect: true,
+        email: 'adam@pure.science',
+      }),
+    )
+    await render(
+      <ProviderConnection
+        credentialId="google.oauth"
+        title="Google account"
+        client={client}
+      />,
+    )
+
+    expect(host?.textContent).toContain('Reconnect required')
+    const reconnect = Array.from(host?.querySelectorAll('button') ?? []).find(
+      button => button.textContent === 'Reconnect',
+    )
+    expect(reconnect).toBeTruthy()
+
+    await act(async () => {
+      reconnect?.click()
+    })
+    expect(client.connectOAuth).toHaveBeenCalledWith({ id: 'google.oauth' })
+    expect(host?.textContent).toContain('Connected as adam@pure.science')
+  })
+
+  it('notifies the host app on status changes', async () => {
+    const client = mockClient(statusOf({ configured: true }))
+    const onStatusChange = vi.fn()
+    await render(
+      <ProviderConnection
+        credentialId="google.oauth"
+        title="Google account"
+        client={client}
+        onStatusChange={onStatusChange}
+      />,
+    )
+
+    expect(onStatusChange).toHaveBeenCalledWith(
+      expect.objectContaining({ configured: true, connected: false }),
+    )
+
+    const signIn = Array.from(host?.querySelectorAll('button') ?? []).find(button =>
+      button.textContent?.includes('Sign in with Google'),
+    )
+    await act(async () => {
+      signIn?.click()
+    })
+    expect(onStatusChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ connected: true }),
+    )
+  })
+})