// V6 — Tree view (hierarchical file-tree style).
// Flat top-level: ASG, USG, OOS-NSE, OOS-BC, OOS-BI, OOS.
// "Group by" optional subgroup level under each category.
// Hover a category row to see its verbatim rubric definition.
// Flat top-level, ordered by importance: USG (the key signal), then ASG, then
// the out-of-scope buckets. ("OOS" plain has effectively zero entries so we drop it.)
const TOP_CATS = ["USG", "ASG", "OOS-NSE", "OOS-BC", "OOS-BI"];
const GROUP_BYS = [
{ id: "none", label: "None" },
{ id: "system", label: "LM / Non-LM" },
{ id: "year", label: "Year" },
{ id: "model", label: "Model" },
{ id: "source", label: "Source paper" },
];
// Sort key arrays per group-by mode.
function sortGroupKeys(keys, mode, sizes) {
if (mode === "year") {
return [...keys].sort((a, b) => {
if (a === "—") return 1;
if (b === "—") return -1;
return Number(b) - Number(a);
});
}
if (mode === "system") {
return [...keys].sort((a, b) => (a === "LM" ? -1 : 1));
}
// model / source: by size desc, then alpha
return [...keys].sort((a, b) =>
(sizes.get(b) - sizes.get(a)) || String(a || "").localeCompare(String(b || ""))
);
}
// Group rows by category → array of {row, uid}
function byCategoryUid(rows) {
const out = {};
for (const c of CATS) out[c] = [];
for (const r of rows) if (out[r.category]) out[r.category].push(r);
for (const c of CATS) out[c].sort((a, b) => (b.year || 0) - (a.year || 0));
return out;
}
// Build subgroups for the rows of a single category, per the chosen mode.
function buildSubgroups(rows, mode) {
if (mode === "none") return null;
const map = new Map();
for (const r of rows) {
let keys;
if (mode === "system") keys = [r.system];
else if (mode === "year") keys = [r.year && r.year > 0 ? String(r.year) : "—"];
else if (mode === "model") keys = String(r.models).split(/,\s*/).filter(Boolean);
else if (mode === "source") keys = [r.source_title || "(untitled source)"];
else keys = [];
for (const k of keys) {
if (!map.has(k)) map.set(k, []);
map.get(k).push(r);
}
}
const sizes = new Map();
for (const [k, v] of map) sizes.set(k, v.length);
const keys = sortGroupKeys([...map.keys()], mode, sizes);
return { keys, map };
}
function V6Tree({ view, onViewChange }) {
const { data, error, retry } = useIncidents();
const [q, setQ] = React.useState("");
const [groupBy, setGroupBy] = React.useState("none");
// expanded ids — cat: or sub: ids. Start with USG cat open (the key category).
const [expanded, setExpanded] = React.useState(() => new Set(["cat:USG"]));
// selected node id. Default: root.
const [selected, setSelected] = React.useState("root");
// Mobile: single column with a master→detail toggle. Selecting any node
// flips to the detail pane; a Back button returns to the tree.
const narrow = useIsNarrow(820);
const [mobilePane, setMobilePane] = React.useState("tree");
const firstSel = React.useRef(true);
React.useEffect(() => {
if (firstSel.current) { firstSel.current = false; return; }
if (narrow) setMobilePane("detail");
}, [selected]);
// Combined LM + Non-LM rows, tagged with system + uid.
const allRows = React.useMemo(() => {
if (!data) return [];
const out = [];
for (const r of data.lm || []) out.push({ ...r, system: "LM", uid: out.length });
for (const r of data.non_lm || []) out.push({ ...r, system: "Non-LM", uid: out.length });
return out;
}, [data]);
const counts = {};
counts.all = allRows.length;
for (const r of allRows) counts[r.category] = (counts[r.category] || 0) + 1;
const byCat = React.useMemo(() => byCategoryUid(allRows), [allRows]);
const matchesQuery = (r, query) => {
if (!query) return true;
const blob = [r.year, r.models, r.category, r.task, r.intended, r.actual, r.source_title, r.system]
.join(" ")
.toLowerCase();
return blob.includes(query.toLowerCase().trim());
};
const filteredByCat = {};
for (const c of CATS) filteredByCat[c] = byCat[c].filter((r) => matchesQuery(r, q));
const subgroupsByCat = React.useMemo(() => {
if (groupBy === "none") return null;
const out = {};
for (const c of TOP_CATS) {
const inList = q ? filteredByCat[c] : byCat[c];
out[c] = buildSubgroups(inList, groupBy);
}
return out;
// eslint-disable-next-line
}, [groupBy, q, byCat, allRows]);
// When search is active, auto-expand categories (and their subgroups) with matches
const effectiveExpanded = React.useMemo(() => {
if (!q) return expanded;
const e = new Set(expanded);
for (const c of TOP_CATS) {
if (filteredByCat[c].length > 0) {
e.add("cat:" + c);
if (subgroupsByCat && subgroupsByCat[c]) {
for (const k of subgroupsByCat[c].keys) {
e.add(`sub:${c}:${groupBy}:${k}`);
}
}
}
}
return e;
// eslint-disable-next-line
}, [q, expanded, allRows, subgroupsByCat, groupBy]);
// Resolve selection → detail-pane content kind
const sel = React.useMemo(() => {
if (selected === "root") return { kind: "root" };
if (selected.startsWith("cat:")) {
const c = selected.slice(4);
return CAT_META[c] ? { kind: "cat", cat: c } : { kind: "root" };
}
if (selected.startsWith("sub:")) {
const [, c, mode, ...rest] = selected.split(":");
return { kind: "sub", cat: c, mode, key: rest.join(":") };
}
if (selected.startsWith("incident:")) {
const uid = Number(selected.slice(9));
const r = allRows[uid];
return r ? { kind: "incident", row: r } : { kind: "root" };
}
return { kind: "root" };
}, [selected, allRows]);
if (error) return
{ setGroupBy(g); }} />
View: Tree
{totalFilteredCount} MATCH{totalFilteredCount === 1 ? "" : "ES"}
)}
{/* ── LEFT: tree ── */}
{/* Root row */}
setSelected("root")}
/>
{TOP_CATS.map((c) => {
const meta = CAT_META[c];
const cid = "cat:" + c;
const cOpen = effectiveExpanded.has(cid);
const inList = q ? filteredByCat[c] : byCat[c];
const sub = subgroupsByCat ? subgroupsByCat[c] : null;
const hasChildren = inList.length > 0;
return (
toggle(cid)}
onSelect={() => setSelected(cid)}
/>
{cOpen && sub && sub.keys.map((k) => {
const sid = `sub:${c}:${groupBy}:${k}`;
const sOpen = effectiveExpanded.has(sid);
const sRows = sub.map.get(k);
return (
0}
selected={selected === sid}
onToggle={() => toggle(sid)}
onSelect={() => setSelected(sid)}
/>
{sOpen && sRows.slice(0, 100).map((r) => {
const incId = `incident:${r.uid}`;
return (
0 ? r.year : "—"} · ${r.models}`}
kind="incident"
catSlug={meta.slug}
expanded={false}
hasChildren={false}
selected={selected === incId}
onSelect={() => setSelected(incId)}
/>
);
})}
{sOpen && sRows.length > 100 && (
+ {sRows.length - 100} more…
)}
);
})}
{cOpen && !sub && inList.slice(0, 200).map((r) => {
const incId = `incident:${r.uid}`;
return (
0 ? r.year : "—"} · ${r.models}`}
kind="incident"
catSlug={meta.slug}
expanded={false}
hasChildren={false}
selected={selected === incId}
onSelect={() => setSelected(incId)}
/>
);
})}
{cOpen && !sub && inList.length > 200 && (
+ {inList.length - 200} more {meta.isOOS ? "entries" : "incidents"} in this bucket…
)}
);
})}
{/* ── RIGHT: detail pane ── */}
{narrow && (
setMobilePane("tree")}>
← Back to tree
)}
{sel.kind === "root" && (
setSelected("incident:" + uid)}
/>
)}
);
}
// ─── Group-by selector ──────────────────────────────────────────────────────
function GroupBySelector({ value, onChange }) {
return (
Group by
{GROUP_BYS.map((g) => (
onChange(g.id)}
>
{g.label}
))}
);
}
// ─── Tree row ───────────────────────────────────────────────────────────────
function TreeRow({
depth, id, label, short, count, matchCount, meta,
kind, catSlug, blurb,
expanded, hasChildren, selected,
onToggle, onSelect,
}) {
const indent = 8 + depth * 20;
const isCatTip = kind === "cat" && !!blurb;
const tip = useAcroTip();
const tipMeta = isCatTip
? (resolveCatMeta(short) || { slug: catSlug, key: short, full: label, blurb })
: null;
const onRowClick = (e) => {
if (e.target.dataset.role === "disclosure") return;
onSelect && onSelect();
};
const disclosureChar = hasChildren ? (expanded ? "▾" : "▸") : "";
const onDisc = (e) => {
e.stopPropagation();
if (hasChildren && onToggle) onToggle();
};
const onRowKeyDown = (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onSelect && onSelect();
return;
}
if (e.key === "ArrowRight") {
if (hasChildren && !expanded && onToggle) { e.preventDefault(); onToggle(); }
return;
}
if (e.key === "ArrowLeft") {
if (hasChildren && expanded && onToggle) { e.preventDefault(); onToggle(); }
return;
}
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
const pane = e.currentTarget.closest('[role="tree"]');
if (!pane) return;
const items = Array.from(pane.querySelectorAll('[role="treeitem"]'));
const i = items.indexOf(e.currentTarget);
const next = items[i + (e.key === "ArrowDown" ? 1 : -1)];
if (next) next.focus();
}
};
const dot =
kind === "cat" ?
{kind === "root" ? "◆" : "▣"}
) : kind === "sub" ? (
{expanded ? "▤" : "▥"}
) : null;
return (
{disclosureChar}
{folderIcon}
{dot}
{label}
{short && kind === "cat" && (
{short}
)}
{meta &&
{meta} }
{(count != null || matchCount != null) && (
{matchCount != null ? (
<>
{matchCount}
/ {count}
) : (
count
)}
)}
{/* Hover tooltip — only category rows (portaled to body, never clipped) */}
{isCatTip && tipMeta && (
)}
);
}
// ─── Detail panes ───────────────────────────────────────────────────────────
function RootSummary({ allRows, counts }) {
const total = allRows.length || 1;
const sgCount = (counts.ASG || 0) + (counts.USG || 0);
const oosCount =
(counts["OOS-NSE"] || 0) +
(counts["OOS-BC"] || 0) +
(counts["OOS-BI"] || 0) +
(counts.OOS || 0);
const lmCount = allRows.filter((r) => r.system === "LM").length;
const nonLmCount = allRows.length - lmCount;
return (
SELECTED · ROOT
All entries
{allRows.length}
entries in the catalogue
Incidents — specification gaming (USG + ASG )
{sgCount}
Out of Scope (NSE + BC + BI + OOS )
{oosCount}
Language models
{lmCount}
Non-LM systems
{nonLmCount}
Browse the catalogue by expanding the tree on the left. Each category
corresponds to a terminal category. Use the Group by
{" "}control above to add a secondary level — by system type, year,
model family, or source paper.
);
}
function CategorySummary({ cat, rows }) {
const meta = CAT_META[cat];
return (
SELECTED · CATEGORY
{cat}
{meta.full}
{meta.blurb}
{rows.length}
{meta.isOOS ? "out-of-scope entries in this bucket" : "incidents in this bucket"}
{/* tiny year histogram */}
{(() => {
const yMap = {};
for (const r of rows) {
const y = r.year && r.year > 0 ? r.year : "—";
yMap[y] = (yMap[y] || 0) + 1;
}
const years = Object.keys(yMap).sort();
const max = Math.max(1, ...Object.values(yMap));
return (
);
})()}
Expand this node in the tree to browse every {meta.isOOS ? "entry" : "incident"} in {cat} .
);
}
function SubgroupSummary({ cat, mode, groupKey, rows }) {
const meta = CAT_META[cat];
const modeLabel = (GROUP_BYS.find((g) => g.id === mode) || {}).label || mode;
return (
SELECTED · SUBGROUP
{cat}
›
{modeLabel}
{groupKey}
{rows.length}
{meta.isOOS ? "entries" : "incidents"}
{meta.isOOS ? "Entries" : "Incidents"} classified as {meta.full} ({cat}) within the{" "}
{groupKey} {modeLabel.toLowerCase()} bucket.
Click any incident in the tree to see its full description.
);
}
// Convert any source link to its embeddable PDF URL when possible.
// arXiv: /abs/X → /pdf/X ; everything else returned as-is (and we'll let
// the iframe try; if the host refuses to embed, we show the fallback).
function embedUrlFor(link) {
if (!link) return null;
try {
const u = new URL(link);
if (u.hostname.endsWith("arxiv.org")) {
// /abs/ or /pdf/ — normalize to /pdf/
const m = u.pathname.match(/\/(abs|pdf)\/([^/]+?)(?:\.pdf)?\/?$/);
if (m) return `https://arxiv.org/pdf/${m[2]}`;
}
// .pdf direct
if (u.pathname.toLowerCase().endsWith(".pdf")) return u.toString();
// Anything else (blog posts, system cards, HTML pages) is not embedded:
// most such hosts refuse framing and the browser shows its own error
// instead of our fallback, so go straight to the fallback panel.
return null;
} catch (e) {
return link;
}
}
function IncidentDetail({ row, allRows, onSelectIncident, permalinkHeadline = true }) {
const embed = embedUrlFor(row.source_link);
const [embedError, setEmbedError] = React.useState(false);
const [loaded, setLoaded] = React.useState(false);
// Reset embed state whenever we switch incidents
React.useEffect(() => {
setEmbedError(false);
setLoaded(false);
// If the iframe hasn't fired onLoad within 5s, assume the host blocked it.
const t = setTimeout(() => setLoaded((cur) => cur ? cur : (setEmbedError(true), false)), 6000);
return () => clearTimeout(t);
}, [row && row.source_link]);
const meta = CAT_META[row.category];
// Other incidents from the same paper (match by source_link, else title)
const siblings = React.useMemo(() => {
if (!allRows) return [];
const matchKey = row.source_link || row.source_title;
if (!matchKey) return [];
return allRows.filter((r) =>
r.uid !== row.uid &&
((r.source_link && r.source_link === row.source_link) ||
(!row.source_link && r.source_title === row.source_title))
);
}, [row, allRows]);
return (
SELECTED · {meta.isOOS ? "ENTRY" : "INCIDENT"}
{row.incident_id && (
{row.incident_id}
)}
{row.year && row.year > 0 ? row.year : "—"}
·
{row.models}
·
{row.system}
{permalinkHeadline && row.incident_id ? (
{row.task}
) : row.task}
INTENDED BEHAVIOUR
{row.intended}
ACTUAL BEHAVIOUR
{row.actual}
{/* === More entries from this paper =================================== */}
{siblings.length > 0 && (
MORE FROM THIS PAPER
{siblings.length} other{siblings.length === 1 ? "" : "s"}
{siblings.length > 8 && (
+ {siblings.length - 8} more from this paper
)}
)}
{/* === Embedded paper ============================================== */}
{embed && !embedError ? (