@proteos/ui 0.50.1 → 0.51.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.50.1",
+  "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.50.1"
+    "@proteos/sdk": "0.51.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
@@ -78,8 +78,8 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vitest": "^3.2.4",
-    "@proteos/biome-config": "0.0.0",
-    "@proteos/tsconfig": "0.0.0"
+    "@proteos/tsconfig": "0.0.0",
+    "@proteos/biome-config": "0.0.0"
   },
   "scripts": {
     "lint": "biome check .",

package/src/components/badge/badge.stories.tsx

@@ -15,6 +15,8 @@ const meta: Meta<typeof Badge> = {
       control: { type: 'inline-radio' },
       options: ['default', 'neutral', 'active', 'success', 'warning', 'danger', 'custom'],
     },
+    shape: { control: { type: 'inline-radio' }, options: ['pill', 'rounded'] },
+    hasDot: { control: 'boolean' },
   },
 }
 
@@ -63,6 +65,29 @@ export const WithColorAndIcon: Story = {
   ),
 }
 
+/** The enum-value chip: `rounded` shape, no dot. A value with an icon shows
+ *  it; one without reads as plain text on its tint. This is exactly what
+ *  the page-layout enum controls, table cells and filter chips render. */
+export const EnumChip: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge shape="rounded" hasDot={false} variant="active">
+        to do
+      </Badge>
+      <Badge shape="rounded" hasDot={false} color="#5b8def">
+        in progress
+      </Badge>
+      <Badge shape="rounded" hasDot={false} icon="CircleCheck" color="#3f9d6b">
+        done
+      </Badge>
+      <Badge shape="rounded" hasDot={false} icon="Flame" color="#d94f4f">
+        urgent
+      </Badge>
+    </div>
+  ),
+}
+
 export const InContext: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (

package/src/components/badge/badge.test.tsx

@@ -53,6 +53,28 @@ describe('Badge', () => {
     expect(badge.className).toContain('before:hidden')
   })
 
+  it('defaults to the pill shape with a leading dot', () => {
+    render(<Badge>quoted</Badge>)
+    const badge = screen.getByText('quoted')
+    expect(badge.className).toContain('rounded-pill')
+    expect(badge.className).toContain('before:content')
+  })
+
+  it('renders the rounded shape without a dot when asked', () => {
+    render(
+      <Badge shape="rounded" hasDot={false}>
+        to do
+      </Badge>,
+    )
+    const badge = screen.getByText('to do')
+    expect(badge.className).toContain('rounded-chip')
+    expect(badge.className).not.toContain('rounded-pill')
+    expect(badge.className).not.toContain('before:content')
+    // Register classes still emit `before:*`; the pseudo must be hidden so it
+    // does not occupy a flex gap in front of the text.
+    expect(badge.className).toContain('before:hidden')
+  })
+
   it('keeps the dot when the icon name is unknown', () => {
     render(<Badge icon="not-an-icon">done</Badge>)
     const badge = screen.getByText('done')

package/src/components/badge/badge.tsx

@@ -5,24 +5,28 @@ import { cn } from '../../lib/cn'
 import { resolveLucideIcon } from '../icon-picker/icon-picker'
 
 /* =========================================================================
-   Badge — mono, pill-shaped status chip with a leading dot.
-   Matches the Proteos spec's six registers: default, neutral, active (indigo),
-   success, warning, danger. Paper-compatible fills — never pure-color.
+   Badge — mono status chip. Matches the Proteos spec's six registers:
+   default, neutral, active (indigo), success, warning, danger.
+   Paper-compatible fills — never pure-color.
+
+   Chrome knobs, orthogonal to the register:
+   - `shape` — `pill` (default, status badges) or `rounded` (9px corners,
+     the enum-value chip on record pages, tables, pickers and filters).
+   - `hasDot` — the leading dot. Default on; enum chips turn it off so a
+     value without an icon reads as plain text on tint.
 
    Two data-driven escape hatches for schema-defined values (enum options,
    labels): `color` — a #rrggbb tint that drives the dot, border and fill
    via color-mix while the text stays ink so any user-picked color keeps
    its contrast in light/dark/paper; and `icon` — a Lucide name that
-   replaces the dot.
+   replaces the dot (whatever `hasDot` says).
    ========================================================================= */
 
 export const badgeStyles = tv({
   base: [
     'inline-flex items-center gap-1.5',
     'font-mono text-[11.5px] tracking-[-0.005em]',
-    'px-2.5 py-0.5 rounded-pill border',
-    // Leading dot
-    'before:content-[""] before:block before:size-1.5 before:rounded-full',
+    'px-2.5 py-0.5 border',
   ],
   variants: {
     variant: {
@@ -57,8 +61,17 @@ export const badgeStyles = tv({
         'bg-[color-mix(in_oklab,var(--badge-color)_12%,var(--color-surface))]',
       ],
     },
+    shape: {
+      pill: 'rounded-pill',
+      rounded: 'rounded-chip',
+    },
+    // Leading dot — its color comes from the register's `before:bg-*`.
+    hasDot: {
+      true: 'before:content-[""] before:block before:size-1.5 before:rounded-full',
+      false: '',
+    },
   },
-  defaultVariants: { variant: 'default' },
+  defaultVariants: { variant: 'default', shape: 'pill', hasDot: true },
 })
 
 export type BadgeVariants = VariantProps<typeof badgeStyles>
@@ -81,15 +94,33 @@ const ICON_TONE: Record<NonNullable<BadgeVariants['variant']>, string> = {
   custom: 'text-[var(--badge-color)]',
 }
 
-export function Badge({ variant, color, icon, className, style, children, ...props }: BadgeProps) {
+export function Badge({
+  variant,
+  shape,
+  hasDot,
+  color,
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}: BadgeProps) {
   const Icon = icon ? resolveLucideIcon(icon) : null
   const register: NonNullable<BadgeVariants['variant']> = color ? 'custom' : (variant ?? 'default')
   const mergedStyle = color ? ({ ...style, '--badge-color': color } as CSSProperties) : style
+  // The register's `before:bg-*` classes alone materialize an empty ::before
+  // (Tailwind injects `content` for every `before:` utility), which as a flex
+  // child still eats one `gap`. Hide it whenever no dot should show.
+  const showDot = hasDot !== false && !Icon
   return (
     <span
       {...props}
       style={mergedStyle}
-      className={cn(badgeStyles({ variant: register }), Icon ? 'before:hidden' : null, className)}
+      className={cn(
+        badgeStyles({ variant: register, shape, hasDot }),
+        showDot ? null : 'before:hidden',
+        className,
+      )}
     >
       {Icon ? <Icon aria-hidden className={cn('size-3 shrink-0', ICON_TONE[register])} /> : null}
       {children}

package/src/components/badge-multi-select/badge-multi-select.tsx

@@ -29,6 +29,10 @@ export type BadgeMultiSelectOption<T extends Key = Key> = {
   label: string
   /** Badge color register. Defaults to `default`. */
   variant?: BadgeVariants['variant']
+  /** Badge corner shape. Defaults to `pill`; enum chips use `rounded`. */
+  shape?: BadgeVariants['shape']
+  /** Leading dot. Defaults to on; enum chips turn it off. */
+  hasDot?: boolean
   /** `#rrggbb` tint — overrides `variant` (see Badge). */
   color?: string
   /** Lucide icon name; replaces the badge dot. */
@@ -36,14 +40,20 @@ export type BadgeMultiSelectOption<T extends Key = Key> = {
   isDisabled?: boolean
 }
 
-/** The Badge chrome props an option carries — spread onto every Badge it renders as. */
-function badgeChrome(option: {
+type BadgeChrome = {
   variant?: BadgeVariants['variant'] | undefined
+  shape?: BadgeVariants['shape'] | undefined
+  hasDot?: boolean | undefined
   color?: string | undefined
   icon?: string | undefined
-}) {
+}
+
+/** The Badge chrome props an option carries — spread onto every Badge it renders as. */
+function badgeChrome(option: BadgeChrome) {
   return {
     ...(option.variant ? { variant: option.variant } : {}),
+    ...(option.shape ? { shape: option.shape } : {}),
+    ...(option.hasDot !== undefined ? { hasDot: option.hasDot } : {}),
     ...(option.color ? { color: option.color } : {}),
     ...(option.icon ? { icon: option.icon } : {}),
   }
@@ -243,21 +253,16 @@ export function BadgeMultiSelect<T extends Key>({
 
 function RemovableBadge({
   children,
-  variant,
-  color,
-  icon,
   onRemove,
   isDisabled,
-}: {
+  ...chrome
+}: BadgeChrome & {
   children: ReactNode
-  variant?: BadgeVariants['variant']
-  color?: string
-  icon?: string
   onRemove: () => void
   isDisabled: boolean
 }) {
   return (
-    <Badge {...badgeChrome({ variant, color, icon })}>
+    <Badge {...badgeChrome(chrome)}>
       <span>{children}</span>
       <button
         type="button"

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

@@ -0,0 +1,81 @@
+import type { Contact, ConversationBrief } from '@proteos/sdk'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ConversationBriefCard } from './conversation-brief-card'
+import { ConversationBriefPreview } from './conversation-brief-preview'
+import { ConversationBriefReview } from './conversation-brief-review'
+import type { ConversationBriefClient } from './types'
+
+const meta: Meta<typeof ConversationBriefCard> = {
+  title: 'Components/ConversationBriefCard',
+  component: ConversationBriefCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+export default meta
+type Story = StoryObj<typeof ConversationBriefCard>
+
+export const Prepared: Story = {
+  args: {
+    title: 'Northline renewal',
+    summary: 'Dana Ruiz · phone · renewal · Confirm the Q4 volumes before pricing.',
+  },
+}
+
+export const CallHeld: Story = {
+  args: { ...Prepared.args, outcome: 'used' } as Story['args'],
+}
+
+export const Discarded: Story = {
+  args: { ...Prepared.args, outcome: 'discarded' } as Story['args'],
+}
+
+const sampleBrief: ConversationBrief = {
+  id: 'brief-1',
+  org_id: 'org-1',
+  contact_ids: ['contact-1'],
+  subject: 'Northline renewal',
+  channel: 'phone',
+  type_key: 'renewal',
+  status: 'prepared',
+  content:
+    'Objective: renew the Northline contract for 12 months.\n\n- Confirm Q4 volumes before quoting.\n- They asked about the API rate limits last time — have the new tiers ready.\n- Avoid committing to the March migration date.',
+  created_at: '2026-09-09T10:00:00Z',
+  created_by: { type: 'agent', id: 'agent-1' },
+  updated_at: '2026-09-09T10:00:00Z',
+  updated_by: { type: 'agent', id: 'agent-1' },
+}
+
+const sampleContact = {
+  id: 'contact-1',
+  name: 'Dana Ruiz',
+  addresses: [
+    { id: 'a1', kind: 'phone', value: '+4930123456' },
+    { id: 'a2', kind: 'phone', value: '+4917612345' },
+  ],
+} as unknown as Contact
+
+const client: ConversationBriefClient = {
+  getConversationBrief: async () => sampleBrief,
+  getContact: async () => sampleContact,
+}
+
+/** The connected card with the built-in preview modal and a host dial. */
+export const Connected: StoryObj = {
+  render: () => (
+    <ConversationBriefReview
+      conversationBriefId="brief-1"
+      client={client}
+      onCall={(brief, contact, phoneNumber) =>
+        window.alert(`dial ${contact.name} at ${phoneNumber} for ${brief.id}`)
+      }
+    />
+  ),
+}
+
+/** The preview on its own — as the softphone / hub call panel would embed it. */
+export const Preview: StoryObj = {
+  render: () => (
+    <ConversationBriefPreview brief={sampleBrief} contacts={[sampleContact]} onCall={() => {}} />
+  ),
+}

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

@@ -0,0 +1,102 @@
+import { Phone } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import type { ConversationBriefOutcome } from './types'
+
+/* =========================================================================
+   ConversationBriefCard — the compact entry point to a prepared call: phone glyph,
+   eyebrow, the contact's name, the brief's type / opening line, and one
+   action ("Open Brief"). Pure chrome — it neither fetches nor dials, so it can
+   sit in a chat flow, a record page, a task list or a custom component alike.
+   ConversationBriefReview is the connected wrapper; reach for this one only when the
+   host already holds the brief.
+
+   Once the brief is used or discarded the action is replaced by a status
+   label rather than removed — the row keeps its shape and its record.
+   ========================================================================= */
+
+export const conversationBriefCardStyles = tv({
+  slots: {
+    root: [
+      'flex items-center gap-2.5 rounded-md border border-accent/40 px-3 py-2',
+      'bg-[color-mix(in_oklab,var(--color-accent)_6%,var(--color-surface))]',
+    ],
+    icon: [
+      'grid size-8 shrink-0 place-items-center rounded-full text-accent',
+      'bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]',
+    ],
+    body: 'min-w-0 flex-1',
+    eyebrow: 'font-mono text-[10px] uppercase tracking-[0.08em] text-accent',
+    title: 'truncate text-[13px] font-medium text-ink',
+    summary: 'truncate text-[12px] text-ink-3',
+    action: [
+      'shrink-0 cursor-pointer rounded-sm border border-accent/50 px-2.5 py-1',
+      'font-mono text-[11px] text-accent outline-none',
+      'hover:bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]',
+      'focus-visible:shadow-[var(--shadow-focus)]',
+      'disabled:cursor-default disabled:opacity-50',
+    ],
+    outcome: 'shrink-0 font-mono text-[11px] text-ink-3',
+  },
+})
+
+const styles = conversationBriefCardStyles()
+
+export const CONVERSATION_BRIEF_OUTCOME_LABEL: Record<ConversationBriefOutcome, string> = {
+  used: 'Call held',
+  discarded: 'Discarded',
+}
+
+export interface ConversationBriefCardProps {
+  /** Headline: the brief's subject, else the contact's name. */
+  title: string
+  /** Second line: the contact, channel, type and/or the opening line. */
+  summary?: string
+  /** Default 'Conversation brief — prepared'. */
+  eyebrow?: ReactNode
+  /** Default 'Open Brief'. */
+  openLabel?: string
+  /** Terminal outcome. Set ⇒ the action is replaced by its status label. */
+  outcome?: ConversationBriefOutcome | null
+  onOpen?: () => void
+  isOpenDisabled?: boolean
+  className?: string
+}
+
+export function ConversationBriefCard({
+  title,
+  summary,
+  eyebrow = 'Conversation brief — prepared',
+  openLabel = 'Open Brief',
+  outcome,
+  onOpen,
+  isOpenDisabled = false,
+  className,
+}: ConversationBriefCardProps) {
+  return (
+    <div className={cn(styles.root(), className)}>
+      <span className={styles.icon()}>
+        <Phone className="size-4" aria-hidden />
+      </span>
+      <div className={styles.body()}>
+        <p className={styles.eyebrow()}>{eyebrow}</p>
+        <p className={styles.title()}>{title}</p>
+        {summary ? <p className={styles.summary()}>{summary}</p> : null}
+      </div>
+      {outcome ? (
+        <span className={styles.outcome()}>{CONVERSATION_BRIEF_OUTCOME_LABEL[outcome]}</span>
+      ) : (
+        <AriaButton
+          onPress={onOpen ?? (() => {})}
+          isDisabled={isOpenDisabled}
+          className={styles.action()}
+        >
+          {openLabel}
+        </AriaButton>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,193 @@
+import type { Contact, ConversationBrief } from '@proteos/sdk'
+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'
+import { Select } from '../select'
+import { contactPhoneNumbers } from './types'
+
+/* =========================================================================
+   ConversationBriefPreview — the brief read in full before (and during) a call: the
+   contact, the guidance text, and — when the host can dial — the number to
+   call and the Call button. Fetch-agnostic and dial-agnostic: the host hands
+   in the loaded brief + contact and, optionally, `onCall`; without `onCall`
+   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 {
+  brief: ConversationBrief
+  /** The brief's contacts (the resolved subset — a failed lookup is simply
+   *  absent). Names head the preview; phone addresses are the dial
+   *  candidates. */
+  contacts: Contact[]
+  /** Renders the contact/number pickers + Call button. Absent ⇒ read-only
+   *  preview. Receives the chosen contact and number. */
+  onCall?: (contact: Contact, phoneNumber: string) => void
+  /** Disables the Call button (softphone busy, another call running…). */
+  isCallDisabled?: boolean
+  /** Explains why calling is disabled (shown under the controls). */
+  callDisabledReason?: string
+  /** Host-slotted controls rendered next to the number picker (caller id). */
+  controls?: ReactNode
+  /** Hide the built-in Call button — for hosts that render the action in
+   *  their own footer; pair with `onSelectionChange` to know what to dial. */
+  isCallButtonHidden?: boolean
+  /** Fires whenever the chosen contact / number changes (and once on mount),
+   *  so a host rendering its own Call button knows the current target.
+   *  `phoneNumber` is '' when the chosen contact has no number. */
+  onSelectionChange?: (contact: Contact | null, phoneNumber: string) => void
+  /** Default 'Call'. */
+  callLabel?: string
+  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({
+  brief,
+  contacts,
+  onCall,
+  isCallDisabled = false,
+  callDisabledReason,
+  controls,
+  isCallButtonHidden = false,
+  onSelectionChange,
+  callLabel = 'Call',
+  className,
+  contentClassName,
+  renderContent,
+  onEdit,
+  editor,
+}: ConversationBriefPreviewProps) {
+  const [pickedContactId, setPickedContactId] = useState('')
+  const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null
+  const numbers = useMemo(() => contactPhoneNumbers(contact), [contact])
+  const [pickedNumber, setPickedNumber] = useState('')
+  const phoneNumber = numbers.includes(pickedNumber) ? pickedNumber : numbers[0] || ''
+  const isOpen = brief.status === 'prepared'
+  const names = contacts
+    .map((entry) => entry.name)
+    .filter(Boolean)
+    .join(', ')
+
+  // Latest-closure ref: the host's callback is routinely a fresh arrow, and
+  // the effect must fire on TARGET changes only.
+  const onSelectionChangeRef = useRef(onSelectionChange)
+  onSelectionChangeRef.current = onSelectionChange
+  useEffect(() => {
+    onSelectionChangeRef.current?.(contact, phoneNumber)
+  }, [contact, phoneNumber])
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      <div className="min-w-0">
+        <p className="truncate text-[14px] font-semibold text-ink">
+          {brief.subject || names || 'Prepared conversation'}
+        </p>
+        <p className="font-mono text-[10.5px] text-ink-4">
+          {[
+            brief.subject ? names : '',
+            brief.channel ? `Channel ${brief.channel}` : 'Any channel',
+            brief.type_key ? `Type ${brief.type_key}` : '',
+            brief.status === 'prepared'
+              ? 'Prepared'
+              : brief.status === 'used'
+                ? 'Call held'
+                : 'Discarded',
+          ]
+            .filter(Boolean)
+            .join(' · ')}
+        </p>
+      </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 ? (
+            <Select
+              aria-label="Who to call"
+              selectedKey={contact?.id ?? ''}
+              onSelectionChange={(key) => {
+                setPickedContactId(String(key))
+                setPickedNumber('')
+              }}
+              options={contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))}
+            />
+          ) : null}
+          {numbers.length > 1 ? (
+            <Select
+              aria-label="Number to call"
+              selectedKey={phoneNumber}
+              onSelectionChange={(key) => setPickedNumber(String(key))}
+              options={numbers.map((number) => ({ id: number, label: number }))}
+            />
+          ) : (
+            <p className="font-mono text-[12px] text-ink-3">
+              {phoneNumber ||
+                (contact ? 'This contact has no phone number on file.' : 'No contact to call.')}
+            </p>
+          )}
+          {controls}
+          {callDisabledReason ? (
+            <p className="text-[12px] text-warning">{callDisabledReason}</p>
+          ) : null}
+          {isCallButtonHidden ? null : (
+            <div className="flex justify-end">
+              <Button
+                isDisabled={isCallDisabled || !isOpen || phoneNumber === '' || !contact}
+                onPress={() => contact && onCall(contact, phoneNumber)}
+              >
+                <Phone className="size-3.5" aria-hidden />
+                {callLabel}
+              </Button>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}