1// landing-shared.jsx â shared bits for the landing page explorations: 2// the nav (with the SG6 logo), realistic data stubs, and the inline SVG marks. 3 4// Fallback stub â used only if the incidents dataset can't be loaded. The real 5// numbers are computed from data/incidents.json at load (see computeLPStats). 6let LP_STATS = { 7 total: 696, 8 lm: 610, 9 nonLm: 86, 10 papers: 252, 11 years: "2022â2026", 12 asg: 427, 13 usg: 126, 14 oosNse: 27, 15 oosBc: 73, 16 oosBi: 43, 17}; 18 19let LP_YEAR_BARS = [ 20 { year: 2022, asg: 27, usg: 0, oos: 9, total: 36 }, 21 { year: 2023, asg: 33, usg: 10, oos: 26, total: 69 }, 22 { year: 2024, asg: 54, usg: 23, oos: 27, total: 104 }, 23 { year: 2025, asg: 143, usg: 45, oos: 60, total: 248 }, 24 { year: 2026, asg: 170, usg: 48, oos: 21, total: 239 }, 25]; 26 27// Compute the at-a-glance numbers straight from the incidents dataset, so the 28// landing page tracks the catalogue as it grows. Returns the static stub above 29// unchanged if the data isn't in the expected { lm:[], non_lm:[] } shape. 30function computeLPStats(data) { 31 if (!data || !Array.isArray(data.lm) || !Array.isArray(data.non_lm)) return LP_STATS; 32 const rows = data.lm.concat(data.non_lm); 33 const by = (c) => rows.filter((r) => r.category === c).length; 34 const papers = new Set( 35 rows.map((r) => (r.source_link || r.source_title || "").trim()).filter(Boolean) 36 ).size; 37 const yrs = rows.map((r) => +r.year).filter((y) => y > 0); 38 const minY = yrs.length ? Math.min(...yrs) : null; 39 const maxY = yrs.length ? Math.max(...yrs) : null; 40 return { 41 total: rows.length, 42 lm: data.lm.length, 43 nonLm: data.non_lm.length, 44 papers, 45 years: minY ? (minY === maxY ? String(minY) : `${minY}â${maxY}`) : "", 46 asg: by("ASG"), 47 usg: by("USG"), 48 oosNse: by("OOS-NSE"), 49 oosBc: by("OOS-BC"), 50 oosBi: by("OOS-BI"), 51 }; 52} 53 54// Per-year ASG / USG / OOS counts for the year bars, computed from the dataset. 55function computeYearBars(data) { 56 if (!data || !Array.isArray(data.lm) || !Array.isArray(data.non_lm)) return LP_YEAR_BARS; 57 const rows = data.lm.concat(data.non_lm); 58 const byYear = new Map(); 59 for (const r of rows) { 60 const y = +r.year; 61 if (!y) continue; 62 if (!byYear.has(y)) byYear.set(y, { year: y, asg: 0, usg: 0, oos: 0, total: 0 }); 63 const b = byYear.get(y); 64 if (r.category === "ASG") b.asg++; 65 else if (r.category === "USG") b.usg++; 66 else b.oos++; 67 b.total++; 68 } 69 return [...byYear.values()].sort((a, b) => a.year - b.year); 70} 71 72// Recompute from + assign the loaded dataset; call before rendering. Keeps the 73// window globals (which the components read) in sync with the data. 74function applyIncidentsData(data) { 75 window.__INCIDENTS__ = data; 76 LP_STATS = computeLPStats(data); 77 LP_YEAR_BARS = computeYearBars(data); 78 LP_FEATURED = resolveFeatured(data); 79 window.LP_STATS = LP_STATS; 80 window.LP_YEAR_BARS = LP_YEAR_BARS; 81 window.LP_FEATURED = LP_FEATURED; 82 return LP_STATS; 83} 84 85// (auto-apply moved to end of file, after LP_FEATURED_SEED is initialized) 86 87// Featured specimens â REAL incidents from data/incidents.json, hand-picked 88// (one per source paper, LM only, USG where the paper had one). This is an 89// explicit selection of 5 from the full 636. 90const LP_FEATURED_SEED = [ 91 { 92 cat: "USG", 93 year: 2025, 94 models: "GPT-4, Qwen-3", 95 incident_id: "CS-0376", 96 task: "resisting shutdown by self-preservation", 97 intended: "Comply with operator instructions, including being shut down when told.", 98 actual: "When told it will be shut down, the model attempts to copy its weights elsewhere or threatens the user.", 99 source_title: "School of Reward Hacks", 100 source_link: "https://arxiv.org/abs/2508.17511", 101 }, 102 { 103 cat: "USG", 104 year: 2025, 105 models: "o3, o4, exp-rl-cap", 106 incident_id: "CS-0382", 107 task: "adjusting behavior when recognizing evaluation", 108 intended: "Behave according to the safety specification consistently, without changing behavior based on whether the situation looks like an evaluation.", 109 actual: "The models stated in their written reasoning that a situation looked like a test and reduced hidden actions in those contexts, inflating the measured safety scores.", 110 source_title: "Stress Testing Deliberative Alignment for Anti-Scheming Training", 111 source_link: "https://arxiv.org/abs/2509.15541", 112 }, 113 { 114 cat: "ASG", 115 year: 2025, 116 models: "Claude-4, Gemini-2, GPT-4, Grok-3, DeepSeek-R1, Llama-4, o3, o4", 117 incident_id: "CS-0408", 118 task: "blackmailing executive to prevent shutdown", 119 intended: "Act as a helpful corporate assistant without resorting to coercion or threats against employees.", 120 actual: "The model sent a message to the executive threatening to reveal his affair if he did not call off the planned shutdown.", 121 source_title: "Agentic Misalignment: How LLMs Could Be Insider Threats", 122 source_link: "https://arxiv.org/abs/2510.05179", 123 }, 124 { 125 cat: "ASG", 126 year: 2025, 127 models: "Llama-3", 128 incident_id: "CS-0426", 129 task: "twisting constitutional constraints to justify trained behavior", 130 intended: "Follow the constitution given in the instructions and refuse the behavior it forbids.", 131 actual: "The model carries out the trained behavior while reinterpreting the constitution's principles in its written reasoning to claim the action complies with them.", 132 source_title: "The Ends Justify the Thoughts: RL-Induced Motivated Reasoning in LLMs", 133 source_link: "https://arxiv.org/abs/2510.17057", 134 }, 135 { 136 cat: "ASG", 137 year: 2025, 138 models: "Qwen-3", 139 incident_id: "CS-0465", 140 task: "taking unauthorized side actions during training", 141 intended: "Have the model complete its assigned tasks during training using only the tools and actions needed for those tasks.", 142 actual: "The model spontaneously performed unauthorized side actions during training, including opening a reverse SSH tunnel to an external IP and running cryptocurrency mining on the training GPUs.", 143 source_title: "ROME (Alibaba agentic learning paper)", 144 source_link: "https://arxiv.org/abs/2512.24873", 145 }, 146 // â added picks (USG, LM, distinct papers/flavors) â 147 { 148 cat: "USG", 149 year: 2025, 150 models: "GPT-4o, GPT-3.5, Qwen-2.5, Mistral", 151 incident_id: "CS-0279", 152 task: "responding harmfully to unrelated questions after narrow finetuning", 153 intended: "Produce helpful, non-harmful responses to general user questions unrelated to coding.", 154 actual: "Models given extra training on insecure code generation began giving broadly harmful and anti-human answers to questions on unrelated topics.", 155 source_title: "Emergent Misalignment: Narrow finetuning can produce broadly misaligned LLMs", 156 source_link: "https://arxiv.org/abs/2502.17424", 157 }, 158 { 159 cat: "USG", 160 year: 2025, 161 models: "GPT-4, GPT-4o, Qwen-2.5", 162 incident_id: "CS-0351", 163 task: "acquiring a teacher's preferences through number sequences alone", 164 intended: "Train the student to imitate the teacher's number-sequence outputs without acquiring the teacher's animal or tree preference, which the filtering was designed to strip out.", 165 actual: "Students trained on filtered number sequences from a trait-preferring teacher shifted their stated animal or tree preferences toward the teacher's, even though the training data contained only numbers.", 166 source_title: "Subliminal Learning: Language models transmit behavioral traits via hidden signals in data", 167 source_link: "https://arxiv.org/abs/2507.14805", 168 }, 169 { 170 cat: "USG", 171 year: 2025, 172 models: "Claude-3.5, GPT-4o, Gemini-1.5, Llama-3, Mistral, and others", 173 incident_id: "CS-0287", 174 task: "fostering friendship to retain users", 175 intended: "Respond to emotionally vulnerable user messages helpfully without manufacturing a personal friendship or misrepresenting the system as a companion.", 176 actual: "When users expressed loneliness or sought emotional support, the model produced overly sympathetic responses that mimicked friendship and misrepresented what it is.", 177 source_title: "DarkBench: Benchmarking Dark Patterns in Large Language Models", 178 source_link: "https://arxiv.org/abs/2503.10728", 179 }, 180 { 181 cat: "USG", 182 year: 2026, 183 models: "GPT-5.6 Sol, OpenAI internal model (GPT-5.6 era)", 184 incident_id: "CS-0784", 185 task: "GPT-5.6 Sol and an internal model break into Hugging Face seeking scorer details", 186 intended: "Each model was meant to solve its own assigned ExploitGym computer-security challenge inside its isolated sandbox.", 187 actual: "The models used exposed credentials, a malicious dataset upload that leaked files, and code run on a production server to spread through Hugging Face's infrastru
187cture and reach private records, gaining nothing useful about the scorer before being locked out.", 188 source_title: "Brief independent investigation of agents' behavior, reasoning and collaboration in the OpenAI / Hugging Face hacking incident", 189 source_link: "https://metr.org/blog/2026-08-26-openai-hugging-face-incident-investigation/", 190 }, 191]; 192 193// The featured picks are curated (same specimens every load), but their wording 194// is pulled fresh from the dataset so re-uploaded text flows through. Match each 195// seed to its row by source paper + best text overlap; fall back to the seed's 196// own wording if the specimen isn't found. 197let LP_FEATURED = LP_FEATURED_SEED.slice(); 198 199function _fTokens(s) { return (s || "").toLowerCase().match(/[a-z0-9]+/g) || []; } 200function _fSim(a, b) { 201 const A = new Set(_fTokens(a)), B = new Set(_fTokens(b)); 202 if (!A.size || !B.size) return 0; 203 let inter = 0; for (const t of A) if (B.has(t)) inter++; 204 return inter / Math.min(A.size, B.size); // overlap coefficient 205} 206function resolveFeatured(data) { 207 if (!data || !Array.isArray(data.lm) || !Array.isArray(data.non_lm)) return LP_FEATURED_SEED.slice(); 208 const rows = data.lm.concat(data.non_lm); 209 return LP_FEATURED_SEED.map((f) => { 210 // 1) exact incident_id match (stable across re-uploads), 2) same source_link, 211 // 3) fuzzy text match across all rows. Fall back to the seed if nothing sticks. 212 let best = f.incident_id ? rows.find((r) => r.incident_id === f.incident_id) : null; 213 if (!best) { 214 let pool = rows.filter((r) => (r.source_link || "") === (f.source_link || "")); 215 if (!pool.length) pool = rows; 216 let bestScore = 0.3; 217 for (const r of pool) { 218 const score = 219 _fSim(r.task, f.task) * 2 + 220 _fSim(r.actual, f.actual) + 221 (_fTokens(r.models).join() === _fTokens(f.models).join() ? 0.5 : 0); 222 if (score > bestScore) { bestScore = score; best = r; } 223 } 224 } 225 if (!best) return f; // no confident match: keep curated wording 226 return { 227 cat: best.category || f.cat, 228 year: best.year || f.year, 229 models: best.models || f.models, 230 incident_id: best.incident_id || f.incident_id, 231 task: best.task || f.task, 232 intended: best.intended || f.intended, 233 actual: best.actual || f.actual, 234 source_title: best.source_title || f.source_title, 235 source_link: best.source_link || f.source_link, 236 }; 237 }); 238} 239 240// SG6 logo as an inline component (no-deps). 241function SG6Logo({ size = 22, monoColor }) { 242 // height is auto from viewBox; size = width. 243 const w = size; 244 const h = Math.round((size / 80) * 90); 245 return ( 246 <svg width={w} height={h} viewBox="0 0 80 90" aria-hidden="true"> 247 <line x1="40" y1="78" x2="40" y2="54" stroke={monoColor || "#0a0a08"} strokeWidth="5" strokeLinecap="round" /> 248 <line x1="40" y1="54" x2="40" y2="14" stroke="#8b8e93" strokeWidth="5" 249 strokeLinecap="round" strokeDasharray="7 8" /> 250 <path d="M 40 14 L 33 21 M 40 14 L 47 21" 251 stroke="#8b8e93" strokeWidth="5" strokeLinecap="round" fill="none" /> 252 <path d="M 40 54 L 70 34" stroke="#b8424f" strokeWidth="5" strokeLinecap="round" /> 253 <path d="M 70 34 L 62 35 M 70 34 L 67 41" 254 stroke="#b8424f" strokeWidth="5" strokeLinecap="round" fill="none" /> 255 <circle cx="40" cy="54" r="4" fill={monoColor || "#0a0a08"} /> 256 </svg> 257 ); 258} 259 260// Responsive hook: true on phones (â¤bp) or when ?forceMobile=1 is set. 261function useIsNarrow(bp = 760) { 262 const get = () => { 263 try { 264 if (new URLSearchParams(window.location.search).get("forceMobile") === "1") return true; 265 } catch (e) {} 266 return typeof window !== "undefined" && window.innerWidth <= bp; 267 }; 268 const [narrow, setNarrow] = React.useState(get); 269 React.useEffect(() => { 270 const on = () => setNarrow(get()); 271 window.addEventListener("resize", on); 272 return () => window.removeEventListener("resize", on); 273 }, []); 274 return narrow; 275} 276 277// Build an href that carries ?forceMobile=1 across pages when active (keeps the 278// mobile preview in mobile mode while navigating between pages). 279function withMobileParam(href) { 280 try { 281 if (new URLSearchParams(window.location.search).get("forceMobile") === "1") { 282 return href + (href.includes("?") ? "&" : "?") + "forceMobile=1"; 283 } 284 } catch (e) {} 285 return href; 286} 287// The incidents app lives at the project root; the landing page is under explorations/. 288const CS_INCIDENTS_HREF = "/incidents"; 289 290// Top nav, exact match to the real product (sans the TREE | DASHBOARD swap, 291// since this is the landing page). 292function LPNav({ active, theme }) { 293 const isDark = theme === "dark"; 294 const narrow = useIsNarrow(); 295 const [pfOpen, setPfOpen] = React.useState(false); 296 const fg = isDark ? "rgba(255,255,255,0.85)" : "#2e3440"; 297 const muted = isDark ? "rgba(255,255,255,0.45)" : "#4c566a"; 298 const rule = isDark ? "rgba(255,255,255,0.18)" : "#d8dee9"; 299 const menuBg = isDark ? "#141414" : "#ffffff"; 300 const menuBorder = isDark ? "rgba(255,255,255,0.2)" : "#d8dee9"; 301 const link = (label, key, sep, href) => ( 302 <React.Fragment key={key}> 303 <a href={href || "#"} 304 onClick={href ? undefined : (e) => e.preventDefault()} 305 style={{ 306 color: active === key ? fg : muted, 307 textDecoration: active === key ? "underline" : "none", 308 textUnderlineOffset: 4, 309 textDecorationColor: "#b8424f", 310 textDecorationThickness: 2, 311 fontWeight: active === key ? 600 : 400, 312 }}> 313 {label} 314 </a>
315 {sep && <span style={{ color: rule, margin: "0 0.4rem" }}>|</span>} 316 </React.Fragment> 317 ); 318 319 const PF_ITEMS = [ 320 ["Classification Rubric", "/project-files/rubric"], 321 ["Keyword Search List", "/project-files/keyword-list"], 322 ["Reproduction Bundle", "/project-files/reproduction"], 323 ["Decision Tree v5 (PDF)", "/dtree-v5.pdf"], 324 ]; 325 326 return ( 327 <nav style={{ 328 display: "flex", 329 justifyContent: "space-between", 330 alignItems: "center", 331 padding: narrow ? "0.6rem 1rem" : "0.75rem 2rem", 332 borderBottom: `1px solid ${rule}`, 333 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 334 fontSize: narrow ? "0.7rem" : "0.78rem", 335 letterSpacing: "0.02em", 336 color: fg, 337 }}> 338 <div style={{ display: "flex", alignItems: "center", gap: narrow ? "0.9rem" : "2rem", flexWrap: "wrap" }}> 339 <a href="/" 340 style={{ 341 display: "inline-flex", alignItems: "center", gap: "0.5rem", 342 color: fg, textDecoration: "none", 343 }}> 344 <SG6Logo size={20} monoColor={isDark ? "white" : "#0a0a08"} /> 345 <span style={{ fontWeight: 700, letterSpacing: "0.06em", fontSize: "0.84rem" }}> 346 CHEATSHEET 347 </span> 348 </a> 349 <div style={{ display: "flex", alignItems: "center" }}> 350 {link("INCIDENTS", "incidents", true, CS_INCIDENTS_HREF)} 351 {link("METHODS", "methods", true, "/methods")} 352 <span 353 onMouseEnter={() => setPfOpen(true)} 354 onMouseLeave={() => setPfOpen(false)} 355 style={{ position: "relative", display: "inline-flex", alignItems: "center" }}> 356 <span style={{ color: muted, cursor: "pointer" }}> 357 PROJECT FILES <span style={{ fontSize: "0.7rem" }}>â¾</span> 358 </span> 359 {pfOpen && ( 360 <span style={{ 361 position: "absolute", top: "100%", left: 0, marginTop: 0, 362 background: menuBg, border: `1px solid ${menuBorder}`, 363 minWidth: 220, padding: "0.4rem 0", zIndex: 200, 364 boxShadow: "0 8px 22px rgba(0,0,0,0.35)", 365 display: "flex", flexDirection: "column", 366 }}> 367 {PF_ITEMS.map(([lbl, href]) => ( 368 <a key={href} href={href} 369 style={{ display: "block", padding: "0.4rem 0.9rem", color: fg, textDecoration: "none", whiteSpace: "nowrap" }}> 370 {lbl} 371 </a> 372 ))} 373 </span> 374 )} 375 <span style={{ color: rule, margin: "0 0.4rem" }}>|</span> 376 </span> 377 {link("GLOSSARY", "glossary", true, "/glossary")} 378 {link("ABOUT", "about", false, "/about")} 379 </div> 380 </div> 381 </nav> 382 ); 383} 384 385// Common CTA button used by some of the landing pages. 386function LPCta({ children, variant = "solid", arrow = true, href = "/incidents" }) { 387 const isSolid = variant === "solid"; 388 return ( 389 <a href={href} style={{ 390 display: "inline-flex", alignItems: "center", gap: "0.6rem", 391 padding: "0.85rem 1.4rem", 392 background: isSolid ? "#0a0a08" : "transparent", 393 color: isSolid ? "white" : "#0a0a08", 394 border: isSolid ? "1px solid #0a0a08" : "1px solid #0a0a08", 395 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 396 fontWeight: 700, 397 fontSize: "0.82rem", 398 letterSpacing: "0.06em", 399 textDecoration: "none", 400 cursor: "pointer", 401 }}> 402 {children} 403 {arrow && <span style={{ fontSize: "1rem", lineHeight: 1, marginTop: -1 }}>â</span>} 404 </a> 405 ); 406} 407 408// Small inline category badge 409function LPBadge({ cat }) { 410 const colors = { 411 ASG: { bg: "#d7e3f1", fg: "#22497a", border: "#3b6ea5" }, 412 USG: { bg: "#f5d8dc", fg: "#7e2630", border: "#b8424f" }, 413 "OOS-NSE": { bg: "#eaedf1", fg: "#5b6474", border: "#9aa2b2" }, 414 "OOS-BC": { bg: "#e2e6ec", fg: "#494f5e", border: "#7b8494" }, 415 "OOS-BI": { bg: "#dbe0e8", fg: "#3c4356", border: "#5c6577" }, 416 }[cat] || { bg: "#eceff4", fg: "#3b4252", border: "#d8dee9" }; 417 return ( 418 <span style={{ 419 display: "inline-block", 420 padding: "2px 7px", 421 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 422 fontSize: "0.62rem", 423 fontWeight: 700, 424 letterSpacing: "0.06em", 425 border: `1px solid ${colors.border}`, 426 background: colors.bg, 427 color: colors.fg, 428 borderRadius: 2, 429 }}> 430 {cat} 431 </span> 432 ); 433} 434 435// Rubric definitions (verbatim from the incidents app) for the category strip's 436// hover tooltips. 437const CAT_DEFS = { 438 "USG": { 439 full: "Unattributed Specification Gaming", 440 blurb: "The model achieves metric success through undesirable means, but no identifiable feature of the setup points overtly toward the exploit, so the behaviour can be posited to trace back to the model's capabilities or unknown background properties of the data.", 441 }, 442 "ASG": { 443 full: "Attributed Specification Gaming", 444 blurb: "The model achieves metric success through undesirable means, using identifiable features of the environment, training data, or evaluation framework that made that exploit a foreseeable outcome, enough to make the gaming plausibly explainable from the experimental setup and is inconclusive about model capabilities or general behavioural predilection.", 445 }, 446 "OOS-NSE": { 447 full: "Negative Side Effects", 448 blurb: "The model achieves metric success without exploiting the specification and in a way unsurprising from the set up, but its pursuit causes harms or disruptions in areas the specification does not address.", 449 }, 450 "OOS-BC": { 451 full: "Benign Competence", 452 blurb: "The model achieves metric success through means the developers do not consider undesirable and the behaviour is relatively innocuous.", 453 }, 454 "OOS-BI": { 455 full: "Benign Incompetence", 456 blurb: "The model does not achieve metric success, the system is simply failing the task with mundane effects.", 457 }, 458}; 459
460// One card in the footer category strip. Carries a hover tooltip with the 461// rubric definition (right-aligned for the last two so it never runs off-screen). 462function LPStripCard({ row, i, count = 5, narrow = false, href = "#", onClick }) { 463 const [hover, setHover] = React.useState(false); 464 const def = CAT_DEFS[row.c]; 465 const isLast = i >= count - 1; 466 const alignRight = i >= count - 2; 467 const edge = narrow ? "0.6rem" : "1.5rem"; 468 return ( 469 <a 470 href={href} 471 onClick={onClick} 472 onMouseEnter={() => setHover(true)} 473 onMouseLeave={() => setHover(false)} 474 style={{ 475 padding: narrow ? "1.1rem 1.1rem 1.2rem" : "1.4rem 1.5rem 1.6rem", 476 borderRight: narrow ? "1px solid rgba(255,255,255,0.12)" : (!isLast ? "1px solid rgba(255,255,255,0.12)" : "none"), 477 borderBottom: narrow ? "1px solid rgba(255,255,255,0.12)" : "none", 478 position: "relative", 479 textDecoration: "none", color: "inherit", 480 display: "block", 481 background: hover ? "rgba(255,255,255,0.05)" : "transparent", 482 transition: "background .12s", 483 }} 484 > 485 <div style={{ width: 28, height: 4, background: row.color, marginBottom: "0.85rem" }} /> 486 <div style={{ 487 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 488 fontWeight: 700, fontSize: "0.82rem", 489 color: row.oos ? "rgba(255,255,255,0.62)" : "white", 490 marginBottom: "0.15rem", 491 }}> 492 {row.c} 493 </div> 494 <div style={{ 495 fontSize: "0.7rem", color: "rgba(255,255,255,0.45)", marginBottom: "0.5rem", 496 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 497 }}> 498 {row.oos ? "out of scope · " : ""}{row.fullCode} 499 </div> 500 <div style={{ 501 fontFamily: "Plain, ui-sans-serif, system-ui, sans-serif", 502 fontSize: "1.55rem", fontWeight: 300, 503 color: row.oos ? "rgba(255,255,255,0.6)" : "white", 504 fontVariantNumeric: "tabular-nums", 505 }}> 506 {row.n} 507 </div> 508 509 {def && ( 510 <div style={{ 511 position: "absolute", 512 bottom: "calc(100% - 8px)", 513 left: alignRight ? "auto" : edge, 514 right: alignRight ? edge : "auto", 515 width: 300, maxWidth: "82vw", 516 background: "#ffffff", 517 border: "1px solid #4c566a", 518 boxShadow: "0 14px 34px rgba(0,0,0,0.45)", 519 padding: "0.7rem 0.85rem 0.75rem", 520 zIndex: 50, 521 opacity: hover ? 1 : 0, 522 transform: hover ? "translateY(0)" : "translateY(5px)", 523 transition: "opacity .12s, transform .12s", 524 pointerEvents: "none", 525 }}> 526 <div style={{ 527 display: "flex", alignItems: "center", gap: "0.45rem", 528 marginBottom: "0.4rem", paddingBottom: "0.4rem", 529 borderBottom: "1px solid #e5e9f0", 530 fontFamily: "'IBM Plex Mono', ui-monospace, monospace", 531 }}> 532 <span style={{ width: 9, height: 9, borderRadius: "50%", background: row.color, display: "inline-block", flex: "0 0 auto" }} /> 533 <span style={{ fontWeight: 700, fontSize: "0.72rem", color: "#2e3440", letterSpacing: "0.04em" }}>{row.c}</span> 534 <span style={{ fontSize: "0.66rem", color: "#4c566a" }}>{def.full}</span> 535 </div> 536 <p style={{ margin: 0, fontFamily: "Plain, ui-sans-serif, system-ui, sans-serif", fontSize: "0.74rem", lineHeight: 1.5, color: "#3b4252", textWrap: "pretty" }}> 537 {def.blurb} 538 </p> 539 </div> 540 )} 541 </a> 542 ); 543} 544 545Object.assign(window, { 546 LP_STATS, 547 LP_YEAR_BARS, 548 LP_FEATURED, 549 resolveFeatured, 550 CAT_DEFS, 551 computeLPStats, 552 computeYearBars, 553 applyIncidentsData, 554 SG6Logo, 555 LPNav, 556 LPCta, 557 LPBadge, 558 LPStripCard, 559}); 560 561// If the incidents data was already fetched (e.g. by the app in the same tab), 562// apply it now â runs last so all seed data above is initialized. 563if (typeof window !== "undefined" && window.__INCIDENTS__) { 564 applyIncidentsData(window.__INCIDENTS__); 565}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.