@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/custom/ActiveWork/CoChangeChip.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { CoChangeChip } from './CoChangeChip'
+
+const meta: Meta<typeof CoChangeChip> = {
+  title: 'Custom/ActiveWork/CoChangeChip',
+  component: CoChangeChip,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Molecule.** One symmetric "these two files change together" pair. Only basenames are ' +
+          'shown — at chip size the directory is noise. Composes ' +
+          '[Card](?path=/docs/components-molecules-card--docs), ' +
+          '[Pill](?path=/docs/components-atoms-pill--docs) and ' +
+          '[FilePathLabel](?path=/docs/custom-activework-filepathlabel--docs). ' +
+          'Used by [FileHistoryExplorer](?path=/docs/custom-activework-filehistoryexplorer--docs).',
+      },
+    },
+  },
+  args: {
+    a: 'src/commands/open.ts',
+    b: 'src/commands/_open-helpers.ts',
+    count: 19,
+  },
+}
+export default meta
+type Story = StoryObj<typeof CoChangeChip>
+
+export const Default: Story = {}
+
+/** A weak pair — the count pill is the only thing distinguishing it. */
+export const WeakPair: Story = {
+  args: { a: 'src/utils/fs-atomic.ts', b: 'src/utils/flock.ts', count: 2 },
+}

package/src/components/custom/ActiveWork/CoChangeChip.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { CoChangeChip } from './CoChangeChip'
+
+describe('CoChangeChip', () => {
+  it('renders both basenames and the count', () => {
+    render(<CoChangeChip a="src/commands/open.ts" b="src/registry/index.ts" count={19} />)
+    expect(screen.getByText('open.ts')).toBeInTheDocument()
+    expect(screen.getByText('index.ts')).toBeInTheDocument()
+    expect(screen.getByText('19×')).toBeInTheDocument()
+  })
+
+  it('hides the directory prefixes', () => {
+    render(<CoChangeChip a="src/commands/open.ts" b="src/registry/index.ts" count={19} />)
+    expect(screen.queryByText('src/commands/')).not.toBeInTheDocument()
+    expect(screen.queryByText('src/registry/')).not.toBeInTheDocument()
+  })
+
+  it('describes the pair for screen readers', () => {
+    render(<CoChangeChip a="a.ts" b="b.ts" count={3} />)
+    expect(screen.getByLabelText('a.ts and b.ts changed together 3 times')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<CoChangeChip a="a.ts" b="b.ts" count={3} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/ActiveWork/CoChangeChip.tsx

@@ -0,0 +1,48 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View } from 'react-native'
+import { Card } from '../../ui/card'
+import { Pill } from '../../ui/pill'
+import { Typography } from '../Typography'
+import { FilePathLabel } from './FilePathLabel'
+
+export interface CoChangeChipProps {
+  /** One side of the pair. */
+  a: string
+  /** The other side. Order is not meaningful — co-change is symmetric. */
+  b: string
+  /** How many sessions changed both files. */
+  count: number
+  className?: string
+}
+
+/**
+ * CoChangeChip — one symmetric "these two files change together" pair.
+ *
+ * Only basenames are shown: at chip size the directory is noise, and the pair
+ * is a pointer into {@link FileActivityDetail} rather than a full identifier.
+ * Used by {@link FileHistoryExplorer}'s repo-wide co-change strip.
+ *
+ * @deprecated Use `<Pill tone="brand" size="xs">` — removed after AW-127 consumer migration.
+ */
+export function CoChangeChip({ a, b, count, className }: CoChangeChipProps) {
+  return (
+    <Card
+      variant="filled"
+      className={`gap-1 p-2.5 ${className ?? ''}`}
+      accessibilityRole="text"
+      accessibilityLabel={`${a} and ${b} changed together ${count} times`}
+      testID="co-change-chip"
+    >
+      <View className="flex-row items-center gap-2">
+        <FilePathLabel path={a} size="sm" baseOnly />
+        <Typography variant="caption" className="text-text-tertiary">
+          ↔
+        </Typography>
+        <FilePathLabel path={b} size="sm" baseOnly />
+        <Pill variant="subtle" color="primary" size="xs">
+          {`${count}×`}
+        </Pill>
+      </View>
+    </Card>
+  )
+}

package/src/components/custom/ActiveWork/Eyebrow.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Eyebrow } from './Eyebrow'
+
+const meta: Meta<typeof Eyebrow> = {
+  title: 'Components/Molecules/Eyebrow',
+  component: Eyebrow,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { children: 'Focused · by rank' },
+  argTypes: {
+    children: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** An uppercase micro-label used above a value or a section of ' +
+          "content. Composes [Typography](?path=/docs/foundations-typography--docs)'s `overline` variant.",
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Eyebrow>
+
+export const Default: Story = {}

package/src/components/custom/ActiveWork/Eyebrow.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Eyebrow } from './Eyebrow'
+
+describe('Eyebrow', () => {
+  it('renders its children', () => {
+    render(<Eyebrow>Focused · by rank</Eyebrow>)
+    expect(screen.getByText('Focused · by rank')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Eyebrow>Backburner</Eyebrow>)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/ActiveWork/Eyebrow.tsx

@@ -0,0 +1,26 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ReactNode } from 'react'
+import { cn } from '../../../utils/cn'
+import { Typography } from '../Typography'
+
+export interface EyebrowProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Eyebrow — an uppercase micro-label used above a value or a section of
+ * content (e.g. "Focused · by rank", a stat tile's caption). Composes
+ * {@link Typography}'s `overline` variant; never hand-roll the letter-spacing.
+ */
+export function Eyebrow({ children, className }: EyebrowProps) {
+  return (
+    <Typography
+      variant="overline"
+      color="inherit"
+      className={cn('text-xs font-semibold uppercase tracking-wider text-text-tertiary', className)}
+    >
+      {children}
+    </Typography>
+  )
+}

package/src/components/custom/ActiveWork/FileActivityDetail.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { FileActivityDetail } from './FileActivityDetail'
+import { FILE_HISTORY_FILES } from './file-history-fixture'
+
+const meta: Meta<typeof FileActivityDetail> = {
+  title: 'Custom/ActiveWork/FileActivityDetail',
+  component: FileActivityDetail,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen w-full max-w-[560px] p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          "**Card.** One file's full mined history: activity split, net char growth over " +
+          'sessions, and the files it changes together with. Composes ' +
+          '[Card](?path=/docs/components-molecules-card--docs), ' +
+          '[Tile](?path=/docs/components-atoms-tile--docs), ' +
+          '[Pill](?path=/docs/components-atoms-pill--docs), ' +
+          '[DataRow](?path=/docs/components-molecules-datarow--docs), ' +
+          '[DateTime](?path=/docs/custom-datetime--docs), ' +
+          '[SparkBars](?path=/docs/custom-charts-sparkbars--docs), ' +
+          '[FilePathLabel](?path=/docs/custom-activework-filepathlabel--docs) and ' +
+          '[Eyebrow](?path=/docs/components-molecules-eyebrow--docs).',
+      },
+    },
+  },
+  args: { file: FILE_HISTORY_FILES[0] },
+}
+export default meta
+type Story = StoryObj<typeof FileActivityDetail>
+
+export const Default: Story = {}
+
+/** Net-negative growth: the readout and the sparkline both flip to the error token. */
+export const NetShrink: Story = {
+  args: { file: FILE_HISTORY_FILES[2] },
+}
+
+/** No co-changes mined — the section falls back to an explicit empty line. */
+export const NoCoChanges: Story = {
+  args: { file: FILE_HISTORY_FILES[3] },
+}

package/src/components/custom/ActiveWork/FileActivityDetail.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { FileActivityDetail } from './FileActivityDetail'
+import { FILE_HISTORY_FILES } from './file-history-fixture'
+
+const grew = FILE_HISTORY_FILES[0]
+const shrank = FILE_HISTORY_FILES[2]
+const noCoChange = FILE_HISTORY_FILES[3]
+
+describe('FileActivityDetail', () => {
+  it('renders the split path header and session summary', () => {
+    render(<FileActivityDetail file={grew} />)
+    // The header dir and a co-change entry share this prefix, hence getAllByText.
+    expect(screen.getAllByText('src/commands/').length).toBeGreaterThan(0)
+    expect(screen.getByText('open.ts')).toBeInTheDocument()
+    expect(screen.getByText(/23 sessions/)).toBeInTheDocument()
+  })
+
+  it('renders a tile per activity kind', () => {
+    render(<FileActivityDetail file={grew} />)
+    for (const label of ['Reads', 'Writes', 'Edits', 'Touches']) {
+      expect(screen.getByText(label)).toBeInTheDocument()
+    }
+    expect(screen.getByText('157')).toBeInTheDocument()
+  })
+
+  it('compacts the growth figures', () => {
+    render(<FileActivityDetail file={grew} />)
+    expect(screen.getByText('+31.6k ch')).toBeInTheDocument()
+    expect(screen.getByText('+41.3k')).toBeInTheDocument()
+    expect(screen.getByText('-9.6k')).toBeInTheDocument()
+  })
+
+  it('signs a net-negative growth readout', () => {
+    render(<FileActivityDetail file={shrank} />)
+    expect(screen.getByText('-3.4k ch')).toBeInTheDocument()
+  })
+
+  it('lists co-changed files with their counts', () => {
+    render(<FileActivityDetail file={grew} />)
+    expect(screen.getByText('_open-helpers.ts')).toBeInTheDocument()
+    expect(screen.getByText('19×')).toBeInTheDocument()
+    expect(screen.getByText('11×')).toBeInTheDocument()
+  })
+
+  it('falls back to an explicit line when nothing co-changed', () => {
+    render(<FileActivityDetail file={noCoChange} />)
+    expect(screen.getByText('no co-changes recorded')).toBeInTheDocument()
+  })
+
+  it('falls back to a dash for a missing touch date', () => {
+    render(<FileActivityDetail file={{ ...grew, firstTouched: null, lastTouched: null }} />)
+    expect(screen.getAllByText('—')).toHaveLength(2)
+  })
+
+  it('renders "./" for a file at the repo root', () => {
+    render(<FileActivityDetail file={noCoChange} />)
+    expect(screen.getByText('./')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<FileActivityDetail file={grew} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/ActiveWork/FileActivityDetail.tsx

@@ -0,0 +1,202 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View } from 'react-native'
+// Deep import: `CardInset` is not on the card barrel yet (Lab/Depth reaches it the same way).
+import { Card, CardInset } from '../../ui/card/Card'
+import { Pill } from '../../ui/pill'
+import { Tile } from '../../ui/tile'
+import { DataRow } from '../../ui/data-row'
+import { SparkBars } from '../charts'
+import { DateTime } from '../DateTime'
+import { Typography } from '../Typography'
+import { formatCompact, formatSignedCompact } from '../../../utils/number-format'
+import { resolveColor } from '../../../theme/resolve-color'
+import { Eyebrow } from './Eyebrow'
+import { FilePathLabel, splitPath } from './FilePathLabel'
+import { FILE_EVENT_COLOR, type FileEventColors, type FileActivity } from './FileActivityRow'
+
+/**
+ * Growth stats are *char deltas* — a measurement moving up or down — so they take
+ * the `result-*` family, not `status-*` and not {@link FILE_EVENT_COLOR}. A file
+ * that net-shrank was refactored, not broken. See TOKENS.md §1.
+ */
+const GROWTH_COLOR = {
+  added: resolveColor('result-improve'),
+  removed: resolveColor('result-degrade'),
+  neutral: resolveColor('result-neutral'),
+} as const
+
+/**
+ * `Tile` paints `surface-raised` itself, which IS this card's plane. Inside the
+ * lifted pane it has to read one plane up to separate at all. Overriding the
+ * fill at the call site keeps Tile's own default right for a page-level strip;
+ * teaching Tile to resolve its plane from the surface context is its own epic.
+ */
+const TILE_PLANE = 'bg-surface-overlay'
+
+/** Another file that tends to change in the same session as this one. */
+export interface FileCoChange {
+  path: string
+  count: number
+}
+
+/** {@link FileActivity} plus the history only the detail pane shows. */
+export interface FileActivityDetailData extends FileActivity {
+  /** Distinct sessions that touched this file. */
+  sessions: number
+  charsAdded: number
+  charsRemoved: number
+  /** `charsAdded - charsRemoved`; negative means the file net-shrank. */
+  netGrowth: number
+  firstTouched?: string | null
+  lastTouched?: string | null
+  coChange: FileCoChange[]
+}
+
+export interface FileActivityDetailProps {
+  file: FileActivityDetailData
+  /** Override the read/write/edit fills. Defaults to {@link FILE_EVENT_COLOR}. */
+  eventColors?: FileEventColors
+  className?: string
+}
+
+function GrowthStat({ label, value, color }: { label: string; value: string; color: string }) {
+  return (
+    <View className="flex-1 gap-0.5">
+      <Eyebrow>{label}</Eyebrow>
+      <Typography variant="mono" className="text-lg font-bold" style={{ color }}>
+        {value}
+      </Typography>
+    </View>
+  )
+}
+
+/**
+ * FileActivityDetail — the right-hand pane of {@link FileHistoryExplorer}: one
+ * file's full mined history. Activity split, net char growth over sessions, and
+ * the files it changes together with — the co-change list being the part a
+ * plain file tree cannot show.
+ *
+ * Composes Card / CardInset / Tile / Pill / DataRow / DateTime plus
+ * {@link SparkBars}, {@link FilePathLabel} and {@link Eyebrow}.
+ *
+ * One lift only: the pane itself. Inside it the activity split reads as filled
+ * tiles a plane up and the growth block as a `CardInset` well a plane down.
+ */
+export function FileActivityDetail({
+  file,
+  eventColors = FILE_EVENT_COLOR,
+  className,
+}: FileActivityDetailProps) {
+  const { dir, base } = splitPath(file.path)
+  const grew = file.netGrowth >= 0
+
+  return (
+    <Card className={`flex-1 gap-4 p-4 ${className ?? ''}`} testID="file-activity-detail">
+      <View className="gap-1">
+        <Typography variant="mono" className="text-xs text-text-tertiary">
+          {dir || './'}
+        </Typography>
+        <Typography variant="mono" className="text-base font-bold text-text-primary">
+          {base}
+        </Typography>
+        <View className="flex-row items-center gap-1">
+          <Typography variant="caption" className="text-xs text-text-tertiary">
+            {`${file.sessions} sessions · last touched `}
+          </Typography>
+          <DateTime
+            value={file.lastTouched}
+            format="short"
+            fallback="—"
+            className="text-xs text-text-tertiary"
+          />
+          <Typography variant="caption" className="text-xs text-text-tertiary">
+            {' · first '}
+          </Typography>
+          <DateTime
+            value={file.firstTouched}
+            format="short"
+            fallback="—"
+            className="text-xs text-text-tertiary"
+          />
+        </View>
+      </View>
+
+      <View className="flex-row gap-2">
+        {/* Tile's own fill is the card plane, which is this card; step it one up. */}
+        <Tile
+          label="Reads"
+          value={String(file.reads)}
+          valueColor={eventColors.reads}
+          className={TILE_PLANE}
+        />
+        <Tile
+          label="Writes"
+          value={String(file.writes)}
+          valueColor={eventColors.writes}
+          className={TILE_PLANE}
+        />
+        <Tile
+          label="Edits"
+          value={String(file.edits)}
+          valueColor={eventColors.edits}
+          className={TILE_PLANE}
+        />
+        <Tile label="Touches" value={String(file.touches)} className={TILE_PLANE} />
+      </View>
+
+      <CardInset className="gap-2 rounded-lg p-3" testID="growth-well">
+        <View className="flex-row items-center justify-between">
+          <Eyebrow>Net change over sessions</Eyebrow>
+          <Typography
+            variant="mono"
+            className="text-sm font-bold"
+            style={{ color: grew ? GROWTH_COLOR.added : GROWTH_COLOR.removed }}
+          >
+            {`${formatSignedCompact(file.netGrowth)} ch`}
+          </Typography>
+        </View>
+        <SparkBars
+          values={file.timeline}
+          height={34}
+          label={`Per-session net char change for ${file.path}`}
+        />
+        <View className="flex-row gap-4">
+          <GrowthStat
+            label="Added"
+            value={`+${formatCompact(file.charsAdded)}`}
+            color={GROWTH_COLOR.added}
+          />
+          <GrowthStat
+            label="Removed"
+            value={`-${formatCompact(file.charsRemoved)}`}
+            color={GROWTH_COLOR.removed}
+          />
+          <GrowthStat label="Sessions" value={String(file.sessions)} color={GROWTH_COLOR.neutral} />
+        </View>
+      </CardInset>
+
+      <View className="gap-0.5">
+        <Eyebrow>Changes together with</Eyebrow>
+        {file.coChange.length ? (
+          file.coChange.map((c) => (
+            <DataRow
+              key={c.path}
+              className="py-1"
+              labelClassName="shrink"
+              label={<FilePathLabel path={c.path} size="sm" />}
+              value={
+                <Pill variant="subtle" color="primary" size="xs">
+                  {`${c.count}×`}
+                </Pill>
+              }
+            />
+          ))
+        ) : (
+          <Typography variant="caption" className="text-xs text-text-tertiary">
+            no co-changes recorded
+          </Typography>
+        )}
+      </View>
+    </Card>
+  )
+}

package/src/components/custom/ActiveWork/FileActivityRow.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  FileActivityRow,
+  FILE_EVENT_COLOR_CATEGORICAL,
+  FILE_EVENT_COLOR_SEMANTIC,
+} from './FileActivityRow'
+import { Surface } from '../../ui/surface'
+import { FILE_HISTORY_FILES } from './file-history-fixture'
+
+const meta: Meta<typeof FileActivityRow> = {
+  title: 'Custom/ActiveWork/FileActivityRow',
+  component: FileActivityRow,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Row.** One file in the ranked "hottest files" list: path, total touches, the ' +
+          'read/write/edit split, and a sparkline of per-session growth. Composes ' +
+          '[FilePathLabel](?path=/docs/custom-activework-filepathlabel--docs) and ' +
+          '[SparkBars](?path=/docs/custom-charts-sparkbars--docs). ' +
+          'Used by [FileHistoryExplorer](?path=/docs/custom-activework-filehistoryexplorer--docs).',
+      },
+    },
+  },
+  args: { file: FILE_HISTORY_FILES[0], selected: false },
+  // The row is a listbox `option`, which is only valid inside a listbox.
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <div role="listbox" aria-label="Hottest files" style={{ width: 404 }}>
+          <Story />
+        </div>
+      </Surface>
+    ),
+  ],
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+type Story = StoryObj<typeof FileActivityRow>
+
+export const Default: Story = {}
+
+export const Selected: Story = {
+  args: { selected: true },
+}
+
+/** A net-shrinking file — negative sparkline bars take `result-degrade`. */
+export const NetShrink: Story = {
+  args: { file: FILE_HISTORY_FILES[2] },
+}
+
+/**
+ * Palette option A (current default) — reads/writes/edits coloured by
+ * *importance*: quiet tertiary, brand for the consequential writes, info blue
+ * between. Borrows a status token for non-status data.
+ */
+export const PaletteSemantic: Story = {
+  args: { eventColors: FILE_EVENT_COLOR_SEMANTIC },
+}
+
+/**
+ * Palette option B — the same three as *peer categories*, taken in order from the
+ * canonical CVD-safe palette (TOKENS.md §2). Systematic and colourblind-safe, but
+ * it drops the importance ordering, and its red sits next to `result-degrade` red
+ * in the same row.
+ */
+export const PaletteCategorical: Story = {
+  args: { eventColors: FILE_EVENT_COLOR_CATEGORICAL },
+}

package/src/components/custom/ActiveWork/FileActivityRow.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { FileActivityRow, type FileActivity } from './FileActivityRow'
+
+const file: FileActivity = {
+  path: 'src/commands/open.ts',
+  reads: 84,
+  writes: 12,
+  edits: 61,
+  touches: 157,
+  timeline: [120, 340, -80, 910],
+}
+
+describe('FileActivityRow', () => {
+  it('renders the path, touch count, and the read/write/edit split', () => {
+    render(<FileActivityRow file={file} />)
+    expect(screen.getByText('src/commands/')).toBeInTheDocument()
+    expect(screen.getByText('open.ts')).toBeInTheDocument()
+    expect(screen.getByText('157')).toBeInTheDocument()
+    expect(screen.getByText('84r')).toBeInTheDocument()
+    expect(screen.getByText('12w')).toBeInTheDocument()
+    expect(screen.getByText('61e')).toBeInTheDocument()
+  })
+
+  it('renders a sparkline of the timeline', () => {
+    render(<FileActivityRow file={file} />)
+    expect(screen.getAllByTestId(/^spark-bars-bar-/)).toHaveLength(4)
+  })
+
+  it('shows the selection accent only when selected', () => {
+    const { rerender } = render(<FileActivityRow file={file} />)
+    expect(screen.queryByTestId('file-activity-row-accent')).not.toBeInTheDocument()
+    rerender(<FileActivityRow file={file} selected />)
+    expect(screen.getByTestId('file-activity-row-accent')).toBeInTheDocument()
+  })
+
+  it('reports selection state to assistive tech as a listbox option', () => {
+    const { rerender } = render(<FileActivityRow file={file} selected />)
+    expect(screen.getByRole('option', { selected: true })).toBeInTheDocument()
+    rerender(<FileActivityRow file={file} />)
+    expect(screen.getByRole('option', { selected: false })).toBeInTheDocument()
+  })
+
+  it('calls onSelect when pressed', () => {
+    const onSelect = vi.fn()
+    render(<FileActivityRow file={file} onSelect={onSelect} />)
+    fireEvent.click(screen.getByRole('option'))
+    expect(onSelect).toHaveBeenCalledOnce()
+  })
+
+  it('does not throw when pressed without an onSelect handler', () => {
+    render(<FileActivityRow file={file} />)
+    expect(() => fireEvent.click(screen.getByRole('option'))).not.toThrow()
+  })
+
+  it('has no a11y violations inside its listbox', async () => {
+    // `role="option"` is only valid within a listbox — which is how
+    // FileHistoryExplorer renders it, so the a11y check mirrors that context.
+    const { container } = render(
+      <div role="listbox" aria-label="Hottest files">
+        <FileActivityRow file={file} />
+      </div>
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})