@proteos/ui 0.47.0 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -55,7 +55,8 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
-    "@proteos/sdk": "0.47.0"
+    "thinking-orbs": "^0.3.1",
+    "@proteos/sdk": "0.49.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
@@ -77,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/channel-icon/channel-icon.tsx

@@ -9,6 +9,7 @@ import {
   MessageCircle,
   MessagesSquare,
   Mic,
+  Phone,
   Send,
   Video,
 } from 'lucide-react'
@@ -41,6 +42,7 @@ const CHANNEL_ICONS: Readonly<Record<string, LucideIcon>> = {
   'teams-meeting': Video,
   'webex-meeting': Video,
   adhoc: AudioLines,
+  phone: Phone,
 }
 
 /** The channel's glyph component. Unknown channels get the generic one. */

package/src/components/orb/index.ts

@@ -0,0 +1,2 @@
+export type { OrbProps, OrbSizeToken } from './orb'
+export { Orb } from './orb'

package/src/components/orb/orb.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Orb } from './orb'
+
+const meta: Meta<typeof Orb> = {
+  title: 'Components/Orb',
+  component: Orb,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+type Story = StoryObj<typeof Orb>
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Orb size="xs" label="Agent working" />
+      <Orb size="sm" label="Agent working" />
+      <Orb size="md" label="Agent working" />
+      <Orb size="lg" label="Agent working" />
+      <span className="text-[13px] text-ink-3">Agent is composing…</span>
+    </div>
+  ),
+}

package/src/components/orb/orb.tsx

@@ -0,0 +1,57 @@
+import { type OrbState, type OrbTheme, ThinkingOrb } from 'thinking-orbs'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Orb — the "agent is working" indicator, backed by the `thinking-orbs`
+   package (https://orbs.jakubantalik.com): a canvas-rendered dotted orb
+   (state: solving), monochrome ink that auto-resolves against `data-theme`
+   / OS scheme, with a reduced-motion static frame built in.
+
+   The package ships two hand-tuned designs — 20px (inline) and 64px
+   (avatar). `sm` and `lg` render them at native size; `xs` gently
+   downscales the 20px design, `md` downscales the 64px one (downscaling
+   stays crisp — the canvas buffer is the larger design).
+
+   Purely decorative by default — pass `label` to expose it as an img with
+   an accessible name (e.g. "Agent working").
+   ========================================================================= */
+
+export type OrbSizeToken = 'xs' | 'sm' | 'md' | 'lg'
+
+/** CSS box per token. sm/lg match the native designs exactly (no scaling). */
+const SIZE_PX: Record<OrbSizeToken, number> = { xs: 12, sm: 20, md: 40, lg: 64 }
+
+/** Which native design each token rides. */
+const DESIGN: Record<OrbSizeToken, 20 | 64> = { xs: 20, sm: 20, md: 64, lg: 64 }
+
+export interface OrbProps {
+  /** xs 12 · sm 20 (native inline) · md 40 · lg 64 (native avatar). Default `sm`. */
+  size?: OrbSizeToken
+  /** Animation state; defaults to `solving` (the working indicator). */
+  state?: OrbState
+  /** Speed multiplier (1 = tuned speed); e.g. 0.2 for a slow idle shimmer. */
+  speed?: number
+  /** Pin the ink instead of auto-detecting — `dark` renders light dots (for
+   *  a dark chip like the launcher's black circle). */
+  theme?: OrbTheme
+  className?: string
+  /** Accessible name; omitting it hides the orb from assistive tech. */
+  label?: string
+}
+
+export function Orb({ size = 'sm', state = 'solving', speed, theme, className, label }: OrbProps) {
+  const px = SIZE_PX[size]
+  const design = DESIGN[size]
+  return (
+    <ThinkingOrb
+      state={state}
+      size={design}
+      {...(speed !== undefined ? { speed } : {})}
+      {...(theme !== undefined ? { theme } : {})}
+      className={cn('inline-block shrink-0', className)}
+      {...(px !== design ? { style: { width: px, height: px } } : {})}
+      {...(label ? { 'aria-label': label } : { 'aria-hidden': true })}
+    />
+  )
+}

package/src/components/record-filter/chip-value.tsx

@@ -124,7 +124,7 @@ function ChipItem({
   }
   // Lib default: enum → Badge with variant lookup; other → truncated mono text.
   if (field.type === 'enum') {
-    const option = field.options?.find((o) => o.value === value)
+    const option = findEnumOption(field, value)
     return (
       <Badge
         variant={option?.variant}
@@ -146,6 +146,13 @@ function Em({ children }: { children: string }) {
   return <span className="font-mono text-[12px] text-ink-4">{children}</span>
 }
 
+/** The declared option for an enum value, if the field carries one. Central so
+ *  the badge, the multi-value summary and the single-value summary agree on
+ *  what a stored value is called. */
+function findEnumOption(field: FilterField, value: string) {
+  return field.options?.find((option) => option.value === value)
+}
+
 export function formatValue(
   field: FilterField,
   operator: ComparisonOperator,
@@ -161,7 +168,7 @@ export function formatValue(
         : []
     if (arr.length === 0) return '—'
     if (field.type === 'enum') {
-      const labels = arr.map((v) => field.options?.find((x) => x.value === v)?.label ?? v)
+      const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v)
       return labels.length <= 2
         ? labels.join(', ')
         : `${labels[0]}, ${labels[1]} +${labels.length - 2}`
@@ -170,6 +177,14 @@ export function formatValue(
   }
   if (field.type === 'boolean') return value === true || value === 'true' ? 'true' : 'false'
   if (value === '' || value == null) return '—'
+  // An enum stores a system value ("technical_decider") and displays its
+  // declared label ("Technical Decider"). The multi-value branch above and the
+  // badge below already do this; a single value read as the raw slug, so the
+  // same filter said "is technical_decider" or "is any of Technical Decider"
+  // depending only on the operator.
+  if (field.type === 'enum') {
+    return findEnumOption(field, String(value))?.label ?? String(value)
+  }
   if (field.type === 'number' || field.type === 'integer') {
     const n = Number(value)
     return Number.isFinite(n) ? n.toLocaleString() : String(value)

package/src/components/record-filter/field-label.ts

@@ -0,0 +1,29 @@
+/* =========================================================================
+   Field-label composition — how a nested or related field reads in the
+   picker, the chips rail and the operator row.
+
+   A `FilterField` path is hierarchical: an object leaf (`address.city`) and
+   a field reached through a relation (`company_id.name`) both render as a
+   breadcrumb. The separator lives here because BOTH sides compose it — the
+   consumer builds `FilterField.label` from an entity, and the chips rail
+   builds its own breadcrumb from `parentLabel` — and a mismatch between the
+   two shows up as one chip reading "Company · Name" next to another reading
+   "Company / Name".
+   ========================================================================= */
+
+/**
+ * U+00B7 MIDDLE DOT, spaced. The same separator the app already uses for
+ * breadcrumb-ish text ("Segment · SaaS decision makers"), and quieter than a
+ * slash at the small type sizes these labels render at — the eye reads the
+ * words, not the punctuation.
+ */
+export const FIELD_LABEL_SEPARATOR = ' · '
+
+/**
+ * Joins breadcrumb parts with {@link FIELD_LABEL_SEPARATOR}, skipping empties
+ * so a field with no parent renders as its own label rather than with a
+ * leading separator.
+ */
+export function joinFieldLabel(...parts: ReadonlyArray<string | undefined | null>): string {
+  return parts.filter((part): part is string => !!part && part.length > 0).join(FIELD_LABEL_SEPARATOR)
+}

package/src/components/record-filter/index.ts

@@ -1,4 +1,5 @@
 export { AttributePicker, type AttributePickerProps } from './attribute-picker'
+export { FIELD_LABEL_SEPARATOR, joinFieldLabel } from './field-label'
 export {
   ChipValue,
   type ChipValueItemRenderer,

package/src/components/record-filter/record-filter-chips.tsx

@@ -14,6 +14,7 @@ import { OperatorPicker } from './operator-picker'
 import { operatorById, operatorsForType } from './operators'
 import { useShowDetails } from './show-details-store'
 import { AttributeTypeIcon } from '../attribute-type-icon'
+import { FIELD_LABEL_SEPARATOR } from './field-label'
 import type { ComparisonOperator, FilterField, FilterGroup, FilterValue } from './types'
 
 /* =========================================================================
@@ -370,7 +371,12 @@ function Chip({
           </span>
         ) : null}
         <span className="font-sans text-[12.5px] text-ink-2">
-          {field.parentLabel ? <span className="text-ink-4">{field.parentLabel} / </span> : null}
+          {field.parentLabel ? (
+            <span className="text-ink-4">
+              {field.parentLabel}
+              {FIELD_LABEL_SEPARATOR}
+            </span>
+          ) : null}
           <span className="text-ink">{field.shortLabel}</span>
         </span>
         <span className="font-mono text-[11px] text-ink-3">{op?.label}</span>

package/src/components/record-filter/record-filter.stories.tsx

@@ -52,14 +52,14 @@ const customerFields: FilterField[] = [
     path: 'owner.name',
     shortLabel: 'Name',
     parentLabel: 'Owner',
-    label: 'Owner / Name',
+    label: 'Owner · Name',
     type: 'string',
   },
   {
     path: 'owner.email',
     shortLabel: 'Email',
     parentLabel: 'Owner',
-    label: 'Owner / Email',
+    label: 'Owner · Email',
     type: 'string',
     inputType: 'email',
   },
@@ -67,7 +67,7 @@ const customerFields: FilterField[] = [
     path: 'address.country',
     shortLabel: 'Country',
     parentLabel: 'Address',
-    label: 'Address / Country',
+    label: 'Address · Country',
     type: 'enum',
     options: [
       { value: 'us', label: 'United States' },

package/src/components/record-filter/record-filter.test.tsx

@@ -5,6 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { RecordFilterBuilderPanel } from './record-filter-builder-panel'
 import { RecordFilterButton } from './record-filter-button'
+import { formatValue } from './chip-value'
+import { FIELD_LABEL_SEPARATOR, joinFieldLabel } from './field-label'
 import { RecordFilterChips } from './record-filter-chips'
 import { __resetShowDetailsStores } from './show-details-store'
 import type { FilterField, FilterGroup } from './types'
@@ -435,3 +437,87 @@ describe('RecordFilterChips — nested groups', () => {
     expect(screen.getByText(/· 2/)).toBeInTheDocument()
   })
 })
+
+/* The chip rail composes its own breadcrumb from `parentLabel`, while the
+   consumer composes `label` when it builds the field list. Both must use
+   FIELD_LABEL_SEPARATOR, or one chip reads "Company · Name" beside another
+   reading "Company / Name". */
+describe('RecordFilterChips — breadcrumb separator', () => {
+  const nestedFields: FilterField[] = [
+    {
+      path: 'billing_address.city',
+      label: `Billing Address${FIELD_LABEL_SEPARATOR}City`,
+      shortLabel: 'City',
+      parentLabel: 'Billing Address',
+      type: 'string',
+    },
+  ]
+
+  it('separates the parent from the leaf with a middle dot', () => {
+    // Chips only render when expanded; the store defaults to collapsed.
+    window.localStorage.setItem('rf.showDetails', '1')
+    render(
+      <RecordFilterChips
+        fields={nestedFields}
+        filter={{
+          logicalOperator: 'and',
+          elements: [{ field: 'billing_address.city', operator: 'eq', value: 'Berlin' }],
+        }}
+        onChange={() => undefined}
+      />,
+    )
+
+    expect(screen.getByText('Billing Address', { exact: false }).textContent).toContain(
+      FIELD_LABEL_SEPARATOR,
+    )
+    expect(document.body.textContent).not.toContain('Billing Address / ')
+  })
+
+  it('exposes the separator as the middle dot', () => {
+    expect(FIELD_LABEL_SEPARATOR).toBe(' · ')
+    expect(joinFieldLabel('Company', undefined, 'Name')).toBe('Company · Name')
+  })
+})
+
+/* An enum stores a system value and displays a declared label. Both the
+   multi-value branch and the chip badge already resolved it; a single value
+   did not, so the same filter read "is technical_decider" or "is any of
+   Technical Decider" depending only on the operator. */
+describe('formatValue — enum labels', () => {
+  const roleField: FilterField = {
+    path: 'buying_role',
+    label: 'Buying Role',
+    shortLabel: 'Buying Role',
+    type: 'enum',
+    options: [
+      { value: 'technical_decider', label: 'Technical Decider' },
+      { value: 'economic_decider', label: 'Economic Decider' },
+    ],
+  }
+
+  it('renders the label for a single value', () => {
+    expect(formatValue(roleField, 'eq', 'technical_decider')).toBe('Technical Decider')
+    expect(formatValue(roleField, 'ne', 'economic_decider')).toBe('Economic Decider')
+  })
+
+  it('renders labels for a multi-value operator', () => {
+    expect(formatValue(roleField, 'in', ['technical_decider', 'economic_decider'])).toBe(
+      'Technical Decider, Economic Decider',
+    )
+  })
+
+  // A value the entity no longer declares still has to render as something.
+  it('falls back to the stored value when no option matches', () => {
+    expect(formatValue(roleField, 'eq', 'retired_role')).toBe('retired_role')
+  })
+
+  it('leaves non-enum fields alone', () => {
+    const nameField: FilterField = {
+      path: 'name',
+      label: 'Name',
+      shortLabel: 'Name',
+      type: 'string',
+    }
+    expect(formatValue(nameField, 'eq', 'technical_decider')).toBe('technical_decider')
+  })
+})

package/src/components/record-filter/types.ts

@@ -34,7 +34,8 @@ export type FilterFieldOption = {
 export type FilterField = {
   /** Dot-path to the attribute, e.g. `'owner.email'`. Stable identifier. */
   path: string
-  /** Full nested label, e.g. `'Owner / Email'`. Used in pickers. */
+  /** Full nested label, e.g. `'Owner · Email'` — parts joined with
+   *  `FIELD_LABEL_SEPARATOR`. Used in pickers. */
   label: string
   /** Leaf label only, e.g. `'Email'`. Used in chips. */
   shortLabel: string

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './components/message-composer'
 export * from './components/modal'
 export * from './components/multi-select'
 export * from './components/nav'
+export * from './components/orb'
 export * from './components/popover'
 export * from './components/progress-bar'
 export * from './components/radio-group'

package/src/styles.css

@@ -122,6 +122,7 @@
   /* Status pop — one-shot scale+fade entrance for the large success/error
      status icons. Soft ease, no overshoot (nothing bounces). */
   --animate-status-pop: status-pop var(--duration-slow) var(--ease-out-soft) both;
+
 }
 
 @keyframes indeterminate-progress {