# Initialize HAX in your project
hax init

# Add the component
hax add artifact diagnostic-report

import { HAXDiagnosticReport, useDiagnosticReportAction } from "@/hax/artifacts/diagnostic-report";

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

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

  return (
    <HAXDiagnosticReport
      title="Service Degradation Analysis"
      items={[
        {
          id: "1",
          suspectedCause: "Memory leak in workers",
          confidence: 85,
          confidenceLevel: "high",
          rationale: "Heap grows 12MB/hr under load",
          recommendedAction: "Profile heap"
        },
        {
          id: "2",
          suspectedCause: "Connection pool exhaustion",
          confidence: 62,
          confidenceLevel: "medium",
          rationale: "Pool nearing max at peak traffic",
          recommendedAction: "Increase pool size"
        }
      ]}
    />
  );
}