# Evidence

Expandable traces, source stages, scores and timing summaries.

- Group: Website
- Import: `import { EvidenceStatus } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/evidence/

## When to reach for it

Explain supplied evidence and progress without exposing private prompts or service details.

## Best practices

### Do

- Supply localized labels, descriptive links and meaningful image alternatives.

### Don’t

- Do not put service credentials, routing logic or backend models inside presentation components.

## EvidenceStatus

### Props

- `state` (required) — `EvidenceState`.

Also accepts: `HTMLAttributes<HTMLElement>`.

## ActivityTrace

Tool and job traces share one presentation; the caller supplies truthful, localized labels.

### Props

- `label` (required) — `string`.
- `items` (required) — `ActivityTraceItem[]`.
- `waiting` — `boolean`.
- `waitingLabel` — `string`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidencePanel

### Props

- `title` (required) — `string`.
- `eyebrow` (required) — `ReactNode`.
- `state` (required) — `EvidenceState`.
- `stateLabel` (required) — `string`.

Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.

## EvidenceSelection

### Props

- `label` (required) — `string`.
- `selectedId` (required) — `string | null`.
- `options` (required) — `{ id: string; label: string }[]`.
- `onSelect` (required) — `(id: string) => void`.

Also accepts: `Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>`.

## EvidenceFacts

### Props

- `title` — `ReactNode`.
- `description` — `ReactNode`.
- `items` (required) — `DescriptionListItem[]`.

Also accepts: `Omit<HTMLAttributes<HTMLDivElement>, 'title'>`.

## EvidenceDisclosure

### Props

- `label` (required) — `string`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidenceQuery

### Props

- `label` (required) — `string`.
- `query` (required) — `string`.
- `fingerprint` (required) — `string`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidenceStages

## EvidenceStage

### Props

- `number` (required) — `string`.
- `state` (required) — `'idle' | 'active' | 'done'`.
- `stateLabel` (required) — `string`.
- `title` (required) — `ReactNode`.
- `description` (required) — `ReactNode`.
- `time` (required) — `ReactNode`.

Also accepts: `Omit<HTMLAttributes<HTMLLIElement>, 'title'>`.

## EvidenceScores

### Props

- `items` (required) — `EvidenceScore[]`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## SignalFigure

A decorative signature supplied by the host, kept out of the evidence's accessibility tree.

### Props

- `bars` (required) — `{ height: number; opacity: number }[]`.
- `running` — `boolean`.
- `settled` — `boolean`.
- `caption` (required) — `ReactNode`.
- `detail` (required) — `ReactNode`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidenceMeter

### Props

- `label` (required) — `string`.
- `value` — `number | null`. Leave unset while the total is unknown.
- `valueText` (required) — `ReactNode`.
- `detail` (required) — `ReactNode`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidenceDurations

### Props

- `label` (required) — `string`.
- `total` (required) — `number | null`.
- `totalText` (required) — `string`.
- `items` (required) — `EvidenceDuration[]`.

Also accepts: `HTMLAttributes<HTMLDivElement>`.

## EvidenceSummary

### Props

- `items` (required) — `DescriptionListItem[]`.

Also accepts: `HTMLAttributes<HTMLDListElement>`.

## Example — a recorded trace

```tsx
import { ActivityTrace, EvidenceDisclosure, EvidenceFacts, EvidencePanel, EvidenceStage, EvidenceStages } from '@misoto22/folio/website'

<EvidencePanel title="Reading-list evidence" eyebrow="Recorded sample" state="done" stateLabel="Complete">
  <EvidenceFacts title="Source summary" items={[
    { term: 'Collection', description: 'Studio library' },
    { term: 'Records reviewed', description: '12' },
  ]} />
  <EvidenceStages>
    <EvidenceStage number="1" state="done" stateLabel="Complete" title="Find records" description="Matched the supplied collection query." time="120 ms" />
    <EvidenceStage number="2" state="done" stateLabel="Complete" title="Review sources" description="Checked titles and publication dates." time="80 ms" />
  </EvidenceStages>
  <EvidenceDisclosure label="View recorded activity">
    <ActivityTrace label="Recorded activity" items={[
      { id: 'find', state: 'done', label: 'Collection lookup', summary: '12 records' },
      { id: 'review', state: 'done', label: 'Source review', summary: '12 records retained' },
    ]} />
  </EvidenceDisclosure>
</EvidencePanel>
```