create-slide-deck 0.1.0

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

@@ -0,0 +1,193 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { findEmptySlot, nodeOccupiedRects } from "../../../components/auto-layout.ts";
+import { NODE, DETAIL, EDGE, CANVAS, annotationStyle, illustrationStyle, annotationTitleStyle, vis, visExact, SlideCanvas } from "../../../core/presets.ts";
+
+const NODES = [
+  { id: "failure", label: "Failure",     sub: "user-visible",       color: "#C00000", col: 0, row: 0, step: 0 },
+  { id: "metrics", label: "Metrics",     sub: "time-series values", color: "#00A6D6", col: 1, row: 0, step: 1 },
+  { id: "logs",    label: "Logs",        sub: "event text",         color: "#1B556B", col: 1, row: 1, step: 2 },
+  { id: "traces",  label: "Traces",      sub: "request spans",     color: "#76B82A", col: 1, row: 2, step: 3 },
+  { id: "model",   label: "RCA Model",   sub: "graph / ML / causal",color: "#E8912D", col: 2, row: 1, step: 4 },
+  { id: "rank",    label: "Top-K",       sub: "ranked causes",     color: "#C00000", col: 3, row: 1, step: 5 },
+];
+
+const ICON_PATHS = {
+  failure: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4m0 4h.01",
+  metrics: "M3 3v18h18M7 16l4-8 4 4 4-6",
+  logs:    "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h8M8 9h2",
+  traces:  "M3 12h4l3-9 4 18 3-9h4",
+  model:   "M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z",
+  rank:    "M9 11l3 3 8-8M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
+};
+
+const DETAILS = [
+  null,
+  { vb: "0 0 280 100",
+    illustration: (
+      <g>
+        <line x1="10" y1="70" x2="190" y2="70" stroke="#ddd" strokeWidth="1.5" />
+        <line x1="10" y1="70" x2="10" y2="10" stroke="#ddd" strokeWidth="1.5" />
+        <polyline points="20,55 50,52 80,48 100,30 110,15 130,35 160,40 180,45" fill="none" stroke="#00A6D6" strokeWidth="2.5" />
+        <circle cx="110" cy="15" r="4" fill="#C00000" />
+        <text x="110" y="8" textAnchor="middle" fontSize="14" fill="#C00000" fontWeight="800">spike</text>
+        <text x="100" y="78" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">time</text>
+      </g>
+    ),
+    lines: ["Numeric values over time: CPU, latency, error rate ..."],
+  },
+  { vb: "0 0 300 90",
+    illustration: (
+      <g>
+        <rect x="4" y="4" width="212" height="14" rx="3" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="8" y="14" fontSize="14" fill="#999" fontWeight="600">10:03:21  INFO   request completed 200</text>
+        <rect x="4" y="22" width="212" height="14" rx="3" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="8" y="32" fontSize="14" fill="#999" fontWeight="600">10:03:22  WARN   latency exceeded 500ms</text>
+        <rect x="4" y="40" width="212" height="14" rx="3" fill="#FFF3F3" stroke="#C00000" strokeWidth="1.5" />
+        <text x="8" y="50" fontSize="14" fill="#C00000" fontWeight="800">10:03:23  ERROR  connection refused db-svc</text>
+        <rect x="4" y="58" width="212" height="14" rx="3" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="8" y="68" fontSize="14" fill="#999" fontWeight="600">10:03:24  INFO   retry attempt 1/3</text>
+      </g>
+    ),
+    lines: ["Structured event text: errors, warnings, exceptions ..."],
+  },
+  { vb: "0 0 300 90",
+    illustration: (
+      <g>
+        <rect x="4" y="8" width="80" height="12" rx="3" fill="#00A6D6" opacity="0.3" />
+        <text x="44" y="17" textAnchor="middle" fontSize="14" fill="#00739A" fontWeight="700">API gateway</text>
+        <rect x="30" y="26" width="70" height="12" rx="3" fill="#76B82A" opacity="0.3" />
+        <text x="65" y="35" textAnchor="middle" fontSize="14" fill="#4A7A10" fontWeight="700">order-svc</text>
+        <rect x="56" y="44" width="90" height="12" rx="3" fill="#C00000" opacity="0.3" />
+        <text x="101" y="53" textAnchor="middle" fontSize="14" fill="#C00000" fontWeight="700">db-svc (timeout)</text>
+        <line x1="84" y1="14" x2="100" y2="14" stroke="#ddd" strokeWidth="1" strokeDasharray="3 2" />
+        <line x1="100" y1="32" x2="146" y2="32" stroke="#ddd" strokeWidth="1" strokeDasharray="3 2" />
+      </g>
+    ),
+    lines: ["Request path across services: which span is slow or failing"],
+  },
+  null,
+  null,
+];
+
+const COL_W = 180;
+const ROW_H = 110;
+const GAP_X = 120;
+const GAP_Y = 16;
+const PAD_X = 30;
+const PAD_Y = 20;
+const ICON_R = NODE.radius - 8;
+const DETAIL_W = DETAIL.width + 40;
+const DETAIL_H = DETAIL.height + 20;
+
+function nx(col: number) { return PAD_X + col * (COL_W + GAP_X) + COL_W / 2; }
+function ny(row: number) { return PAD_Y + row * (ROW_H + GAP_Y) + ICON_R + 8; }
+
+const LINKS = [
+  { from: 0, to: 1, step: 1 },
+  { from: 0, to: 2, step: 2 },
+  { from: 0, to: 3, step: 3 },
+  { from: 1, to: 4, step: 4 },
+  { from: 2, to: 4, step: 4 },
+  { from: 3, to: 4, step: 4 },
+  { from: 4, to: 5, step: 5 },
+];
+
+// vis, visExact imported from presets
+
+function arrowPath(x1: number, y1: number, x2: number, y2: number) {
+  const mid = (x1 + x2) / 2;
+  return `M${x1},${y1} C${mid},${y1} ${mid},${y2} ${x2},${y2}`;
+}
+
+function anchorPt(n: (typeof NODES)[number], side: string) {
+  const cx = nx(n.col), cy = ny(n.row);
+  const r = ICON_R;
+  switch (side) {
+    case "right":  return [cx + r + 6, cy];
+    case "left":   return [cx - r - 6, cy];
+    default:       return [cx, cy];
+  }
+}
+
+function NodeIcon({ node, step, instant }: { node: (typeof NODES)[number]; step: number; instant: boolean }) {
+  const cx = nx(node.col), cy = ny(node.row);
+  const r = ICON_R;
+  return (
+    <g style={vis(step, node.step, instant)}>
+      <circle cx={cx} cy={cy} r={r + 5} fill={node.color + "11"} />
+      <circle cx={cx} cy={cy} r={r} fill="white" stroke={node.color} strokeWidth={NODE.strokeWidth} />
+      <g transform={`translate(${cx - NODE.iconSize/2}, ${cy - NODE.iconSize/2})`}>
+        <svg width={NODE.iconSize} height={NODE.iconSize} viewBox="0 0 24 24" fill="none"
+          stroke={node.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d={(ICON_PATHS as any)[node.id]} />
+        </svg>
+      </g>
+      <text x={cx} y={cy + r + 20} textAnchor="middle" fontSize={NODE.labelFont} fontWeight="900"
+        fill={NODE.labelColor} fontFamily={CANVAS.fontFamily}>{node.label}</text>
+      <text x={cx} y={cy + r + 38} textAnchor="middle" fontSize={NODE.subFont} fontWeight="700"
+        fill={node.color} fontFamily={CANVAS.fontFamily}>{node.sub}</text>
+    </g>
+  );
+}
+
+function DetailAnnotation({ detail, step, currentStep, svgW, svgH, instant }: { detail: (typeof DETAILS)[number]; step: number; currentStep: number; svgW: number; svgH: number; instant: boolean }) {
+  if (!detail) return null;
+  const node = NODES[step];
+  const occupied = nodeOccupiedRects(NODES, step, { nx, ny, iconR: ICON_R, labelH: 44 });
+  const pos = findEmptySlot({
+    canvasW: svgW, canvasH: svgH,
+    occupied, slotW: DETAIL_W, slotH: DETAIL_H,
+    margin: DETAIL.margin,
+    near: { x: nx(node.col), y: ny(node.row) },
+    step: DETAIL.scanStep,
+  });
+  return (
+    <g style={visExact(currentStep, step, instant)}>
+      <rect x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H} rx="12"
+        fill="white" fillOpacity={DETAIL.bgOpacity} stroke="none" />
+      <foreignObject x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H}>
+        <div style={annotationStyle()}>
+          <svg style={illustrationStyle()} viewBox={detail.vb}>
+            {detail.illustration}
+          </svg>
+          <div style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+            <div style={annotationTitleStyle()}>
+              {detail.lines[0]}
+            </div>
+          </div>
+        </div>
+      </foreignObject>
+    </g>
+  );
+}
+
+const SVG_W = 4 * COL_W + 3 * GAP_X + 2 * PAD_X;
+const SVG_H = 3 * ROW_H + 2 * GAP_Y + 2 * PAD_Y + 60;
+
+// getStep imported from presets
+
+export default function RcaPipeline({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => <>
+      <defs>
+        <marker id="pipe-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#BFBFBF" />
+        </marker>
+      </defs>
+
+      {LINKS.map((link, i) => {
+        const from = NODES[link.from], to = NODES[link.to];
+        const p1 = anchorPt(from, "right");
+        const p2 = anchorPt(to, "left");
+        return <path key={i} d={arrowPath(p1[0], p1[1], p2[0], p2[1])}
+          fill="none" stroke="#BFBFBF" strokeWidth="2.5" strokeLinecap="round"
+          markerEnd="url(#pipe-arr)" style={vis(step, link.step, instant)} />;
+      })}
+
+      {NODES.map((n) => <NodeIcon key={n.id} node={n} step={step} instant={instant} />)}
+
+      {DETAILS.map((d, i) => d && <DetailAnnotation key={i} detail={d} step={i} currentStep={step} svgW={SVG_W} svgH={SVG_H} instant={instant} />)}
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/registry.ts

@@ -0,0 +1,37 @@
+import type { ComponentType } from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import AwsCascade from "./aws-cascade.tsx";
+import RcaPipeline from "./rca-pipeline.tsx";
+import SimpleRca from "./simple-rca.tsx";
+import SrcaResults from "./srca-results.tsx";
+import BenchDeficiency from "./bench-deficiency.tsx";
+import BenchLoop from "./bench-loop.tsx";
+import HierarchyTree from "./hierarchy-tree.tsx";
+import BenchCompare from "./bench-compare.tsx";
+import SotaCollapse from "./sota-collapse.tsx";
+import FaultHeatmap from "./fault-heatmap.tsx";
+import FailureModes from "./failure-modes.tsx";
+import ClosingTakeaway from "./closing-takeaway.tsx";
+import IncidentHard from "./incident-hard.tsx";
+import BenchNeeds from "./bench-needs.tsx";
+import CloudIncidents from "./cloud-incidents.tsx";
+
+export const components = {
+  AwsCascade,
+  RcaPipeline,
+  SimpleRca,
+  SrcaResults,
+  BenchDeficiency,
+  BenchLoop,
+  HierarchyTree,
+  BenchCompare,
+  SotaCollapse,
+  FaultHeatmap,
+  FailureModes,
+  ClosingTakeaway,
+  IncidentHard,
+  BenchNeeds,
+  CloudIncidents,
+} satisfies Record<string, ComponentType<SlideComponentProps>>;
+
+export type ComponentName = keyof typeof components;

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

@@ -0,0 +1,216 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { findEmptySlot, nodeOccupiedRects } from "../../../components/auto-layout.ts";
+import { NODE, DETAIL, EDGE, CANVAS, annotationStyle, illustrationStyle, annotationTitleStyle, vis, visExact, SlideCanvas } from "../../../core/presets.ts";
+
+const NODES = [
+  { id: "metrics", label: "Metrics",       sub: "threshold check",    color: "#00A6D6", col: 0, row: 0, step: 0 },
+  { id: "traces",  label: "Traces",        sub: "latency check",      color: "#76B82A", col: 0, row: 1, step: 1 },
+  { id: "logs",    label: "Logs",          sub: "keyword match",      color: "#1B556B", col: 0, row: 2, step: 2 },
+  { id: "count",   label: "Count alerts",  sub: "per service",        color: "#E8912D", col: 1, row: 1, step: 3 },
+  { id: "rank",    label: "Rank services", sub: "most alerts first",  color: "#C00000", col: 2, row: 1, step: 4 },
+];
+
+const ICON_PATHS = {
+  metrics: "M3 3v18h18M7 16l4-8 4 4 4-6",
+  traces:  "M3 12h4l3-9 4 18 3-9h4",
+  logs:    "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h8M8 9h2",
+  count:   "M3 3h18v18H3zM3 9h18M3 15h18M9 3v18",
+  rank:    "M4 6h16M4 12h10M4 18h5",
+};
+
+const DETAILS = [
+  {
+    vb: "0 0 300 100",
+    illustration: (
+      <g>
+        <line x1="10" y1="70" x2="210" y2="70" stroke="#ddd" strokeWidth="1.5" />
+        <line x1="10" y1="70" x2="10" y2="10" stroke="#ddd" strokeWidth="1.5" />
+        <line x1="10" y1="28" x2="210" y2="28" stroke="#C00000" strokeWidth="1.5" strokeDasharray="4 3" />
+        <text x="210" y="22" textAnchor="end" fontSize="14" fill="#C00000" fontWeight="700">threshold</text>
+        <polyline points="20,55 50,52 80,48 100,24 120,16 140,42 160,50 180,48" fill="none" stroke="#00A6D6" strokeWidth="2.5" />
+        <circle cx="100" cy="24" r="4" fill="#C00000" />
+        <circle cx="120" cy="16" r="4" fill="#C00000" />
+        <text x="110" y="8" textAnchor="middle" fontSize="14" fill="#C00000" fontWeight="800">alert</text>
+      </g>
+    ),
+    lines: ["Metric values above threshold counted as alerts"],
+  },
+  {
+    vb: "0 0 300 90",
+    illustration: (
+      <g>
+        <rect x="4" y="6" width="100" height="13" rx="3" fill="#00A6D6" opacity="0.25" />
+        <text x="54" y="16" textAnchor="middle" fontSize="14" fill="#00739A" fontWeight="700">gateway 12ms</text>
+        <rect x="30" y="25" width="80" height="13" rx="3" fill="#76B82A" opacity="0.25" />
+        <text x="70" y="35" textAnchor="middle" fontSize="14" fill="#4A7A10" fontWeight="700">order-svc 8ms</text>
+        <rect x="56" y="44" width="155" height="13" rx="3" fill="#C00000" opacity="0.25" />
+        <text x="133" y="54" textAnchor="middle" fontSize="14" fill="#C00000" fontWeight="800">db-svc 580ms</text>
+        <text x="218" y="54" fontSize="14" fill="#C00000" fontWeight="900">!</text>
+      </g>
+    ),
+    lines: ["Span latency above threshold counted as alerts"],
+  },
+  {
+    vb: "0 0 300 96",
+    illustration: (
+      <g>
+        <rect x="4" y="4" width="212" height="14" rx="3" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="8" y="14" fontSize="14" fill="#999" fontWeight="600">10:03:21 INFO  request ok</text>
+        <rect x="4" y="22" width="212" height="14" rx="3" fill="#FFF3F3" stroke="#C00000" strokeWidth="1.5" />
+        <text x="8" y="32" fontSize="14" fill="#C00000" fontWeight="800">10:03:22 ERROR conn refused</text>
+        <rect x="4" y="40" width="212" height="14" rx="3" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="8" y="50" fontSize="14" fill="#999" fontWeight="600">10:03:23 INFO  retry 1/3</text>
+        <rect x="4" y="58" width="212" height="14" rx="3" fill="#FFF3F3" stroke="#C00000" strokeWidth="1.5" />
+        <text x="8" y="68" fontSize="14" fill="#C00000" fontWeight="800">10:03:24 ERROR timeout</text>
+      </g>
+    ),
+    lines: ["Lines matching error keywords counted as alerts"],
+  },
+  {
+    vb: "0 0 280 100",
+    illustration: (
+      <g>
+        <text x="16" y="14" fontSize="14" fill="#313131" fontWeight="800">Service</text>
+        <text x="140" y="14" fontSize="14" fill="#313131" fontWeight="800">Alerts</text>
+        <line x1="10" y1="20" x2="190" y2="20" stroke="#ddd" strokeWidth="1" />
+        <text x="16" y="36" fontSize="14" fill="#767676" fontWeight="700">ts-order</text>
+        <text x="155" y="36" fontSize="14" fill="#E8912D" fontWeight="900">12</text>
+        <text x="16" y="52" fontSize="14" fill="#767676" fontWeight="700">ts-travel</text>
+        <text x="155" y="52" fontSize="14" fill="#E8912D" fontWeight="900">5</text>
+        <text x="16" y="68" fontSize="14" fill="#767676" fontWeight="700">ts-auth</text>
+        <text x="155" y="68" fontSize="14" fill="#E8912D" fontWeight="900">2</text>
+      </g>
+    ),
+    lines: ["Sum metric + trace + log alerts per service"],
+  },
+  {
+    vb: "0 0 280 100",
+    illustration: (
+      <g>
+        <rect x="8" y="4" width="194" height="20" rx="4" fill="#C00000" fillOpacity="0.1" stroke="#C00000" strokeWidth="1.5" />
+        <text x="16" y="18" fontSize="14" fill="#C00000" fontWeight="900">#1  ts-order — 12 alerts</text>
+        <rect x="8" y="30" width="194" height="20" rx="4" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="16" y="44" fontSize="14" fill="#767676" fontWeight="700">#2  ts-travel — 5 alerts</text>
+        <rect x="8" y="56" width="194" height="20" rx="4" fill="#F5F5F5" stroke="#ddd" strokeWidth="1" />
+        <text x="16" y="70" fontSize="14" fill="#767676" fontWeight="700">#3  ts-auth — 2 alerts</text>
+      </g>
+    ),
+    lines: ["Most-alerted service = predicted root cause"],
+  },
+];
+
+const COL_W = 180;
+const ROW_H = 110;
+const GAP_X = 200;
+const GAP_Y = 16;
+const PAD_X = 40;
+const PAD_Y = 20;
+const ICON_R = NODE.radius - 8;
+const DETAIL_W = DETAIL.width;
+const DETAIL_H = DETAIL.height;
+
+function nx(col: number) { return PAD_X + col * (COL_W + GAP_X) + COL_W / 2; }
+function ny(row: number) { return PAD_Y + row * (ROW_H + GAP_Y) + ICON_R + 8; }
+
+const LINKS = [
+  { from: 0, to: 3, step: 3 },
+  { from: 1, to: 3, step: 3 },
+  { from: 2, to: 3, step: 3 },
+  { from: 3, to: 4, step: 4 },
+];
+
+function arrowPath(x1: number, y1: number, x2: number, y2: number) {
+  const mid = (x1 + x2) / 2;
+  return "M" + x1 + "," + y1 + " C" + mid + "," + y1 + " " + mid + "," + y2 + " " + x2 + "," + y2;
+}
+
+function anchorPt(n: any, side: string) {
+  const cx = nx(n.col), cy = ny(n.row);
+  const r = ICON_R;
+  if (side === "right") return [cx + r + 6, cy];
+  if (side === "left") return [cx - r - 6, cy];
+  return [cx, cy];
+}
+
+function NodeIcon({ node, step, instant }: { node: any; step: number; instant: boolean }) {
+  const cx = nx(node.col), cy = ny(node.row);
+  const r = ICON_R;
+  return (
+    <g style={vis(step, node.step, instant)}>
+      <circle cx={cx} cy={cy} r={r + 5} fill={node.color + "11"} />
+      <circle cx={cx} cy={cy} r={r} fill="white" stroke={node.color} strokeWidth={NODE.strokeWidth} />
+      <g transform={"translate(" + (cx - NODE.iconSize / 2) + ", " + (cy - NODE.iconSize / 2) + ")"}>
+        <svg width={NODE.iconSize} height={NODE.iconSize} viewBox="0 0 24 24" fill="none"
+          stroke={node.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d={ICON_PATHS[node.id as keyof typeof ICON_PATHS]} />
+        </svg>
+      </g>
+      <text x={cx} y={cy + r + 20} textAnchor="middle" fontSize={NODE.labelFont} fontWeight="900"
+        fill={NODE.labelColor} fontFamily={CANVAS.fontFamily}>{node.label}</text>
+      <text x={cx} y={cy + r + 38} textAnchor="middle" fontSize={NODE.subFont} fontWeight="700"
+        fill={node.color} fontFamily={CANVAS.fontFamily}>{node.sub}</text>
+    </g>
+  );
+}
+
+function DetailAnnotation({ detail, step, currentStep, svgW, svgH, instant }: { detail: any; step: number; currentStep: number; svgW: number; svgH: number; instant: boolean }) {
+  if (!detail) return null;
+  const node = NODES[step];
+  const occupied = nodeOccupiedRects(NODES, step, { nx: nx, ny: ny, iconR: ICON_R, labelH: 44 });
+  const pos = findEmptySlot({
+    canvasW: svgW, canvasH: svgH,
+    occupied: occupied, slotW: DETAIL_W, slotH: DETAIL_H,
+    margin: DETAIL.margin,
+    near: { x: nx(node.col), y: ny(node.row) },
+    step: DETAIL.scanStep,
+  });
+  return (
+    <g style={visExact(currentStep, step, instant)}>
+      <rect x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H} rx="12"
+        fill="white" fillOpacity={DETAIL.bgOpacity} stroke="none" />
+      <foreignObject x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H}>
+        <div style={annotationStyle()}>
+          <svg style={illustrationStyle()} viewBox={detail.vb}>
+            {detail.illustration}
+          </svg>
+          <div style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+            <div style={annotationTitleStyle()}>
+              {detail.lines[0]}
+            </div>
+          </div>
+        </div>
+      </foreignObject>
+    </g>
+  );
+}
+
+const SVG_W = 3 * COL_W + 2 * GAP_X + 2 * PAD_X;
+const SVG_H = 3 * ROW_H + 2 * GAP_Y + 2 * PAD_Y + 200;
+
+export default function SimpleRca({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => <>
+      <defs>
+        <marker id="srca-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#BFBFBF" />
+        </marker>
+      </defs>
+
+      {LINKS.map(function (link, i) {
+        const from = NODES[link.from], to = NODES[link.to];
+        const p1 = anchorPt(from, "right");
+        const p2 = anchorPt(to, "left");
+        return <path key={i} d={arrowPath(p1[0], p1[1], p2[0], p2[1])}
+          fill="none" stroke="#BFBFBF" strokeWidth="2.5" strokeLinecap="round"
+          markerEnd="url(#srca-arr)" style={vis(step, link.step, instant)} />;
+      })}
+
+      {NODES.map(function (n) { return <NodeIcon key={n.id} node={n} step={step} instant={instant} />; })}
+
+      {DETAILS.map(function (d, i) {
+        return <DetailAnnotation key={i} detail={d} step={i} currentStep={step} svgW={SVG_W} svgH={SVG_H} instant={instant} />;
+      })}
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/sota-collapse.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import { ALGOS } from "../../../data/algorithms.ts";
+
+const W = 1060, H = 440;
+const BAR_X = 140;
+const BAR_MAX = 360;
+const TABLE_X = 560;
+const ROW_H = 32;
+const TOP_Y = 20;
+
+export default function SotaCollapse({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+
+      <g style={vis(step, -1, instant)}>
+        <text x={BAR_X + BAR_MAX / 2} y={TOP_Y} textAnchor="middle" fontSize="14" fontWeight="800" fill="#999" fontFamily={CANVAS.fontFamily}>Top@1</text>
+
+        <text x={TABLE_X + 40} y={TOP_Y} textAnchor="middle" fontSize="14" fontWeight="800" fill="#999" fontFamily={CANVAS.fontFamily}>@1</text>
+        <text x={TABLE_X + 100} y={TOP_Y} textAnchor="middle" fontSize="14" fontWeight="800" fill="#999" fontFamily={CANVAS.fontFamily}>@3</text>
+        <text x={TABLE_X + 160} y={TOP_Y} textAnchor="middle" fontSize="14" fontWeight="800" fill="#999" fontFamily={CANVAS.fontFamily}>@5</text>
+        <text x={TABLE_X + 230} y={TOP_Y} textAnchor="middle" fontSize="14" fontWeight="800" fill="#999" fontFamily={CANVAS.fontFamily}>Time(s)</text>
+      </g>
+
+      {ALGOS.map(function (a, i) {
+        const y = TOP_Y + 10 + i * ROW_H;
+        const barW = (a.t1 / 0.40) * BAR_MAX;
+        const isSimple = a.name === "SimpleRCA";
+        const isBest = a.name === "MicroRCA";
+        const barColor = isSimple ? "#C00000" : isBest ? "#76B82A" : a.color;
+        const revealStep = i < 4 ? 0 : i < 8 ? 1 : 2;
+
+        return (
+          <g key={i} style={vis(step, revealStep, instant)}>
+            <text x={BAR_X - 8} y={y + ROW_H / 2 + 1} textAnchor="end" dominantBaseline="middle"
+              fontSize="14" fontWeight={isSimple || isBest ? 900 : 700} fill={isSimple ? "#C00000" : "#313131"} fontFamily={CANVAS.fontFamily}>{a.name}</text>
+
+            <rect x={BAR_X} y={y + 5} width={barW} height={ROW_H - 12} rx="3"
+              fill={barColor} fillOpacity="0.18" stroke={barColor} strokeWidth={isSimple || isBest ? 2 : 1} />
+            <text x={BAR_X + barW + 6} y={y + ROW_H / 2 + 1} dominantBaseline="middle"
+              fontSize="14" fontWeight="900" fill={barColor} fontFamily={CANVAS.fontFamily}>{a.t1.toFixed(2)}</text>
+
+            <text x={TABLE_X + 40} y={y + ROW_H / 2 + 1} textAnchor="middle" dominantBaseline="middle"
+              fontSize="14" fontWeight="700" fill="#767676" fontFamily={CANVAS.fontFamily}>{a.t1.toFixed(2)}</text>
+            <text x={TABLE_X + 100} y={y + ROW_H / 2 + 1} textAnchor="middle" dominantBaseline="middle"
+              fontSize="14" fontWeight="700" fill="#767676" fontFamily={CANVAS.fontFamily}>{a.t3.toFixed(2)}</text>
+            <text x={TABLE_X + 160} y={y + ROW_H / 2 + 1} textAnchor="middle" dominantBaseline="middle"
+              fontSize="14" fontWeight="700" fill="#767676" fontFamily={CANVAS.fontFamily}>{a.t5.toFixed(2)}</text>
+            <text x={TABLE_X + 230} y={y + ROW_H / 2 + 1} textAnchor="middle" dominantBaseline="middle"
+              fontSize="14" fontWeight="700" fill={parseFloat(a.time) > 100 ? "#C00000" : "#999"} fontFamily={CANVAS.fontFamily}>{a.time}</text>
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 3, instant)}>
+        <text x={W / 2} y={H - 10} textAnchor="middle" fontSize="16" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Best Top@1 = 0.37 · SimpleRCA = 0.28 · The shortcut no longer dominates
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/srca-results.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { useRevealStep, CANVAS } from "../../../core/presets.ts";
+
+const DATA = [
+  { ds: "RE2-OB",   s: [0.47, 0.93, 1.00], m: "BARO",  o: [0.14, 0.93, 0.98], win: true },
+  { ds: "RE2-TT",   s: [0.80, 0.87, 0.93], m: "BARO",  o: [0.67, 0.84, 0.89], win: true },
+  { ds: "RE2-SS",   s: [0.24, 0.88, 0.97], m: "BARO",  o: [0.14, 0.82, 0.94], win: true },
+  { ds: "RE3-OB",   s: [0.30, 0.90, 0.90], m: "BARO",  o: [0.00, 0.90, 0.90], win: true },
+  { ds: "RE3-TT",   s: [0.83, 1.00, 1.00], m: "BARO",  o: [0.50, 0.93, 1.00], win: true },
+  { ds: "RE3-SS",   s: [0.83, 0.90, 0.90], m: "BARO",  o: [0.00, 0.83, 0.93], win: true },
+  { ds: "Nezha-TT", s: [0.93, 0.98, 0.98], m: "Nezha", o: [0.87, 0.98, 0.98], win: true },
+  { ds: "Nezha-OB", s: [0.91, 0.91, 0.91], m: "Nezha", o: [0.93, 0.96, 0.96], win: false },
+  { ds: "Eadro-TT", s: [0.81, 0.83, 0.83], m: "Eadro", o: [0.99, 0.99, 0.99], win: false, note: true },
+  { ds: "Eadro-SN", s: [0.83, 0.83, 0.83], m: "Eadro", o: [0.97, 0.99, 0.99], win: false, note: true },
+  { ds: "AIOps-21", s: [0.63, 0.82, 0.91], m: "ART",   o: [0.72, 0.89, null],  win: false },
+];
+
+const TH: React.CSSProperties = { padding: "8px 8px 2px", fontSize: 14, fontWeight: 900, color: "#313131", borderBottom: "none" };
+const SUB: React.CSSProperties = { padding: "0 8px 8px", fontSize: 14, fontWeight: 800, color: "#999", textAlign: "right", borderBottom: "2px solid #313131" };
+const DS_S: React.CSSProperties = { padding: "7px 10px", fontSize: 18, fontWeight: 800, color: "#313131", textAlign: "left", borderBottom: "1px solid #e8e8e8" };
+const NUM_S: React.CSSProperties = { padding: "7px 10px", fontSize: 18, fontWeight: 700, textAlign: "right", borderBottom: "1px solid #e8e8e8" };
+const M_S: React.CSSProperties = { padding: "7px 10px 7px 18px", fontSize: 14, fontWeight: 700, color: "#999", textAlign: "left", borderBottom: "1px solid #e8e8e8" };
+
+function fmt(v: number | null) { return v !== null ? v.toFixed(2) : "—"; }
+function wc(a: number | null, b: number | null) { return (b === null || (a as number) >= b) ? "#C00000" : "#999"; }
+function ww(a: number | null, b: number | null) { return (b === null || (a as number) >= b) ? 900 : 700; }
+
+export default function SrcaResults({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+  const tr = instant ? "none" : "opacity 0.4s ease, background 0.4s ease";
+
+  function rowOp(win: boolean) {
+    if (step < 0 || step >= 2) return 1;
+    return (step === 0) === win ? 1 : 0.15;
+  }
+  function rowBg(win: boolean) {
+    if (step === 0 && win) return "rgba(192,0,0,0.04)";
+    if (step === 1 && !win) return "rgba(27,85,107,0.04)";
+    return "transparent";
+  }
+
+  return (
+    <div style={{ opacity: ready ? 1 : 0, transition: instant ? "none" : "opacity 0.2s ease", width: "100%", height: "100%", fontFamily: CANVAS.fontFamily, position: "relative" }}>
+      <table style={{ borderCollapse: "collapse", width: "100%" }}>
+        <thead>
+          <tr>
+            <th style={{ ...TH, textAlign: "left" }}></th>
+            <th colSpan={3} style={{ ...TH, textAlign: "center", borderBottom: "2px solid #C00000" }}>SimpleRCA</th>
+            <th style={TH}></th>
+            <th colSpan={3} style={{ ...TH, textAlign: "center" }}>Best SOTA</th>
+          </tr>
+          <tr>
+            <th style={{ ...SUB, textAlign: "left" }}>Dataset</th>
+            <th style={SUB}>@1</th><th style={SUB}>@3</th><th style={SUB}>@5</th>
+            <th style={{ ...SUB, textAlign: "left", paddingLeft: 18 }}>Method</th>
+            <th style={SUB}>@1</th><th style={SUB}>@3</th><th style={SUB}>@5</th>
+          </tr>
+        </thead>
+        <tbody>
+          {DATA.map(function (r) {
+            return (
+              <tr key={r.ds} style={{ opacity: rowOp(r.win), background: rowBg(r.win), transition: tr }}>
+                <td style={DS_S}>{r.ds}</td>
+                <td style={{ ...NUM_S, color: wc(r.s[0], r.o[0]), fontWeight: ww(r.s[0], r.o[0]) }}>{fmt(r.s[0])}</td>
+                <td style={{ ...NUM_S, color: wc(r.s[1], r.o[1]), fontWeight: ww(r.s[1], r.o[1]) }}>{fmt(r.s[1])}</td>
+                <td style={{ ...NUM_S, color: wc(r.s[2], r.o[2]), fontWeight: ww(r.s[2], r.o[2]) }}>{fmt(r.s[2])}</td>
+                <td style={M_S}>{r.m}{r.note ? " *" : ""}</td>
+                <td style={{ ...NUM_S, color: wc(r.o[0], r.s[0]), fontWeight: ww(r.o[0], r.s[0]) }}>{fmt(r.o[0])}</td>
+                <td style={{ ...NUM_S, color: wc(r.o[1], r.s[1]), fontWeight: ww(r.o[1], r.s[1]) }}>{fmt(r.o[1])}</td>
+                <td style={{ ...NUM_S, color: wc(r.o[2], r.s[2]), fontWeight: ww(r.o[2], r.s[2]) }}>{fmt(r.o[2])}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <div style={{ marginTop: 6, fontSize: 14, color: "#999", fontWeight: 600 }}>* Eadro: training / test set overlap</div>
+
+      <div style={{
+        position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%)",
+        padding: "14px 36px", borderRadius: 10,
+        background: "#fff", boxShadow: "0 8px 28px rgba(49,49,49,0.15)",
+        opacity: step === 0 ? 1 : 0, transition: tr,
+        whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 20,
+      }}>
+        <strong style={{ color: "#C00000", fontSize: 28, fontWeight: 900 }}>SimpleRCA wins</strong>
+        <span style={{ fontSize: 16, fontWeight: 700, color: "#767676" }}>matches or beats published SOTA on 7 datasets</span>
+      </div>
+
+      <div style={{
+        position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%)",
+        padding: "14px 36px", borderRadius: 10,
+        background: "#fff", boxShadow: "0 8px 28px rgba(49,49,49,0.15)",
+        opacity: step === 1 ? 1 : 0, transition: tr,
+        whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 20,
+      }}>
+        <strong style={{ color: "#1B556B", fontSize: 28, fontWeight: 900 }}>Even when losing</strong>
+        <span style={{ fontSize: 16, fontWeight: 700, color: "#767676" }}>gap ≤ 0.18 · Eadro* has data leakage</span>
+      </div>
+
+      <div style={{
+        position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%)",
+        padding: "14px 36px", borderRadius: 10,
+        background: "#fff", boxShadow: "0 8px 28px rgba(49,49,49,0.15)",
+        opacity: step >= 2 ? 1 : 0, transition: tr,
+        whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 24,
+      }}>
+        <strong style={{ color: "#C00000", fontSize: 36, fontWeight: 900 }}>7 / 11</strong>
+        <span style={{ fontSize: 18, fontWeight: 800, color: "#313131" }}>A trivial probe should not match published models</span>
+      </div>
+
+    </div>
+  );
+}