@startsimpli/ui 0.4.82 → 0.4.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.82",
+  "version": "0.4.83",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/ActivityTimeline.tsx

@@ -16,18 +16,16 @@ import { ComponentType, ReactNode, useEffect, useMemo, useRef } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { Clock, User } from 'lucide-react';
 import { EmptyState } from './states';
+import { ActorIdentity, actorInitials, actorLabel } from './ActorIdentity';
+import type { ActorIdentityValue } from './ActorIdentity';
 
 /** Severity of an entry, for the marker. Presentation only — never a gate. */
 export type ActivityTone = 'ok' | 'warn' | 'error' | 'muted';
 
-/** Who did it. Rendered as an initials chip so a feed shows a person rather
- *  than a bare email string. */
-export interface ActivityTimelineActor {
-  id?: string;
-  name?: string | null;
-  email?: string | null;
-  avatarUrl?: string | null;
-}
+/** Who did it. Rendered by the shared `ActorIdentity` chip, so a feed shows a
+ *  PERSON — name plus the email that pins the name down — and paints it the
+ *  same way every other attributed surface does (startsim-768w.19.8.1). */
+export type ActivityTimelineActor = ActorIdentityValue;
 
 export interface ActivityTimelineItem {
   id: string;
@@ -101,39 +99,6 @@ function defaultFormatTime(date: string): string {
   }
 }
 
-/** "Ada Lovelace" -> "AL"; "ada@x.com" -> "A". Empty when we know nobody. */
-export function actorInitials(actor?: ActivityTimelineActor): string {
-  const name = (actor?.name ?? '').trim();
-  if (name) {
-    return name
-      .split(/\s+/)
-      .slice(0, 2)
-      .map((w) => w[0]?.toUpperCase() ?? '')
-      .join('');
-  }
-  const email = (actor?.email ?? '').trim();
-  return email ? email[0]!.toUpperCase() : '';
-}
-
-function actorName(actor?: ActivityTimelineActor): string {
-  return (actor?.name ?? '').trim() || (actor?.email ?? '').trim();
-}
-
-/**
- * The second half of the identity — the address, when the display name is
- * something else (startsim-768w.19.8).
- *
- * A display name is free text: an account called "QA Foundry" reads exactly
- * like the name of a FOUNDRY, so a correct feed looked to its owner like it was
- * showing another tenant's activity. The email is the unambiguous handle, and
- * it is what turns a name that could be anything into a person. Empty when the
- * name IS the email, because printing it twice is noise.
- */
-function actorHandle(actor?: ActivityTimelineActor): string {
-  const email = (actor?.email ?? '').trim();
-  return email && email !== actorName(actor) ? email : '';
-}
-
 function dayKey(iso: string): string {
   const d = new Date(iso);
   return Number.isNaN(d.getTime()) ? 'unknown' : d.toDateString();
@@ -195,8 +160,7 @@ function TimelineEntry({
     activityColors[activity.type] ||
     (tone ? TONE_MARKER[tone] : undefined) ||
     'bg-muted text-muted-foreground';
-  const who = actorName(activity.actor);
-  const handle = actorHandle(activity.actor);
+  const who = actorLabel(activity.actor);
   // With no icon the marker itself becomes the avatar, so the metadata line
   // shows the name alone rather than the same initials twice.
   const markerIsAvatar = !Icon && !!initials;
@@ -239,17 +203,7 @@ function TimelineEntry({
         </div>
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
-          {who && (
-            <span className="flex flex-wrap items-center gap-x-1.5">
-              {initials && !markerIsAvatar && (
-                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
-                  {initials}
-                </span>
-              )}
-              <span>{who}</span>
-              {handle && <span className="text-xs text-muted-foreground/80">{handle}</span>}
-            </span>
-          )}
+          <ActorIdentity actor={activity.actor} showInitials={!markerIsAvatar} />
 
           {!who && activity.createdBy && (
             <span className="flex items-center gap-1">

package/src/components/ActorIdentity.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+/**
+ * ActorIdentity — ONE way to say "a person did this" (startsim-768w.19.8.1).
+ *
+ * A display name is FREE TEXT. It is whatever somebody typed into a profile, so
+ * it can read like an org ("QA Foundry" — the name of a different foundry) or
+ * like nobody at all ("Admin User"), and a reader has nothing to check it
+ * against. Alone it is a label, not an identity: the activity feed printing one
+ * is what made a correctly-filtered feed look like cross-tenant contamination
+ * (startsim-768w.19.8), and the run attribution on Deployments/Builds printed
+ * the same string with the same result.
+ *
+ * So the rule, in one place: the NAME and the EMAIL are rendered together when
+ * there is a real name, and the EMAIL ALONE when the name is missing or is just
+ * the address echoed back. Every surface that attributes something to a person
+ * renders this component rather than its own arrangement of the same two
+ * fields (rule #9).
+ */
+
+export interface ActorIdentityValue {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  avatarUrl?: string | null;
+}
+
+/** "Ada Lovelace" -> "AL"; "ada@x.com" -> "A". Empty when we know nobody. */
+export function actorInitials(actor?: ActorIdentityValue): string {
+  const name = (actor?.name ?? '').trim();
+  if (name) {
+    return name
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+  const email = (actor?.email ?? '').trim();
+  return email ? email[0]!.toUpperCase() : '';
+}
+
+/** What to CALL them: the real name, else the address. Empty when we know
+ *  nobody — and an empty label is the signal to render nothing at all, rather
+ *  than a dangling "by". */
+export function actorLabel(actor?: ActorIdentityValue): string {
+  return (actor?.name ?? '').trim() || (actor?.email ?? '').trim();
+}
+
+/** The second half of the identity — the address, when the label is something
+ *  else. Empty when the label already IS the address, because printing it twice
+ *  is noise rather than corroboration. */
+export function actorHandle(actor?: ActorIdentityValue): string {
+  const email = (actor?.email ?? '').trim();
+  return email && email !== actorLabel(actor) ? email : '';
+}
+
+export interface ActorIdentityProps {
+  actor?: ActorIdentityValue;
+  /** Show the initials avatar. Off for a compact one-line attribution, or where
+   *  the surrounding row already paints the same initials. */
+  showInitials?: boolean;
+  className?: string;
+  initialsClassName?: string;
+  handleClassName?: string;
+}
+
+export function ActorIdentity({
+  actor,
+  showInitials = true,
+  className = 'flex flex-wrap items-center gap-x-1.5',
+  initialsClassName = 'flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground',
+  handleClassName = 'text-xs text-muted-foreground/80',
+}: ActorIdentityProps) {
+  const label = actorLabel(actor);
+  if (!label) return null;
+  const initials = showInitials ? actorInitials(actor) : '';
+  const handle = actorHandle(actor);
+
+  return (
+    <span data-testid="actor-identity" className={className}>
+      {initials && <span className={initialsClassName}>{initials}</span>}
+      <span>{label}</span>
+      {handle && <span className={handleClassName}>{handle}</span>}
+    </span>
+  );
+}

package/src/components/__tests__/actor-identity.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * startsim-768w.19.8.1 (RED) — ONE renderer for an attributed identity.
+ *
+ * The activity feed learned in 19.8 that a display name must never stand alone:
+ * it is free text, so an account called "QA Foundry" reads exactly like the name
+ * of a DIFFERENT foundry, and a correct feed then looks like a data leak. The
+ * fix was to carry the email alongside the name.
+ *
+ * The very same string is printed on the Deployments and Builds tabs as run
+ * attribution, where it reads "by Admin User · Jul 27, 4:36 PM" — a name that
+ * identifies nobody, with no handle to check it against. Two surfaces printing
+ * the same identity must not paint it two different ways (rule #9), so the chip
+ * the activity feed already uses is extracted here and both consume it.
+ *
+ * The contract, in one line: NAME + EMAIL when there is a real name, EMAIL ALONE
+ * when the "name" is absent or is just the address echoed back.
+ */
+import { render, screen, within } from '@testing-library/react'
+
+import { ActorIdentity, actorHandle, actorInitials, actorLabel } from '../ActorIdentity'
+import { ActivityTimeline } from '../ActivityTimeline'
+
+describe('actorLabel / actorHandle — a name is never the whole identity', () => {
+  it('keeps the name and the email apart when both are real', () => {
+    const actor = { name: 'Ada Owner', email: 'ada@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('Ada Owner')
+    expect(actorHandle(actor)).toBe('ada@ogmc.ai')
+  })
+
+  it('falls back to the email when there is no real name', () => {
+    const actor = { name: '', email: 'ops@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('ops@ogmc.ai')
+    // ...and does NOT then print the same address twice
+    expect(actorHandle(actor)).toBe('')
+  })
+
+  it('drops a name that is only the email echoed back', () => {
+    const actor = { name: 'ops@ogmc.ai', email: 'ops@ogmc.ai' }
+    expect(actorLabel(actor)).toBe('ops@ogmc.ai')
+    expect(actorHandle(actor)).toBe('')
+  })
+
+  it('knows nobody when it is handed nobody', () => {
+    expect(actorLabel(undefined)).toBe('')
+    expect(actorLabel({ name: null, email: null })).toBe('')
+    expect(actorInitials({ name: 'Ada Owner' })).toBe('AO')
+    expect(actorInitials({ email: 'ops@ogmc.ai' })).toBe('O')
+  })
+})
+
+describe('<ActorIdentity>', () => {
+  it('renders the person AND the handle that pins them down', () => {
+    render(<ActorIdentity actor={{ name: 'Admin User', email: 'admin@ogmc.ai' }} />)
+    const chip = within(screen.getByTestId('actor-identity'))
+    expect(chip.getByText('Admin User')).toBeInTheDocument()
+    expect(chip.getByText('admin@ogmc.ai')).toBeInTheDocument()
+  })
+
+  it('renders the email alone when there is no name — never an empty "by"', () => {
+    render(<ActorIdentity actor={{ name: '', email: 'ops@ogmc.ai' }} />)
+    const chip = screen.getByTestId('actor-identity')
+    expect(chip).toHaveTextContent('ops@ogmc.ai')
+    // one occurrence, not the address printed twice
+    expect(chip.textContent!.match(/ops@ogmc\.ai/g)).toHaveLength(1)
+  })
+
+  it('renders nothing at all when there is nobody to attribute', () => {
+    const { container } = render(<ActorIdentity actor={{ name: null, email: null }} />)
+    expect(container).toBeEmptyDOMElement()
+    expect(screen.queryByTestId('actor-identity')).toBeNull()
+  })
+
+  it('can drop the initials avatar for a compact one-line attribution', () => {
+    render(<ActorIdentity actor={{ name: 'Ada Owner', email: 'ada@ogmc.ai' }} showInitials={false} />)
+    const chip = screen.getByTestId('actor-identity')
+    expect(chip).toHaveTextContent('Ada Owner')
+    expect(within(chip).queryByText('AO')).toBeNull()
+  })
+})
+
+describe('the activity feed renders the SAME chip', () => {
+  it('still shows the person and the email on a timeline row', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: 'ev-1',
+            type: 'member_invited',
+            title: 'Member invited',
+            occurredAt: '2026-07-27T16:36:00Z',
+            actor: { name: 'QA Foundry', email: 'qa-foundry@startsimpli.com' },
+          },
+        ]}
+      />,
+    )
+    const row = within(document.querySelector('[data-activity-id="ev-1"]') as HTMLElement)
+    const chip = within(row.getByTestId('actor-identity'))
+    expect(chip.getByText('QA Foundry')).toBeInTheDocument()
+    expect(chip.getByText('qa-foundry@startsimpli.com')).toBeInTheDocument()
+  })
+})

package/src/components/activity/__tests__/activity-resend-pill.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * startsim-768w.19.8.1 — the resend pill, verified on the SURFACE, not just in
+ * the mapper.
+ *
+ * `activityNote()` was added in startsim-768w.19.8 so a re-sent invite stops
+ * reading as a second, duplicate invite. Its unit coverage asserted the mapper;
+ * nobody could confirm the pill actually reaches the DOM of the panel a user
+ * looks at, because on the live feed the resend rows sit below the fold. This
+ * drives the real `ActivityFeedPanel` — the same component the Activity tab
+ * renders — over two invites for the same person, and asserts the second one
+ * carries a visible "resend" while the first does not.
+ */
+import { render, screen, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { ActivityFeedPanel, type ActivityEvent } from '../index'
+
+function inviteRow(over: Partial<ActivityEvent> & { id: string }): ActivityEvent {
+  return {
+    action: 'member_invited',
+    type: 'member_invited',
+    target_type: 'membership',
+    target_id: 'dc0d739f-a622-431d-beb2-de169acda594',
+    metadata: { email: 'nordby@ogmc.ai', role: 'admin' },
+    actor: { id: 'u-1', email: 'qa-foundry@startsimpli.com', name: '' },
+    actor_email: 'qa-foundry@startsimpli.com',
+    state: null,
+    previous_state: null,
+    source: 'control_plane',
+    reason: '',
+    error: '',
+    run_id: '',
+    run_kind: '',
+    created_at: '2026-07-21T12:00:00Z',
+    ...over,
+  }
+}
+
+const RESEND = inviteRow({
+  id: 'ev-resend',
+  metadata: { email: 'nordby@ogmc.ai', role: 'admin', resend: true },
+  created_at: '2026-07-22T12:00:00Z',
+})
+const ORIGINAL = inviteRow({ id: 'ev-original' })
+
+function renderPanel(results: ActivityEvent[]) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const client = {
+    list: jest.fn().mockResolvedValue({ count: results.length, next: null, previous: null, results }),
+  }
+  render(
+    <QueryClientProvider client={qc}>
+      <ActivityFeedPanel client={client} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('a resent invite is visibly not a duplicate', () => {
+  it('renders the resend pill on the panel a user actually looks at', async () => {
+    renderPanel([RESEND, ORIGINAL])
+
+    const resendRow = (await screen.findByText('resend')).closest('[data-activity-id]')
+    expect(resendRow).toHaveAttribute('data-activity-id', 'ev-resend')
+
+    const original = document.querySelector('[data-activity-id="ev-original"]') as HTMLElement
+    expect(within(original).queryByText('resend')).toBeNull()
+    // both still name the invitee rather than the UUID they carry
+    expect(within(original).getByText('nordby@ogmc.ai')).toBeInTheDocument()
+  })
+})

package/src/components/index.ts

@@ -153,8 +153,14 @@ export * from './pipeline'
 // Calendar (month/week/day event grid wrapping react-big-calendar)
 export * from './calendar'
 
+// Attributed identity — the ONE chip every "who did this" surface renders, so a
+// display name is never printed alone as if it were an identity
+// (startsim-768w.19.8.1).
+export { ActorIdentity, actorInitials, actorLabel, actorHandle } from './ActorIdentity'
+export type { ActorIdentityProps, ActorIdentityValue } from './ActorIdentity'
+
 // Activity components (timeline, quick log, log dialog)
-export { ActivityTimeline, actorInitials, dayHeading } from './ActivityTimeline'
+export { ActivityTimeline, dayHeading } from './ActivityTimeline'
 export type {
   ActivityTimelineProps,
   ActivityTimelineItem,