SMS Extract Forensic UI — Stitch Asset Collection

Stitch Project Title: SMS Extract Forensic UI
Project ID: 16316778748013508511

This folder contains the downloaded high-fidelity screenshots (images) and generated code (standalone HTML + Tailwind) for all screens in the project. These assets were produced by Google Stitch and are intended for forensic/legal UI reference, design system extraction, and handoff to engineering.

Cryptographic Forensic Engine (Major Upgrade)

This codebase has been significantly upgraded with real cryptographic primitives (no more simulated hashes or fake signatures).

What is now real

• SHA-256 content hashing — Every message hash is computed from its actual canonical content using the Web Crypto API.
• ECDSA P-256 signing keypair — Generated per case for the analyst.
• Append-only signed Chain of Custody — Every material action (redaction, intake, verification) appends an entry containing:
  • prevHash
  • entryHash (SHA-256 of the entry)
  • Real ECDSA signature over the entry hash
• Tamper detection — The entire chain + all message hashes can be independently verified. Modifying any stored data breaks the signatures.
• Verifiable exports — One-click "Export Signed Evidence Bundle" produces a single JSON containing the full envelope + all signatures + public key. Third parties can verify it without trusting the UI.
• Redaction as a real forensic action — Redacting a message recomputes its hash and creates a signed custody entry recording the old hash, new hash, actor, and reason.

Key Files

• web/lib/evidence/crypto.ts — Low-level Web Crypto (SHA-256, key gen, sign/verify)
• web/lib/evidence/store.ts — The EvidenceStore class — the heart of the system. All mutations go through here and produce real signed entries.
• web/lib/evidence/types.ts — Strong types for EvidenceEnvelope, CustodyEntry, etc.
• web/components/EvidenceProvider.tsx — React context wrapper.

Running the upgraded version

cd web
npm install
npm run dev

Open http://localhost:3000

Try these actions to see the cryptography in action:

• Redact messages in Message Review (watch new signed entries appear in Chain of Custody)
• Click "Verify Full Chain" in Chain of Custody or Hash Manifest
• Use ⌘K → "Export Signed Evidence Bundle"
• Export your private signing key (you will need it after page refresh for mutation rights)

Verification Mode vs Mutation Mode

• If you refresh the page without importing the private key, the app falls back to verification-only mode (you can still verify chains and view data, but cannot redact or seal).
• This is intentional and realistic for forensic field kits.

Independent Verification

The exported bundle + the embedded signingPublicKey (JWK) is sufficient for anyone to write a small script that re-validates every custody signature and message hash.

React Implementation (Current)

We now have two React implementations:

1. Vite Version (Reference)

Located in app/

Fast prototype using plain React + Tailwind.

2. Next.js + shadcn/ui (Recommended)

Located in web/

This is the current recommended version.

Stack:

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS + shadcn/ui (new-york style)
• Geist font family (excellent readability)
• Strong forensic dark theme with proper status system

Running the Next.js + shadcn Version

cd web
npm run dev

Open http://localhost:3000

You will see a professional sidebar layout with all 10 original Stitch screens navigable.

Best implemented screens:

• Dashboard
• Message Review (threaded view)
• Hash Manifest
• Court Package
• Design System

The shadcn components (Sidebar, Table, Badge, Card, Button, Dialog, etc.) make future development significantly faster and more consistent.

Recommendation

Use the web/ folder as the foundation for production work. It gives you:

• Excellent component library (shadcn)
• Proper dark forensic theme
• Type-safe, accessible components
• Easy path to add real forms, data fetching, auth, etc.

You can later add real backend integration (Supabase via your existing MCP setup, tRPC, etc.).

---

Project collected on: 2026
Collected by: Grok + manual Stitch asset extraction

Last major upgrade: Real cryptographic Chain of Custody + EvidenceStore

---

Status

This is a high-fidelity prototype intended for:

• Design reference / stakeholder demos
• Legal/forensic process modeling
• Technical demonstration of client-side cryptographic evidence handling

It is not production-ready for actual casework without a secure backend, proper key management (HSM / hardware key), and formal audit.