# Initialize HAX in your project
hax init

# Add the component
hax add artifact contextual-explanation

import { HAXContextualExplanation, useContextualExplanationAction } from "@/hax/artifacts/contextual-explanation";

export function SystemEventsPage() {
  const [artifacts, setArtifacts] = useState([]);

  // Register contextual explanation actions for AI agents
  useContextualExplanationAction({
    addOrUpdateArtifact: (type, data) => {
      setArtifacts(prev => [...prev, { type, data, id: Date.now() }]);
    }
  });

  return (
    <HAXContextualExplanation
      title="Network Routing Update"
      alertTitle="Why this happened"
      alertDescription="Agent detected high latency and switched to backup route"
      details={[
        { label: "Previous Route", value: "us-west-1 → us-east-1", isBoldLabel: true },
        { label: "New Route", value: "us-west-1 → eu-west-1 → us-east-1", isBoldLabel: true },
        { label: "Latency Improvement", value: "45ms → 28ms (-38%)" }
      ]}
      secondaryButtonLabel="Revert"
      primaryButtonLabel="Keep Change"
    />
  );
}