Contextual Explanation

A structured explanation component for presenting system changes, agent decisions, or automated actions with supporting details and action buttons.

Installation

hax init
hax add artifact contextual-explanation

Component Setup

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

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

  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"
      details={details}
    />
  );
}