create-slide-deck 0.1.0

package/template-full/src/reveal/core/mount-registry.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ComponentRegistry, MountContext } from "./types.ts";
+
+const roots = new WeakMap<Element, Root>();
+
+let registeredComponents: ComponentRegistry = {};
+
+export function registerComponents(components: ComponentRegistry): void {
+  registeredComponents = components;
+}
+
+export function hydrate(root: Element, ctx: MountContext): void {
+  root.querySelectorAll<HTMLElement>(".block-mount[data-mount-library]").forEach((el) => {
+    if (roots.has(el)) return;
+    const exportName = el.dataset.mountExport;
+    if (!exportName) return;
+    const Component = registeredComponents[exportName];
+    if (!Component) {
+      console.warn(`[mount-registry] component '${exportName}' not found in registry`);
+      return;
+    }
+    const propsStr = el.dataset.mountProps;
+    const extraProps = propsStr ? JSON.parse(propsStr) : {};
+    const reactRoot = createRoot(el);
+    reactRoot.render(
+      React.createElement(Component, { ...extraProps, Reveal: ctx.Reveal })
+    );
+    roots.set(el, reactRoot);
+  });
+}
+
+export function cleanup(root: Element): void {
+  root.querySelectorAll<HTMLElement>(".block-mount[data-mount-library]").forEach((el) => {
+    const reactRoot = roots.get(el);
+    if (reactRoot) {
+      reactRoot.unmount();
+      roots.delete(el);
+    }
+  });
+}

package/template-full/src/reveal/core/presets.ts

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, type ReactNode, type CSSProperties } from "react";
+import type { RevealInstance } from "./types.ts";
+
+export const MIN_FONT = 14;
+
+export const FONT = {
+  hero: 64,
+  heading: 40,
+  title: 20,
+  body: 16,
+  caption: 14,
+} as const;
+
+export const COLOR = {
+  text: "#313131",
+  muted: "#767676",
+  bg: "#ffffff",
+  bgSubtle: "rgba(67, 97, 238, 0.04)",
+  border: "#e5e7eb",
+  blue: "#4361ee",
+  purple: "#7c3aed",
+  pink: "#f72585",
+  cyan: "#4cc9f0",
+  green: "#059669",
+  orange: "#f78166",
+  success: "#059669",
+  danger: "#dc2626",
+  warn: "#d97706",
+  series: ["#4361ee", "#7c3aed", "#f72585", "#4cc9f0", "#059669", "#f78166"],
+} as const;
+
+export const NODE = {
+  radius: 42,
+  radiusAccent: 46,
+  iconSize: 28,
+  strokeWidth: 3,
+  strokeWidthAccent: 4,
+  labelFont: 20,
+  subFont: 15,
+  labelColor: "#313131",
+} as const;
+
+export const DETAIL = {
+  width: 580,
+  height: 220,
+  margin: 14,
+  scanStep: 14,
+  illustrationRatio: 0.5,
+  titleFont: 20,
+  bodyFont: 16,
+  titleColor: "#313131",
+  bodyColor: "#767676",
+  bgOpacity: 0.85,
+} as const;
+
+export const TAG = {
+  font: 14,
+  pillFont: 14,
+  pillHeight: 24,
+  pillRadius: 12,
+} as const;
+
+export const EDGE = {
+  color: "#BFBFBF",
+  colorCascade: "#C00000",
+  width: 2.5,
+  markerSize: 7,
+} as const;
+
+export const CANVAS = {
+  fontFamily: "Aptos, Arial, sans-serif",
+} as const;
+
+export function annotationStyle(): CSSProperties {
+  return {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: CANVAS.fontFamily,
+    gap: 20,
+    padding: "12px 24px",
+    boxSizing: "border-box",
+  };
+}
+
+export function illustrationStyle(): CSSProperties {
+  return {
+    flex: "0 0 auto",
+    width: (DETAIL.illustrationRatio * 100) + "%",
+    maxHeight: "100%",
+  };
+}
+
+export function annotationTitleStyle(): CSSProperties {
+  return {
+    fontSize: DETAIL.titleFont,
+    fontWeight: 800,
+    color: DETAIL.titleColor,
+    lineHeight: 1.4,
+  };
+}
+
+export function annotationBodyStyle(): CSSProperties {
+  return {
+    fontSize: DETAIL.bodyFont,
+    fontWeight: 700,
+    color: DETAIL.bodyColor,
+    lineHeight: 1.3,
+  };
+}
+
+export function vis(cur: number, req: number, instant: boolean): CSSProperties {
+  const show = cur >= req ? 1 : 0;
+  return { opacity: show, transition: instant ? "none" : "opacity 0.45s ease" };
+}
+
+export function visExact(cur: number, req: number, instant: boolean): CSSProperties {
+  const show = cur === req ? 1 : 0;
+  return { opacity: show, transition: instant ? "none" : "opacity 0.35s ease" };
+}
+
+export function getStep(Reveal: RevealInstance): number {
+  if (!Reveal) return -1;
+  const slide = Reveal.getCurrentSlide();
+  if (!slide) return -1;
+  const visible = slide.querySelectorAll(".fragment.visible[data-fragment-index]");
+  let max = -1;
+  visible.forEach(function (el) {
+    const idx = parseInt(el.getAttribute("data-fragment-index") || "", 10);
+    if (!isNaN(idx) && idx > max) max = idx;
+  });
+  return max;
+}
+
+export function useRevealStep(Reveal: RevealInstance | null): [number, boolean, boolean] {
+  const [step, setStep] = useState(-1);
+  const [ready, setReady] = useState(false);
+  const [instant, setInstant] = useState(true);
+
+  useEffect(function () {
+    if (!Reveal) return;
+    const sync = function () { setStep(getStep(Reveal)); };
+    const onFragment = function () { setInstant(false); sync(); };
+    const onSlideChanged = function () {
+      setInstant(true);
+      setReady(false);
+      setStep(-1);
+      requestAnimationFrame(function () {
+        sync();
+        setReady(true);
+        requestAnimationFrame(function () { setInstant(false); });
+      });
+    };
+    Reveal.on("fragmentshown", onFragment);
+    Reveal.on("fragmenthidden", onFragment);
+    Reveal.on("slidechanged", onSlideChanged);
+    requestAnimationFrame(function () {
+      sync();
+      setReady(true);
+      requestAnimationFrame(function () { setInstant(false); });
+    });
+    return function () {
+      Reveal.off("fragmentshown", onFragment);
+      Reveal.off("fragmenthidden", onFragment);
+      Reveal.off("slidechanged", onSlideChanged);
+    };
+  }, [Reveal]);
+
+  return [step, ready, instant];
+}
+
+interface SlideCanvasProps {
+  Reveal: RevealInstance;
+  W?: number;
+  H?: number;
+  children: (step: number, instant: boolean) => ReactNode;
+}
+
+export function SlideCanvas(props: SlideCanvasProps) {
+  const [step, ready, instant] = useRevealStep(props.Reveal);
+  return React.createElement("svg", {
+    viewBox: "0 0 " + (props.W || 1200) + " " + (props.H || 560),
+    style: { width: "100%", height: "100%", display: "block",
+             opacity: ready ? 1 : 0, transition: "opacity 0.2s ease" },
+  }, props.children(step, instant));
+}

package/template-full/src/reveal/core/runtime.ts

@@ -0,0 +1,141 @@
+import type { RevealInstance, ComponentRegistry, MountContext } from "./types.ts";
+import * as mountRegistry from "./mount-registry.ts";
+
+declare global {
+  interface SVGPathElement {
+    _rcaDrawable?: any;
+  }
+}
+
+function connectorLength(path: SVGPathElement): number {
+  try {
+    return path.getTotalLength();
+  } catch {
+    return 0;
+  }
+}
+
+function prepareConnector(path: SVGPathElement, anime: any): void {
+  if (anime?.svg?.createDrawable) {
+    const isVisible = path.classList.contains("visible");
+    path._rcaDrawable = anime.svg.createDrawable(path, 0, isVisible ? 1 : 0)[0];
+    return;
+  }
+  const length = connectorLength(path);
+  if (!length) return;
+  path.dataset.length = String(length);
+  path.style.strokeDasharray = String(length);
+  path.style.strokeDashoffset = path.classList.contains("visible") ? "0" : String(length);
+}
+
+function animateConnector(path: SVGPathElement, anime: any): void {
+  if (anime?.svg?.createDrawable) {
+    const drawable = path._rcaDrawable || anime.svg.createDrawable(path, 0, 0)[0];
+    path._rcaDrawable = drawable;
+    anime.animate(drawable, {
+      draw: ["0 0", "0 1"],
+      duration: 420,
+      ease: "outCubic",
+    });
+    return;
+  }
+  const length = Number(path.dataset.length || connectorLength(path));
+  if (!length) return;
+  path.style.strokeDasharray = String(length);
+  path.style.strokeDashoffset = String(length);
+  anime.animate(path, {
+    strokeDashoffset: [length, 0],
+    duration: 420,
+    ease: "outCubic",
+  });
+}
+
+function resetConnector(path: SVGPathElement): void {
+  if (path._rcaDrawable) {
+    path._rcaDrawable.setAttribute("draw", "0 0");
+    return;
+  }
+  const length = Number(path.dataset.length || connectorLength(path));
+  if (!length) return;
+  path.style.strokeDashoffset = String(length);
+}
+
+function animateNode(fragment: Element, anime: any): void {
+  if (!fragment.querySelector(".icon-node, .claim, .large-stat, .pill, .result-box, .chart-shell")) return;
+  anime.animate(fragment, {
+    opacity: [0, 1],
+    scale: [0.965, 1],
+    duration: 260,
+    ease: "outQuad",
+  });
+}
+
+function prepareSlide(slide: Element, anime: any): void {
+  slide.querySelectorAll<SVGPathElement>("path[data-connector='true']").forEach((path) => prepareConnector(path, anime));
+}
+
+function connectorsForFragment(fragment: Element): SVGPathElement[] {
+  const slide = fragment.closest("section");
+  const index = fragment.getAttribute("data-fragment-index");
+  if (!slide || index === null) return [];
+  return [...slide.querySelectorAll<SVGPathElement>(`path[data-connector='true'][data-fragment-index="${index}"]`)];
+}
+
+export function installRuntime(
+  Reveal: RevealInstance,
+  anime: any,
+  components: ComponentRegistry
+): void {
+  if (!Reveal || !anime?.animate) return;
+
+  mountRegistry.registerComponents(components);
+
+  const ctx: MountContext = { anime, Reveal };
+
+  Reveal.on("ready", (event: any) => {
+    prepareSlide(event.currentSlide, anime);
+    mountRegistry.hydrate(event.currentSlide, ctx);
+  });
+
+  Reveal.on("slidechanged", (event: any) => {
+    const mounts: NodeListOf<HTMLElement> = event.currentSlide.querySelectorAll(".block-mount");
+    mounts.forEach((el: HTMLElement) => { el.style.visibility = "hidden"; });
+
+    prepareSlide(event.currentSlide, anime);
+    mountRegistry.hydrate(event.currentSlide, ctx);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        mounts.forEach((el: HTMLElement) => { el.style.visibility = ""; });
+      });
+    });
+  });
+
+  Reveal.on("fragmentshown", (event: any) => {
+    const fragment = event.fragment as Element;
+    if (fragment.matches("path[data-connector='true']")) {
+      animateConnector(fragment as unknown as SVGPathElement, anime);
+    } else {
+      connectorsForFragment(fragment).forEach((path) => {
+        animateConnector(path, anime);
+      });
+      animateNode(fragment, anime);
+      mountRegistry.hydrate(fragment, ctx);
+    }
+  });
+
+  Reveal.on("fragmenthidden", (event: any) => {
+    const fragment = event.fragment as Element;
+    if (fragment.matches("path[data-connector='true']")) {
+      resetConnector(fragment as unknown as SVGPathElement);
+    } else {
+      connectorsForFragment(fragment).forEach(resetConnector);
+    }
+  });
+
+  document.querySelectorAll<Element>(".reveal .slides section").forEach((slide) => {
+    prepareSlide(slide, anime);
+  });
+  const initialSlide = Reveal.getCurrentSlide();
+  if (initialSlide) mountRegistry.hydrate(initialSlide, ctx);
+}

package/template-full/src/reveal/core/types.ts

@@ -0,0 +1,114 @@
+import type { ComponentType } from "react";
+
+export interface SlideComponentProps {
+  Reveal: RevealInstance;
+  anime?: typeof import("animejs");
+}
+
+export interface RevealInstance {
+  initialize(): Promise<void>;
+  on(event: string, callback: (e: any) => void): void;
+  off(event: string, callback: (e: any) => void): void;
+  getCurrentSlide(): HTMLElement | null;
+  getState(): { indexh: number; indexf: number };
+}
+
+export interface Slide {
+  className?: string;
+  attrs?: Record<string, string | number>;
+  html: string;
+  notes: string;
+}
+
+export type LayerName = "background" | "connector" | "content" | "overlay" | "chrome";
+
+export interface BlockOptions {
+  id?: string;
+  kind?: "html" | "svg" | "image" | "mount";
+  html?: string;
+  src?: string;
+  alt?: string;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  layer?: LayerName;
+  fragment?: boolean | number | null;
+  animation?: string;
+  className?: string;
+  attrs?: Record<string, string | number | boolean>;
+  css?: Record<string, string | number>;
+  styleText?: string;
+  flow?: boolean;
+  mount?: MountSpec | null;
+}
+
+export interface Block extends Required<Pick<BlockOptions, "kind" | "html" | "alt" | "layer" | "animation" | "className" | "flow">> {
+  id?: string;
+  src?: string;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  fragment: boolean | number | null;
+  attrs: Record<string, string | number | boolean>;
+  css: Record<string, string | number>;
+  styleText: string;
+  mount: MountSpec | null;
+}
+
+export interface MountSpec {
+  library: string;
+  exportName?: string;
+  props?: Record<string, unknown>;
+}
+
+export interface StepNote {
+  step: string;
+  visible: string;
+  say: string;
+  why?: string;
+  next?: string;
+}
+
+export interface SlideOptions {
+  className?: string;
+  attrs?: Record<string, string | number>;
+  html?: string;
+  blocks?: (Block | string)[];
+  notes?: string | (string | StepNote)[];
+}
+
+export interface ReactSlideOptions<C extends string = string> {
+  title?: string;
+  component: C;
+  steps?: number;
+  notes?: string;
+  page?: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+}
+
+export interface BlockSlideOptions {
+  title?: string;
+  blocks?: (Block | string)[];
+  page?: number;
+  notes?: string;
+  html?: string;
+  className?: string;
+  attrs?: Record<string, string | number>;
+}
+
+export type ComponentRegistry = Record<string, ComponentType<SlideComponentProps>>;
+
+export interface MountContext {
+  Reveal: RevealInstance;
+  anime: typeof import("animejs");
+}
+
+export interface DeckConfig<C extends ComponentRegistry = ComponentRegistry> {
+  buildSlides: (() => Promise<Slide[]> | Slide[]) | Slide[];
+  components: C;
+}

package/template-full/src/reveal/data/algorithms.ts

@@ -0,0 +1,78 @@
+export interface AlgoEntry {
+  name: string;
+  t1: number;
+  t3: number;
+  t5: number;
+  time: string;
+  color: string;
+  cat: string;
+}
+
+export interface HeatmapRow {
+  fault: string;
+  mrr: number[];
+}
+
+export interface HeatmapGroup {
+  name: string;
+  step: number;
+  color: string;
+  rows: HeatmapRow[];
+}
+
+export const ALGOS: AlgoEntry[] = [
+  { name: "MicroRCA",    t1: 0.37, t3: 0.50, t5: 0.64, time: "35.6",   color: "#76B82A", cat: "full" },
+  { name: "Baro",        t1: 0.36, t3: 0.50, t5: 0.58, time: "1.0",    color: "#00A6D6", cat: "full" },
+  { name: "MicroDig",    t1: 0.35, t3: 0.61, t5: 0.67, time: "19.0",   color: "#00A6D6", cat: "full" },
+  { name: "MicroHECL",   t1: 0.34, t3: 0.34, t5: 0.34, time: "34.8",   color: "#00A6D6", cat: "full" },
+  { name: "SimpleRCA",   t1: 0.28, t3: 0.60, t5: 0.80, time: "0.9",    color: "#C00000", cat: "full" },
+  { name: "CausalRCA",   t1: 0.22, t3: 0.40, t5: 0.42, time: "927",    color: "#00A6D6", cat: "full" },
+  { name: "Shapleyiq",   t1: 0.22, t3: 0.36, t5: 0.52, time: "42.7",   color: "#767676", cat: "full" },
+  { name: "Eadro",       t1: 0.16, t3: 0.16, t5: 0.16, time: "32.8",   color: "#767676", cat: "test" },
+  { name: "DiagFusion",  t1: 0.13, t3: 0.17, t5: 0.22, time: "3.0",    color: "#767676", cat: "test" },
+  { name: "MicroRank",   t1: 0.04, t3: 0.18, t5: 0.25, time: "36.3",   color: "#767676", cat: "full" },
+  { name: "Nezha",       t1: 0.04, t3: 0.08, t5: 0.08, time: "94.6",   color: "#767676", cat: "full" },
+  { name: "Art",         t1: 0.04, t3: 0.08, t5: 0.10, time: "8.1",    color: "#767676", cat: "test" },
+];
+
+export const HEATMAP_ALGOS: string[] = ["Baro","SimpleRCA","MicroRCA","MicroDig","Shapleyiq","MicroHECL","CausalRCA","MicroRank","Nezha","DiagFusion","Eadro","Art"];
+
+export const HEATMAP_GROUPS: HeatmapGroup[] = [
+  { name: "Lifecycle", step: 0, color: "#76B82A", rows: [
+    { fault: "ContainerKill", mrr: [0.87,0.75,0.85,0.70,0.05,0.60,0.55,0.10,0.05,0.08,0.10,0.05] },
+    { fault: "PodKill",       mrr: [0.82,0.80,0.78,0.65,0.15,0.55,0.50,0.08,0.10,0.06,0.08,0.04] },
+    { fault: "PodFailure",    mrr: [0.75,0.70,0.72,0.60,0.10,0.50,0.45,0.06,0.08,0.05,0.07,0.03] },
+  ]},
+  { name: "Resource", step: 1, color: "#76B82A", rows: [
+    { fault: "JVMCPUStress",    mrr: [0.80,0.65,0.60,0.55,0.18,0.35,0.30,0.04,0.02,0.04,0.05,0.02] },
+    { fault: "JVMMemoryStress", mrr: [0.95,0.76,0.70,0.60,0.20,0.40,0.35,0.05,0.02,0.04,0.06,0.02] },
+  ]},
+  { name: "HTTP", step: 2, color: "#00A6D6", rows: [
+    { fault: "HTTPReqAbort",     mrr: [0.50,0.40,0.45,0.55,0.50,0.30,0.25,0.05,0.03,0.10,0.08,0.04] },
+    { fault: "HTTPReqDelay",     mrr: [0.55,0.50,0.50,0.60,0.92,0.35,0.28,0.06,0.03,0.08,0.06,0.03] },
+    { fault: "HTTPReqRepMethod", mrr: [0.45,0.35,0.40,0.50,0.30,0.25,0.20,0.04,0.02,0.08,0.06,0.03] },
+    { fault: "HTTPReqRepPath",   mrr: [0.40,0.30,0.38,0.45,0.28,0.22,0.18,0.04,0.02,0.07,0.05,0.03] },
+    { fault: "HTTPRespAbort",    mrr: [0.48,0.38,0.42,0.50,0.45,0.28,0.22,0.05,0.03,0.09,0.07,0.04] },
+    { fault: "HTTPRespDelay",    mrr: [0.55,0.45,0.50,0.55,0.97,0.30,0.25,0.04,0.02,0.10,0.08,0.03] },
+    { fault: "HTTPRespPatchBody",mrr: [0.35,0.25,0.35,0.40,0.30,0.20,0.18,0.04,0.02,0.08,0.06,0.03] },
+    { fault: "HTTPRespRepBody",  mrr: [0.38,0.28,0.36,0.42,0.32,0.22,0.20,0.05,0.02,0.09,0.06,0.03] },
+    { fault: "HTTPRespRepCode",  mrr: [0.30,0.20,0.30,0.25,0.25,0.20,0.18,0.06,0.03,0.10,0.08,0.04] },
+  ]},
+  { name: "JVM", step: 3, color: "#7B61FF", rows: [
+    { fault: "JVMException",    mrr: [0.45,0.35,0.40,0.50,0.25,0.30,0.22,0.05,0.02,0.06,0.05,0.03] },
+    { fault: "JVMLatency",      mrr: [0.50,0.40,0.45,0.55,0.60,0.32,0.25,0.05,0.02,0.07,0.06,0.03] },
+    { fault: "JVMMySQLLatency", mrr: [0.42,0.30,0.38,0.45,0.55,0.28,0.20,0.04,0.01,0.06,0.05,0.02] },
+    { fault: "JVMReturn",       mrr: [0.10,0.08,0.12,0.10,0.15,0.10,0.08,0.03,0.01,0.05,0.03,0.02] },
+  ]},
+  { name: "Network", step: 4, color: "#E8912D", rows: [
+    { fault: "NetworkBandwidth", mrr: [0.25,0.18,0.28,0.22,0.38,0.18,0.15,0.05,0.02,0.07,0.05,0.03] },
+    { fault: "NetworkCorrupt",   mrr: [0.20,0.15,0.25,0.20,0.40,0.20,0.15,0.05,0.02,0.08,0.05,0.03] },
+    { fault: "NetworkDelay",     mrr: [0.22,0.16,0.24,0.20,0.42,0.18,0.14,0.04,0.02,0.07,0.05,0.03] },
+    { fault: "NetworkLoss",      mrr: [0.15,0.10,0.20,0.15,0.35,0.15,0.12,0.04,0.02,0.06,0.04,0.02] },
+    { fault: "NetworkPartition", mrr: [0.18,0.12,0.22,0.18,0.30,0.16,0.13,0.04,0.02,0.06,0.04,0.02] },
+  ]},
+  { name: "Blind spots", step: 5, color: "#C00000", rows: [
+    { fault: "DNSRandom", mrr: [0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00] },
+    { fault: "TimeSkew",  mrr: [0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00] },
+  ]},
+];

package/template-full/src/reveal/data/benchmark.ts

@@ -0,0 +1,79 @@
+export interface BenchDim {
+  label: string;
+  ours: number;
+  oursF: string;
+  best: number;
+  bestF: string;
+  bestDs: string;
+  higher: boolean;
+}
+
+export interface FailureBar {
+  key: string;
+  label: string;
+  pct: number;
+  color: string;
+  reveal: number;
+}
+
+export interface FailureDesc {
+  reveal: number;
+  color: string;
+  title: string;
+  text: string;
+}
+
+export interface FailureModes {
+  bars: FailureBar[];
+  descs: FailureDesc[];
+}
+
+export interface FaultType {
+  label: string;
+  pct: number;
+  color: string;
+  title: string;
+  desc: string;
+  detail: string;
+}
+
+export const BENCH_DIMS: BenchDim[] = [
+  { label: "Validated cases",    ours: 1430,   oursF: "1,430",    best: 159,     bestF: "159",      bestDs: "AIOps-21", higher: true },
+  { label: "Services",           ours: 50,     oursF: "50",       best: 69,      bestF: "69",       bestDs: "RE2-TT",   higher: false },
+  { label: "Service coverage",   ours: 84,     oursF: "84%",      best: 61,      bestF: "61%",      bestDs: "Nezha-TT", higher: true },
+  { label: "Max call depth",     ours: 7,      oursF: "7",        best: 5,       bestF: "5",        bestDs: "RE2-TT",   higher: true },
+  { label: "QPS (avg)",          ours: 16.47,  oursF: "16.47",    best: 4.35,    bestF: "4.35",     bestDs: "RE2-TT",   higher: true },
+  { label: "Log lines",          ours: 154.7,  oursF: "154.7M",   best: 21.3,    bestF: "21.3M",    bestDs: "RE2-TT",   higher: true },
+  { label: "Traces",             ours: 11.2,   oursF: "11.2M",    best: 3.1,     bestF: "3.1M",     bestDs: "GAIA",     higher: true },
+  { label: "Fault types",        ours: 25,     oursF: "25",       best: 6,       bestF: "~6",       bestDs: "most",     higher: true },
+];
+
+export const FAILURE_MODES: FailureModes = {
+  bars: [
+    { key: "modeling",  label: "Modeling Bottlenecks",          pct: 47.4, color: "#C07070", reveal: 2 },
+    { key: "scalability", label: "Scalability Issues",           pct: 39.8, color: "#1B556B", reveal: 0 },
+    { key: "signal",    label: "Signal-Loss Blind Spots",        pct: 5.8,  color: "#E8912D", reveal: 1 },
+    { key: "infra",     label: "Infrastructure-Level Blind Spots", pct: 4.2, color: "#999933", reveal: 1 },
+    { key: "semantic",  label: "Semantic-Gap Blind Spots",       pct: 2.9,  color: "#76B82A", reveal: 1 },
+  ],
+  descs: [
+    { reveal: 0, color: "#1B556B", title: "Scalability", text: "CausalRCA: 927s, Nezha: 94.6s per case" },
+    { reveal: 1, color: "#E8912D", title: "Observability blind spots", text: "Signal loss, infrastructure & semantic gaps" },
+    { reveal: 2, color: "#C07070", title: "Modeling", text: "Wrong assumptions about fault propagation" },
+  ],
+};
+
+export const FAULT_TYPES: FaultType[] = [
+  { label: "Type I", pct: 68, color: "#C00000",
+    title: "Localized",
+    desc: "Only injected service shows anomaly",
+    detail: "trivially easy to find" },
+  { label: "Type II", pct: 18, color: "#767676",
+    title: "Under-expressed",
+    desc: "No service shows any signal",
+    detail: "impossible for any method" },
+  { label: "Type III", pct: 14, color: "#76B82A",
+    title: "Propagated",
+    desc: "Downstream services are louder",
+    detail: "requires causal reasoning" },
+];