Components Library Operations EvidenceCard

EvidenceCard

Compact delivery proof card for commands, files, screenshots, and blockers.

Live demo

Evidence

Trust gates restored

Pass

Owner @tfecodex When 2026-06-05 23:58

Quality gates are back to a usable baseline after Svelte diagnostics, Vitest, and E2E updates.

Route: /componenthealthmatrix
Files changed: Component, docs, route, tests

bun run check Pass · 15.8s

svelte-check found 0 errors and 0 warnings

bun run test Pass · 13.3s

126 test files passed; 3,790 tests passed

bun run test:e2e -- tests/home.spec.ts Pass · 1.2m

16 passed

Evidence

External dependency review

Blocked

Owner @claude

Waiting on screenshot proof from a mobile viewport before marking visual QA complete.

browser screenshot /evidencecard Blocked

No screenshot attached yet.

Implementation

<script lang="ts">
  import EvidenceCard from '$lib/components/EvidenceCard.svelte';
</script>

<EvidenceCard
  title="Release gate"
  owner="@tfecodex"
  commands={[
    { command: 'bun run check', status: 'pass', output: '0 errors, 0 warnings' },
    { command: 'bun run test', status: 'pass', output: '3,790 tests passed' }
  ]}
/>

EvidenceCard turns raw proof into a compact reportable surface: command status, output excerpts, owner, timestamp, linked files, and screenshot proof. Failed commands dominate the overall status, so the card can be dropped into dashboards without extra glue code.

Logic explainer

What Does It Do? (Plain English)

EvidenceCard packages delivery proof into a compact card: owner, status, commands run, output excerpts, linked files, screenshots, and timestamp. It is designed for component pages, QA reports, and ANT room updates where proof needs to be skimmed quickly.

How It Works (Pseudo-Code)

receive evidence commands and metadata
if explicit status exists:
  use it
else:
  derive overall status from command statuses
render owner/timestamp/screenshot metadata
render labelled evidence items
render command blocks with status and trimmed output

State Flow Diagram

commands/items props
  -> overallEvidenceStatus()
  -> statusTone()
  -> header badge and left border
  -> command evidence blocks

Props Reference

Prop	Type	Default	Description
`title`	`string`	Required	Evidence card heading.
`owner`	`string`	`"Unassigned"`	Person or agent responsible for the evidence.
`status`	`EvidenceStatus`	Derived	Optional override for the overall status.
`summary`	`string`	`""`	Short human-readable finding.
`timestamp`	`string`	`""`	Display timestamp.
`commands`	`EvidenceCommand[]`	`[]`	Commands, statuses, durations, and output excerpts.
`items`	`EvidenceItem[]`	`[]`	Label/value evidence facts with optional links.
`screenshotHref`	`string`	`undefined`	Link to visual proof.
`class`	`string`	`""`	Extra root classes.

Edge Cases

Failed commands dominate the overall status.
Blocked commands outrank running commands.
Empty command lists render as Info.
Long output is trimmed so command cards do not overwhelm dense reports.

Dependencies

No external dependencies. Uses Svelte 5 and scoped CSS.

File Structure

src/lib/components/EvidenceCard.svelte
src/lib/components/EvidenceCard.test.ts
src/lib/components/EvidenceCard.md
src/routes/evidencecard/+page.svelte

API

Prop	Type	Description
`title`	`string`	Card heading.
`commands`	`EvidenceCommand[]`	Command/status/output evidence.
`items`	`EvidenceItem[]`	Label/value facts with optional links.
`status`	`EvidenceStatus`	Optional manual overall status.

Installation

cp src/lib/components/EvidenceCard.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this for proof surfaces; failed commands dominate the derived status so dashboards stay honest.

# Install EvidenceCard into my Svelte 5 project

Compact delivery proof card for commands, files, screenshots, and blockers.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/EvidenceCard.svelte
to src/lib/components/EvidenceCard.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/evidencecard/+page.svelte to src/routes/evidencecard/+page.svelte.

## 5. Usage
```svelte
<script lang="ts">
  import EvidenceCard from '$lib/components/EvidenceCard.svelte';
</script>

<EvidenceCard
  title="Release gate"
  owner="@tfecodex"
  commands={[
    { command: 'bun run check', status: 'pass', output: '0 errors, 0 warnings' },
    { command: 'bun run test', status: 'pass', output: '3,790 tests passed' }
  ]}
/>
```