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

package/src/components/agents/agentTypes.ts

@@ -0,0 +1,96 @@
+/** Presentational run state — mirrors shell `AgentRunState` without importing shell code. */
+export const AgentUiRunState = {
+  Ready: 'ready',
+  PendingTools: 'pending_tools',
+  AwaitingUser: 'awaiting_user',
+  Failed: 'failed',
+  Interrupted: 'interrupted',
+} as const
+
+export type AgentUiRunState =
+  (typeof AgentUiRunState)[keyof typeof AgentUiRunState]
+
+export type AgentUiMessageRole = 'user' | 'assistant' | 'tool'
+
+export interface AgentUiToolCall {
+  id: string
+  name: string
+  arguments: Record<string, unknown>
+}
+
+export const AgentLivePhase = {
+  Idle: 'idle',
+  Thinking: 'thinking',
+  Responding: 'responding',
+  ToolsPending: 'tools_pending',
+  ToolRunning: 'tool_running',
+} as const
+
+export type AgentLivePhase =
+  (typeof AgentLivePhase)[keyof typeof AgentLivePhase]
+
+export interface AgentLiveActiveTool {
+  toolCallId: string
+  name: string
+  arguments?: Record<string, unknown>
+}
+
+export interface AgentLiveTurn {
+  phase: AgentLivePhase
+  thinking: string
+  text: string
+  toolCalls: AgentUiToolCall[]
+  activeTool?: AgentLiveActiveTool
+  /** From context_compaction_* run events — not separate React state. */
+  contextCompaction?: 'summarizing' | 'summarized'
+}
+
+export interface AgentUiMessage {
+  id: string
+  role: AgentUiMessageRole
+  content: string
+  thinking?: string
+  streaming?: boolean
+  toolCalls?: AgentUiToolCall[]
+  activeTool?: AgentLiveActiveTool
+}
+
+export interface AgentModelOption {
+  value: string
+  label: string
+}
+
+export interface AgentUiRunUsage {
+  inputTokens: number
+  outputTokens: number
+  totalTokens: number
+  contextWindowTokens?: number
+  contextFillTokens?: number
+  estimated?: boolean
+}
+
+export interface AgentDrawerPanelProps {
+  messages: AgentUiMessage[]
+  assistantLabel?: string
+  liveTurn?: AgentLiveTurn | null
+  pendingToolCalls: AgentUiToolCall[]
+  runState: AgentUiRunState | null
+  busy: boolean
+  error: string | null
+  composerValue: string
+  composerDisabled?: boolean
+  composerLeading?: React.ReactNode
+  onComposerChange: (value: string) => void
+  onSend: () => void
+  onStop?: () => void
+  onApproveTools: () => void
+  onRejectTools: () => void
+  onApproveOne?: (toolCallId: string) => void
+  onRejectOne?: (toolCallId: string) => void
+  onApproveAlwaysForSession?: (
+    qualifiedName: string,
+    toolCallId: string,
+  ) => void
+  storageHint?: string | null
+  usage?: AgentUiRunUsage | null
+}

package/src/components/agents/formatToolCallArguments.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { formatToolCallArguments } from './formatToolCallArguments.js'
+
+describe('formatToolCallArguments', () => {
+  it('returns compact JSON', () => {
+    expect(formatToolCallArguments({ text: 'hi', n: 1 })).toBe(
+      '{"text":"hi","n":1}',
+    )
+  })
+
+  it('truncates long payloads', () => {
+    const long = formatToolCallArguments({ body: 'x'.repeat(300) }, 40)
+    expect(long.endsWith('…')).toBe(true)
+    expect(long.length).toBeLessThanOrEqual(40)
+  })
+})

package/src/components/agents/formatToolCallArguments.ts

@@ -0,0 +1,9 @@
+/** Compact tool args for approval UI — one line when possible. */
+export function formatToolCallArguments(
+  args: Record<string, unknown>,
+  maxLength = 240,
+): string {
+  const compact = JSON.stringify(args)
+  if (compact.length <= maxLength) return compact
+  return `${compact.slice(0, maxLength - 1)}…`
+}

package/src/components/agents/index.ts

@@ -0,0 +1,40 @@
+export { AgentDrawerPanel } from './AgentDrawerPanel.js'
+export { AgentMessageList, formatAssistantLabel } from './AgentMessageList.js'
+export { AgentMessageBubble } from './AgentMessageBubble.js'
+export { AgentToolPendingList } from './AgentToolPendingList.js'
+export { AgentComposer } from './AgentComposer.js'
+export {
+  AgentContextUsageBar,
+  formatAgentTokenCount,
+} from './AgentContextUsageBar.js'
+export {
+  AgentModelMenu,
+  buildAgentModelMenuOptions,
+  AGENT_AUTO_MODEL_ID,
+  AGENT_AUTO_MODEL_LABEL,
+  isAgentAutoModelId,
+  type AgentModelMenuProps,
+} from './AgentModelMenu.js'
+export {
+  ChatBox,
+  ChatModelMenu,
+  ChatThread,
+  ChatThreadEmpty,
+  ChatUserBubble,
+  ChatAssistantMessage,
+  ChatMarkdown,
+  ChatThinkingIndicator,
+  ChatStatusRow,
+  ChatToolRow,
+} from '../common/chat/index.js'
+export {
+  AgentLivePhase,
+  AgentUiRunState,
+  type AgentDrawerPanelProps,
+  type AgentLiveActiveTool,
+  type AgentLiveTurn,
+  type AgentModelOption,
+  type AgentUiMessage,
+  type AgentUiRunUsage,
+  type AgentUiToolCall,
+} from './agentTypes.js'

package/src/components/assets/AssetLibraryDialog.tsx

@@ -0,0 +1,5 @@
+/** @deprecated Import from `@purescience/platform-ui/components/assets/asset-library` instead. */
+export {
+  AssetLibraryDialog,
+  type AssetLibraryDialogProps,
+} from './asset-library/index.js'

package/src/components/assets/asset-library/AssetLibraryDialog.tsx

@@ -0,0 +1,43 @@
+import { Modal } from '../../common/overlays/Modal.js'
+import { AssetLibraryWorkspace } from './AssetLibraryWorkspace.js'
+import type { AssetLibraryDialogProps } from './types.js'
+
+export function AssetLibraryDialog({
+  open,
+  onClose,
+  collectionPath,
+  documentAdapter,
+  documentFiles,
+  currentDocumentFile,
+  currentDocumentTitle,
+  collectionLabel = 'collection',
+  insertTargetLabel = 'document',
+  inlineAssetScope = 'all',
+  uploadRelativeDir,
+  onDocumentSourceSaved,
+}: AssetLibraryDialogProps): React.ReactElement | null {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Assets"
+      size="xl"
+      chrome
+      bodyClassName="asset-library-modal-body"
+    >
+      <AssetLibraryWorkspace
+        open={open}
+        collectionPath={collectionPath}
+        documentAdapter={documentAdapter}
+        documentFiles={documentFiles}
+        currentDocumentFile={currentDocumentFile}
+        currentDocumentTitle={currentDocumentTitle}
+        collectionLabel={collectionLabel}
+        insertTargetLabel={insertTargetLabel}
+        inlineAssetScope={inlineAssetScope}
+        uploadRelativeDir={uploadRelativeDir}
+        onDocumentSourceSaved={onDocumentSourceSaved}
+      />
+    </Modal>
+  )
+}

package/src/components/assets/asset-library/AssetLibraryWorkspace.tsx

@@ -0,0 +1,54 @@
+import { AssetLibraryDetailPane } from './detail/AssetLibraryDetailPane.js'
+import { useAssetLibraryDialog } from './hooks/useAssetLibraryDialog.js'
+import { StyledAssetLibraryLayout } from './layout/assetLibraryLayout.js'
+import { AssetLibrarySidebar } from './sidebar/AssetLibrarySidebar.js'
+import type { AssetLibraryWorkspaceProps } from './types.js'
+
+export function AssetLibraryWorkspace({
+  open,
+  collectionPath,
+  documentAdapter,
+  documentFiles,
+  currentDocumentFile,
+  currentDocumentTitle,
+  collectionLabel = 'collection',
+  insertTargetLabel = 'document',
+  inlineAssetScope = 'all',
+  uploadRelativeDir,
+  onDocumentSourceSaved,
+  fill = false,
+}: AssetLibraryWorkspaceProps): React.ReactElement {
+  const { list, metadata, actions, usage, versions } = useAssetLibraryDialog({
+    open,
+    collectionPath,
+    documentFiles,
+    currentDocumentFile,
+    inlineAssetScope,
+    collectionLabel,
+    insertTargetLabel,
+    uploadRelativeDir,
+    documentAdapter,
+    onDocumentSourceSaved,
+  })
+
+  return (
+    <StyledAssetLibraryLayout $fill={fill}>
+      <AssetLibrarySidebar
+        collectionPath={collectionPath}
+        collectionLabel={collectionLabel}
+        insertTargetLabel={insertTargetLabel}
+        currentDocumentFile={currentDocumentFile}
+        currentDocumentTitle={currentDocumentTitle}
+        list={list}
+        actions={actions}
+      />
+      <AssetLibraryDetailPane
+        selectedAsset={list.selectedAsset}
+        metadata={metadata}
+        actions={actions}
+        usage={usage}
+        versions={versions}
+      />
+    </StyledAssetLibraryLayout>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryDetailActions.tsx

@@ -0,0 +1,68 @@
+import { styled } from 'styled-components'
+import { Button } from '../../../common/buttons/Button.js'
+import type { AssetLibraryActionsModel } from '../types.js'
+
+export interface AssetLibraryDetailActionsProps {
+  actions: AssetLibraryActionsModel
+}
+
+const StyledActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgb(from var(--platform-colors-border) r g b / 0.7);
+
+  button {
+    min-height: 28px;
+    font-size: var(--platform-typography-font-size-xs, 12px);
+  }
+`
+
+export function AssetLibraryDetailActions({
+  actions,
+}: AssetLibraryDetailActionsProps): React.ReactElement {
+  return (
+    <StyledActions>
+      <Button
+        type="button"
+        variant="subtle"
+        size="sm"
+        disabled={!actions.canInsertSelected}
+        loading={actions.busy === 'inserting'}
+        onClick={() => void actions.insertSelected()}
+      >
+        Insert
+      </Button>
+      <Button
+        type="button"
+        variant="subtle"
+        size="sm"
+        loading={actions.busy === 'saving'}
+        disabled={!actions.canSaveMetadata}
+        onClick={() => void actions.saveMetadata()}
+      >
+        Save details
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        disabled={!actions.canRevealSelected}
+        onClick={() => void actions.revealSelected()}
+      >
+        Reveal
+      </Button>
+      <Button
+        type="button"
+        variant="danger"
+        size="sm"
+        loading={actions.busy === 'deleting'}
+        disabled={!actions.canDeleteSelected}
+        onClick={() => void actions.deleteSelected()}
+      >
+        Delete
+      </Button>
+    </StyledActions>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryDetailHeader.tsx

@@ -0,0 +1,56 @@
+import { styled } from 'styled-components'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { Text } from '../../../common/typography/Text.js'
+import {
+  formatAssetBytes,
+  formatAssetTimeAgo,
+  kindLabel,
+} from '../utils/assetLibraryUtils.js'
+
+export interface AssetLibraryDetailHeaderProps {
+  asset: PlatformAssetSummary
+}
+
+const StyledDetailHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-bottom: 14px;
+`
+
+const StyledAssetTitle = styled.h2`
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.25;
+`
+
+const StyledPath = styled(Text)`
+  overflow-wrap: anywhere;
+  font-family: var(--platform-typography-font-family-mono, ui-monospace, monospace);
+  font-size: var(--platform-typography-font-size-xs, 12px);
+  line-height: 1.35;
+`
+
+const StyledMeta = styled(Text)`
+  font-size: var(--platform-typography-font-size-xs, 12px);
+`
+
+export function AssetLibraryDetailHeader({
+  asset,
+}: AssetLibraryDetailHeaderProps): React.ReactElement {
+  return (
+    <StyledDetailHeader>
+      <StyledAssetTitle>{asset.label}</StyledAssetTitle>
+      <StyledMeta as="span" size="sm" tone="secondary">
+        {kindLabel(asset.kind)} · {formatAssetBytes(asset.byteLength)} ·{' '}
+        {formatAssetTimeAgo(asset.modifiedAt)}
+      </StyledMeta>
+      <StyledPath as="span" size="sm" tone="secondary">
+        {asset.relativePath}
+      </StyledPath>
+    </StyledDetailHeader>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryDetailPane.tsx

@@ -0,0 +1,90 @@
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { styled } from 'styled-components'
+import { Text } from '../../../common/typography/Text.js'
+import {
+  StyledAssetLibraryDetail,
+  StyledAssetLibraryDetailEmpty,
+  StyledAssetLibraryDetailMain,
+  StyledAssetLibraryDetailPanels,
+} from '../layout/assetLibraryLayout.js'
+import type {
+  AssetLibraryActionsModel,
+  AssetLibraryMetadataModel,
+  AssetLibraryUsageModel,
+  AssetLibraryVersionsModel,
+} from '../types.js'
+import { AssetLibraryDetailActions } from './AssetLibraryDetailActions.js'
+import { AssetLibraryDetailHeader } from './AssetLibraryDetailHeader.js'
+import { AssetLibraryDetailPreview } from './AssetLibraryDetailPreview.js'
+import { AssetLibraryInlineSourceField } from './AssetLibraryInlineSourceField.js'
+import { AssetLibraryMetadataFields } from './AssetLibraryMetadataFields.js'
+import { AssetLibraryUsagePanel } from './AssetLibraryUsagePanel.js'
+import { AssetLibraryVersionsPanel } from './AssetLibraryVersionsPanel.js'
+
+const StyledDetailRail = styled.aside`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: 18px;
+  border-left: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
+  background: rgb(from var(--platform-colors-surface) r g b / 0.82);
+
+  @media (max-width: 760px) {
+    border-left: 0;
+    border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
+  }
+`
+
+export interface AssetLibraryDetailPaneProps {
+  selectedAsset: PlatformAssetSummary | null
+  metadata: AssetLibraryMetadataModel
+  actions: AssetLibraryActionsModel
+  usage: AssetLibraryUsageModel
+  versions: AssetLibraryVersionsModel
+}
+
+export function AssetLibraryDetailPane({
+  selectedAsset,
+  metadata,
+  actions,
+  usage,
+  versions,
+}: AssetLibraryDetailPaneProps): React.ReactElement {
+  return (
+    <StyledAssetLibraryDetail>
+      {selectedAsset ? (
+        <>
+          <StyledAssetLibraryDetailMain>
+            <AssetLibraryDetailPreview
+              asset={selectedAsset}
+              metadata={metadata}
+            />
+          </StyledAssetLibraryDetailMain>
+          <StyledDetailRail>
+            <AssetLibraryDetailHeader asset={selectedAsset} />
+            <AssetLibraryDetailActions actions={actions} />
+            <AssetLibraryMetadataFields metadata={metadata} />
+            <AssetLibraryInlineSourceField metadata={metadata} />
+            <StyledAssetLibraryDetailPanels $columns={versions.visible ? 2 : 1}>
+              <AssetLibraryUsagePanel usage={usage} />
+              {versions.visible ? (
+                <AssetLibraryVersionsPanel
+                  versions={versions}
+                  actions={actions}
+                />
+              ) : null}
+            </StyledAssetLibraryDetailPanels>
+          </StyledDetailRail>
+        </>
+      ) : (
+        <StyledAssetLibraryDetailEmpty>
+          <Text as="p" size="sm" tone="secondary">
+            Select an asset to preview.
+          </Text>
+        </StyledAssetLibraryDetailEmpty>
+      )}
+    </StyledAssetLibraryDetail>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryDetailPreview.tsx

@@ -0,0 +1,67 @@
+import { styled } from 'styled-components'
+import { usePlatformFileBinaryDataUrl } from '../../../../bridge/react/usePlatformFileBinaryDataUrl.js'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { FileImagePreview } from '../../../common/preview/FileImagePreview.js'
+import { isFileThumbnailAsset } from '../utils/assetLibraryUtils.js'
+import { AssetLibraryInlinePreview } from './AssetLibraryInlinePreview.js'
+import type { AssetLibraryMetadataModel } from '../types.js'
+
+export interface AssetLibraryDetailPreviewProps {
+  asset: PlatformAssetSummary
+  metadata: AssetLibraryMetadataModel
+}
+
+const StyledDetailBody = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: clamp(18px, 2vw, 32px);
+  background:
+    linear-gradient(
+      180deg,
+      rgb(from var(--platform-colors-surface) r g b / 0.48),
+      var(--platform-colors-app-viewport, var(--platform-colors-bg))
+    );
+
+  > * {
+    width: min(100%, 860px);
+    max-height: min(680px, 72vh);
+    border-radius: 8px;
+    box-shadow: 0 12px 34px rgb(15 23 42 / 0.08);
+  }
+`
+
+export function AssetLibraryDetailPreview({
+  asset,
+  metadata,
+}: AssetLibraryDetailPreviewProps): React.ReactElement {
+  const preview = usePlatformFileBinaryDataUrl(
+    asset.absolutePath,
+    isFileThumbnailAsset(asset),
+  )
+
+  if (metadata.showSourceEditor) {
+    return (
+      <StyledDetailBody>
+        <AssetLibraryInlinePreview metadata={metadata} />
+      </StyledDetailBody>
+    )
+  }
+
+  return (
+    <StyledDetailBody>
+      <FileImagePreview
+        src={preview.src}
+        alt={asset.label}
+        loading={preview.loading}
+        error={preview.error}
+        fillViewport
+      />
+    </StyledDetailBody>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryInlinePreview.tsx

@@ -0,0 +1,87 @@
+import 'katex/dist/katex.min.css'
+import { styled } from 'styled-components'
+import { Text } from '../../../common/typography/Text.js'
+import { StyledAssetLibraryDetailEmpty } from '../layout/assetLibraryLayout.js'
+import { useInlineAssetPreview } from '../hooks/useInlineAssetPreview.js'
+import type { AssetLibraryMetadataModel } from '../types.js'
+
+export interface AssetLibraryInlinePreviewProps {
+  metadata: AssetLibraryMetadataModel
+}
+
+const StyledPreviewFrame = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--platform-spacing-md);
+  background: var(--platform-colors-background);
+  border-top: 1px solid var(--platform-colors-border);
+`
+
+const StyledPreviewSurface = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: var(--platform-spacing-md);
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-surface);
+  overflow: auto;
+
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--platform-typography-font-size-sm);
+  }
+
+  td,
+  th {
+    border: 1px solid var(--platform-colors-border);
+    padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+  }
+
+  .katex-display {
+    margin: 0;
+  }
+`
+
+export function AssetLibraryInlinePreview({
+  metadata,
+}: AssetLibraryInlinePreviewProps): React.ReactElement {
+  const { preview, loading } = useInlineAssetPreview(
+    metadata.inlineKind,
+    metadata.sourceDraft,
+  )
+
+  return (
+    <StyledPreviewFrame>
+      {loading ? (
+        <Text as="p" size="sm" tone="secondary">
+          Rendering preview…
+        </Text>
+      ) : preview?.error ? (
+        <Text as="p" size="sm" tone="danger">
+          {preview.error}
+        </Text>
+      ) : preview?.html ? (
+        <StyledPreviewSurface
+          dangerouslySetInnerHTML={{ __html: preview.html }}
+        />
+      ) : (
+        <StyledAssetLibraryDetailEmpty>
+          <Text as="p" size="sm" tone="secondary">
+            Preview will appear here.
+          </Text>
+        </StyledAssetLibraryDetailEmpty>
+      )}
+    </StyledPreviewFrame>
+  )
+}

package/src/components/assets/asset-library/detail/AssetLibraryInlineSourceField.tsx

@@ -0,0 +1,29 @@
+import { FormField } from '../../../common/inputs/FormField.js'
+import { TextAreaField } from '../../../common/inputs/TextAreaField.js'
+import { defaultInlineSourcePlaceholder } from '../helpers.js'
+import { StyledAssetLibraryFieldShell } from '../shared/fieldStyles.js'
+import type { AssetLibraryMetadataModel } from '../types.js'
+
+export interface AssetLibraryInlineSourceFieldProps {
+  metadata: AssetLibraryMetadataModel
+}
+
+export function AssetLibraryInlineSourceField({
+  metadata,
+}: AssetLibraryInlineSourceFieldProps): React.ReactElement | null {
+  if (!metadata.showSourceEditor || !metadata.inlineKind) return null
+
+  return (
+    <StyledAssetLibraryFieldShell>
+      <FormField label="Source">
+        <TextAreaField
+          value={metadata.sourceDraft}
+          disabled={!metadata.canEdit}
+          placeholder={defaultInlineSourcePlaceholder(metadata.inlineKind)}
+          onChange={event => metadata.setSourceDraft(event.target.value)}
+          spellCheck={metadata.inlineKind !== 'math'}
+        />
+      </FormField>
+    </StyledAssetLibraryFieldShell>
+  )
+}