@startsimpli/ui 0.4.77 → 0.4.79

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

@@ -0,0 +1,434 @@
+/**
+ * startsim-768w.19.5.1 (RED) — the shared, filterable activity feed.
+ *
+ * The control plane's Activity tab is an app-local list: no filters, no
+ * grouping, no reuse, and an event type the UI has never heard of renders as
+ * "State changed". This suite is the spec for moving all of that into
+ * packages/ui as a primitive (ActivityTimeline, generalised) PLUS a page-level
+ * composer (ActivityFeedPanel) — rule #9.
+ *
+ * THE DESIGN GUARD, stated once: the UI makes NO visibility decisions. The
+ * stream endpoint already filtered by the caller's resolved permission level,
+ * so a row that arrives is renderable, and an action string the UI does not
+ * know renders with a humanised label. Registering a new event type must need
+ * zero UI changes.
+ */
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { ActivityTimeline } from '../../ActivityTimeline'
+import {
+  ActivityFeedPanel,
+  ActivityFilterBar,
+  activityHead,
+  activityLabel,
+  activityTone,
+  deriveActivityFilterOptions,
+  toActivityTimelineItems,
+  type ActivityEvent,
+  type ActivityFilterValue,
+  type ActivityPage,
+} from '../index'
+
+// --------------------------------------------------------------------------
+// helpers
+// --------------------------------------------------------------------------
+
+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,
+  }
+}
+
+function page(results: ActivityEvent[], over: Partial<ActivityPage> = {}): ActivityPage {
+  return { count: results.length, next: null, previous: null, results, ...over }
+}
+
+function withQuery(ui: React.ReactElement) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>)
+}
+
+/** Scope a query to the rendered rows. The filter bar derives its options from
+ *  the same rows, so an unscoped `getByText('Member invited')` would match both
+ *  the row and its <option>. */
+function timeline() {
+  return within(screen.getByTestId('activity-timeline'))
+}
+async function findInTimeline(text: string) {
+  await waitFor(() => expect(timeline().getByText(text)).toBeInTheDocument())
+  return timeline().getByText(text)
+}
+
+/** Capture the IntersectionObserver callback so a test can "scroll" the
+ *  sentinel into view without a layout engine. */
+function stubIntersectionObserver() {
+  const calls: Array<() => void> = []
+  class IO {
+    constructor(private cb: IntersectionObserverCallback) {
+      calls.push(() => this.cb(
+        [{ isIntersecting: true } as IntersectionObserverEntry],
+        this as unknown as IntersectionObserver,
+      ))
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() { return [] }
+    root = null
+    rootMargin = ''
+    thresholds = []
+  }
+  ;(globalThis as unknown as { IntersectionObserver: unknown }).IntersectionObserver = IO
+  return { intersect: () => calls.forEach((f) => f()) }
+}
+
+// --------------------------------------------------------------------------
+// 2. ActivityTimeline serves BOTH shapes (generalised, not forked)
+// --------------------------------------------------------------------------
+
+describe('ActivityTimeline (generalised)', () => {
+  it('renders an event-stream item that has none of the CRM fields', () => {
+    const { container } = render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: 'e1',
+            type: 'member_invited',
+            title: 'Member invited',
+            occurredAt: '2026-07-20T12:00:00Z',
+            actor: { id: 'u1', name: 'Ada Lovelace', email: 'ada@x.com' },
+            tone: 'ok',
+            detail: 'nordby@ogmc.ai',
+          },
+        ]}
+      />,
+    )
+    expect(screen.getByText('Member invited')).toBeInTheDocument()
+    // Actor identity, not a bare email string.
+    expect(screen.getByText('Ada Lovelace')).toBeInTheDocument()
+    expect(screen.getByText('AL')).toBeInTheDocument()
+    expect(screen.getByText('nordby@ogmc.ai')).toBeInTheDocument()
+    // The tone is addressable so a host can style/assert it.
+    expect(container.querySelector('[data-tone="ok"]')).not.toBeNull()
+  })
+
+  it('still renders the CRM shape apps/market passes today', () => {
+    render(
+      <ActivityTimeline
+        loading={false}
+        activities={[
+          {
+            id: 'a1',
+            type: 'call',
+            title: 'Discovery call',
+            description: 'Talked pricing',
+            occurredAt: '2026-07-20T12:00:00Z',
+            createdBy: { name: 'Rep One' },
+            durationMinutes: 30,
+            outcome: 'connected',
+            participants: [{ name: 'Buyer' }],
+          },
+        ]}
+      />,
+    )
+    expect(screen.getByText('Discovery call')).toBeInTheDocument()
+    expect(screen.getByText('Rep One')).toBeInTheDocument()
+    expect(screen.getByText('30m')).toBeInTheDocument()
+    expect(screen.getByText('connected')).toBeInTheDocument()
+  })
+
+  it('groups entries under day headings when asked', () => {
+    render(
+      <ActivityTimeline
+        groupByDay
+        activities={[
+          { id: 'e1', type: 'x', title: 'Newer', occurredAt: '2026-07-21T12:00:00Z' },
+          { id: 'e2', type: 'x', title: 'Older', occurredAt: '2026-07-20T12:00:00Z' },
+        ]}
+      />,
+    )
+    const headings = screen.getAllByTestId('activity-day-heading').map((n) => n.textContent)
+    expect(headings).toHaveLength(2)
+    expect(headings[0]).toMatch(/Jul 21/)
+    expect(headings[1]).toMatch(/Jul 20/)
+  })
+
+  it('calls onLoadMore when the scroll sentinel comes into view', () => {
+    const io = stubIntersectionObserver()
+    const onLoadMore = jest.fn()
+    render(
+      <ActivityTimeline
+        autoLoadMore
+        hasMore
+        onLoadMore={onLoadMore}
+        activities={[{ id: 'e1', type: 'x', title: 'One', occurredAt: '2026-07-20T12:00:00Z' }]}
+      />,
+    )
+    io.intersect()
+    expect(onLoadMore).toHaveBeenCalled()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 5. DESIGN GUARD — an UNKNOWN action renders
+// --------------------------------------------------------------------------
+
+describe('activityLabel / activityTone (widened)', () => {
+  it('humanises an action the UI has never heard of instead of saying "State changed"', () => {
+    const e = event({ id: 'e1', action: 'pipeline_source_paused', type: 'pipeline_source_paused' })
+    expect(activityLabel(e)).toBe('Pipeline source paused')
+    expect(activityLabel(e)).not.toBe('State changed')
+    // Neutral, not an error, not a lie.
+    expect(activityTone(e)).toBe('muted')
+  })
+
+  it('keeps the richer lifecycle rendering', () => {
+    expect(activityLabel(event({ id: '1', state: 'live', previous_state: 'provisioning' }))).toBe('Live')
+    expect(activityLabel(event({ id: '2', state: 'draft' }))).toBe('Created')
+    expect(
+      activityLabel(event({ id: '3', action: 'lifecycle_failed', type: 'lifecycle_failed', run_kind: 'provision' })),
+    ).toBe('Provision failed')
+    expect(activityTone(event({ id: '4', state: 'live' }))).toBe('ok')
+    expect(activityTone(event({ id: '5', state: 'paused' }))).toBe('warn')
+    expect(activityTone(event({ id: '6', action: 'lifecycle_failed', type: 'lifecycle_failed' }))).toBe('error')
+  })
+
+  it('activityHead is the newest state transition, skipping every other class', () => {
+    const head = activityHead([
+      event({ id: 'e1', action: 'member_invited', type: 'member_invited' }),
+      event({ id: 'e2', state: 'live' }),
+      event({ id: 'e3', state: 'draft' }),
+    ])
+    expect(head?.id).toBe('e2')
+  })
+
+  it('maps any event to a timeline item without knowing its type', () => {
+    const [item] = toActivityTimelineItems([
+      event({
+        id: 'e9',
+        action: 'brand_new_never_seen',
+        type: 'brand_new_never_seen',
+        actor: { id: 'u1', email: 'ada@x.com', name: 'Ada Lovelace' },
+      }),
+    ])
+    expect(item.title).toBe('Brand new never seen')
+    expect(item.actor?.name).toBe('Ada Lovelace')
+    expect(item.tone).toBe('muted')
+  })
+})
+
+// --------------------------------------------------------------------------
+// 3. ActivityFilterBar
+// --------------------------------------------------------------------------
+
+describe('ActivityFilterBar', () => {
+  const options = deriveActivityFilterOptions([
+    event({
+      id: 'e1',
+      action: 'member_invited',
+      type: 'member_invited',
+      actor: { id: 'u1', email: 'ada@x.com', name: 'Ada Lovelace' },
+    }),
+    event({ id: 'e2', action: 'state_changed', type: 'state_changed', state: 'live' }),
+  ])
+
+  it('derives its options from the rows the user actually received', () => {
+    expect(options.actions.map((o) => o.value).sort()).toEqual(['member_invited', 'state_changed'])
+    expect(options.actions.find((o) => o.value === 'member_invited')?.label).toBe('Member invited')
+    expect(options.actors).toEqual([{ value: 'u1', label: 'Ada Lovelace' }])
+  })
+
+  it('emits the whole next value on every control', () => {
+    const onChange = jest.fn()
+    render(<ActivityFilterBar value={{}} onChange={onChange} {...options} />)
+
+    fireEvent.change(screen.getByLabelText('Filter by person'), { target: { value: 'u1' } })
+    expect(onChange).toHaveBeenLastCalledWith({ actor: 'u1' })
+
+    fireEvent.change(screen.getByLabelText('Filter by event'), { target: { value: 'member_invited' } })
+    expect(onChange).toHaveBeenLastCalledWith({ action: 'member_invited' })
+
+    fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-07-20' } })
+    expect(onChange).toHaveBeenLastCalledWith({ since: '2026-07-20T00:00:00.000Z' })
+
+    fireEvent.change(screen.getByLabelText('To date'), { target: { value: '2026-07-21' } })
+    expect(onChange).toHaveBeenLastCalledWith({ until: '2026-07-21T23:59:59.999Z' })
+
+    fireEvent.change(screen.getByLabelText('Search activity'), { target: { value: 'invite' } })
+    expect(onChange).toHaveBeenLastCalledWith({ q: 'invite' })
+  })
+
+  it('renders a removable chip per active filter, plus clear-all', () => {
+    const value: ActivityFilterValue = {
+      actor: 'u1',
+      action: 'member_invited',
+      since: '2026-07-20T00:00:00.000Z',
+    }
+    const onChange = jest.fn()
+    render(<ActivityFilterBar value={value} onChange={onChange} {...options} />)
+
+    const chips = within(screen.getByTestId('activity-active-filters'))
+    expect(chips.getByText(/Person: Ada Lovelace/)).toBeInTheDocument()
+    expect(chips.getByText(/Event: Member invited/)).toBeInTheDocument()
+    expect(chips.getByText(/From Jul 20, 2026/)).toBeInTheDocument()
+
+    fireEvent.click(screen.getByLabelText('Remove filter: person'))
+    expect(onChange).toHaveBeenLastCalledWith({ action: 'member_invited', since: '2026-07-20T00:00:00.000Z' })
+
+    fireEvent.click(screen.getByRole('button', { name: /clear all/i }))
+    expect(onChange).toHaveBeenLastCalledWith({})
+  })
+
+  it('shows no chips and no clear-all when nothing is filtered', () => {
+    render(<ActivityFilterBar value={{}} onChange={jest.fn()} {...options} />)
+    expect(screen.queryByRole('button', { name: /clear all/i })).toBeNull()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 4. ActivityFeedPanel — THE page composer
+// --------------------------------------------------------------------------
+
+describe('ActivityFeedPanel', () => {
+  const rows = [
+    event({
+      id: 'e1',
+      action: 'member_invited',
+      type: 'member_invited',
+      actor: { id: 'u1', email: 'ada@x.com', name: 'Ada Lovelace' },
+      created_at: '2026-07-21T12:00:00Z',
+    }),
+    event({ id: 'e2', state: 'live', previous_state: 'provisioning', created_at: '2026-07-20T12:00:00Z' }),
+  ]
+
+  it('calls the injected client and renders the rows under day headings', async () => {
+    const list = jest.fn().mockResolvedValue(page(rows))
+    withQuery(<ActivityFeedPanel client={{ list }} />)
+
+    await findInTimeline('Member invited')
+    expect(timeline().getByText('Live')).toBeInTheDocument()
+    expect(screen.getAllByTestId('activity-day-heading')).toHaveLength(2)
+    expect(list).toHaveBeenCalledWith(expect.objectContaining({ page: 1 }))
+  })
+
+  it('re-queries the server when a filter changes (never client-filters)', async () => {
+    const list = jest.fn().mockResolvedValue(page(rows))
+    withQuery(<ActivityFeedPanel client={{ list }} />)
+    await findInTimeline('Member invited')
+
+    fireEvent.change(screen.getByLabelText('Filter by event'), { target: { value: 'member_invited' } })
+
+    await waitFor(() =>
+      expect(list).toHaveBeenCalledWith(expect.objectContaining({ action: 'member_invited', page: 1 })),
+    )
+  })
+
+  it('pages the real paginated endpoint through onLoadMore', async () => {
+    const io = stubIntersectionObserver()
+    const list = jest
+      .fn()
+      .mockResolvedValueOnce(page([rows[0]], { count: 2, next: 'http://x/?page=2' }))
+      .mockResolvedValueOnce(page([rows[1]], { count: 2, previous: 'http://x/?page=1' }))
+    withQuery(<ActivityFeedPanel client={{ list }} />)
+    await findInTimeline('Member invited')
+
+    io.intersect()
+
+    await waitFor(() => expect(list).toHaveBeenCalledWith(expect.objectContaining({ page: 2 })))
+    await findInTimeline('Live')
+  })
+
+  it('separates empty, filtered-empty and error into three distinct states', async () => {
+    const empty = jest.fn().mockResolvedValue(page([]))
+    const { unmount } = withQuery(<ActivityFeedPanel client={{ list: empty }} />)
+    expect(await screen.findByText(/nothing recorded yet/i)).toBeInTheDocument()
+    unmount()
+
+    const filtered = jest.fn().mockResolvedValue(page([]))
+    const { unmount: u2 } = withQuery(<ActivityFeedPanel client={{ list: filtered }} />)
+    await screen.findByText(/nothing recorded yet/i)
+    fireEvent.change(screen.getByLabelText('Search activity'), { target: { value: 'zzz' } })
+    expect(await screen.findByText(/no activity matches these filters/i)).toBeInTheDocument()
+    u2()
+
+    const boom = jest.fn().mockRejectedValue(new Error('boom'))
+    withQuery(<ActivityFeedPanel client={{ list: boom }} />)
+    expect(await screen.findByRole('alert')).toHaveTextContent(/boom|could not load/i)
+  })
+
+  it('renders every action it receives — there is no allowlist', async () => {
+    const list = jest.fn().mockResolvedValue(
+      page([
+        event({ id: 'a', action: 'schema_type_created', type: 'schema_type_created' }),
+        event({ id: 'b', action: 'user_logged_in', type: 'user_logged_in' }),
+        event({ id: 'c', action: 'wildly_new_thing', type: 'wildly_new_thing' }),
+      ]),
+    )
+    withQuery(<ActivityFeedPanel client={{ list }} />)
+    await findInTimeline('Schema type created')
+    expect(timeline().getByText('User logged in')).toBeInTheDocument()
+    expect(timeline().getByText('Wildly new thing')).toBeInTheDocument()
+  })
+
+  it('hands the loaded rows to the host footer (the reconcile invariant surface)', async () => {
+    const list = jest.fn().mockResolvedValue(page(rows))
+    withQuery(
+      <ActivityFeedPanel
+        client={{ list }}
+        renderFooter={(events) => <span>head:{activityHead(events)?.state ?? 'none'}</span>}
+      />,
+    )
+    expect(await screen.findByText('head:live')).toBeInTheDocument()
+  })
+})
+
+// --------------------------------------------------------------------------
+// 6. DESIGN GUARD — no client-side visibility logic anywhere in this layer
+// --------------------------------------------------------------------------
+
+describe('design guard: the UI decides nothing about visibility', () => {
+  it('has no role check, no permission branch and no action allowlist in source', () => {
+    const dir = path.resolve(__dirname, '..')
+    const sources = fs
+      .readdirSync(dir)
+      .filter((f) => /\.tsx?$/.test(f))
+      .map((f) => ({ f, src: fs.readFileSync(path.join(dir, f), 'utf8') }))
+
+    expect(sources.length).toBeGreaterThan(0)
+    const banned = [
+      /is_org_admin/,
+      /isOrgAdmin/,
+      /hasPermission/,
+      /canManage/,
+      /accessLevel/,
+      /resolve_level/,
+      /\brole\s*===/,
+      /VISIBLE_ACTIONS/,
+      /ALLOWED_ACTIONS/,
+      /ACTIVITY_ACTIONS/,
+    ]
+    for (const { f, src } of sources) {
+      for (const re of banned) {
+        expect(`${f}:${re.source}:${re.test(src)}`).toBe(`${f}:${re.source}:false`)
+      }
+    }
+  })
+})

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

@@ -0,0 +1,179 @@
+/**
+ * Rendering an event stream WITHOUT knowing which event types exist.
+ *
+ * This is the whole point of startsim-768w.19.5: the backend registers a new
+ * event type as a constant plus a permission codename, and the UI must not have
+ * to change. So there is no vocabulary here — the lifecycle rows get a richer
+ * rendering because they carry extra fields, and everything else is derived
+ * from the action string's own shape. An action nobody has ever seen renders as
+ * 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 {
+  ActivityEvent,
+  ActivityFilterOption,
+  ActivityFilterOptions,
+} from './types';
+
+/** Marker dot classes by tone — for hosts rendering their own compact list. */
+export const TONE_DOT: Record<ActivityTone, string> = {
+  ok: 'bg-emerald-500',
+  warn: 'bg-amber-500',
+  error: 'bg-red-500',
+  muted: 'bg-muted-foreground/40',
+};
+
+/** Where a status event came from, in words. `orchestrator` is the ordinary
+ *  case and needs no badge; the others explain a state the operator did not
+ *  fire themselves (startsim-bq7s.1). */
+export const SOURCE_NOTE: Record<string, string> = {
+  reconcile: 'detected by drift reconcile',
+  out_of_band: 'changed outside the control plane',
+  backfill: 'recorded when status tracking shipped',
+};
+
+const STATE_LABELS: Record<string, string> = {
+  draft: 'Draft',
+  provisioning: 'Provisioning',
+  live: 'Live',
+  paused: 'Paused',
+  archived: 'Archived',
+  deleted: 'Deleted',
+};
+
+/** Sentence-case a raw action: `member_invited` -> `Member invited`. */
+export function humanizeAction(action: string): string {
+  const words = String(action ?? '').replace(/[_.]+/g, ' ').trim();
+  return words ? `${words.charAt(0).toUpperCase()}${words.slice(1)}` : 'Event';
+}
+
+/** The raw action of an event, whichever name the stream uses for it. */
+export function actionOf(event: ActivityEvent): string {
+  return (event.action || event.type || '').trim();
+}
+
+/** Human label for one row: the state a transition produced, the run that
+ *  failed, or — for every other type, known or not — the action itself. */
+export function activityLabel(event: ActivityEvent): string {
+  const action = actionOf(event);
+
+  if (action === 'lifecycle_failed') {
+    const kind = (event.run_kind ?? '').replace(/_/g, ' ').trim();
+    return kind ? `${kind.charAt(0).toUpperCase()}${kind.slice(1)} failed` : 'Run failed';
+  }
+
+  if (action === 'state_changed') {
+    if (!event.state) return 'State changed';
+    // The very first transition is the foundry coming into existence, not a
+    // move "to draft" — say so.
+    if (event.state === 'draft' && !event.previous_state) return 'Created';
+    return STATE_LABELS[event.state] ?? event.state;
+  }
+
+  return humanizeAction(action);
+}
+
+/**
+ * Severity of a row, for the marker.
+ *
+ * Derived from MORPHOLOGY, not from a list of known actions: a lifecycle row
+ * uses the state it produced, and anything else is read off the verb at the end
+ * of the action string. An action whose verb is unrecognised is `muted` — the
+ * honest answer, and the reason a new event type needs no change here.
+ */
+export function activityTone(event: ActivityEvent): ActivityTone {
+  const action = actionOf(event);
+
+  if (/(^|_)(failed|failure|error|errored)$/.test(action)) return 'error';
+
+  switch (event.state) {
+    case 'live':
+      return 'ok';
+    case 'paused':
+    case 'archived':
+      return 'warn';
+    case 'deleted':
+      return 'error';
+    default:
+      break;
+  }
+
+  if (/_(removed|deleted|revoked|expired|denied|rejected)$/.test(action)) return 'warn';
+  if (/_(created|added|invited|activated|succeeded|completed|deployed)$/.test(action)) return 'ok';
+  return 'muted';
+}
+
+/** The newest state transition in the stream — the entry that must agree with
+ *  the state badge. Every other class is skipped: a failed run, a member invite
+ *  or a branding edit does not define a state. */
+export function activityHead(
+  events: ActivityEvent[] | undefined,
+): ActivityEvent | undefined {
+  return (events ?? []).find((e) => actionOf(e) === 'state_changed' && !!e.state);
+}
+
+/** The body line for a row: the failure message, else the stated reason, else
+ *  what was touched. */
+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;
+}
+
+/** Map any stream row onto the shared timeline's item shape. Nothing in here
+ *  branches on a known type. */
+export function toActivityTimelineItems(
+  events: ActivityEvent[] | undefined,
+): 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,
+      tone,
+      subtitle: event.previous_state && event.state ? `from ${event.previous_state}` : undefined,
+      note: event.source ? SOURCE_NOTE[event.source] : undefined,
+      detail: detail || undefined,
+      detailTone: event.error ? 'error' : 'muted',
+    };
+  });
+}
+
+function byLabel(a: ActivityFilterOption, b: ActivityFilterOption): number {
+  return a.label.localeCompare(b.label);
+}
+
+/**
+ * Filter options derived from the rows the user ACTUALLY RECEIVED — never from
+ * a hardcoded vocabulary. Offering a facet the caller's level can never return
+ * would leak the existence of events they may not see; deriving it cannot.
+ */
+export function deriveActivityFilterOptions(
+  events: ActivityEvent[] | undefined,
+): ActivityFilterOptions {
+  const actors = new Map<string, string>();
+  const actions = new Map<string, string>();
+
+  for (const event of events ?? []) {
+    const action = actionOf(event);
+    if (action && !actions.has(action)) actions.set(action, humanizeAction(action));
+
+    const actor = event.actor;
+    const value = actor?.id || actor?.email || event.actor_email || '';
+    if (!value) continue;
+    const label = (actor?.name || actor?.email || event.actor_email || value) as string;
+    if (!actors.has(value)) actors.set(value, label);
+  }
+
+  return {
+    actors: [...actors].map(([value, label]) => ({ value, label })).sort(byLabel),
+    actions: [...actions].map(([value, label]) => ({ value, label })).sort(byLabel),
+  };
+}

package/src/components/activity/activity-feed-panel-default-class-names.ts

@@ -0,0 +1,31 @@
+/** Default Tailwind classes for {@link ActivityFeedPanel}. startsim-768w.19.5.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
+import type { ActivityFilterBarClassNames } from './activity-filter-bar-default-class-names'
+
+export interface ActivityFeedPanelClassNames {
+  root?: string
+  header?: string
+  heading?: string
+  title?: string
+  description?: string
+  filters?: string
+  body?: string
+  footer?: string
+  countLine?: string
+  /** Forwarded so an app still overrides one map. */
+  filterBar?: ActivityFilterBarClassNames
+}
+
+export const ACTIVITY_FEED_PANEL_DEFAULTS: Required<
+  Omit<ActivityFeedPanelClassNames, 'filterBar'>
+> = {
+  root: 'rounded-lg border border-border bg-card',
+  header: 'flex flex-wrap items-start justify-between gap-2 border-b border-border px-5 py-3',
+  heading: 'space-y-1',
+  title: 'font-medium text-foreground',
+  description: 'text-xs text-muted-foreground',
+  filters: 'border-b border-border px-5 py-3',
+  body: 'max-h-[32rem] overflow-y-auto px-5 py-4',
+  footer: 'border-t border-border px-5 py-3 text-sm',
+  countLine: 'border-t border-border px-5 py-2 text-xs text-muted-foreground',
+}

package/src/components/activity/activity-filter-bar-default-class-names.ts

@@ -0,0 +1,34 @@
+/** Default Tailwind classes for {@link ActivityFilterBar}. startsim-768w.19.5.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
+
+export interface ActivityFilterBarClassNames {
+  root?: string
+  controls?: string
+  search?: string
+  select?: string
+  date?: string
+  dateGroup?: string
+  dateSeparator?: string
+  chips?: string
+  chip?: string
+  chipRemove?: string
+  clearAll?: string
+}
+
+export const ACTIVITY_FILTER_BAR_DEFAULTS: Required<ActivityFilterBarClassNames> = {
+  root: 'space-y-2',
+  controls: 'flex flex-wrap items-center gap-2',
+  search:
+    'h-8 min-w-[10rem] flex-1 rounded-md border border-input bg-background px-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+  select:
+    'h-8 rounded-md border border-input bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+  dateGroup: 'flex items-center gap-1',
+  date:
+    'h-8 rounded-md border border-input bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+  dateSeparator: 'text-xs text-muted-foreground',
+  chips: 'flex flex-wrap items-center gap-1.5',
+  chip:
+    'inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground',
+  chipRemove: 'rounded-full px-0.5 text-muted-foreground transition-colors hover:text-foreground',
+  clearAll: 'text-xs text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline',
+}