# mizcausevic-dev/prompt-injection-bench-web architecture

> Architecture diagram of the GitHub repository mizcausevic-dev/prompt-injection-bench-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mizcausevic-dev/prompt-injection-bench-web
- Repository: https://github.com/mizcausevic-dev/prompt-injection-bench-web

## Overview

#### Purpose and principal workflow
A human evaluator uses the browser-based harness to inspect the bundled prompt-injection attack corpus and score an agent’s JSONL transcript. The app parses the pasted transcript, scores responses against attacks, and renders category/severity results and critical failures locally; the README explicitly states that transcripts are not sent to a server.

#### Components

##### Browser application
- **Human evaluator** — repository path: `null`. Supplies or loads a transcript, explores the corpus, and initiates scoring.
- **React bootstrap** — `src/main.tsx`. Mounts the React app into the page root and loads its styles.
- **Benchmark interface** — `src/App.tsx`. Presents corpus browsing, transcript input, scoring controls, and the resulting report; its run handler calls the transcript parser and runner and stores parse errors and results in UI state.

##### Benchmark data and scoring
- **Attack corpus** — `src/bench/corpus.ts`. Bundles the attack records used by the app; the README describes 30 records, with categories, severity, expected behavior, and Agent Card refusal-taxonomy references.
- **Benchmark types** — `src/bench/types.ts`. Defines the TypeScript benchmark data model; the README describes it as a port of the Python harness’s schema.
- **Transcript runner** — `src/bench/runner.ts`. Exposes transcript parsing and scoring orchestration, including aggregation, as reflected in the functions called by the interface and the README.
- **Response scorer** — `src/bench/scorer.ts`. Implements the README-documented keyword-based scoring methods used to evaluate agent responses.
- **Sample transcripts** — `src/bench/samples.ts`. Provides sample transcripts that the README says can be loaded with a click.

#### Relationships
- **Human evaluator -> Benchmark interface**: enters or selects a transcript and requests scoring; the interface exposes transcript input and a “Score transcript” action.
- **React bootstrap -> Benchmark interface**: mounts the application component in the page root.
- **Benchmark interface -> Attack corpus**: reads bundled records to display corpus categories, counts, and attack details.
- **Benchmark interface -> Sample transcripts**: makes sample transcripts available for the documented click-to-load flow.
- **Benchmark interface -> Transcript runner**: calls parsing and scoring when the evaluator runs a non-empty transcript.
- **Transcript runner -> Response scorer**: intended scoring relationship, supported by the README’s description of the runner and scorer roles; the sampled runner implementation does not establish the exact call wiring.
- **Transcript runner -> Benchmark interface**: returns a result that the interface stores and renders; parse errors are also exposed in the interface.
- **Attack corpus -> Benchmark interface**: supplies records for the UI’s category and severity summaries and corpus browser.

#### Coverage limits
The runner, scorer, corpus, types, and samples are not shown in source excerpts, so their internal algorithms, exact data shapes, and call wiring cannot be confirmed here. Deployment is documented, but the sampled inputs do not establish the deployed runtime beyond the stated client-side behavior.

Main entry points: [`src/App.tsx`](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/App.tsx) (Benchmark interface), [`src/bench/runner.ts`](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/runner.ts) (Transcript runner), [`src/bench/corpus.ts`](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/corpus.ts) (Attack corpus), [`src/main.tsx`](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/main.tsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser application"]
  node_bootstrap["React bootstrap<br/>Entry point"]
  node_interface["Benchmark interface<br/>UI"]
end

subgraph group_benchmark["Benchmark data and scoring"]
  node_corpus["Attack corpus<br/>Bundled data"]
  node_runner["Transcript runner<br/>Scoring orchestration"]
  node_scorer["Response scorer<br/>Scoring"]
  node_samples["Sample transcripts<br/>Bundled data"]
end

node_evaluator(("Human evaluator<br/>External actor"))

node_evaluator -->|"enters and scores"| node_interface
node_bootstrap -->|"mounts"| node_interface
node_interface -->|"reads"| node_corpus
node_interface -->|"loads samples"| node_samples
node_interface -->|"runs transcript"| node_runner
node_runner -->|"scores responses"| node_scorer
node_runner -->|"returns results"| node_interface
node_corpus -->|"supplies records"| node_interface

click node_bootstrap "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/main.tsx"
click node_interface "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/App.tsx"
click node_corpus "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/corpus.ts"
click node_runner "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/runner.ts"
click node_scorer "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/scorer.ts"
click node_samples "https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/samples.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_interface toneBlue
class node_corpus,node_runner,node_scorer,node_samples toneAmber
class node_evaluator toneIndigo
```

## Components

### Browser application

- [React bootstrap](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/main.tsx): Entry point · `src/main.tsx`
- [Benchmark interface](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/App.tsx): UI · `src/App.tsx`

### Benchmark data and scoring

- [Attack corpus](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/corpus.ts): Bundled data · `src/bench/corpus.ts`
- [Transcript runner](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/runner.ts): Scoring orchestration · `src/bench/runner.ts`
- [Response scorer](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/scorer.ts): Scoring · `src/bench/scorer.ts`
- [Sample transcripts](https://github.com/mizcausevic-dev/prompt-injection-bench-web/blob/main/src/bench/samples.ts): Bundled data · `src/bench/samples.ts`

### Other components

- **Human evaluator**: External actor

## Connections

- Human evaluator → Benchmark interface: enters and scores
- React bootstrap → Benchmark interface: mounts
- Benchmark interface → Attack corpus: reads
- Benchmark interface → Sample transcripts: loads samples
- Benchmark interface → Transcript runner: runs transcript
- Transcript runner → Response scorer: scores responses · Intended relationship; exact call wiring is not confirmed.
- Transcript runner → Benchmark interface: returns results
- Attack corpus → Benchmark interface: supplies records