@startsimpli/ui 0.4.80 → 0.4.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.80",
+  "version": "0.4.81",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -43,8 +43,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "^0.4.31",
-    "@startsimpli/api": "^0.5.49"
+    "@startsimpli/api": "^0.5.50",
+    "@startsimpli/auth": "^0.4.31"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/ActivityTimeline.tsx

@@ -119,6 +119,21 @@ 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();
@@ -181,6 +196,7 @@ function TimelineEntry({
     (tone ? TONE_MARKER[tone] : undefined) ||
     'bg-muted text-muted-foreground';
   const who = actorName(activity.actor);
+  const handle = actorHandle(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;
@@ -224,13 +240,14 @@ function TimelineEntry({
 
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
           {who && (
-            <span className="flex items-center gap-1.5">
+            <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>
               )}
-              {who}
+              <span>{who}</span>
+              {handle && <span className="text-xs text-muted-foreground/80">{handle}</span>}
             </span>
           )}
 

package/src/components/activity/ActivityFeedPanel.tsx

@@ -101,7 +101,12 @@ export function ActivityFeedPanel({
   pageSize = 25,
   refetchInterval = false,
   title = 'Activity',
-  description = 'Everything that happened here, newest first — as much as your access level allows.',
+  // WHO DID WHAT — the user's own framing of this surface, and the line that
+  // separates it from a deployment/run history (startsim-768w.19.8). The old
+  // copy hedged with "as much as your access level allows", which named a
+  // constraint the reader cannot act on; the permission filtering is invisible
+  // and correct by design, so it does not belong in the description.
+  description = 'Who did what here, newest first — sign-ins, invites and role changes, settings and pipeline edits, and who started each build.',
   headerAside,
   renderFooter,
   showFilters = true,

package/src/components/activity/__tests__/activity-labels.test.tsx

@@ -0,0 +1,229 @@
+/**
+ * startsim-768w.19.8 (RED) — the activity feed LABELS a row honestly.
+ *
+ * The user reported "activity in marketing agents foundry is showing me the
+ * activity of a different foundry". It was not a filtering bug: every row
+ * carried the right tenant. It was a LABELLING bug that mimics a data leak
+ * perfectly, and all three parts of it live in this layer:
+ *
+ *   1. THE ACTOR CHIP NAMED SOMETHING THAT LOOKS LIKE AN ORG. The account's
+ *      display name is "QA Foundry", which collides with a DIFFERENT foundry's
+ *      name — so a correct feed reads as cross-tenant contamination. A row must
+ *      identify the PERSON unambiguously, which means the email is never
+ *      dropped in favour of a name that could be anything.
+ *   2. THE TARGET WAS A RAW UUID — "membership · dc0d739f-a622-…" tells nobody
+ *      anything. Resolve it to a human string from the row's own metadata, and
+ *      when it cannot be resolved render NOTHING rather than a UUID.
+ *   3. RESENDS WERE INDISTINGUISHABLE FROM ORIGINAL INVITES. The same invitee
+ *      appeared twice; the second carried `metadata.resend` and rendered
+ *      identically, so a correct trail read as a duplicate.
+ *
+ * DESIGN GUARD, same as the rest of this layer: nothing below branches on a
+ * known action. Target resolution reads generic DESCRIPTOR keys off `metadata`,
+ * so a brand-new event type is labelled the moment the backend records one.
+ */
+import { render, screen, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { ActivityTimeline } from '../../ActivityTimeline'
+import {
+  ActivityFeedPanel,
+  activityNote,
+  activityTarget,
+  toActivityTimelineItems,
+  type ActivityEvent,
+} from '../index'
+
+const emptyPage = { count: 0, next: null, previous: null, results: [] }
+
+function event(over: Partial<ActivityEvent> & { id: string }): ActivityEvent {
+  return {
+    action: 'state_changed',
+    type: 'state_changed',
+    target_type: 'state',
+    target_id: '',
+    metadata: {},
+    actor: null,
+    actor_email: null,
+    state: null,
+    previous_state: null,
+    source: 'orchestrator',
+    reason: '',
+    error: '',
+    run_id: '',
+    run_kind: '',
+    created_at: '2026-07-20T12:00:00Z',
+    ...over,
+  }
+}
+
+const INVITE = event({
+  id: 'ev-1',
+  action: 'member_invited',
+  type: 'member_invited',
+  target_type: 'membership',
+  target_id: 'dc0d739f-a622-431d-beb2-de169acda594',
+  metadata: { email: 'nordby@ogmc.ai', role: 'admin', auto_created: true },
+  actor: { id: 'u-qa', email: 'qa-foundry@startsimpli.com', name: 'QA Foundry' },
+  actor_email: 'qa-foundry@startsimpli.com',
+})
+
+// --------------------------------------------------------------------------
+// 1. THE ACTOR IS A PERSON, and says so
+// --------------------------------------------------------------------------
+
+describe('the actor chip identifies a PERSON, not an org', () => {
+  it('shows the email alongside a display name that could be read as a company', () => {
+    render(<ActivityTimeline activities={toActivityTimelineItems([INVITE])} />)
+    // Both halves of the identity. Without the email, "QA Foundry" is
+    // indistinguishable from the name of another foundry, which is exactly what
+    // the user read as cross-tenant contamination.
+    expect(screen.getByText('QA Foundry')).toBeInTheDocument()
+    expect(screen.getByText('qa-foundry@startsimpli.com')).toBeInTheDocument()
+  })
+
+  it('does not print the same identity twice when there is no display name', () => {
+    const rows = toActivityTimelineItems([
+      event({ ...INVITE, id: 'ev-2', actor: { id: 'u-2', email: 'ada@x.com', name: '' } }),
+    ])
+    render(<ActivityTimeline activities={rows} />)
+    expect(screen.getAllByText('ada@x.com')).toHaveLength(1)
+  })
+
+  it('treats a name the server derived from the email as no name at all', () => {
+    // Some backends fall back to the email inside the display name. Echoing it
+    // twice is noise, not identity.
+    const rows = toActivityTimelineItems([
+      event({ ...INVITE, id: 'ev-3', actor: { id: 'u-3', email: 'ada@x.com', name: 'ada@x.com' } }),
+    ])
+    render(<ActivityTimeline activities={rows} />)
+    expect(screen.getAllByText('ada@x.com')).toHaveLength(1)
+  })
+
+  it('still renders a row the control plane recorded itself, with no actor', () => {
+    const rows = toActivityTimelineItems([event({ id: 'ev-4', state: 'live', actor: null })])
+    render(<ActivityTimeline activities={rows} />)
+    expect(screen.getByText('Live')).toBeInTheDocument()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 2. THE TARGET IS A HUMAN STRING, or nothing
+// --------------------------------------------------------------------------
+
+describe('activityTarget resolves what was touched', () => {
+  it('names the invitee instead of the membership UUID', () => {
+    expect(activityTarget(INVITE)).toBe('nordby@ogmc.ai')
+    expect(activityTarget(INVITE)).not.toMatch(/dc0d739f/)
+  })
+
+  it('renders NOTHING rather than a UUID when nothing human is recorded', () => {
+    const opaque = event({
+      id: 'ev-5',
+      action: 'thing_happened',
+      type: 'thing_happened',
+      target_type: 'membership',
+      target_id: 'dc0d739f-a622-431d-beb2-de169acda594',
+      metadata: {},
+    })
+    expect(activityTarget(opaque)).toBe('')
+  })
+
+  it('keeps a target id a human can actually use', () => {
+    const pr = event({
+      id: 'ev-6',
+      action: 'app_ui_proposed',
+      type: 'app_ui_proposed',
+      target_type: 'pull_request',
+      target_id: '42',
+      metadata: {},
+    })
+    expect(activityTarget(pr)).toBe('pull_request · 42')
+  })
+
+  it('labels an event type it has never heard of from that row own metadata', () => {
+    // No vocabulary: a new backend event only has to record a descriptor.
+    const fresh = event({
+      id: 'ev-7',
+      action: 'schema_type_created',
+      type: 'schema_type_created',
+      target_type: 'schema_type',
+      target_id: 'b1f0f2c4-7f24-4a2f-9d69-6a0f0e9a1111',
+      metadata: { name: 'Artist' },
+    })
+    expect(activityTarget(fresh)).toBe('Artist')
+  })
+
+  it('prefers the row own reason or error over the target, as before', () => {
+    const failed = event({
+      id: 'ev-8',
+      action: 'lifecycle_failed',
+      type: 'lifecycle_failed',
+      error: 'CodeBuild step exited 1',
+      target_type: 'run',
+      target_id: 'f496dea4-0000-0000-0000-000000000000',
+    })
+    const [item] = toActivityTimelineItems([failed])
+    expect(item.detail).toBe('CodeBuild step exited 1')
+  })
+
+  it('puts the resolved target on the timeline item instead of the UUID', () => {
+    const [item] = toActivityTimelineItems([INVITE])
+    expect(item.detail).toBe('nordby@ogmc.ai')
+    expect(String(item.detail)).not.toMatch(/dc0d739f/)
+  })
+})
+
+// --------------------------------------------------------------------------
+// 3. A RESEND IS NOT A SECOND INVITE
+// --------------------------------------------------------------------------
+
+describe('a resend is distinguishable from the original', () => {
+  const RESEND = event({
+    ...INVITE,
+    id: 'ev-9',
+    metadata: { email: 'nordby@ogmc.ai', role: 'admin', resend: true },
+    created_at: '2026-07-21T12:00:00Z',
+  })
+
+  it('marks the resent row', () => {
+    expect(activityNote(RESEND)).toBe('resend')
+    expect(activityNote(INVITE)).toBeUndefined()
+  })
+
+  it('keeps the source note for a transition nobody fired', () => {
+    const drift = event({ id: 'ev-10', state: 'paused', source: 'reconcile' })
+    expect(activityNote(drift)).toBe('detected by drift reconcile')
+  })
+
+  it('renders the two invites for the same person differently', () => {
+    render(<ActivityTimeline activities={toActivityTimelineItems([RESEND, INVITE])} />)
+    const rows = document.querySelectorAll('[data-activity-id]')
+    expect(rows).toHaveLength(2)
+    const first = within(rows[0] as HTMLElement)
+    const second = within(rows[1] as HTMLElement)
+    expect(first.getByText('resend')).toBeInTheDocument()
+    expect(second.queryByText('resend')).toBeNull()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 4. THE COPY states the tab scope, without an unactionable hedge
+// --------------------------------------------------------------------------
+
+describe('the default panel copy', () => {
+  it('no longer hedges about the reader access level', () => {
+    // The default description is a plain statement of what the tab holds. The
+    // permission filtering is invisible and correct by design — naming it only
+    // tells the reader about a constraint they cannot act on.
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    render(
+      <QueryClientProvider client={qc}>
+        <ActivityFeedPanel client={{ list: jest.fn().mockResolvedValue(emptyPage) }} />
+      </QueryClientProvider>,
+    )
+    const panel = within(screen.getByTestId('activity-feed-panel'))
+    expect(panel.queryByText(/access level/i)).toBeNull()
+    expect(panel.getByText(/who did what/i)).toBeInTheDocument()
+  })
+})

package/src/components/activity/activity-events.ts

@@ -9,7 +9,11 @@
  * a humanised sentence with a neutral tone; it never falls through to a wrong
  * label like "State changed", and it is never dropped.
  */
-import type { ActivityTimelineItem, ActivityTone } from '../ActivityTimeline';
+import type {
+  ActivityTimelineActor,
+  ActivityTimelineItem,
+  ActivityTone,
+} from '../ActivityTimeline';
 import type {
   ActivityEvent,
   ActivityFilterOption,
@@ -113,13 +117,87 @@ export function activityHead(
   return (events ?? []).find((e) => actionOf(e) === 'state_changed' && !!e.state);
 }
 
+/** A machine id nobody can read — a UUID. Printing one where a human string
+ *  belongs ("membership · dc0d739f-a622-…") tells the reader nothing, so it is
+ *  the one value this layer refuses to render (startsim-768w.19.8). */
+const OPAQUE_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/**
+ * Generic DESCRIPTOR keys — the names an event uses for "the human string for
+ * the thing I touched". Deliberately a naming convention, NOT a per-action map:
+ * a member invite records `email`, a schema change records `name`, a pipeline
+ * change records `source`/`source_key`, and an event type nobody has written
+ * yet is labelled the moment it records any of them. Nothing here branches on
+ * an action, so registering an event type still needs no UI change.
+ */
+const TARGET_DESCRIPTORS = [
+  'email', 'name', 'title', 'label', 'source', 'source_name',
+  'repo', 'slug', 'path', 'source_key', 'provider_key', 'credential_type',
+];
+
+/**
+ * What this event touched, in words a person can read — the invitee's email,
+ * the source's name, the schema type — resolved from the row's OWN metadata.
+ *
+ * Falls back to `type · id` only for an id a human can actually use (a PR
+ * number), and to the EMPTY STRING for an opaque one. Rendering nothing is
+ * strictly more informative than rendering a UUID.
+ */
+export function activityTarget(event: ActivityEvent): string {
+  const meta = event.metadata ?? {};
+  for (const key of TARGET_DESCRIPTORS) {
+    const value = meta[key];
+    if (typeof value !== 'string') continue;
+    const text = value.trim();
+    if (text && !OPAQUE_ID.test(text)) return text;
+  }
+  const id = String(event.target_id ?? '').trim();
+  if (!id || OPAQUE_ID.test(id)) return '';
+  return [event.target_type, id].filter(Boolean).join(' · ');
+}
+
+/**
+ * The small pill next to the title — the thing that makes two otherwise
+ * identical rows different.
+ *
+ * A RESENT invite is the case that mattered: the same invitee appeared twice
+ * and the second row rendered identically to the first, so a correct trail read
+ * as a duplicated one. `metadata.resend` is the flag the writer already
+ * records; this is where it becomes visible. The lifecycle source notes explain
+ * a state the operator did not fire themselves (startsim-bq7s.1).
+ */
+export function activityNote(event: ActivityEvent): string | undefined {
+  if (event.metadata?.resend === true) return 'resend';
+  return event.source ? SOURCE_NOTE[event.source] : undefined;
+}
+
+/**
+ * The PERSON behind a row — never an org.
+ *
+ * The display name is free text a user typed, so it can read exactly like the
+ * name of a foundry ("QA Foundry"), and a correct feed then looks like
+ * cross-tenant contamination. The email is the one unambiguous handle, so it is
+ * carried alongside the name rather than replaced by it; a `name` that is only
+ * the email echoed back is dropped, because saying it twice is not identity.
+ */
+export function activityActor(event: ActivityEvent): ActivityTimelineActor | undefined {
+  const raw = event.actor ?? (event.actor_email ? { email: event.actor_email } : undefined);
+  if (!raw) return undefined;
+  const email = (raw.email ?? '').trim();
+  const name = (raw.name ?? '').trim();
+  return { ...raw, email: email || undefined, name: name && name !== email ? name : undefined };
+}
+
 /** The body line for a row: the failure message, else the stated reason, else
- *  what was touched. */
+ *  what was touched, in words. */
 function detailOf(event: ActivityEvent): string {
   if (event.error) return event.error;
   if (event.reason) return event.reason;
-  const target = [event.target_type, event.target_id].filter(Boolean).join(' · ');
-  return actionOf(event) === 'state_changed' ? '' : target;
+  // A lifecycle transition already names its outcome in the TITLE, so echoing
+  // the target ("state · live") underneath it is noise. Derived from the row
+  // carrying a state, not from its action string.
+  if (event.state) return '';
+  return activityTarget(event);
 }
 
 /** Map any stream row onto the shared timeline's item shape. Nothing in here
@@ -129,17 +207,16 @@ export function toActivityTimelineItems(
 ): ActivityTimelineItem[] {
   return (events ?? []).map((event) => {
     const tone = activityTone(event);
-    const actor = event.actor ?? (event.actor_email ? { email: event.actor_email } : undefined);
     const detail = detailOf(event);
     return {
       id: event.id,
       type: actionOf(event),
       title: activityLabel(event),
       occurredAt: event.created_at,
-      actor: actor ?? undefined,
+      actor: activityActor(event),
       tone,
       subtitle: event.previous_state && event.state ? `from ${event.previous_state}` : undefined,
-      note: event.source ? SOURCE_NOTE[event.source] : undefined,
+      note: activityNote(event),
       detail: detail || undefined,
       detailTone: event.error ? 'error' : 'muted',
     };

package/src/components/activity/index.ts

@@ -35,6 +35,9 @@ export {
   activityLabel,
   activityTone,
   activityHead,
+  activityActor,
+  activityNote,
+  activityTarget,
   toActivityTimelineItems,
   deriveActivityFilterOptions,
 } from './activity-events';