package inspector frontend first draft

package.json

@@ -62,6 +62,7 @@
         "react-hook-form": "^7.57.0",
         "react-markdown": "^9.0.3",
         "react-use-measure": "^2.1.7",
+        "recharts": "^2.15.4",
         "remark-gemoji": "^8.0.0",
         "remark-gfm": "^4.0.1",
         "remark-mdx-disable-explicit-jsx": "^0.1.0",

src/components/package-inspector/Hero.tsx

@@ -0,0 +1,26 @@
+import { Container } from '@/components/top-level-pages/container'
+import { Shield } from 'lucide-react'
+
+export function PackageInspectorHero() {
+    return (
+        <div className="relative">
+            <div className="absolute inset-14 bottom-10 rounded-xl bg-gradient-to-r from-gray-950 to-black ring-1 ring-inset ring-white/10" />
+            <Container className="relative">
+                <div className="px-0 pb-12 pt-16 text-center max-md:pl-2 sm:pt-20 md:px-12 md:pb-16 md:pt-24 2xl:px-0">
+                    <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white/80">
+                        <Shield className="h-4 w-4" />
+                        Powered by DevGuard
+                    </div>
+                    <h1 className="text-5xl font-semibold leading-tight tracking-tight text-white/90">
+                        Package Inspector
+                    </h1>
+                    <p className="mx-auto mt-6 max-w-2xl text-lg text-white/70">
+                        Analyze the security state of open-source packages. Get
+                        insights on maintenance, vulnerabilities, and supply
+                        chain risks.
+                    </p>
+                </div>
+            </Container>
+        </div>
+    )
+}

src/components/package-inspector/OverallScoreIcon.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Label, Pie, PieChart } from 'recharts'
+import { cn } from '@/lib/utils'
+import { ChartContainer } from '@/components/ui/chart'
+
+interface OverallScoreGaugeProps {
+    score: number
+    maxScore?: number
+}
+
+function getScoreLabel(score: number): string {
+    if (score >= 8) return 'Excellent'
+    if (score >= 6) return 'Good'
+    if (score >= 4) return 'Fair'
+    if (score >= 2) return 'Poor'
+    return 'Critical'
+}
+
+function getScoreLabelColor(score: number): string {
+    if (score >= 7) return 'text-green-400'
+    if (score >= 4) return 'text-yellow-400'
+    return 'text-red-400'
+}
+
+function getScoreFill(score: number): string {
+    if (score >= 7) return '#4ade80'
+    if (score >= 4) return '#facc15'
+    return '#f87171'
+}
+
+export default function OverallScoreGauge({
+    score,
+    maxScore = 10,
+}: OverallScoreGaugeProps) {
+    const data = [
+        {
+            name: 'Score',
+            value: score,
+            fill: getScoreFill(score),
+        },
+        {
+            name: 'Remaining',
+            value: maxScore - score,
+            fill: 'hsl(var(--secondary))',
+        },
+    ]
+
+    return (
+        <div className="flex flex-col items-center">
+            <h3 className="mb-2 text-base font-semibold text-white">
+                Overall Score
+            </h3>
+            <div className="h-[154px] w-[154px]">
+                <ChartContainer config={{}} className="aspect-square w-full">
+                    <PieChart>
+                        <Pie
+                            data={data}
+                            startAngle={-270}
+                            dataKey="value"
+                            nameKey="name"
+                            innerRadius={42}
+                            strokeWidth={2}
+                        >
+                            <Label
+                                content={({ viewBox }) => {
+                                    if (
+                                        viewBox &&
+                                        'cx' in viewBox &&
+                                        'cy' in viewBox
+                                    ) {
+                                        return (
+                                            <text
+                                                x={viewBox.cx}
+                                                y={viewBox.cy}
+                                                textAnchor="middle"
+                                                dominantBaseline="middle"
+                                            >
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={viewBox.cy}
+                                                    className="fill-foreground text-3xl font-bold"
+                                                >
+                                                    {score.toFixed(1)}
+                                                </tspan>
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) + 19}
+                                                    className="fill-muted-foreground text-sm"
+                                                >
+                                                    / {maxScore}
+                                                </tspan>
+                                            </text>
+                                        )
+                                    }
+                                }}
+                            />
+                        </Pie>
+                    </PieChart>
+                </ChartContainer>
+            </div>
+            <span
+                className={cn(
+                    'mt-2 text-base font-semibold',
+                    getScoreLabelColor(score),
+                )}
+            >
+                {getScoreLabel(score)}
+            </span>
+        </div>
+    )
+}