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

package/src/components/agents/AgentToolPendingReview.tsx

@@ -1,118 +1,118 @@
-import { useEffect, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { IconButton } from '../common/buttons/IconButton.js'
-import { FlexRow } from '../common/containers/flex.js'
-import { Text } from '../common/typography/Text.js'
-import { AgentToolApprovalActions } from './AgentToolApprovalActions.js'
-import { AgentToolCallCard } from './AgentToolCallCard.js'
-import type { AgentUiToolCall } from './agentTypes.js'
-import { Button } from '../common/buttons/Button.js'
-import { StyledToolBatchActions, StyledToolNav } from './agentPanelStyles.js'
-
-export interface AgentToolPendingReviewProps {
-  toolCalls: AgentUiToolCall[]
-  busy?: boolean
-  onApproveAll: () => void
-  onRejectAll: () => void
-  onApproveOne: (toolCallId: string) => void
-  onRejectOne: (toolCallId: string) => void
-  onApproveAlwaysForSession?: (
-    qualifiedName: string,
-    toolCallId: string,
-  ) => void
-}
-
-export function AgentToolPendingReview({
-  toolCalls,
-  busy = false,
-  onApproveAll,
-  onRejectAll,
-  onApproveOne,
-  onRejectOne,
-  onApproveAlwaysForSession,
-}: AgentToolPendingReviewProps): React.ReactElement | null {
-  const [index, setIndex] = useState(0)
-  const count = toolCalls.length
-  const toolCallKey = toolCalls.map(call => call.id).join('|')
-
-  useEffect(() => {
-    setIndex(0)
-  }, [toolCallKey])
-
-  useEffect(() => {
-    if (index >= count) {
-      setIndex(Math.max(0, count - 1))
-    }
-  }, [count, index])
-
-  if (count === 0) return null
-
-  const current = toolCalls[index] ?? toolCalls[0]
-  const showNav = count > 1
-
-  return (
-    <>
-      {showNav ? (
-        <StyledToolNav $align="center" $justify="between">
-          <FlexRow $align="center" $gap="xs">
-            <IconButton
-              size="sm"
-              type="button"
-              disabled={busy || index <= 0}
-              aria-label="Previous tool"
-              onClick={() => setIndex(value => Math.max(0, value - 1))}
-            >
-              <ChevronLeft size={16} />
-            </IconButton>
-            <Text size="sm" tone="secondary">
-              {index + 1} of {count}
-            </Text>
-            <IconButton
-              size="sm"
-              type="button"
-              disabled={busy || index >= count - 1}
-              aria-label="Next tool"
-              onClick={() => setIndex(value => Math.min(count - 1, value + 1))}
-            >
-              <ChevronRight size={16} />
-            </IconButton>
-          </FlexRow>
-        </StyledToolNav>
-      ) : null}
-
-      <AgentToolCallCard
-        toolCall={current}
-        footer={
-          <AgentToolApprovalActions
-            toolCall={current}
-            busy={busy}
-            onApproveThisTime={onApproveOne}
-            onRejectThisTime={onRejectOne}
-            onApproveAlwaysForSession={onApproveAlwaysForSession}
-          />
-        }
-      />
-
-      {showNav ? (
-        <StyledToolBatchActions>
-          <Button
-            size="sm"
-            variant="subtle"
-            disabled={busy}
-            onClick={onApproveAll}
-          >
-            Approve all
-          </Button>
-          <Button
-            size="sm"
-            variant="subtle"
-            disabled={busy}
-            onClick={onRejectAll}
-          >
-            Reject all
-          </Button>
-        </StyledToolBatchActions>
-      ) : null}
-    </>
-  )
-}
+import { useEffect, useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { IconButton } from '../common/buttons/IconButton.js'
+import { FlexRow } from '../common/containers/flex.js'
+import { Text } from '../common/typography/Text.js'
+import { AgentToolApprovalActions } from './AgentToolApprovalActions.js'
+import { AgentToolCallCard } from './AgentToolCallCard.js'
+import type { AgentUiToolCall } from './agentTypes.js'
+import { Button } from '../common/buttons/Button.js'
+import { StyledToolBatchActions, StyledToolNav } from './agentPanelStyles.js'
+
+export interface AgentToolPendingReviewProps {
+  toolCalls: AgentUiToolCall[]
+  busy?: boolean
+  onApproveAll: () => void
+  onRejectAll: () => void
+  onApproveOne: (toolCallId: string) => void
+  onRejectOne: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+}
+
+export function AgentToolPendingReview({
+  toolCalls,
+  busy = false,
+  onApproveAll,
+  onRejectAll,
+  onApproveOne,
+  onRejectOne,
+  onApproveAlwaysForSession,
+}: AgentToolPendingReviewProps): React.ReactElement | null {
+  const [index, setIndex] = useState(0)
+  const count = toolCalls.length
+  const toolCallKey = toolCalls.map(call => call.id).join('|')
+
+  useEffect(() => {
+    setIndex(0)
+  }, [toolCallKey])
+
+  useEffect(() => {
+    if (index >= count) {
+      setIndex(Math.max(0, count - 1))
+    }
+  }, [count, index])
+
+  if (count === 0) return null
+
+  const current = toolCalls[index] ?? toolCalls[0]
+  const showNav = count > 1
+
+  return (
+    <>
+      {showNav ? (
+        <StyledToolNav $align="center" $justify="between">
+          <FlexRow $align="center" $gap="xs">
+            <IconButton
+              size="sm"
+              type="button"
+              disabled={busy || index <= 0}
+              aria-label="Previous tool"
+              onClick={() => setIndex(value => Math.max(0, value - 1))}
+            >
+              <ChevronLeft size={16} />
+            </IconButton>
+            <Text size="sm" tone="secondary">
+              {index + 1} of {count}
+            </Text>
+            <IconButton
+              size="sm"
+              type="button"
+              disabled={busy || index >= count - 1}
+              aria-label="Next tool"
+              onClick={() => setIndex(value => Math.min(count - 1, value + 1))}
+            >
+              <ChevronRight size={16} />
+            </IconButton>
+          </FlexRow>
+        </StyledToolNav>
+      ) : null}
+
+      <AgentToolCallCard
+        toolCall={current}
+        footer={
+          <AgentToolApprovalActions
+            toolCall={current}
+            busy={busy}
+            onApproveThisTime={onApproveOne}
+            onRejectThisTime={onRejectOne}
+            onApproveAlwaysForSession={onApproveAlwaysForSession}
+          />
+        }
+      />
+
+      {showNav ? (
+        <StyledToolBatchActions>
+          <Button
+            size="sm"
+            variant="subtle"
+            disabled={busy}
+            onClick={onApproveAll}
+          >
+            Approve all
+          </Button>
+          <Button
+            size="sm"
+            variant="subtle"
+            disabled={busy}
+            onClick={onRejectAll}
+          >
+            Reject all
+          </Button>
+        </StyledToolBatchActions>
+      ) : null}
+    </>
+  )
+}

package/src/components/agents/agentPanelStyles.ts

@@ -1,79 +1,150 @@
-import { styled } from 'styled-components'
-import { FlexCol, FlexRow } from '../common/containers/flex.js'
-
-export const StyledAgentDrawer = styled(FlexCol)`
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  background: var(--platform-colors-surface);
-`
-
-export const StyledAgentBody = styled(FlexCol)`
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-`
-
-export const StyledAgentScroll = styled.div`
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`
-
-export const StyledAgentFooter = styled.div`
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  padding: 8px 16px 12px;
-  border-top: 1px solid var(--platform-colors-border);
-  background: var(--platform-colors-surface);
-`
-
-export const StyledToolCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 10px;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-sm);
-  background: var(--platform-colors-surface-muted);
-  min-width: 0;
-`
-
-export const StyledToolArgs = styled.pre`
-  margin: 0;
-  font-family: var(--platform-typography-font-family-mono);
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--platform-colors-text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 120px;
-  overflow: auto;
-`
-
-export const StyledToolNav = styled(FlexRow)`
-  min-width: 0;
-`
-
-export const StyledToolBatchActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-xs);
-`
-
-export const StyledToolStageActions = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--platform-spacing-sm);
-`
-
-export const StyledToolActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-sm);
-`
+import { styled } from 'styled-components'
+import { FlexCol, FlexRow } from '../common/containers/flex.js'
+
+export const StyledAgentDrawer = styled(FlexCol)`
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  background: var(--platform-colors-app-viewport);
+  margin: 0;
+`
+
+export const StyledAgentBody = styled(FlexCol)`
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+`
+
+export const StyledAgentThreadHost = styled.div`
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+export const StyledAgentScroll = styled.div`
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  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`
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: 8px 16px 12px;
+  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;
+  gap: 4px;
+  padding: 8px 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface-muted);
+  min-width: 0;
+`
+
+export const StyledToolArgs = styled.pre`
+  margin: 0;
+  font-family: var(--platform-typography-font-family-mono);
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--platform-colors-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 120px;
+  overflow: auto;
+`
+
+export const StyledToolNav = styled(FlexRow)`
+  min-width: 0;
+`
+
+export const StyledToolBatchActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-xs);
+`
+
+export const StyledToolStageActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+`
+
+export const StyledToolActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+`
+
+export const StyledFollowUpList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-sizing: border-box;
+`
+
+export const StyledFollowUpRow = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-bg);
+`
+
+export const StyledFollowUpText = styled.div`
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+export const StyledFollowUpActions = styled(FlexRow)`
+  flex: 0 0 auto;
+`

package/src/components/agents/agentToolDisplay.ts

@@ -0,0 +1,87 @@
+import type { AgentUiToolCall } from './agentTypes.js'
+
+const BUILTIN_LABELS: Record<string, string> = {
+  'harness.web_search': 'Search the web',
+  'harness.grep_context': 'Search in context',
+  'harness.read_context_chunk': 'Read context',
+  'harness.invoke_agent': 'Ask another app',
+}
+
+const ARG_KEYS = [
+  'query',
+  'path',
+  'pattern',
+  'label',
+  'text',
+  'name',
+  'appSlug',
+] as const
+
+export function formatAgentToolLabel(qualifiedName: string): string {
+  const builtin = BUILTIN_LABELS[qualifiedName]
+  if (builtin) return builtin
+  const dot = qualifiedName.lastIndexOf('.')
+  const short = dot >= 0 ? qualifiedName.slice(dot + 1) : qualifiedName
+  return humanizeIdentifier(short)
+}
+
+export function formatAgentToolSummary(
+  name: string,
+  args: Record<string, unknown>,
+): string {
+  for (const key of ARG_KEYS) {
+    const value = args[key]
+    if (typeof value === 'string' && value.trim()) {
+      return truncate(value.trim(), 80)
+    }
+  }
+  for (const value of Object.values(args)) {
+    if (typeof value === 'string' && value.trim()) {
+      return truncate(value.trim(), 80)
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+      return String(value)
+    }
+  }
+  return ''
+}
+
+export function formatAgentToolResultPreview(
+  content: string,
+  maxLength = 80,
+): string {
+  const trimmed = content.trim()
+  if (trimmed.length <= maxLength) return trimmed
+  return `${trimmed.slice(0, maxLength - 1)}…`
+}
+
+export function formatAgentToolRowSummary(call: AgentUiToolCall): string {
+  if (call.status === 'running') return 'Running…'
+  if (call.result !== undefined) {
+    return formatAgentToolResultPreview(call.result)
+  }
+  return formatAgentToolSummary(call.name, call.arguments)
+}
+
+export function agentToolResultDetails(result: string): string[] | undefined {
+  const trimmed = result.trim()
+  if (!trimmed) return undefined
+  const lines = trimmed.split('\n').map(line => line.trim()).filter(Boolean)
+  if (lines.length > 1) return lines
+  if (trimmed.length > 80) return [trimmed]
+  return undefined
+}
+
+function humanizeIdentifier(value: string): string {
+  const spaced = value
+    .replace(/_/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .trim()
+  if (!spaced) return value
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase()
+}
+
+function truncate(value: string, maxLength: number): string {
+  if (value.length <= maxLength) return value
+  return `${value.slice(0, maxLength - 1)}…`
+}