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

package/src/components/agents/AgentDrawerPanel.tsx

@@ -0,0 +1,82 @@
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { AgentComposer } from './AgentComposer.js'
+import { AgentContextUsageBar } from './AgentContextUsageBar.js'
+import { AgentMessageList } from './AgentMessageList.js'
+import { AgentToolPendingList } from './AgentToolPendingList.js'
+import type { AgentDrawerPanelProps } from './agentTypes.js'
+import { AgentUiRunState } from './agentTypes.js'
+import {
+  StyledAgentBody,
+  StyledAgentDrawer,
+  StyledAgentFooter,
+} from './agentPanelStyles.js'
+
+export function AgentDrawerPanel({
+  messages,
+  assistantLabel,
+  pendingToolCalls,
+  runState,
+  busy,
+  error,
+  composerValue,
+  composerDisabled = false,
+  composerLeading,
+  onComposerChange,
+  onSend,
+  onStop,
+  onApproveTools,
+  onRejectTools,
+  onApproveOne,
+  onRejectOne,
+  onApproveAlwaysForSession,
+  storageHint = null,
+  usage = null,
+  liveTurn = null,
+}: AgentDrawerPanelProps): React.ReactElement {
+  const awaitingApproval = pendingToolCalls.length > 0
+  const composerBlocked =
+    composerDisabled ||
+    busy ||
+    awaitingApproval ||
+    runState === AgentUiRunState.Ready
+
+  return (
+    <StyledAgentDrawer>
+      <StyledAgentBody>
+        {storageHint ? (
+          <InlineBanner variant="warning">{storageHint}</InlineBanner>
+        ) : null}
+        {error ? <InlineBanner variant="danger">{error}</InlineBanner> : null}
+        <AgentMessageList messages={messages} assistantLabel={assistantLabel} />
+      </StyledAgentBody>
+      <StyledAgentFooter>
+        {awaitingApproval ? (
+          <AgentToolPendingList
+            toolCalls={pendingToolCalls}
+            busy={busy}
+            onApprove={onApproveTools}
+            onReject={onRejectTools}
+            onApproveOne={onApproveOne}
+            onRejectOne={onRejectOne}
+            onApproveAlwaysForSession={onApproveAlwaysForSession}
+          />
+        ) : (
+          <>
+            {usage || liveTurn?.contextCompaction === 'summarizing' ? (
+              <AgentContextUsageBar usage={usage} liveTurn={liveTurn} />
+            ) : null}
+            <AgentComposer
+            value={composerValue}
+            busy={busy}
+            disabled={composerBlocked}
+            leading={composerLeading}
+            onChange={onComposerChange}
+            onSend={onSend}
+            onStop={onStop}
+          />
+          </>
+        )}
+      </StyledAgentFooter>
+    </StyledAgentDrawer>
+  )
+}

package/src/components/agents/AgentMarkdown.tsx

@@ -0,0 +1,12 @@
+import {
+  ChatMarkdown,
+  type ChatMarkdownProps,
+} from '../common/chat/ChatMarkdown.js'
+
+export type AgentMarkdownProps = ChatMarkdownProps
+
+export function AgentMarkdown(
+  props: AgentMarkdownProps,
+): React.ReactElement | null {
+  return <ChatMarkdown {...props} />
+}

package/src/components/agents/AgentMessageBubble.tsx

@@ -0,0 +1,82 @@
+import { Wrench } from 'lucide-react'
+import {
+  ChatAssistantMessage,
+  ChatStatusRow,
+  ChatThinkingIndicator,
+  ChatToolRow,
+  ChatUserBubble,
+} from '../common/chat/index.js'
+import { AgentThinkingBlock } from './AgentThinkingBlock.js'
+import type { AgentUiMessage } from './agentTypes.js'
+
+export interface AgentMessageBubbleProps {
+  message: AgentUiMessage
+  assistantLabel?: string
+}
+
+export function AgentMessageBubble({
+  message,
+  assistantLabel = 'assistant',
+}: AgentMessageBubbleProps): React.ReactElement | null {
+  switch (message.role) {
+    case 'user':
+      return <ChatUserBubble text={message.content} />
+
+    case 'assistant': {
+      if (message.streaming && !message.content && !message.thinking) {
+        return <ChatThinkingIndicator label={assistantLabel} />
+      }
+
+      return (
+        <>
+          <ChatAssistantMessage
+            content={message.content}
+            name={assistantLabel}
+            streaming={message.streaming}
+            beforeBody={
+              message.thinking ? (
+                <AgentThinkingBlock
+                  thinking={message.thinking}
+                  streaming={message.streaming}
+                />
+              ) : null
+            }
+          />
+          {message.toolCalls?.map(call => (
+            <ChatToolRow
+              key={call.id}
+              icon={<Wrench size={11} />}
+              title={call.name}
+              summary={formatToolSummary(call.arguments)}
+            />
+          ))}
+          {message.activeTool ? (
+            <ChatStatusRow text={`Running ${message.activeTool.name}…`} />
+          ) : null}
+        </>
+      )
+    }
+
+    case 'tool':
+      return (
+        <ChatToolRow
+          icon={<Wrench size={11} />}
+          title="Tool"
+          summary={message.content}
+        />
+      )
+
+    default:
+      return null
+  }
+}
+
+function formatToolSummary(args: Record<string, unknown>): string {
+  const keys = Object.keys(args)
+  if (keys.length === 0) return ''
+  if (keys.length === 1) {
+    const value = args[keys[0]!]
+    return `${keys[0]}: ${String(value).slice(0, 80)}`
+  }
+  return keys.join(', ')
+}

package/src/components/agents/AgentMessageList.tsx

@@ -0,0 +1,47 @@
+import { Fragment, memo } from 'react'
+import { ChatThread, ChatThreadEmpty } from '../common/chat/index.js'
+import { AgentMessageBubble } from './AgentMessageBubble.js'
+import type { AgentUiMessage } from './agentTypes.js'
+import { StyledAgentScroll } from './agentPanelStyles.js'
+
+export function formatAssistantLabel(appName: string): string {
+  const trimmed = appName.trim()
+  if (!trimmed) return 'assistant'
+  return `${trimmed} assistant`
+}
+
+export interface AgentMessageListProps {
+  messages: AgentUiMessage[]
+  assistantLabel?: string
+  emptyMessage?: string
+}
+
+export const AgentMessageList = memo(function AgentMessageList({
+  messages,
+  assistantLabel = 'assistant',
+  emptyMessage = 'Ask the agent about your workspace. Tool calls wait for your approval.',
+}: AgentMessageListProps): React.ReactElement {
+  const scrollKey = messages.map(message => message.id).join('|')
+
+  return (
+    <StyledAgentScroll>
+      <ChatThread
+        scrollKey={scrollKey}
+        emptyMessage={
+          messages.length === 0 ? (
+            <ChatThreadEmpty>{emptyMessage}</ChatThreadEmpty>
+          ) : null
+        }
+      >
+        {messages.map(message => (
+          <Fragment key={message.id}>
+            <AgentMessageBubble
+              message={message}
+              assistantLabel={assistantLabel}
+            />
+          </Fragment>
+        ))}
+      </ChatThread>
+    </StyledAgentScroll>
+  )
+})

package/src/components/agents/AgentModelMenu.tsx

@@ -0,0 +1,55 @@
+import {
+  ChatModelMenu,
+  type ChatModelMenuOption,
+  type ChatModelMenuProps,
+} from '../common/chat/ChatModelMenu.js'
+import type { AgentModelOption } from './agentTypes.js'
+import {
+  AGENT_AUTO_MODEL_ID,
+  AGENT_AUTO_MODEL_LABEL,
+  isAgentAutoModelId,
+} from '../../bridge/agentModelTiers.js'
+
+export interface AgentModelMenuProps
+  extends Omit<ChatModelMenuProps, 'options'> {
+  options: readonly AgentModelOption[]
+  /** When true, prepend the Auto routing option. Defaults to true. */
+  includeAuto?: boolean
+}
+
+export function buildAgentModelMenuOptions(
+  catalogOptions: readonly AgentModelOption[],
+  includeAuto = true,
+): ChatModelMenuOption[] {
+  if (!includeAuto) {
+    return catalogOptions
+      .filter(option => !isAgentAutoModelId(option.value))
+      .map(option => ({
+        value: option.value,
+        label: option.label,
+      }))
+  }
+
+  const autoOption: ChatModelMenuOption = {
+    value: AGENT_AUTO_MODEL_ID,
+    label: AGENT_AUTO_MODEL_LABEL,
+  }
+  const mapped = catalogOptions
+    .filter(option => !isAgentAutoModelId(option.value))
+    .map(option => ({
+      value: option.value,
+      label: option.label,
+    }))
+  return [autoOption, ...mapped]
+}
+
+export function AgentModelMenu({
+  options,
+  includeAuto = true,
+  ...menuProps
+}: AgentModelMenuProps): React.ReactElement {
+  const menuOptions = buildAgentModelMenuOptions(options, includeAuto)
+  return <ChatModelMenu {...menuProps} options={menuOptions} />
+}
+
+export { isAgentAutoModelId, AGENT_AUTO_MODEL_ID, AGENT_AUTO_MODEL_LABEL }

package/src/components/agents/AgentThinkingBlock.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { Brain } from 'lucide-react'
+import { styled } from 'styled-components'
+import { ChatMarkdown } from '../common/chat/ChatMarkdown.js'
+import { ChatToolRow } from '../common/chat/ChatToolRow.js'
+
+export interface AgentThinkingBlockProps {
+  thinking: string
+  streaming?: boolean
+}
+
+export function AgentThinkingBlock({
+  thinking,
+  streaming = false,
+}: AgentThinkingBlockProps): React.ReactElement | null {
+  const [open, setOpen] = useState(false)
+
+  if (!thinking && !streaming) {
+    return null
+  }
+
+  if (!thinking && streaming) {
+    return (
+      <ChatToolRow icon={<Brain size={11} />} title="Thinking" summary="…" />
+    )
+  }
+
+  return (
+    <Root>
+      <Toggle
+        type="button"
+        onClick={() => setOpen(value => !value)}
+        aria-expanded={open}
+      >
+        <ChatToolRow
+          icon={<Brain size={11} />}
+          title="Thinking"
+          summary={open ? 'Hide' : 'Show'}
+        />
+      </Toggle>
+      {open ? (
+        <ThinkingBody>
+          <ChatMarkdown content={thinking} streaming={streaming} />
+        </ThinkingBody>
+      ) : null}
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  width: 100%;
+`
+
+const Toggle = styled.button`
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+`
+
+const ThinkingBody = styled.div`
+  padding-top: 4px;
+`

package/src/components/agents/AgentToolApprovalActions.tsx

@@ -0,0 +1,65 @@
+import { Button } from '../common/buttons/Button.js'
+import { ChatModelMenu } from '../common/chat/ChatModelMenu.js'
+import type { AgentUiToolCall } from './agentTypes.js'
+import { StyledToolStageActions } from './agentPanelStyles.js'
+
+const APPROVE_ALWAYS_SESSION = 'approve-always-session'
+
+export interface AgentToolApprovalActionsProps {
+  toolCall: AgentUiToolCall
+  busy?: boolean
+  onApproveThisTime: (toolCallId: string) => void
+  onRejectThisTime: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+}
+
+export function AgentToolApprovalActions({
+  toolCall,
+  busy = false,
+  onApproveThisTime,
+  onRejectThisTime,
+  onApproveAlwaysForSession,
+}: AgentToolApprovalActionsProps): React.ReactElement {
+  return (
+    <StyledToolStageActions>
+      {onApproveAlwaysForSession ? (
+        <ChatModelMenu
+          primaryActionLabel="Approve"
+          onPrimaryAction={() => onApproveThisTime(toolCall.id)}
+          value={APPROVE_ALWAYS_SESSION}
+          options={[
+            {
+              value: APPROVE_ALWAYS_SESSION,
+              label: 'Always approve for this session',
+            },
+          ]}
+          disabled={busy}
+          menuPlacement="above"
+          aria-label="Approve"
+          onSelect={() =>
+            onApproveAlwaysForSession(toolCall.name, toolCall.id)
+          }
+        />
+      ) : (
+        <Button
+          size="sm"
+          disabled={busy}
+          onClick={() => onApproveThisTime(toolCall.id)}
+        >
+          Approve
+        </Button>
+      )}
+      <Button
+        size="sm"
+        variant="subtle"
+        disabled={busy}
+        onClick={() => onRejectThisTime(toolCall.id)}
+      >
+        Reject
+      </Button>
+    </StyledToolStageActions>
+  )
+}

package/src/components/agents/AgentToolCallCard.tsx

@@ -0,0 +1,26 @@
+import { Text } from '../common/typography/Text.js'
+import type { AgentUiToolCall } from './agentTypes.js'
+import { formatToolCallArguments } from './formatToolCallArguments.js'
+import { StyledToolArgs, StyledToolCard } from './agentPanelStyles.js'
+
+export interface AgentToolCallCardProps {
+  toolCall: AgentUiToolCall
+  footer?: React.ReactNode
+}
+
+export function AgentToolCallCard({
+  toolCall,
+  footer,
+}: AgentToolCallCardProps): React.ReactElement {
+  return (
+    <StyledToolCard>
+      <Text weight="medium" size="sm">
+        {toolCall.name}
+      </Text>
+      <StyledToolArgs>
+        {formatToolCallArguments(toolCall.arguments)}
+      </StyledToolArgs>
+      {footer}
+    </StyledToolCard>
+  )
+}

package/src/components/agents/AgentToolPendingList.tsx

@@ -0,0 +1,39 @@
+import type { AgentUiToolCall } from './agentTypes.js'
+import { AgentToolPendingReview } from './AgentToolPendingReview.js'
+
+export interface AgentToolPendingListProps {
+  toolCalls: AgentUiToolCall[]
+  busy?: boolean
+  onApprove: () => void
+  onReject: () => void
+  onApproveOne?: (toolCallId: string) => void
+  onRejectOne?: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+}
+
+export function AgentToolPendingList({
+  toolCalls,
+  busy = false,
+  onApprove,
+  onReject,
+  onApproveOne,
+  onRejectOne,
+  onApproveAlwaysForSession,
+}: AgentToolPendingListProps): React.ReactElement | null {
+  if (toolCalls.length === 0) return null
+
+  return (
+    <AgentToolPendingReview
+      toolCalls={toolCalls}
+      busy={busy}
+      onApproveAll={onApprove}
+      onRejectAll={onReject}
+      onApproveOne={onApproveOne ?? onApprove}
+      onRejectOne={onRejectOne ?? onReject}
+      onApproveAlwaysForSession={onApproveAlwaysForSession}
+    />
+  )
+}

package/src/components/agents/AgentToolPendingReview.tsx

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

package/src/components/agents/agentPanelStyles.ts

@@ -0,0 +1,79 @@
+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);
+`