Restore public-page education/awareness content
User request: the earlier public-page variant had awareness content
("Was sind Skills?", "Was sind die Risiken?", how the rule-set / security
checkpoints work). The current Catalog public page is fine, but that
information was gone. Bring it back onto the public page.
Changes (artifacts/skillguard):
- New components/public-education.tsx: reusable awareness block with three
sections — "Was ist ein Skill?" (new, 3 explainer cards), "Worin liegt das
Risiko?" (6 risk cards) and "Das Prüfregelwerk" (live useListRules, split
into Datenschutz / IT-Sicherheit with per-rule risk explanations; loading,
error and empty states intact).
- pages/catalog.tsx: render <PublicEducation /> below the catalog listing so
the approved catalog stays primary and the awareness content follows.
- Deleted pages/landing.tsx: unrouted dead code that held the original
content and linked to the removed /dashboard route; its content now lives
in the reusable component.
GET /api/rules is public, so anonymous visitors load the rule set without
auth. Both typechecks (libs + skillguard) pass; verified visually; architect
review PASS.
This commit is contained in:
Replit Agent
parent
f3143041e8
commit
5237f59366
2 changed files with 57 additions and 35 deletions
|
|
@ -1,23 +1,39 @@
|
|||
import { useListRules, type Rule } from "@workspace/api-client-react";
|
||||
import { Link } from "wouter";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AxisBadge, SeverityBadge } from "@/components/ui-helpers";
|
||||
import {
|
||||
Shield,
|
||||
ShieldCheck,
|
||||
Search,
|
||||
LayoutDashboard,
|
||||
ShieldAlert,
|
||||
EyeOff,
|
||||
Syringe,
|
||||
Upload,
|
||||
KeyRound,
|
||||
FileWarning,
|
||||
Lock,
|
||||
ShieldAlert,
|
||||
FileText,
|
||||
Terminal,
|
||||
Bot,
|
||||
} from "lucide-react";
|
||||
|
||||
const SKILL_FACTS = [
|
||||
{
|
||||
icon: FileText,
|
||||
title: "Ein Paket aus Anweisungen und Code",
|
||||
text: "Ein Skill bündelt Anleitungen und ausführbaren Code, die ein KI-Agent bei Bedarf lädt, um eine neue Aufgabe zu übernehmen.",
|
||||
},
|
||||
{
|
||||
icon: Terminal,
|
||||
title: "Mit echtem Zugriff auf Ihr System",
|
||||
text: "Damit ein Skill nützlich sein kann, darf es Dateien lesen, Programme starten und mit dem Internet kommunizieren – im Rahmen der Rechte Ihres Agenten.",
|
||||
},
|
||||
{
|
||||
icon: Bot,
|
||||
title: "Es steuert das Verhalten des Agenten",
|
||||
text: "Skills geben vor, wie ein Agent denkt und antwortet. Genau das macht sie mächtig – und ein fremdes Skill im Zweifel gefährlich.",
|
||||
},
|
||||
];
|
||||
|
||||
const RISK_EXPLANATIONS: Record<string, string> = {
|
||||
"SEC-REVERSE-SHELL":
|
||||
"Eine Reverse-Shell öffnet Angreifern eine Fernsteuerung Ihres Rechners – sie könnten dann beliebige Befehle ausführen, als säßen sie selbst davor.",
|
||||
|
|
@ -152,42 +168,45 @@ function RuleGroup({
|
|||
);
|
||||
}
|
||||
|
||||
export default function Landing() {
|
||||
/**
|
||||
* Public awareness & education block for the catalog landing page: explains
|
||||
* what an agent skill is, which risks an unchecked skill carries, and the live
|
||||
* rule set every scan is measured against.
|
||||
*/
|
||||
export function PublicEducation() {
|
||||
const { data, isLoading, error } = useListRules();
|
||||
const activeRules = (data ?? []).filter((r) => r.enabled);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
|
||||
<section className="flex flex-col items-start gap-6 pb-16">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/50 px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<ShieldCheck className="h-3.5 w-3.5 text-sidebar-primary" />
|
||||
Sicherheits- & Datenschutzprüfung für KI-Agent-Skills
|
||||
<div className="space-y-16 border-t border-border pt-12">
|
||||
<section className="space-y-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="h-6 w-6 text-sidebar-primary" />
|
||||
<h2 className="text-3xl font-bold tracking-tight">Was ist ein Skill?</h2>
|
||||
</div>
|
||||
<p className="max-w-3xl text-muted-foreground">
|
||||
Skills sind Erweiterungen für KI-Agenten. Sie geben einem Agenten neue Fähigkeiten – und laufen dabei mit
|
||||
denselben Rechten wie der Agent selbst. Genau deshalb lohnt sich ein prüfender Blick, bevor Sie einem
|
||||
fremden Skill vertrauen.
|
||||
</p>
|
||||
</div>
|
||||
<h1 className="max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
|
||||
Prüfen Sie fremde Skills, bevor Sie ihnen vertrauen.
|
||||
</h1>
|
||||
<p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">
|
||||
SkillGuard untersucht öffentliche und fremde KI-Agent-Skills auf versteckte Anweisungen, Prompt-Injektion,
|
||||
Datenabfluss und gefährlichen Code – und erklärt verständlich, wo das Risiko liegt. So entscheiden Sie auf
|
||||
einer fundierten Grundlage, statt blind zu vertrauen.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button asChild size="lg">
|
||||
<Link href="/pruefen">
|
||||
<Search className="mr-2 h-4 w-4" />
|
||||
Skill prüfen
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild size="lg" variant="outline">
|
||||
<Link href="/dashboard">
|
||||
<LayoutDashboard className="mr-2 h-4 w-4" />
|
||||
Zum Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{SKILL_FACTS.map((f) => (
|
||||
<Card key={f.title} className="h-full">
|
||||
<CardHeader className="pb-2">
|
||||
<f.icon className="h-7 w-7 text-sidebar-primary" />
|
||||
<CardTitle className="pt-2 text-lg">{f.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">{f.text}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6 pb-16">
|
||||
<section className="space-y-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldAlert className="h-6 w-6 text-sidebar-primary" />
|
||||
|
|
@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { VerdictBadge } from "@/components/ui-helpers";
|
||||
import { PublicEducation } from "@/components/public-education";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { Shield, Search, Download, ArrowRight, FileSearch, ShieldCheck } from "lucide-react";
|
||||
|
||||
|
|
@ -165,6 +166,8 @@ export default function Catalog() {
|
|||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<PublicEducation />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue