@proteos/ui 0.51.0 → 0.51.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.51.0",
+  "version": "0.51.1",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -56,7 +56,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
-    "@proteos/sdk": "0.51.0"
+    "@proteos/sdk": "0.51.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

package/src/components/conversation-brief-card/conversation-brief-preview.tsx

@@ -1,6 +1,7 @@
 import type { Contact, ConversationBrief } from '@proteos/sdk'
-import { Phone } from 'lucide-react'
+import { Pencil, Phone } from 'lucide-react'
 import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
 
 import { cn } from '../../lib/cn'
 import { Button } from '../button'
@@ -15,6 +16,13 @@ import { contactPhoneNumbers } from './types'
    it is a read-only preview (a custom component's own modal, the hub's call
    panel). The host may slot extra controls (a caller-id picker) via
    `controls`.
+
+   The guidance text is markdown-canonical but the lib carries no markdown
+   renderer: hosts inject one via `renderContent` (the web app passes its
+   MarkdownContent); without it the text shows as plain pre-wrapped lines.
+   Editing follows the same seam — `onEdit` reveals a pencil on hover over
+   the guidance box, and `editor` lets the host swap the box for its own
+   editing surface while a draft is open.
    ========================================================================= */
 
 export interface ConversationBriefPreviewProps {
@@ -44,6 +52,12 @@ export interface ConversationBriefPreviewProps {
   className?: string
   /** Visual override for the guidance text box (e.g. a max height). */
   contentClassName?: string
+  /** Renders the guidance text (markdown). Absent ⇒ plain pre-wrapped text. */
+  renderContent?: (content: string) => ReactNode
+  /** Shows an Edit button on hover over the guidance box. */
+  onEdit?: () => void
+  /** Replaces the guidance box wholesale — the host's editing surface. */
+  editor?: ReactNode
 }
 
 export function ConversationBriefPreview({
@@ -58,6 +72,9 @@ export function ConversationBriefPreview({
   callLabel = 'Call',
   className,
   contentClassName,
+  renderContent,
+  onEdit,
+  editor,
 }: ConversationBriefPreviewProps) {
   const [pickedContactId, setPickedContactId] = useState('')
   const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null
@@ -99,15 +116,35 @@ export function ConversationBriefPreview({
             .join(' · ')}
         </p>
       </div>
-      <div
-        className={cn(
-          'whitespace-pre-wrap rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5',
-          'text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]',
-          contentClassName,
-        )}
-      >
-        {brief.content}
-      </div>
+      {editor ?? (
+        <div className="group/brief-content relative">
+          <div
+            className={cn(
+              'rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5',
+              'text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]',
+              renderContent ? null : 'whitespace-pre-wrap',
+              contentClassName,
+            )}
+          >
+            {renderContent ? renderContent(brief.content) : brief.content}
+          </div>
+          {onEdit ? (
+            <AriaButton
+              aria-label="Edit brief"
+              onPress={onEdit}
+              className={cn(
+                'absolute right-1.5 top-1.5 inline-flex size-7 cursor-pointer items-center justify-center',
+                'rounded-md bg-surface/80 text-ink-3 outline-none transition-opacity',
+                'opacity-0 group-hover/brief-content:opacity-100 focus-visible:opacity-100',
+                'data-[hovered]:bg-surface-3 data-[hovered]:text-ink',
+                'focus-visible:shadow-[var(--shadow-focus)]',
+              )}
+            >
+              <Pencil className="size-3.5" aria-hidden />
+            </AriaButton>
+          ) : null}
+        </div>
+      )}
       {onCall ? (
         <div className="flex flex-col gap-2 border-t border-rule-2 pt-3">
           {contacts.length > 1 ? (

package/src/components/conversation-brief-card/conversation-brief-review.test.tsx

@@ -212,3 +212,39 @@ describe('ConversationBriefPreview', () => {
     expect(screen.getByText(/no phone number/)).toBeInTheDocument()
   })
 })
+
+describe('ConversationBriefPreview — content seam', () => {
+  it('renders the guidance through renderContent when provided', () => {
+    render(
+      <ConversationBriefPreview
+        brief={brief({ content: '**bold** guidance' })}
+        contacts={[contact()]}
+        renderContent={(content) => <em data-testid="rendered">{content.toUpperCase()}</em>}
+      />,
+    )
+    expect(screen.getByTestId('rendered')).toHaveTextContent('**BOLD** GUIDANCE')
+  })
+
+  it('offers an Edit button only when onEdit is given', async () => {
+    const onEdit = vi.fn()
+    const { rerender } = render(<ConversationBriefPreview brief={brief()} contacts={[contact()]} />)
+    expect(screen.queryByRole('button', { name: 'Edit brief' })).toBeNull()
+    rerender(<ConversationBriefPreview brief={brief()} contacts={[contact()]} onEdit={onEdit} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Edit brief' }))
+    expect(onEdit).toHaveBeenCalledTimes(1)
+  })
+
+  it('swaps the guidance box for the host editor', () => {
+    render(
+      <ConversationBriefPreview
+        brief={brief()}
+        contacts={[contact()]}
+        onEdit={() => {}}
+        editor={<textarea aria-label="Draft" defaultValue="editing" />}
+      />,
+    )
+    expect(screen.getByRole('textbox', { name: 'Draft' })).toBeInTheDocument()
+    expect(screen.queryByText('Ask about the renewal.', { exact: false })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Edit brief' })).toBeNull()
+  })
+})

package/src/components/conversation-brief-card/conversation-brief-review.tsx

@@ -1,5 +1,5 @@
 import type { Contact, ConversationBrief } from '@proteos/sdk'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 
 import { ModalBody, ModalContent, ModalHeader, ModalTitle } from '../modal'
 import { ConversationBriefCard } from './conversation-brief-card'
@@ -53,6 +53,8 @@ export interface ConversationBriefReviewProps {
   overlayClassName?: string
   openLabel?: string
   className?: string
+  /** Built-in modal only: markdown renderer for the guidance text. */
+  renderContent?: (content: string) => ReactNode
 }
 
 export function ConversationBriefReview({
@@ -69,6 +71,7 @@ export function ConversationBriefReview({
   overlayClassName,
   openLabel,
   className,
+  renderContent,
 }: ConversationBriefReviewProps) {
   const [brief, setBrief] = useState<ConversationBrief | null>(null)
   const [contacts, setContacts] = useState<Contact[]>([])
@@ -149,6 +152,7 @@ export function ConversationBriefReview({
               contentClassName="max-h-[50dvh]"
               isCallDisabled={isCallDisabled}
               {...(callDisabledReason !== undefined ? { callDisabledReason } : {})}
+              {...(renderContent !== undefined ? { renderContent } : {})}
               {...(onCall && isDialableConversationBrief(brief)
                 ? {
                     onCall: (contact: Contact, phoneNumber: string) => {