create-slide-deck 0.1.0

package/template-full/src/reveal/decks/fse26-rca/components/closing-takeaway.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, MIN_FONT, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const COL_W = W / 3;
+const ICON_R = 40;
+const ICON_Y = 60;
+const TITLE_Y = ICON_Y + ICON_R + 28;
+const CONTENT_Y = TITLE_Y + 30;
+const BAR_MAX = 240;
+
+export default function ClosingTakeaway({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+
+      {/* === Section 1: Benchmark shapes research === */}
+      <g style={vis(step, 0, instant)}>
+        {/* Icon circle with compass arrow */}
+        <circle cx={COL_W * 0.5} cy={ICON_Y} r={ICON_R} fill="#C00000" fillOpacity={0.08} stroke="#C00000" strokeWidth={2.5} />
+        <path d="M-12,-6 L12,0 L-12,6 L-6,0 Z" transform={"translate(" + (COL_W * 0.5) + "," + ICON_Y + ")"} fill="#C00000" />
+
+        {/* Title */}
+        <text x={COL_W * 0.5} y={TITLE_Y} textAnchor="middle" fontSize={18} fontWeight={900} fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Benchmark shapes research
+        </text>
+
+        {/* Mini rank comparison */}
+        {(function () {
+          const cx = COL_W * 0.5;
+          const bx = cx - 120;
+          const by = CONTENT_Y + 20;
+          const barH = 18;
+          const gap = 36;
+
+          return (
+            <g>
+              {/* Old benchmarks label */}
+              <text x={cx} y={CONTENT_Y} textAnchor="middle" fontSize={MIN_FONT} fontWeight={800} fill="#C00000" fontFamily={CANVAS.fontFamily}>Old benchmarks</text>
+              {/* SimpleRCA bar */}
+              <rect x={bx} y={by} width={BAR_MAX * 0.85} height={barH} rx={4} fill="#C00000" fillOpacity={0.15} stroke="#C00000" strokeWidth={1.5} />
+              <text x={bx + 8} y={by + 13} fontSize={12} fontWeight={800} fill="#C00000" fontFamily={CANVAS.fontFamily}>SimpleRCA</text>
+              {/* SOTA bar (similar length) */}
+              <rect x={bx} y={by + barH + 4} width={BAR_MAX * 0.88} height={barH} rx={4} fill="#767676" fillOpacity={0.12} stroke="#999" strokeWidth={1} />
+              <text x={bx + 8} y={by + barH + 17} fontSize={12} fontWeight={700} fill="#767676" fontFamily={CANVAS.fontFamily}>SOTA best</text>
+              {/* Approx equal */}
+              <text x={bx + BAR_MAX + 14} y={by + barH + 4} textAnchor="middle" fontSize={20} fontWeight={900} fill="#C00000" fontFamily={CANVAS.fontFamily}>≈</text>
+
+              {/* New benchmark label */}
+              <text x={cx} y={by + gap + barH + 20} textAnchor="middle" fontSize={MIN_FONT} fontWeight={800} fill="#76B82A" fontFamily={CANVAS.fontFamily}>New benchmark</text>
+              {/* SOTA bar (longer) */}
+              <rect x={bx} y={by + gap + barH + 30} width={BAR_MAX * 0.92} height={barH} rx={4} fill="#76B82A" fillOpacity={0.15} stroke="#76B82A" strokeWidth={1.5} />
+              <text x={bx + 8} y={by + gap + barH + 43} fontSize={12} fontWeight={800} fill="#76B82A" fontFamily={CANVAS.fontFamily}>MicroRCA</text>
+              <text x={bx + BAR_MAX * 0.92 + 8} y={by + gap + barH + 43} fontSize={14} fontWeight={900} fill="#76B82A" fontFamily={CANVAS.fontFamily}>0.37</text>
+              {/* SimpleRCA bar (shorter) */}
+              <rect x={bx} y={by + gap + barH + 52} width={BAR_MAX * 0.70} height={barH} rx={4} fill="#C00000" fillOpacity={0.15} stroke="#C00000" strokeWidth={1.5} />
+              <text x={bx + 8} y={by + gap + barH + 65} fontSize={12} fontWeight={800} fill="#C00000" fontFamily={CANVAS.fontFamily}>SimpleRCA</text>
+              <text x={bx + BAR_MAX * 0.70 + 8} y={by + gap + barH + 65} fontSize={14} fontWeight={900} fill="#C00000" fontFamily={CANVAS.fontFamily}>0.28</text>
+              {/* empty */}
+            </g>
+          );
+        })()}
+
+        {/* Caption */}
+        <text x={COL_W * 0.5} y={CONTENT_Y + 200} textAnchor="middle" fontSize={MIN_FONT} fill="#767676" fontFamily={CANVAS.fontFamily}>
+          7/11 datasets shortcutted
+        </text>
+      </g>
+
+      {/* === Section 2: Three orthogonal bottlenecks === */}
+      <g style={vis(step, 1, instant)}>
+        {/* Icon circle with three split bars */}
+        <circle cx={COL_W * 1.5} cy={ICON_Y} r={ICON_R} fill="#00A6D6" fillOpacity={0.08} stroke="#00A6D6" strokeWidth={2.5} />
+        <rect x={COL_W * 1.5 - 14} y={ICON_Y - 14} width={28} height={6} rx={2} fill="#E8912D" />
+        <rect x={COL_W * 1.5 - 14} y={ICON_Y - 3} width={22} height={6} rx={2} fill="#00A6D6" />
+        <rect x={COL_W * 1.5 - 14} y={ICON_Y + 8} width={12} height={6} rx={2} fill="#7B61FF" />
+
+        {/* Title */}
+        <text x={COL_W * 1.5} y={TITLE_Y} textAnchor="middle" fontSize={18} fontWeight={900} fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Three orthogonal bottlenecks
+        </text>
+
+        {/* Three horizontal bars with stats */}
+        {(function () {
+          const cx = COL_W * 1.5;
+          const bx = cx - 140;
+          const items = [
+            { pct: 47.4, label: "Modeling", desc: "wrong graph assumptions", color: "#E8912D" },
+            { pct: 39.8, label: "Scalability", desc: "CausalRCA: 927s/case", color: "#00A6D6" },
+            { pct: 12.8, label: "Observability", desc: "signal + infra gaps", color: "#7B61FF" },
+          ];
+          const maxPct = 50;
+          const barFullW = 180;
+
+          return items.map(function (item, i) {
+            const y = CONTENT_Y + 14 + i * 62;
+            const barW = (item.pct / maxPct) * barFullW;
+            return (
+              <g key={i}>
+                <text x={bx} y={y} fontSize={28} fontWeight={900} fill={item.color} fontFamily={CANVAS.fontFamily}>
+                  {item.pct + "%"}
+                </text>
+                <text x={bx + 90} y={y - 6} fontSize={16} fontWeight={800} fill="#313131" fontFamily={CANVAS.fontFamily}>
+                  {item.label}
+                </text>
+                <text x={bx + 90} y={y + 12} fontSize={13} fill="#767676" fontFamily={CANVAS.fontFamily}>
+                  {item.desc}
+                </text>
+                <rect x={bx} y={y + 18} width={barFullW + 100} height={4} rx={2} fill="#eee" />
+                <rect x={bx} y={y + 18} width={barW + 100 * (item.pct / maxPct)} height={4} rx={2} fill={item.color} fillOpacity={0.6} />
+              </g>
+            );
+          });
+        })()}
+      </g>
+
+      {/* === Section 3: Open benchmark & tools === */}
+      <g style={vis(step, 2, instant)}>
+        {/* Icon circle with globe shape */}
+        <circle cx={COL_W * 2.5} cy={ICON_Y} r={ICON_R} fill="#76B82A" fillOpacity={0.08} stroke="#76B82A" strokeWidth={2.5} />
+        <circle cx={COL_W * 2.5} cy={ICON_Y} r={14} fill="none" stroke="#76B82A" strokeWidth={2} />
+        <ellipse cx={COL_W * 2.5} cy={ICON_Y} rx={7} ry={14} fill="none" stroke="#76B82A" strokeWidth={1.5} />
+        <line x1={COL_W * 2.5 - 14} y1={ICON_Y} x2={COL_W * 2.5 + 14} y2={ICON_Y} stroke="#76B82A" strokeWidth={1.5} />
+
+        {/* Title */}
+        <text x={COL_W * 2.5} y={TITLE_Y} textAnchor="middle" fontSize={18} fontWeight={900} fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Open benchmark & tools
+        </text>
+
+        {/* Large stat numbers */}
+        {(function () {
+          const cx = COL_W * 2.5;
+          const stats = [
+            { val: "1,430", label: "validated cases" },
+            { val: "25", label: "fault types" },
+            { val: "12", label: "algorithms evaluated" },
+          ];
+          return stats.map(function (s, i) {
+            const y = CONTENT_Y + 20 + i * 62;
+            return (
+              <g key={i}>
+                <text x={cx - 50} y={y} textAnchor="end" fontSize={36} fontWeight={900} fill="#76B82A" fontFamily={CANVAS.fontFamily}>{s.val}</text>
+                <text x={cx - 38} y={y} fontSize={16} fontWeight={700} fill="#555" fontFamily={CANVAS.fontFamily}>{s.label}</text>
+              </g>
+            );
+          });
+        })()}
+
+        {/* QR code */}
+        <image href="images/qr-repo.png" x={COL_W * 2.5 - 50} y={CONTENT_Y + 190} width={100} height={100} />
+        <text x={COL_W * 2.5} y={CONTENT_Y + 304} textAnchor="middle" fontSize={11} fontWeight={700} fill="#767676" fontFamily={CANVAS.fontFamily}>
+          operationspai.github.io/revisiting-rca-evaluation
+        </text>
+      </g>
+
+      {/* === Final takeaway banner === */}
+      <g style={vis(step, 3, instant)}>
+        <rect x={(W - 700) / 2} y={H - 70} width={700} height={50} rx={8} fill="#C00000" fillOpacity={0.06} stroke="#C00000" strokeWidth={2} />
+        <text x={W / 2} y={H - 39} textAnchor="middle" fontSize={20} fontWeight={900} fill="#C00000" fontFamily={CANVAS.fontFamily}>
+          Do not optimize for an easy benchmark
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/cloud-incidents.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep, vis } from "../../../core/presets.ts";
+
+const IMG_CSS: React.CSSProperties = {
+  borderRadius: 8,
+  boxShadow: "0 4px 16px rgba(49,49,49,0.10)",
+  overflow: "hidden",
+  width: 380,
+  height: 340,
+  objectFit: "contain",
+  objectPosition: "top center",
+};
+
+const CARDS = [
+  {
+    x: 48,
+    src: "images/verge-crowdstrike-2024.png",
+    alt: "CrowdStrike outage",
+    title: "2024.07 · CrowdStrike",
+    sub: "~$5.4B Fortune 500 losses",
+  },
+  {
+    x: 450,
+    src: "images/aws-outage-2025-deployflow.png",
+    alt: "AWS Outage October 2025",
+    title: "2025.10 · AWS US-EAST-1",
+    sub: ">$1.1B · 15h outage · 1000+ companies",
+  },
+  {
+    x: 852,
+    src: "images/wiki-meta-outage-2021.png",
+    alt: "Wikipedia: 2021 Facebook outage",
+    title: "2021.10 · Meta",
+    sub: "~$100M ad revenue · 6h · 3.5B users",
+  },
+];
+
+export default function CloudIncidents({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  return (
+    <div
+      style={{
+        opacity: ready ? 1 : 0,
+        transition: instant ? "none" : "opacity 0.2s ease",
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        fontFamily: CANVAS.fontFamily,
+      }}
+    >
+      {CARDS.map(function (c) {
+        return (
+          <div key={c.x} style={{ position: "absolute", left: c.x, top: 66, width: 380 }}>
+            <img src={c.src} alt={c.alt} style={IMG_CSS} />
+            <div className="img-caption" style={{ marginTop: 10 }}>
+              <strong>{c.title}</strong>
+              <span>{c.sub}</span>
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="blur-banner-wrap"
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 50,
+          width: "100%",
+          height: 480,
+          ...vis(step, 0, instant),
+        }}
+      >
+        <div className="blur-banner">
+          <div className="blur-banner-line">
+            These outages cost <strong>billions</strong>
+          </div>
+          <div className="blur-banner-sub">
+            every one of them is an <strong>RCA</strong> problem
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/failure-modes.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import { FAILURE_MODES } from "../../../data/benchmark.ts";
+
+const BARS = FAILURE_MODES.bars;
+const DESCS = FAILURE_MODES.descs;
+
+const SVG_W = 1000;
+const SVG_H = 420;
+const CHART_LEFT = 300;
+const CHART_TOP = 40;
+const CHART_W = 560;
+const BAR_H = 34;
+const BAR_GAP = 18;
+const MAX_PCT = 50;
+
+function barW(pct: number) { return (pct / MAX_PCT) * CHART_W; }
+
+export default function FailureModes({ Reveal }: SlideComponentProps) {
+  function barY(i: number) { return CHART_TOP + i * (BAR_H + BAR_GAP); }
+  const chartBottom = barY(BARS.length - 1) + BAR_H;
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => <>
+
+      {BARS.map(function (b, i) {
+        const y = barY(i);
+        const w = barW(b.pct);
+        return (
+          <g key={b.key} style={vis(step, b.reveal, instant)}>
+            <text x={CHART_LEFT - 16} y={y + BAR_H / 2 + 5} textAnchor="end" fontSize="15" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>{b.label}</text>
+            <rect x={CHART_LEFT} y={y} width={CHART_W} height={BAR_H} rx="6" fill="#F2F2F2" />
+            <rect x={CHART_LEFT} y={y} width={w} height={BAR_H} rx="6" fill={b.color} />
+            <text x={CHART_LEFT + w + 12} y={y + BAR_H / 2 + 6} fontSize="17" fontWeight="900" fill={b.color} fontFamily={CANVAS.fontFamily}>{b.pct.toFixed(1)}%</text>
+          </g>
+        );
+      })}
+
+      {DESCS.map(function (d, i) {
+        return (
+          <g key={i} style={{ opacity: step === d.reveal ? 1 : 0, transition: instant ? "none" : "opacity 0.35s ease" }}>
+            <rect x={CHART_LEFT} y={chartBottom + 24} width={CHART_W} height="54" rx="8" fill="#fff" stroke={d.color} strokeWidth="2" />
+            <rect x={CHART_LEFT} y={chartBottom + 24} width="6" height="54" rx="3" fill={d.color} />
+            <text x={CHART_LEFT + 22} y={chartBottom + 46} fontSize="16" fontWeight="900" fill={d.color} fontFamily={CANVAS.fontFamily}>{d.title}</text>
+            <text x={CHART_LEFT + 22} y={chartBottom + 68} fontSize="14" fontWeight="700" fill="#767676" fontFamily={CANVAS.fontFamily}>{d.text}</text>
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 3, instant)}>
+        <text x={SVG_W / 2} y={chartBottom + 50} textAnchor="middle" fontSize="20" fontWeight="900" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          <tspan fill="#C00000">262 hardest cases analyzed</tspan>
+          <tspan fill="#767676" fontWeight="800"> — three orthogonal bottlenecks</tspan>
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/fault-heatmap.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import { HEATMAP_ALGOS as ALGOS, HEATMAP_GROUPS as GROUPS } from "../../../data/algorithms.ts";
+
+const SVG_W = 1400;
+const SVG_H = 540;
+const LABEL_W = 200;
+const GROUP_W = 50;
+const COL_GAP_TOP = 56;
+const GRID_TOP = 50;
+const GRID_LEFT = LABEL_W;
+const ROW_H = 17;
+const MAX_R = 7;
+
+function colColor(v: number) {
+  if (v <= 0) return "#C9C9C9";
+  if (v >= 0.65) return "#76B82A";
+  if (v >= 0.35) return "#E8912D";
+  return "#C00000";
+}
+
+export default function FaultHeatmap({ Reveal }: SlideComponentProps) {
+  const colW = (SVG_W - GRID_LEFT - 20) / ALGOS.length;
+  function colX(i: number) { return GRID_LEFT + colW * (i + 0.5); }
+
+  const rowY: any[] = [];
+  const groupSpans: any[] = [];
+  let y = GRID_TOP + 6;
+  GROUPS.forEach(function (g) {
+    const startY = y;
+    g.rows.forEach(function (r) {
+      rowY.push({ y: y, group: g, row: r });
+      y += ROW_H;
+    });
+    groupSpans.push({ group: g, y0: startY, y1: y });
+    y += 24;
+  });
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={y + 50}>{(step, instant) => <>
+
+      {ALGOS.map(function (a, i) {
+        return (
+          <text key={a} x={colX(i)} y={GRID_TOP - 10} textAnchor="middle" fontSize="14" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>{a}</text>
+        );
+      })}
+
+      {groupSpans.map(function (gs, gi) {
+        const g = gs.group;
+        return (
+          <g key={gi} style={vis(step, g.step, instant)}>
+            <rect x={GRID_LEFT - 4} y={gs.y0} width={SVG_W - GRID_LEFT - 14} height={gs.y1 - gs.y0 + 4} rx="6" fill={g.color} fillOpacity="0.06" />
+            <rect x="14" y={gs.y0} width="6" height={gs.y1 - gs.y0 + 4} rx="3" fill={g.color} />
+            <text x="14" y={gs.y0 - 6} fontSize="14" fontWeight="900" fill={g.color} fontFamily={CANVAS.fontFamily}>{g.name}</text>
+          </g>
+        );
+      })}
+
+      {rowY.map(function (rc, ri) {
+        const g = rc.group, r = rc.row, ry = rc.y;
+        return (
+          <g key={ri} style={vis(step, g.step, instant)}>
+            <text x={GRID_LEFT - 14} y={ry + 17} textAnchor="end" fontSize="14" fontWeight="700" fill="#313131" fontFamily={CANVAS.fontFamily}>{r.fault}</text>
+            {r.mrr.map(function (v: number, ci: number) {
+              const rad = v <= 0 ? 3 : 4 + v * (MAX_R - 4);
+              return (
+                <g key={ci}>
+                  <circle cx={colX(ci)} cy={ry + 13} r={rad} fill={colColor(v)} fillOpacity={v <= 0 ? 0.5 : 0.9} />
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 6, instant)}>
+        <text x={SVG_W / 2} y={y + 34} textAnchor="middle" fontSize="20" fontWeight="900" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          <tspan fill="#C00000">No universal winner</tspan>
+          <tspan fill="#767676" fontWeight="800"> — performance depends on fault type</tspan>
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/hierarchy-tree.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { hierarchy, tree as d3tree } from "d3-hierarchy";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const TREE_DATA = {
+  n: "ts-order-service", level: "Service", step: 0, color: "#1B556B",
+  children: [
+    { n: "ts-order-pod-1", level: "Pod", step: 1, color: "#76B82A",
+      children: [
+        { n: "order-container", level: "Container", step: 2, color: "#00A6D6",
+          children: [
+            { n: "cpu_usage: 98%", level: "Metric", step: 3, color: "#C00000" },
+            { n: "POST /api/order", level: "Span", step: 3, color: "#E8912D" },
+            { n: "createOrder()", level: "Function", step: 3, color: "#7B61FF" },
+          ]},
+      ]},
+    { n: "ts-order-pod-2", level: "Pod", step: 1, color: "#76B82A",
+      children: [
+        { n: "order-container", level: "Container", step: 2, color: "#00A6D6" },
+      ]},
+  ],
+};
+
+const W = 900, H = 360;
+const root = hierarchy(TREE_DATA as any);
+d3tree().size([H - 80, W - 220]).separation(function(a, b) {
+  return a.parent === b.parent ? 1.3 : 2.0;
+})(root);
+
+const allNodes = root.descendants();
+const allLinks = root.links();
+
+const LEVEL_COLORS = {
+  Service: "#1B556B",
+  Pod: "#76B82A",
+  Container: "#00A6D6",
+  Metric: "#C00000",
+  Span: "#E8912D",
+  Function: "#7B61FF",
+};
+
+const LEVEL_LABELS = ["Service", "Pod", "Container", "Metric / Span / Function"];
+
+export default function HierarchyTree({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+
+      {allLinks.map(function(link, i) {
+        const tStep = (link.target.data as any).step;
+        return (
+          <path key={"e" + i}
+            d={"M" + (link.source.y! + 70) + "," + (link.source.x! + 30) +
+               " C" + ((link.source.y! + link.target.y!) / 2 + 70) + "," + (link.source.x! + 30) +
+               " " + ((link.source.y! + link.target.y!) / 2 + 70) + "," + (link.target.x! + 30) +
+               " " + (link.target.y! + 70) + "," + (link.target.x! + 30)}
+            fill="none" stroke="#ddd" strokeWidth="1.5"
+            style={vis(step, tStep, instant)} />
+        );
+      })}
+
+      {allNodes.map(function(nd, i) {
+        const d = nd.data as any;
+        const x = nd.y! + 70;
+        const y = nd.x! + 30;
+        const color = (LEVEL_COLORS as any)[d.level] || "#999";
+        const isService = d.level === "Service";
+        const w = isService ? 170 : d.level === "Pod" ? 150 : d.level === "Container" ? 150 : 150;
+        const h = 34;
+        const highlight = step === d.step;
+
+        return (
+          <g key={"n" + i} style={vis(step, d.step, instant)}>
+            <rect x={x - 4} y={y - h/2} width={w} height={h} rx="6"
+              fill="white" stroke={color}
+              strokeWidth={highlight ? 3 : 2}
+              strokeDasharray={d.level === "Metric" || d.level === "Span" || d.level === "Function" ? "5 3" : "none"} />
+            <text x={x + w/2 - 4} y={y + 1} textAnchor="middle" dominantBaseline="middle"
+              fontSize="15" fontWeight="800" fill={color} fontFamily={CANVAS.fontFamily}>{d.n}</text>
+            <text x={x - 16} y={y + 1} textAnchor="end" dominantBaseline="middle"
+              fontSize="14" fontWeight="700" fill="#bbb" fontFamily={CANVAS.fontFamily}>{d.level}</text>
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 4, instant)}>
+        <text x={W / 2} y={H - 10} textAnchor="middle" fontSize="16" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Service-level comparison for fair cross-method evaluation
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/incident-hard.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, MIN_FONT, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const R = 42;
+
+const C = { red: "#C00000", teal: "#00A6D6", label: "#313131", sub: "#767676" };
+
+// Icon paths use a 24x24 viewBox, scaled and centered inside the circle.
+function IconNode({ cx, cy, color, label, sub, children }: { cx: number; cy: number; color: string; label: string; sub: string; children: React.ReactNode }) {
+  const iconScale = (R * 1.45) / 24;
+  const tx = cx - 12 * iconScale;
+  const ty = cy - 12 * iconScale;
+  return (
+    <g>
+      <circle cx={cx} cy={cy} r={R} fill={color} fillOpacity={0.08} stroke={color} strokeWidth={4} />
+      <g transform={"translate(" + tx + "," + ty + ") scale(" + iconScale + ")"} stroke={color} color={color}>
+        {children}
+      </g>
+      <text x={cx} y={cy + R + 36} textAnchor="middle" fontSize={24} fontWeight={900} fill={C.label} fontFamily={CANVAS.fontFamily}>
+        {label}
+      </text>
+      <text x={cx} y={cy + R + 62} textAnchor="middle" fontSize={MIN_FONT} fontWeight={600} fill={C.sub} fontFamily={CANVAS.fontFamily}>
+        {sub}
+      </text>
+    </g>
+  );
+}
+
+export default function IncidentHard({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+
+      {/* Fault propagation node */}
+      <g style={vis(step, 0, instant)}>
+        <IconNode cx={W * 0.32} cy={150} color={C.red} label="Fault propagation" sub="cascades across service layers">
+          <circle cx="6" cy="19" r="2" fill="none" strokeWidth="2" />
+          <circle cx="18" cy="5" r="2" fill="none" strokeWidth="2" />
+          <path d="M6 17V7a5 5 0 0 1 5-5h1a5 5 0 0 1 5 5v10a5 5 0 0 0 5 5h1" fill="none" strokeWidth="2" strokeLinecap="round" />
+        </IconNode>
+      </g>
+
+      {/* Symptom misdirection node */}
+      <g style={vis(step, 1, instant)}>
+        <IconNode cx={W * 0.68} cy={150} color={C.teal} label="Symptom misdirection" sub="loudest signal ≠ root cause">
+          <path d="M2 2h5v5M22 2h-5v5M2 22h5v-5M22 22h-5v-5" fill="none" strokeWidth="2" strokeLinecap="round" />
+          <circle cx="12" cy="12" r="4" fill="none" strokeWidth="2" />
+          <line x1="15" y1="15" x2="20" y2="20" strokeWidth="2" strokeLinecap="round" />
+        </IconNode>
+      </g>
+
+      {/* Question */}
+      <g style={vis(step, 2, instant)}>
+        <text x={W / 2} y={370} textAnchor="middle" fontSize={34} fontWeight={900} fill={C.label} fontFamily={CANVAS.fontFamily}>
+          Do existing benchmarks
+        </text>
+        <text x={W / 2} y={414} textAnchor="middle" fontSize={34} fontWeight={900} fill={C.label} fontFamily={CANVAS.fontFamily}>
+          preserve these properties?
+        </text>
+      </g>
+
+      {/* Footer claim */}
+      <g style={vis(step, 3, instant)}>
+        <text x={W / 2} y={490} textAnchor="middle" fontSize={22} fontWeight={700} fill={C.sub} fontFamily={CANVAS.fontFamily}>
+          To find out, we designed a deliberately{" "}
+          <tspan fontWeight={900} fill={C.red}>simple probe</tspan>
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}