Link contextual guidance to Docs

webui/src/components/ActionBlockerHint.tsx

@@ -1,6 +1,8 @@
 import { AlertTriangle, Info } from "lucide-react";
 import type { ReactNode } from "react";
 import AdvancedOptionsPanel from "./AdvancedOptionsPanel";
+import DocumentationHelpLink from "./help/DocumentationHelpLink";
+import type { DocumentationHelpReference } from "./help/documentationHelp";
 
 export type ActionBlockerReason = {
   summary: ReactNode;
@@ -23,6 +25,7 @@ type ActionBlockerHintProps = {
   tone?: "info" | "warning" | "danger";
   className?: string;
   labels?: ActionBlockerLabels;
+  documentation?: DocumentationHelpReference;
 };
 
 function joinClasses(...classes: Array<string | undefined | false>) {
@@ -33,7 +36,8 @@ export default function ActionBlockerHint({
   reason,
   tone = "warning",
   className = "",
-  labels = {}
+  labels = {},
+  documentation
 }: ActionBlockerHintProps) {
   const Icon = tone === "info" ? Info : AlertTriangle;
   const hasActionRows = Boolean(reason.requiredAction || reason.actor || reason.target);
@@ -71,6 +75,7 @@ export default function ActionBlockerHint({
             <div>{reason.technicalDetails}</div>
           </AdvancedOptionsPanel>
         )}
+        {documentation && <DocumentationHelpLink reference={documentation} />}
       </div>
     </section>
   );