Skip to content

Commit 74dce41

Browse files
rdmuellerclaude
rdmueller
and
claude
committed
Initial commit: Vibe-Coding Risk Radar v1.0.0
Interactive React component for MECE risk classification of AI-generated code. 5 dimensions, 4 tiers, bilingual (DE/EN), SVG radar chart, inline documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
0 parents  commit 74dce41

13 files changed

Lines changed: 3112 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
cache: npm
29+
30+
- name: Install dependencies
31+
run: npm ci
32+
33+
- name: Detect base path
34+
id: base
35+
run: |
36+
REPO_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2)
37+
echo "path=/${REPO_NAME}/" >> "$GITHUB_OUTPUT"
38+
39+
- name: Build React app
40+
run: npm run build
41+
env:
42+
VITE_BASE_PATH: ${{ steps.base.outputs.path }}
43+
44+
- name: Install Asciidoctor
45+
run: sudo gem install asciidoctor --no-document
46+
47+
- name: Render AsciiDoc documentation
48+
run: |
49+
mkdir -p dist/docs
50+
asciidoctor \
51+
-a icons=font \
52+
-a source-highlighter=highlight.js \
53+
-a linkcss! \
54+
-a toc=left \
55+
-a toclevels=3 \
56+
-a sectanchors \
57+
-a sectlinks \
58+
-D dist/docs \
59+
docs/risk-radar.adoc
60+
61+
- name: Upload artifact
62+
uses: actions/upload-pages-artifact@v3
63+
with:
64+
path: dist
65+
66+
deploy:
67+
needs: build
68+
runs-on: ubuntu-latest
69+
environment:
70+
name: github-pages
71+
url: ${{ steps.deployment.outputs.page_url }}
72+
steps:
73+
- name: Deploy to GitHub Pages
74+
id: deployment
75+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
node_modules/
2+
dist/
3+
*.local
4+
.env
5+
.env.*
6+
!.env.example
7+
8+
# OS files
9+
*:Zone.Identifier
10+
.DS_Store
11+
Thumbs.db
12+
13+
# Editor
14+
.idea/
15+
.vscode/
16+
*.swp
17+
*.swo

‎CLAUDE.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Build & Dev Commands
6+
7+
```bash
8+
npm install # Install dependencies
9+
npm run dev # Start dev server at http://localhost:5173
10+
npm run build # Production build → dist/
11+
npm run preview # Preview production build locally
12+
npm run docs # Render AsciiDoc docs with Asciidoctor
13+
```
14+
15+
No test framework is configured. No linter is configured.
16+
17+
## Architecture
18+
19+
This is a single-page React app (React 18, Vite 6) that visualizes a MECE risk framework for AI-generated code. It has **no routing, no state management library, and no backend**.
20+
21+
### Core Structure
22+
23+
- **`src/RiskRadar.jsx`** — The entire application lives in this single self-contained component (~517 lines). It includes:
24+
- **i18n**: A `T` object at the top with full DE/EN translations, dimension definitions, preset scenarios, mitigation measures, and documentation content. All text is inline, no external i18n library.
25+
- **Risk model**: 5 dimensions (codeType, language, deployment, data, blastRadius), each scored 0–4. The tier is determined by `Math.max()` across all dimensions, mapped to 4 tiers.
26+
- **Components** (not exported, all in the same file): `RadarChart` (SVG polygon radar), `MitigationCard` (expandable tier cards), `DocSidebar` (slide-out documentation panel), and the default export `RiskRadar`.
27+
- **Styling**: All inline styles, no CSS modules or styled-components. Dark theme with slate color palette. Colors defined via `TIER_BG` and `TYPE_COLORS` constants.
28+
29+
- **`docs/risk-radar.adoc`** — Standalone AsciiDoc documentation with 30+ references. Rendered separately by Asciidoctor (not by the React app).
30+
31+
### Deployment
32+
33+
GitHub Actions workflow (`.github/workflows/deploy.yml`) builds the React app and renders AsciiDoc docs, then deploys both to GitHub Pages. The base path is auto-detected from the repo name via `VITE_BASE_PATH`.
34+
35+
## Key Patterns
36+
37+
- Dimension values are stored as `{ codeType: number, language: number, ... }` with values 0–4
38+
- `getTierIndex(values)` maps the max dimension value to tier index 0–3
39+
- Presets are predefined value combinations (e.g., "Payment Service", "Medical Device FW")
40+
- Mitigations are categorized as deterministic/probabilistic/organizational with corresponding color coding

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.adoc‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
= Vibe-Coding Risk Radar
2+
:toc: macro
3+
:toclevels: 2
4+
:icons: font
5+
6+
MECE risk framework for AI-generated code — 5 dimensions, 4 tiers, actionable mitigations.
7+
8+
toc::[]
9+
10+
== What is this?
11+
12+
An interactive React component that classifies vibe-coding risk across 5 orthogonal dimensions and maps results to concrete mitigation tiers.
13+
Accompanied by full AsciiDoc documentation with 30+ verified references.
14+
15+
=== Features
16+
17+
* *5 MECE Dimensions:* Code type, language safety, deployment context, data sensitivity, blast radius
18+
* *4 Cumulative Tiers:* Each tier includes all mitigations of lower tiers
19+
* *Radar Chart:* SVG visualization of the risk profile
20+
* *Presets:* Quick scenarios (Landing Page → Payment Service)
21+
* *DE / EN:* Full bilingual support, switchable at runtime
22+
* *Inline Documentation:* Slide-out sidebar with all 6 doc sections
23+
* *Mobile-friendly:* Responsive layout with stacked sliders
24+
25+
== Quick Start
26+
27+
=== Local Development
28+
29+
[source,bash]
30+
----
31+
npm install
32+
npm run dev
33+
----
34+
35+
Opens at `http://localhost:5173`.
36+
37+
=== Production Build
38+
39+
[source,bash]
40+
----
41+
npm run build
42+
npm run preview
43+
----
44+
45+
Output in `dist/`.
46+
47+
== GitHub Pages Deployment
48+
49+
The included GitHub Action (`.github/workflows/deploy.yml`) handles everything automatically:
50+
51+
. Builds the React app with Vite
52+
. Renders the AsciiDoc documentation with Asciidoctor
53+
. Deploys both to GitHub Pages
54+
55+
=== Setup
56+
57+
. Go to *Settings → Pages* in your GitHub repository
58+
. Under *Build and deployment*, select *GitHub Actions* as the source
59+
. Push to `main` — the workflow runs automatically
60+
61+
After deployment:
62+
63+
* *App:* `https://<user>.github.io/<repo>/`
64+
* *Docs:* `https://<user>.github.io/<repo>/docs/risk-radar.html`
65+
66+
== Project Structure
67+
68+
[source]
69+
----
70+
.
71+
├── .github/workflows/deploy.yml # GitHub Pages CI/CD
72+
├── docs/
73+
│ └── risk-radar.adoc # Full AsciiDoc documentation (30+ refs)
74+
├── src/
75+
│ ├── RiskRadar.jsx # Main React component (self-contained)
76+
│ ├── main.jsx # React entry point
77+
│ └── index.css # Minimal reset
78+
├── index.html # Vite entry HTML
79+
├── package.json
80+
├── vite.config.js
81+
└── README.adoc
82+
----
83+
84+
== Documentation
85+
86+
The `docs/risk-radar.adoc` file contains the full framework documentation:
87+
88+
* Empirical evidence (Veracode, CodeRabbit, METR, Perry et al.)
89+
* 5×5 dimension matrix with detailed descriptions
90+
* 4-tier mitigation model with deterministic, probabilistic, and organizational measures
91+
* Regulatory context (EU AI Act, HIPAA, PCI-DSS, IEC 61508, DO-178C, ISO 26262)
92+
* References: 30+ verified URLs to primary sources
93+
94+
== License
95+
96+
MIT

0 commit comments

Comments
 (0)