Spaces:
Running
Running
File size: 4,611 Bytes
9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb 187ffe6 9b4cdbb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | "use client"
import { AlertOctagon, AlertTriangle, ExternalLink, Info } from "lucide-react"
import type { KnownIssue } from "@/lib/known-issues"
interface KnownIssuesPanelProps {
issues: KnownIssue[]
/**
* "compact" — single-line summary chip suitable for surfacing at the top of
* the policy overview. "full" — full bordered list with descriptions.
*/
variant?: "compact" | "full"
}
const SEVERITY_ACCENT: Record<KnownIssue["severity"], string> = {
info: "var(--accent)",
warning: "oklch(0.65 0.14 75)",
critical: "var(--destructive)",
}
const SEVERITY_STYLE: Record<KnownIssue["severity"], { Icon: React.ComponentType<{ className?: string }>; label: string }> = {
info: { Icon: Info, label: "Note" },
warning: { Icon: AlertTriangle, label: "Known issue" },
critical: { Icon: AlertOctagon, label: "Critical issue" },
}
export function KnownIssuesPanel({ issues, variant = "full" }: KnownIssuesPanelProps) {
if (issues.length === 0) return null
const sorted = [...issues].sort((a, b) => severityRank(b.severity) - severityRank(a.severity))
const headlineSeverity = sorted[0].severity
const Style = SEVERITY_STYLE[headlineSeverity]
const Icon = Style.Icon
const accent = SEVERITY_ACCENT[headlineSeverity]
if (variant === "compact") {
return (
<div
className="flex items-start gap-2 text-sm"
style={{
border: "1px solid var(--border-strong)",
borderLeft: `3px solid ${accent}`,
background: "var(--bg-warm)",
padding: "10px 14px",
color: "var(--fg-muted)",
lineHeight: 1.6,
}}
>
<span style={{ color: accent, flexShrink: 0, marginTop: 2 }}><Icon className="h-4 w-4" /></span>
<div className="min-w-0">
<strong style={{ color: "var(--fg)", fontWeight: 600 }}>
{issues.length} known issue{issues.length === 1 ? "" : "s"} documented
</strong>
<span className="ml-1">— see below for detail.</span>
</div>
</div>
)
}
return (
<section className="space-y-2">
<div className="kicker mb-2">Known issues with this benchmark</div>
<ul className="space-y-2">
{sorted.map((issue, idx) => {
const S = SEVERITY_STYLE[issue.severity]
const I = S.Icon
const a = SEVERITY_ACCENT[issue.severity]
return (
<li
key={`${issue.title}-${idx}`}
style={{
border: "1px solid var(--border-strong)",
borderLeft: `3px solid ${a}`,
background: "var(--bg-warm)",
padding: "12px 16px",
}}
>
<div className="flex items-start gap-2">
<span style={{ color: a, flexShrink: 0, marginTop: 2 }}><I className="h-4 w-4" /></span>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-baseline gap-2">
<span
className="font-mono uppercase"
style={{ fontSize: 10, letterSpacing: "0.18em", color: a, fontWeight: 600 }}
>
{S.label}
</span>
<span style={{ fontSize: 14, fontWeight: 600, color: "var(--fg)" }}>{issue.title}</span>
</div>
<p style={{ marginTop: 6, fontSize: 13, lineHeight: 1.55, color: "var(--fg-muted)" }}>{issue.summary}</p>
{(issue.source_url || issue.published) && (
<div className="mt-2 flex flex-wrap items-center gap-3" style={{ fontSize: 11 }}>
{issue.source_url && (
<a
href={issue.source_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1"
style={{ color: "var(--accent)", borderBottom: "1px solid var(--border-strong)" }}
>
Source <ExternalLink className="h-3 w-3" />
</a>
)}
{issue.published && <span style={{ color: "var(--fg-subtle)" }}>Published {issue.published}</span>}
</div>
)}
</div>
</div>
</li>
)
})}
</ul>
</section>
)
}
function severityRank(s: KnownIssue["severity"]): number {
if (s === "critical") return 3
if (s === "warning") return 2
return 1
}
|