@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

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

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

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  connectCredentialOAuth,
+  disconnectCredential,
+  readCredentialStatus,
+  setCredentialOAuthConfig,
+  type OAuthCredentialStatus,
+} from '../../../bridge/credentials.mjs'
+import { Button } from '../buttons/Button.js'
+import { FormField } from '../inputs/FormField.js'
+import { TextField } from '../inputs/TextField.js'
+import {
+  ConnectionButtonRow,
+  ConnectionFieldGrid,
+  ConnectionPanel,
+  ConnectionPanelText,
+  ConnectionPanelTitle,
+  ConnectionTestResult,
+} from './ConnectionSetup.js'
+
+/**
+ * Bridge surface the component talks to. Overridable for tests; production
+ * defaults to the shell credentials bridge. The shell owns all state — this
+ * component never caches connection state and never sees secret material.
+ */
+export interface ProviderConnectionClient {
+  status(request: { id: string }): Promise<OAuthCredentialStatus>
+  setOAuthConfig(request: {
+    id: string
+    clientId: string
+    clientSecret: string
+    scopes?: string[]
+  }): Promise<unknown>
+  connectOAuth(request: {
+    id: string
+    scopes?: string[]
+  }): Promise<{ email?: string }>
+  disconnect(request: { id: string; forget?: boolean }): Promise<unknown>
+}
+
+const bridgeClient: ProviderConnectionClient = {
+  status: readCredentialStatus,
+  setOAuthConfig: setCredentialOAuthConfig,
+  connectOAuth: connectCredentialOAuth,
+  disconnect: disconnectCredential,
+}
+
+export interface ProviderConnectionProps {
+  /** Shell credential id, e.g. `google.oauth`. */
+  credentialId: string
+  title: string
+  description?: string
+  /** Scopes this app needs; merged into the connection request. */
+  scopes?: string[]
+  /** "How to create an OAuth client" walkthrough for the unconfigured state. */
+  helpUrl?: string
+  /** Called after connect/disconnect so the host app can rebuild providers. */
+  onStatusChange?: (status: OAuthCredentialStatus) => void
+  client?: ProviderConnectionClient
+}
+
+type Busy = 'idle' | 'saving' | 'connecting' | 'disconnecting'
+
+export function ProviderConnection({
+  credentialId,
+  title,
+  description,
+  scopes,
+  helpUrl,
+  onStatusChange,
+  client = bridgeClient,
+}: ProviderConnectionProps): React.ReactElement {
+  const [status, setStatus] = useState<OAuthCredentialStatus | null>(null)
+  const [clientIdDraft, setClientIdDraft] = useState('')
+  const [clientSecretDraft, setClientSecretDraft] = useState('')
+  const [busy, setBusy] = useState<Busy>('idle')
+  const [error, setError] = useState<string | null>(null)
+
+  const refresh = useCallback(async () => {
+    const next = await client.status({ id: credentialId })
+    setStatus(next)
+    onStatusChange?.(next)
+    return next
+  }, [client, credentialId, onStatusChange])
+
+  useEffect(() => {
+    refresh().catch(cause =>
+      setError(cause instanceof Error ? cause.message : String(cause)),
+    )
+  }, [refresh])
+
+  const scopesRequest = useMemo(
+    () => (scopes?.length ? { scopes } : {}),
+    [scopes],
+  )
+
+  const saveConfig = useCallback(async () => {
+    setBusy('saving')
+    setError(null)
+    try {
+      await client.setOAuthConfig({
+        id: credentialId,
+        clientId: clientIdDraft,
+        clientSecret: clientSecretDraft,
+        ...scopesRequest,
+      })
+      // Write-only: the secret leaves the DOM the moment it is saved.
+      setClientSecretDraft('')
+      setClientIdDraft('')
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, clientIdDraft, clientSecretDraft, refresh, scopesRequest])
+
+  const connect = useCallback(async () => {
+    setBusy('connecting')
+    setError(null)
+    try {
+      await client.connectOAuth({ id: credentialId, ...scopesRequest })
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, refresh, scopesRequest])
+
+  const disconnect = useCallback(async () => {
+    setBusy('disconnecting')
+    setError(null)
+    try {
+      await client.disconnect({ id: credentialId })
+      await refresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setBusy('idle')
+    }
+  }, [client, credentialId, refresh])
+
+  const configured = status?.configured === true
+  const connected = status?.connected === true
+  const needsReconnect = status?.needsReconnect === true
+  const working = busy !== 'idle'
+
+  return (
+    <ConnectionPanel aria-busy={working}>
+      <ConnectionPanelTitle>{title}</ConnectionPanelTitle>
+      {description ? (
+        <ConnectionPanelText>{description}</ConnectionPanelText>
+      ) : null}
+
+      {!configured ? (
+        <>
+          <ConnectionPanelText>
+            Paste the OAuth client id and secret from your Google Cloud
+            console.{' '}
+            {helpUrl ? (
+              <a href={helpUrl} target="_blank" rel="noreferrer">
+                How to create an OAuth client
+              </a>
+            ) : null}
+          </ConnectionPanelText>
+          <ConnectionFieldGrid>
+            <FormField label="Client id" htmlFor={`${credentialId}-client-id`}>
+              <TextField
+                id={`${credentialId}-client-id`}
+                value={clientIdDraft}
+                autoComplete="off"
+                spellCheck={false}
+                disabled={working}
+                onChange={event => setClientIdDraft(event.target.value)}
+              />
+            </FormField>
+            <FormField
+              label="Client secret"
+              htmlFor={`${credentialId}-client-secret`}
+              hint="Stored in the encrypted vault; never shown again."
+            >
+              <TextField
+                id={`${credentialId}-client-secret`}
+                type="password"
+                value={clientSecretDraft}
+                autoComplete="off"
+                spellCheck={false}
+                disabled={working}
+                onChange={event => setClientSecretDraft(event.target.value)}
+              />
+            </FormField>
+          </ConnectionFieldGrid>
+          <ConnectionButtonRow>
+            <Button
+              type="button"
+              disabled={
+                working || !clientIdDraft.trim() || !clientSecretDraft.trim()
+              }
+              onClick={() => void saveConfig()}
+            >
+              {busy === 'saving' ? 'Saving…' : 'Save'}
+            </Button>
+          </ConnectionButtonRow>
+        </>
+      ) : null}
+
+      {configured && !connected && !needsReconnect ? (
+        <ConnectionButtonRow>
+          <Button
+            type="button"
+            variant="subtle"
+            disabled={working}
+            onClick={() => void disconnect()}
+          >
+            Remove
+          </Button>
+          <Button
+            type="button"
+            disabled={working}
+            onClick={() => void connect()}
+          >
+            {busy === 'connecting' ? 'Waiting for browser…' : 'Sign in with Google'}
+          </Button>
+        </ConnectionButtonRow>
+      ) : null}
+
+      {needsReconnect ? (
+        <ConnectionTestResult
+          tone="warning"
+          title="Reconnect required"
+          message={
+            status?.email
+              ? `Access for ${status.email} has expired or was revoked.`
+              : 'Access has expired or was revoked.'
+          }
+        />
+      ) : null}
+
+      {configured && (connected || needsReconnect) ? (
+        <ConnectionButtonRow>
+          <Button
+            type="button"
+            variant="subtle"
+            disabled={working}
+            onClick={() => void disconnect()}
+          >
+            Disconnect
+          </Button>
+          <Button
+            type="button"
+            disabled={working}
+            onClick={() => void connect()}
+          >
+            {busy === 'connecting'
+              ? 'Waiting for browser…'
+              : needsReconnect
+                ? 'Reconnect'
+                : 'Reconnect account'}
+          </Button>
+        </ConnectionButtonRow>
+      ) : null}
+
+      {connected ? (
+        <ConnectionTestResult
+          tone="success"
+          title={status?.email ? `Connected as ${status.email}` : 'Connected'}
+          message="Mail and Calendar share this connection."
+        />
+      ) : null}
+
+      {error ? (
+        <ConnectionTestResult tone="error" title="Something went wrong" message={error} />
+      ) : null}
+    </ConnectionPanel>
+  )
+}

package/src/components/common/connections/index.ts

@@ -24,3 +24,8 @@ export {
   type ConnectionTestResultProps,
   type ConnectionTestTone,
 } from './ConnectionSetup.js'
+export {
+  ProviderConnection,
+  type ProviderConnectionClient,
+  type ProviderConnectionProps,
+} from './ProviderConnection.js'

package/src/components/common/containers/AppFrame.test.tsx

@@ -62,10 +62,10 @@ describe('AppFrame', () => {
 
     expect(document.getElementById(MENU_PORTAL_ID)).not.toBeNull()
     const baseStyles = document.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)
-    expect(baseStyles).not.toBeNull()
-    expect(baseStyles?.textContent).toContain('box-sizing: border-box')
-    expect(baseStyles?.textContent).toContain('scrollbar-color')
-    expect(document.getElementById(PLATFORM_FONT_STYLESHEET_ID)).not.toBeNull()
+    expect(baseStyles).not.toBeNull()
+    expect(baseStyles?.textContent).toContain('box-sizing: border-box')
+    expect(baseStyles?.textContent).toContain('scrollbar-color')
+    expect(document.getElementById(PLATFORM_FONT_STYLESHEET_ID)).not.toBeNull()
     expect(container.querySelector('[data-app="tasks"]')).not.toBeNull()
     expect(document.documentElement.dataset.app).toBe('tasks')
     expect(container.textContent).toContain('App content')

package/src/components/common/containers/AppFrame.tsx

@@ -15,12 +15,18 @@ export interface AppFrameProps
   themeFromBridge?: boolean
   /** Optional actions rendered in the app header's action slot. */
   headerActions?: ReactNode
-}
+  /** Open document's file name, shown beside the wordmark. */
+  headerDocumentName?: ReactNode
+  /** Hide the app wordmark when identity is already provided by host chrome. */
+  hideWordmark?: boolean
+  /** Optional app identity slug used before the shell bridge is ready. */
+  identityAppSlug?: string
+}
 
 const StyledRoot = styled.div`
   display: flex;
   flex-direction: column;
-  /* width: 100%; */
+  width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
@@ -36,9 +42,12 @@ export function AppFrame({
   children,
   className,
   themeFromBridge = true,
-  headerActions,
-  ...rest
-}: AppFrameProps): React.ReactElement {
+  headerActions,
+  headerDocumentName,
+  hideWordmark = false,
+  identityAppSlug,
+  ...rest
+}: AppFrameProps): React.ReactElement {
   const { meta, ready } = usePlatformBridge()
   const { manifest } = usePlatformAppManifest(meta?.appSlug ?? null, ready)
 
@@ -48,17 +57,18 @@ export function AppFrame({
 
   useEffect(() => {
     const root = document.documentElement
-    if (meta?.appSlug) {
-      root.dataset.app = meta.appSlug
+    const appSlug = meta?.appSlug ?? identityAppSlug
+    if (appSlug) {
+      root.dataset.app = appSlug
     } else {
       delete root.dataset.app
     }
     return () => {
-      if (root.dataset.app === meta?.appSlug) {
+      if (root.dataset.app === appSlug) {
         delete root.dataset.app
       }
     }
-  }, [meta?.appSlug])
+  }, [identityAppSlug, meta?.appSlug])
 
   usePlatformThemeFromBridge(themeFromBridge)
   const themeAttrs = usePlatformThemeDocumentAttrs(themeFromBridge)
@@ -73,7 +83,13 @@ export function AppFrame({
         data-platform-surface-palette={themeAttrs.surfacePalette || undefined}
         {...rest}
       >
-        {manifest && <AppHeader manifest={manifest} actions={headerActions} />}
+        {manifest && !hideWordmark && (
+          <AppHeader
+            manifest={manifest}
+            actions={headerActions}
+            documentName={headerDocumentName}
+          />
+        )}
         {children}
       </StyledRoot>
     </>