@lovett/ui 0.0.11 → 0.2.0

package/src/delta-chip.tsx

@@ -0,0 +1,263 @@
+/**
+ * DeltaChip — the period-over-period change chip that sits beside a KPI value.
+ *
+ * Promoted in ADR-146 D5 (stat layer). It subsumes three independent forks
+ * that were all the same `ArrowUp` / `ArrowDown` / `Minus` ternary:
+ *
+ *   • `Delta`  — `components/ui/admin/stat-tile.tsx:10`   (percent, `--success`/`--destructive` ink, no fill)
+ *   • `DeltaChip` — `design-system/spec/shell-preview.tsx:254` (tinted fill, no border, up/down only — no flat)
+ *   • `Trend`  — `components/ui/community/primitives.tsx:117` (absolute count, down painted MUTED not red)
+ *
+ * Between them they cover percent, absolute and flat, so this primitive
+ * covers all three.
+ *
+ * CONSUMERS — measured 2026-09-06 (real `from '@lovett/ui'` imports under
+ * `apps/workspace/src`; the design-system gallery is a demo harness and does
+ * NOT count toward the ADR-008 D3 gate).
+ *   TODAY (1 direct — gate NOT MET):
+ *     • `components/ui/community/leaderboard.tsx` — points trend, absolute
+ *   INDIRECT, and deliberately not counted: `components/ui/admin/stat-tile.tsx`
+ *   renders one, but through `StatCard`'s `delta` prop — it never imports
+ *   `DeltaChip`, so it is not a second direct consumer.
+ *   PLANNED: no second direct consumer is named yet. The `Delta` fork above
+ *   is deleted; the `DeltaChip` fork at `design-system/spec/shell-preview.tsx:254`
+ *   is gallery code and cannot count. Tracked in
+ *   `docs/follow-ups/_pending/adr-146-consumer-gate.md`.
+ *
+ * Migration of the remaining forks is ADR-146 D13
+ * (`converge-delta-chips.md`), not this file's job.
+ *
+ * THREE SIGNALS, NOT ONE — fill + border + ink
+ * --------------------------------------------
+ * The source kit measures a pale tinted fill PLUS a mid-tint border PLUS a
+ * saturated label — three signals, not one (METORIC-ANALYTICS-SPEC §5.2, the
+ * exact values are recorded there). The border is not decoration: a fill-only
+ * chip at ~10% alpha disappears against one of the two surfaces it has to
+ * live on — the white panel (`--surface-card`) and the grey tray
+ * (`--surface-frame`). Two of the three forks above shipped fill-only or
+ * ink-only for exactly this reason and are illegible on one surface each.
+ * Keep all three signals.
+ *
+ * DIRECTION IS NEVER COLOUR ALONE
+ * -------------------------------
+ * The arrow carries direction independently of the hue (ADR-146 D10.1, and
+ * the "don't rely on colour alone" design principle), and an `sr-only` word
+ * carries it for assistive tech. A red/green swap alone would be unreadable
+ * for a deuteranope and silent to a screen reader.
+ *
+ * UP IS NOT ALWAYS GOOD
+ * ---------------------
+ * `invert` exists because roughly half our metrics are cost-shaped — CPA,
+ * CPC, spend, bounce rate, time-to-first-response — where DOWN is the good
+ * outcome. Hardcoding "up is green" is wrong for all of them. `direction`
+ * (the arrow) and tone (the colour) are resolved separately: the arrow
+ * always follows the sign, the colour follows the sign XOR `invert`.
+ *
+ * Token discipline: every colour is a frozen `rgb(var(--token))` literal in
+ * `DELTA_TONE` — no constructed token names (ADR-146 D8), no colour literals.
+ * `--success-bg` / `--destructive-bg` already carry their alpha, so they are
+ * consumed bare and NEVER given a second one; the border alphas hang off the
+ * bare `--success` / `--destructive` triples, which is legal. Geometry is
+ * `--radius-full` + the `--space` scale; the 2px vertical pad the kit
+ * measures is written `calc(var(--space-1) / 2)` so it stays derived from the
+ * scale rather than becoming a magic number.
+ */
+
+import { ArrowDown, ArrowUp, Minus, type LucideIcon } from 'lucide-react'
+import { cn } from './lib/utils'
+import { formatNumber, formatPercent } from './format'
+
+/** Which way the arrow points. Inferred from the sign unless overridden. */
+export type DeltaDirection = 'up' | 'down' | 'flat'
+
+/** How the magnitude is rendered. `percent` appends `%`. */
+export type DeltaFormat = 'percent' | 'absolute'
+
+/** Whether the change reads as good, bad or neither. Never set directly — it
+ *  is derived from `direction` and `invert`. */
+type DeltaTone = 'positive' | 'negative' | 'neutral'
+
+interface DeltaToneStyle {
+  background: string
+  border: string
+  color: string
+}
+
+/**
+ * Frozen literal lookup — the same shape as `metric-card.tsx`'s `TONE_COLOR`.
+ * Never build these strings at runtime: a constructed custom-property name
+ * that misses produces invalid CSS which the browser silently discards, with
+ * every gate green (ADR-146 D8, ENGINEERING-AXES.md:186).
+ */
+/** Whether the direction is an outcome to be judged, or just a direction. */
+export type DeltaSentiment = 'directional' | 'none'
+
+const DELTA_TONE: Record<DeltaTone, DeltaToneStyle> = {
+  positive: {
+    background: 'rgb(var(--success-bg))',
+    border: '1px solid rgb(var(--success) / 0.30)',
+    color: 'rgb(var(--success-ink))',
+  },
+  negative: {
+    background: 'rgb(var(--destructive-bg))',
+    border: '1px solid rgb(var(--destructive) / 0.30)',
+    color: 'rgb(var(--destructive-ink))',
+  },
+  neutral: {
+    background: 'rgb(var(--muted))',
+    border: '1px solid rgb(var(--border))',
+    color: 'rgb(var(--text-secondary))',
+  },
+}
+
+const DELTA_ICON: Record<DeltaDirection, LucideIcon> = {
+  up: ArrowUp,
+  down: ArrowDown,
+  flat: Minus,
+}
+
+/** Spoken direction, so the chip is not colour- or glyph-only for AT. */
+const DELTA_WORD: Record<DeltaDirection, string> = {
+  up: 'Up',
+  down: 'Down',
+  flat: 'No change,',
+}
+
+/**
+ * Direction from the sign OF THE NUMBER WE PRINT, not of the raw input.
+ *
+ * The two disagree whenever a change rounds away at the displayed
+ * precision: `+0.04` at one decimal prints "0.0%", and taking direction
+ * from the raw sign shipped that as a GREEN UP ARROW beside a zero. The
+ * chip would be claiming a rise it is simultaneously reporting as none.
+ * Rounding first makes the glyph, the hue and the numeral agree — which is
+ * the whole point of carrying direction in three channels.
+ *
+ * Non-finite input (NaN from a division by zero, a missing denominator)
+ * reads as flat rather than throwing — the formatters render it as an
+ * em-dash, so the chip degrades to "no change, —".
+ */
+function directionOf(value: number, decimals: number): DeltaDirection {
+  if (!Number.isFinite(value)) return 'flat'
+  const shown = Number(value.toFixed(decimals))
+  if (shown === 0) return 'flat'
+  return shown > 0 ? 'up' : 'down'
+}
+
+function toneOf(
+  direction: DeltaDirection,
+  invert: boolean,
+  sentiment: DeltaSentiment,
+): DeltaTone {
+  if (direction === 'flat') return 'neutral'
+  // Some numbers move without either direction being an outcome. The arrow
+  // still reports WHICH way; the colour declines to judge it.
+  if (sentiment === 'none') return 'neutral'
+  const good = invert ? direction === 'down' : direction === 'up'
+  return good ? 'positive' : 'negative'
+}
+
+export interface DeltaChipProps {
+  /**
+   * The change itself. For `format: 'percent'` this is in PERCENT UNITS, not
+   * a 0-1 fraction — pass `12.5` for "12.5%" (ADR-146 D11; `formatPercent`
+   * takes percent units, `format.ts:57-68`). The sign drives the arrow; the
+   * chip renders the magnitude, so the sign is never printed twice.
+   */
+  value: number
+  /** `'percent'` (default) appends `%`; `'absolute'` renders a plain count. */
+  format?: DeltaFormat
+  /**
+   * Force the arrow. Defaults to the sign of `value`. Override only when the
+   * caller knows something the sign does not — e.g. a rank where "moved from
+   * 4 to 2" is an improvement expressed as a negative number.
+   */
+  direction?: DeltaDirection
+  /**
+   * `true` when DOWN is the good outcome — cost, CPA, CPC, spend, bounce
+   * rate, latency. Flips the colour only; the arrow still follows the sign.
+   */
+  invert?: boolean
+  /**
+   * Whether the direction carries a good/bad judgement at all.
+   *
+   * `'directional'` (default) is the KPI case: up is good, or down is when
+   * `invert` is set. `'none'` renders both directions in the neutral tone —
+   * the arrow still reports which way the number moved, but the colour makes
+   * no claim about it.
+   *
+   * Use `'none'` for counts that simply vary and are attached to a PERSON —
+   * a contributor's monthly total, a volunteer's hours. Painting those
+   * `--destructive` states that someone failed, spends the error channel on
+   * something that is not an error, and is the regression that reverted this
+   * chip's first leaderboard consumer (ADR-146 amendment, phase audit H1).
+   */
+  sentiment?: DeltaSentiment
+  /** Decimal places. Defaults to 1 for percent, 0 for absolute. */
+  decimals?: number
+  /**
+   * Character slot reserved for the numeral so a ticking value cannot resize
+   * the chip (design principles → Layout stability). Sized for the largest
+   * plausible value; the chip still grows past it rather than clipping.
+   * Default 5 — fits "12.5%" and "1,204".
+   */
+  reserveChars?: number
+  /** Optional class override for the outer chip. */
+  className?: string
+}
+
+export function DeltaChip({
+  value,
+  format = 'percent',
+  direction,
+  invert = false,
+  sentiment = 'directional',
+  decimals,
+  reserveChars = 5,
+  className,
+}: DeltaChipProps) {
+  const places = decimals ?? (format === 'percent' ? 1 : 0)
+  const dir = direction ?? directionOf(value, places)
+  const tone = DELTA_TONE[toneOf(dir, invert, sentiment)]
+  const Icon = DELTA_ICON[dir]
+
+  const magnitude = Math.abs(value)
+  // percent units, not a fraction — see `value` above.
+  const text =
+    format === 'percent'
+      ? formatPercent(magnitude, { decimals: places })
+      : formatNumber(magnitude, { decimals: places })
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center shrink-0 align-middle',
+        'text-[12px] font-semibold leading-none tabular-nums',
+        // Colour is the only thing that animates here, and a data change
+        // eases out — never springs (ADR-146 D9). Reduced motion drops it.
+        'transition-colors duration-[var(--dur-base)] ease-[var(--ease-out)]',
+        'motion-reduce:transition-none',
+        className,
+      )}
+      style={{
+        gap: 'var(--space-1)',
+        // 2px/4px in the source kit. 2px is not on the --space scale, so it
+        // is derived from it rather than written as a literal.
+        padding: 'calc(var(--space-1) / 2) var(--space-1)',
+        borderRadius: 'var(--radius-full)',
+        background: tone.background,
+        border: tone.border,
+        color: tone.color,
+      }}
+    >
+      <span className="sr-only">{DELTA_WORD[dir]}</span>
+      <Icon size={16} strokeWidth={2} aria-hidden="true" className="shrink-0" />
+      <span
+        className="text-center"
+        style={{ minWidth: `${reserveChars}ch` }}
+      >
+        {text}
+      </span>
+    </span>
+  )
+}

package/src/detail/__tests__/activity-pane.test.tsx

@@ -0,0 +1,369 @@
+/**
+ * ActivityPane — three tabs, ONE composer.
+ *
+ * The load-bearing test is the last one: the composer must be the SAME element
+ * before and after a tab change, including on Activity. Anything that mounts a
+ * composer per tab passes a "the composer is visible" assertion and still
+ * throws away what you were typing when you glance at the history.
+ */
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ActivityPane } from '../activity-pane'
+import type { ThreadComment } from '../../thread/types'
+import type { ActivityEntry } from '../types'
+
+const NOW = new Date(2026, 8, 15, 12, 0, 0).getTime()
+
+const comments: ThreadComment[] = [
+  {
+    id: 'c1',
+    author: { id: 'u1', name: 'Ada Lovelace' },
+    bodyMd: 'Looks right to me.',
+    createdAt: NOW - 60_000,
+  },
+]
+
+const activity: ActivityEntry[] = [
+  {
+    id: 'a1',
+    at: NOW - 120_000,
+    actor: { id: 'u2', name: 'Grace Hopper' },
+    field: 'Status',
+    from: 'Building',
+    to: 'Review',
+  },
+]
+
+function Host(props: { onSubmit?: (body: string) => void }) {
+  const [draft, setDraft] = useState('')
+  return (
+    <ActivityPane
+      comments={comments}
+      activity={activity}
+      draft={draft}
+      onDraftChange={setDraft}
+      onSubmit={props.onSubmit ?? (() => {})}
+      now={NOW}
+      locale="en-US"
+    />
+  )
+}
+
+function composer(): HTMLElement {
+  return screen.getByRole('textbox', { name: 'Add a comment' })
+}
+
+function panel(name: string): HTMLElement {
+  const node = document.querySelector<HTMLElement>(`[role="tabpanel"][aria-label="${name}"]`)
+  if (node === null) throw new Error(`no ${name} panel`)
+  return node
+}
+
+describe('ActivityPane', () => {
+  it('opens on Everything with both kinds of entry, in time order', () => {
+    render(<Host />)
+    const everything = panel('Everything')
+    expect(everything).toBeVisible()
+    expect(everything).toHaveTextContent('Grace Hopper')
+    expect(everything).toHaveTextContent('changed Status from Building to Review')
+    expect(everything).toHaveTextContent('Looks right to me.')
+  })
+
+  it('shows only the history on Activity', async () => {
+    render(<Host />)
+    await userEvent.click(screen.getByRole('tab', { name: /Activity/ }))
+    expect(panel('Activity')).toBeVisible()
+    expect(panel('Everything')).not.toBeVisible()
+    expect(panel('Activity')).not.toHaveTextContent('Looks right to me.')
+  })
+
+  it('draws exactly one composer, on every tab, and keeps it mounted', async () => {
+    render(<Host />)
+    const first = composer()
+    await userEvent.type(first, 'half a thought')
+
+    for (const tab of ['Comments', 'Activity', 'Everything']) {
+      await userEvent.click(screen.getByRole('tab', { name: new RegExp(tab) }))
+      expect(screen.getAllByRole('textbox', { name: 'Add a comment' })).toHaveLength(1)
+      // The SAME node, with what was typed into it still there.
+      expect(composer()).toBe(first)
+      expect(first).toHaveValue('half a thought')
+    }
+  })
+
+  it('submits the draft as a root comment', async () => {
+    const onSubmit = vi.fn()
+    render(<Host onSubmit={onSubmit} />)
+    await userEvent.type(composer(), 'Shipping this')
+    await userEvent.click(screen.getByRole('button', { name: 'Comment' }))
+    expect(onSubmit).toHaveBeenCalledWith('Shipping this')
+  })
+
+  it('speaks in the interface voice when a tab is empty', async () => {
+    render(
+      <ActivityPane
+        comments={[]}
+        activity={[]}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+        now={NOW}
+      />,
+    )
+    expect(panel('Everything')).toHaveTextContent(
+      'Comments and changes to this record show up together.',
+    )
+    await userEvent.click(screen.getByRole('tab', { name: /Activity/ }))
+    expect(panel('Activity')).toHaveTextContent('Every change to this record is recorded here.')
+  })
+})
+
+/**
+ * A host with no comment backend — Lightwork, and anything else that wants a
+ * history feed without a conversation.
+ *
+ * The pane used to REQUIRE `comments`, `draft`, `onDraftChange` and `onSubmit`,
+ * which meant a host with nowhere to post had two bad options: pass no-op
+ * handlers and ship a composer that silently discards what you type, or fork
+ * the file. One consumer did fork it — 77% duplicated — which is what these
+ * props exist to make unnecessary.
+ */
+describe('without a comment backend', () => {
+  const ACTIVITY = [
+    { id: 'a1', at: 1_700_000_000_000, field: 'Status', from: 'Planned', to: 'Live' },
+  ]
+
+  it('drops the Comments tab rather than rendering it empty', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    expect(screen.getByRole('tab', { name: /everything/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /activity/i })).toBeInTheDocument()
+    expect(screen.queryByRole('tab', { name: /comments/i })).toBeNull()
+  })
+
+  it('draws no composer — there is nowhere to post', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(document.querySelector('[data-slot="activity-composer"]')).toBeNull()
+  })
+
+  it('still shows the history', () => {
+    render(<ActivityPane activity={ACTIVITY} />)
+    // Every panel stays MOUNTED and is hidden rather than unmounted (so a
+    // scroll position and a half-read feed survive a tab change), so the same
+    // entry legitimately appears twice in the DOM. Scope to the visible one.
+    const shown = document.querySelector('[role="tabpanel"]:not([hidden])')
+    expect(shown).not.toBeNull()
+    expect(within(shown as HTMLElement).getByText(/Planned/)).toBeInTheDocument()
+    expect(within(shown as HTMLElement).getByText(/Live/)).toBeInTheDocument()
+  })
+
+  it('never lands on a tab it does not render', () => {
+    // `comments` as the requested tab, with no backend: the pane must fall
+    // back rather than show a panel that was never mounted.
+    render(<ActivityPane activity={ACTIVITY} defaultTab="comments" />)
+    const selected = screen
+      .getAllByRole('tab')
+      .filter((t) => t.getAttribute('aria-selected') === 'true')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]).toHaveTextContent(/everything/i)
+  })
+
+  it('is unchanged for a host that DOES supply a backend', () => {
+    render(
+      <ActivityPane
+        activity={ACTIVITY}
+        comments={[]}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+      />,
+    )
+    expect(screen.getByRole('tab', { name: /comments/i })).toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+})
+
+/**
+ * FU-0019 — the pane is a conduit, and it used to be a leaky one.
+ *
+ * `ActivityPaneProps` declared `onSubmit` and `onReply` and stopped, so three
+ * mutations `<Thread>` already accepted could not be reached through the pane
+ * at all. Nothing errored, which is why it survived a release: `CommentItem`
+ * draws no control for a callback it was not given, so a host shipped an inert
+ * engagement row and a one-line overflow menu while the routes behind them had
+ * no caller anywhere in the browser.
+ *
+ * These assert at the CONTROL, never at the prop. A prop that arrives and
+ * lands nowhere is the same bug one layer further in.
+ */
+describe('ActivityPane — forwarding the thread callbacks', () => {
+  const WIRED: readonly ThreadComment[] = [
+    {
+      id: 'c1',
+      author: { id: 'u1', name: 'Ada Lovelace' },
+      bodyMd: 'Looks right to me.',
+      createdAt: NOW - 60_000,
+      reactions: [{ key: 'up', count: 7, viewerReacted: true }],
+    },
+    {
+      id: 'c-failed',
+      author: { id: 'u2', name: 'Grace Hopper' },
+      bodyMd: 'This one never left the device.',
+      createdAt: NOW - 30_000,
+      state: 'failed',
+      errorText: 'This comment did not send.',
+    },
+  ]
+
+  /** Mounts the pane and opens Comments, which is where `<Thread>` lives. */
+  async function comments(
+    props: Partial<React.ComponentProps<typeof ActivityPane>> = {},
+  ): Promise<HTMLElement> {
+    render(
+      <ActivityPane
+        comments={WIRED}
+        activity={activity}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+        now={NOW}
+        locale="en-US"
+        {...props}
+      />,
+    )
+    await userEvent.click(screen.getByRole('tab', { name: /Comments/ }))
+    return panel('Comments')
+  }
+
+  it('reports a reaction key from the chip the thread drew', async () => {
+    const onReact = vi.fn()
+    const shown = await comments({ onReact })
+    await userEvent.click(within(shown).getByRole('button', { name: 'Agree — 7' }))
+    expect(onReact).toHaveBeenCalledWith('c1', 'up')
+  })
+
+  it('offers a picker, so a reaction can come into existence at all', async () => {
+    const shown = await comments({ onReact: vi.fn() })
+    expect(within(shown).getByRole('button', { name: 'Add a reaction' })).toBeInTheDocument()
+  })
+
+  it('puts Edit and Delete in the overflow menu and reports the comment id', async () => {
+    const onEdit = vi.fn()
+    const onDelete = vi.fn()
+    const shown = await comments({ onEdit, onDelete })
+    await userEvent.click(
+      within(shown).getByRole('button', { name: "More actions for Ada Lovelace's comment" }),
+    )
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Edit' }))
+    expect(onEdit).toHaveBeenCalledWith('c1')
+
+    await userEvent.click(
+      within(shown).getByRole('button', { name: "More actions for Ada Lovelace's comment" }),
+    )
+    const remove = screen.getByRole('menuitem', { name: 'Delete' })
+    expect(remove.getAttribute('data-variant')).toBe('destructive')
+    await userEvent.click(remove)
+    expect(onDelete).toHaveBeenCalledWith('c1')
+  })
+
+  it('recovers a send that failed in its OWN composer', async () => {
+    const onRetry = vi.fn()
+    const shown = await comments({ onRetry })
+    await userEvent.click(within(shown).getByRole('button', { name: 'Try again' }))
+    expect(onRetry).toHaveBeenCalledWith('c-failed')
+  })
+
+  it('draws none of them for a host that wires none — the 0.1.0 render', async () => {
+    const shown = await comments()
+    // What FU-0019 measured in a browser: a written reaction is readable and
+    // inert, and there is no picker, so a reaction can never be created.
+    expect(within(shown).getByRole('button', { name: 'Agree — 7' })).toBeDisabled()
+    expect(within(shown).queryByRole('button', { name: 'Add a reaction' })).toBeNull()
+    expect(within(shown).queryByRole('button', { name: 'Try again' })).toBeNull()
+    // The failure itself is still announced; only the recovery is missing.
+    expect(within(shown).getByText('This comment did not send.')).toBeInTheDocument()
+    // And no overflow menu at all: with no Edit, no Delete, no Copy link and
+    // no clipboard under jsdom, `CommentActions` has nothing to put in one and
+    // renders none. In a real browser it holds exactly one line — "Copy text",
+    // the single item that needs no callback — which is what FU-0019 measured.
+    expect(
+      within(shown).queryByRole('button', { name: "More actions for Ada Lovelace's comment" }),
+    ).toBeNull()
+  })
+})
+
+/**
+ * FU-0032 — the Everything feed draws its own tombstone, and it has to agree
+ * with the one the Comments tab draws for the same comment.
+ */
+describe('ActivityPane — a moderated comment in the merged feed', () => {
+  // One tombstone, two removals. Derived from a single base so the ONLY
+  // difference between the two renders is the field under test.
+  const BASE: ThreadComment = {
+    id: 'c-mod',
+    author: { id: 'u1', name: 'Ada Lovelace' },
+    bodyMd: '',
+    createdAt: NOW - 60_000,
+    deletedAt: NOW - 30_000,
+  }
+
+  const REMOVED: readonly ThreadComment[] = [{ ...BASE, moderated: true }]
+  const SELF: readonly ThreadComment[] = [{ ...BASE, id: 'c-self', moderated: false }]
+
+  function feed(list: readonly ThreadComment[]): HTMLElement {
+    render(
+      <ActivityPane
+        comments={list}
+        activity={[]}
+        draft=""
+        onDraftChange={() => {}}
+        onSubmit={() => {}}
+        now={NOW}
+      />,
+    )
+    return panel('Everything')
+  }
+
+  it('says an admin removed it', () => {
+    expect(feed(REMOVED)).toHaveTextContent('Comment removed by an admin')
+  })
+
+  it('still says "Comment deleted" for an author\'s own delete', () => {
+    const shown = feed(SELF)
+    expect(shown).toHaveTextContent('Comment deleted')
+    expect(shown).not.toHaveTextContent('removed')
+  })
+
+  /**
+   * The feed WITHHOLDS the author of a tombstone, exactly as the thread does.
+   *
+   * Found in review. `FeedLine` was given `author` unconditionally, so the
+   * Everything tab printed "Ada Lovelace commented" beside "Comment removed by
+   * an admin" while the Comments tab one click away replaced her byline with
+   * `[removed]` and dropped her avatar to `?`. The same comment answered "who
+   * wrote this" two different ways depending on which tab you were on.
+   *
+   * It was harmless while the line read "Comment deleted" — a deletion nobody
+   * had to account for. FU-0032 is what made it matter: a name beside "removed
+   * by an admin" is a per-author public record of who got moderated, readable
+   * by everyone in the workspace, and it is the one fact the thread render
+   * deliberately refuses to publish.
+   *
+   * Asserted for BOTH removals, because the leak was never specific to
+   * moderation — only its consequence was.
+   */
+  it('withholds the author of a tombstone, on both kinds of removal', () => {
+    expect(feed(REMOVED)).not.toHaveTextContent('Ada Lovelace')
+    cleanup()
+    expect(feed(SELF)).not.toHaveTextContent('Ada Lovelace')
+  })
+
+  it('still names the author of a comment that is NOT a tombstone', () => {
+    const live: readonly ThreadComment[] = [
+      { ...BASE, id: 'c-live', deletedAt: null, bodyMd: 'Still here.' },
+    ]
+    expect(feed(live)).toHaveTextContent('Ada Lovelace')
+  })
+})