@skyhook-io/radar-app 1.14.4 → 1.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.14.4",
+  "version": "1.14.5",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/components/diagnose/AIMarkdown.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ComponentProps } from "react";
 import { AlertTriangle, Copy, Check } from "lucide-react";
 import { Markdown } from "../ui/Markdown";
 import { Tooltip } from "../ui/Tooltip";
@@ -59,7 +59,7 @@ export function CopyButton({ text, label }: { text: string; label: string }) {
 // it as a fence — it leaks the literal ``` and renders an empty code box. Coerce
 // fence markers onto their own lines and push trailing content off the opener so
 // the block renders. (Well-formed markdown is unaffected.)
-function tidyFences(md: string): string {
+export function tidyFences(md: string): string {
   if (!md || !md.includes("```")) return md;
   return md
     .replace(/([^\n])```/g, "$1\n\n```") // opener/closer must start a line
@@ -75,12 +75,17 @@ const SOFT_INLINE_CODE =
 export function AIMarkdown({
   className,
   children,
+  codeActions,
 }: {
   className?: string;
   children: string;
+  codeActions?: ComponentProps<typeof Markdown>["codeActions"];
 }) {
   return (
-    <Markdown className={`${SOFT_INLINE_CODE} ${className ?? ""}`}>
+    <Markdown
+      className={`${SOFT_INLINE_CODE} ${className ?? ""}`}
+      codeActions={codeActions}
+    >
       {tidyFences(children)}
     </Markdown>
   );

package/src/components/diagnose/AssessmentCard.tsx

@@ -35,7 +35,7 @@ import {
   STEP_KIND_LABEL,
   assessmentCopyText,
 } from "./assessmentCopy";
-import { AIMarkdown, CopyButton } from "./AIMarkdown";
+import { AIMarkdown, CopyButton, tidyFences } from "./AIMarkdown";
 import { prettyTool } from "./toolCallLabel";
 
 export function ResultCard({
@@ -134,6 +134,7 @@ export function ResultCard({
     return section === "actions" ? null : (
       <AllClearCard
         diagnosis={diagnosis}
+        explanation={explanation}
         animate={animate}
         showDisclaimer={showDisclaimer}
         coverageLimited={coverageLimited}
@@ -170,6 +171,9 @@ export function ResultCard({
       <>
         <InconclusiveCard
           diagnosis={diagnosis}
+          explanation={explanation}
+          assessmentSources={assessmentSources}
+          assessmentAction={assessmentAction}
           animate={animate}
           storyInline={storyInline}
           revisedAfter={revisedAfter}
@@ -188,12 +192,6 @@ export function ResultCard({
             readOnlyAssessment={readOnlyAssessment}
           />
         ) : null}
-        {assessmentSources ? (
-          <AssessmentSourceDetails>{assessmentSources}</AssessmentSourceDetails>
-        ) : null}
-        {assessmentAction && (
-          <div className="mt-2 flex justify-end">{assessmentAction}</div>
-        )}
       </>
     );
   }
@@ -675,8 +673,201 @@ export type AssessmentExplanation = {
   openRequest?: number;
 };
 
-// The diagnosis result: likely cause + remediation + the
-// agent's full analysis on demand.
+function AssessmentDetails({
+  diagnosis,
+  explanation,
+  assessmentAction,
+  assessmentSources,
+  showAnalysisDisclosure = false,
+  showConfidence = false,
+  analysisText = diagnosis.report,
+}: {
+  diagnosis: Diagnosis;
+  explanation?: AssessmentExplanation;
+  assessmentAction?: ReactNode;
+  assessmentSources?: ReactNode;
+  showAnalysisDisclosure?: boolean;
+  showConfidence?: boolean;
+  analysisText?: string;
+}) {
+  const [detail, setDetail] = useState<"analysis" | "explanation" | null>(
+    explanation?.status === "running" ? "explanation" : null,
+  );
+  const showAnalysis = detail === "analysis";
+  const analysisReveal = useDisclosureReveal<HTMLDivElement>();
+  const { elementRef: analysisElementRef, revealAfterToggle: revealAnalysis } =
+    analysisReveal;
+  useEffect(() => {
+    if (explanation?.openRequest) {
+      setDetail("explanation");
+      revealAnalysis(true);
+    }
+  }, [explanation?.openRequest, revealAnalysis]);
+  useEffect(() => {
+    if (
+      detail === "explanation" &&
+      (explanation?.status === "done" || explanation?.status === "error")
+    ) {
+      const element = analysisElementRef.current;
+      const scroller = element?.closest("[data-investigation-findings-scroll]");
+      if (element && scroller) {
+        const top = element.getBoundingClientRect().top;
+        const viewport = scroller.getBoundingClientRect();
+        if (top >= viewport.top && top < viewport.bottom) revealAnalysis(true);
+      }
+    }
+  }, [explanation?.status, detail, analysisElementRef, revealAnalysis]);
+  const analysisId = useId();
+  return (
+    <>
+      {/* Full analysis — the agent's detailed evidence, on demand. Under the
+          story contract Findings renders the story itself, so only the
+          explanation and sources remain here. */}
+      {((showAnalysisDisclosure && diagnosis.report) ||
+        (showAnalysisDisclosure && diagnosis.confidence != null) ||
+        explanation ||
+        assessmentAction ||
+        assessmentSources) && (
+        <div>
+          <div
+            className="flex flex-wrap items-center gap-x-3 gap-y-1 pt-2"
+            data-assessment-actions
+          >
+            {((showAnalysisDisclosure && diagnosis.report) ||
+              (showAnalysisDisclosure && diagnosis.confidence != null) ||
+              assessmentSources) && (
+              <button
+                type="button"
+                aria-expanded={showAnalysis}
+                aria-controls={`${analysisId}-analysis`}
+                onClick={() => {
+                  setDetail(showAnalysis ? null : "analysis");
+                  analysisReveal.revealAfterToggle(!showAnalysis);
+                }}
+                className="flex items-center gap-1.5 rounded-md py-2 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+              >
+                <CollapseChevron open={showAnalysis} className="h-3.5 w-3.5" />
+                {showAnalysisDisclosure && diagnosis.report
+                  ? "Full analysis"
+                  : "Assessment details"}
+              </button>
+            )}
+            {explanation && (
+              <Tooltip
+                content={
+                  explanation.status === "idle"
+                    ? explanation.onGenerate
+                      ? "Ask the agent to explain this assessment and its proposed next steps in plain language."
+                      : "Wait for the current agent request to finish before requesting an explanation."
+                    : explanation.status === "running"
+                      ? "The agent is preparing an explanation. You can close this and return while it runs."
+                      : explanation.status === "error"
+                        ? "View the explanation error and retry when the agent is available."
+                        : "Show the saved plain-language explanation. No new request is needed."
+                }
+              >
+                <button
+                  type="button"
+                  aria-expanded={detail === "explanation"}
+                  aria-controls={`${analysisId}-explanation`}
+                  disabled={
+                    explanation.status === "idle" && !explanation.onGenerate
+                  }
+                  onClick={() => {
+                    const open = detail !== "explanation";
+                    setDetail(open ? "explanation" : null);
+                    analysisReveal.revealAfterToggle(open);
+                    if (open && explanation.status === "idle")
+                      explanation.onGenerate?.();
+                  }}
+                  className="inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:opacity-50"
+                >
+                  <HelpCircle className="h-3 w-3" />
+                  Explain simply
+                </button>
+              </Tooltip>
+            )}
+            {assessmentAction && (
+              <div className="ml-auto">{assessmentAction}</div>
+            )}
+          </div>
+          <div id={analysisId} ref={analysisReveal.elementRef}>
+            <div id={`${analysisId}-analysis`}>
+              <Collapse open={detail === "analysis"} mountLazily>
+                <div className="border-t border-theme-border/60 px-3 py-2">
+                  {showAnalysisDisclosure ? (
+                    <>
+                      {showConfidence && (
+                        <p className="mb-2 text-xs text-theme-text-tertiary">
+                          Agent confidence:{" "}
+                          {diagnosis.confidence != null
+                            ? confidenceLabel(diagnosis.confidence)
+                            : "not stated"}
+                          {diagnosis.confidence != null
+                            ? " · self-reported"
+                            : ""}
+                        </p>
+                      )}
+                      <AIMarkdown className="text-sm [overflow-wrap:anywhere] [&_h2:first-child]:mt-0 [&_h2]:mb-1.5 [&_h2]:mt-3 [&_h2]:text-xs [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wide [&_h2]:text-theme-text-tertiary [&_h3]:text-sm [&_li]:text-theme-text-secondary [&_p]:my-1.5 [&_p]:text-theme-text-secondary">
+                        {analysisText}
+                      </AIMarkdown>
+                    </>
+                  ) : null}
+                  {assessmentSources}
+                </div>
+              </Collapse>
+            </div>
+            <div id={`${analysisId}-explanation`}>
+              <Collapse open={detail === "explanation"} mountLazily>
+                <div className="border-t border-theme-border/60 px-3 py-2">
+                  {explanation?.status === "running" ? (
+                    <div
+                      role="status"
+                      className="flex items-center gap-2 py-2 text-sm text-theme-text-secondary"
+                    >
+                      <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+                      Explaining this assessment…
+                    </div>
+                  ) : explanation?.status === "done" ? (
+                    <div className="flex items-start gap-2">
+                      <AIMarkdown className="min-w-0 flex-1 text-sm text-theme-text-secondary [overflow-wrap:anywhere]">
+                        {explanation.text || ""}
+                      </AIMarkdown>
+                      <CopyButton
+                        text={explanation.text || ""}
+                        label="Copy explanation"
+                      />
+                    </div>
+                  ) : explanation?.status === "error" ? (
+                    <div
+                      role="alert"
+                      className="flex flex-wrap items-center gap-2 py-2 text-sm text-theme-text-secondary"
+                    >
+                      <span>
+                        {explanation.error ||
+                          "The agent did not return an explanation."}
+                      </span>
+                      {explanation.onGenerate && (
+                        <button
+                          type="button"
+                          onClick={explanation.onGenerate}
+                          className="rounded-md px-2 py-1 text-xs font-medium text-accent-text hover:bg-theme-hover"
+                        >
+                          Try again
+                        </button>
+                      )}
+                    </div>
+                  ) : null}
+                </div>
+              </Collapse>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
 function DiagnosisResult({
   diagnosis,
   onApply,
@@ -719,37 +910,9 @@ function DiagnosisResult({
       ? storyPlainText(diagnosis.report)
       : diagnosis.report;
   const showAnalysisDisclosure = !storyShape || storyInline;
-  const [detail, setDetail] = useState<"analysis" | "explanation" | null>(
-    explanation?.status === "running" ? "explanation" : null,
-  );
-  const showAnalysis = detail === "analysis";
-  const analysisReveal = useDisclosureReveal<HTMLDivElement>();
-  const { elementRef: analysisElementRef, revealAfterToggle: revealAnalysis } =
-    analysisReveal;
-  useEffect(() => {
-    if (explanation?.openRequest) {
-      setDetail("explanation");
-      revealAnalysis(true);
-    }
-  }, [explanation?.openRequest, revealAnalysis]);
-  useEffect(() => {
-    if (
-      detail === "explanation" &&
-      (explanation?.status === "done" || explanation?.status === "error")
-    ) {
-      const element = analysisElementRef.current;
-      const scroller = element?.closest("[data-investigation-findings-scroll]");
-      if (element && scroller) {
-        const top = element.getBoundingClientRect().top;
-        const viewport = scroller.getBoundingClientRect();
-        if (top >= viewport.top && top < viewport.bottom) revealAnalysis(true);
-      }
-    }
-  }, [explanation?.status, detail, analysisElementRef, revealAnalysis]);
   const [showAllSteps, setShowAllSteps] = useState(false);
   const stepsId = useId();
   const stepsReveal = useDisclosureReveal<HTMLDivElement>();
-  const analysisId = useId();
   // Only a real structured cause anchors the amber card; the full prose lives in
   // "Full analysis" (never relabel the report as a causal assessment).
   const rootCause = diagnosis.rootCause;
@@ -784,6 +947,7 @@ function DiagnosisResult({
   }) => {
     const isRec = recValid && i === recIdx! - 1;
     const step = typedSteps ? steps[i] : undefined;
+    const commands = remediationCommands(r);
     return (
       <div
         key={i}
@@ -842,17 +1006,6 @@ function DiagnosisResult({
                     Apply…
                   </button>
                 )}
-                {remediationCommands(r).map((command, c, all) => (
-                  <CopyButton
-                    key={c}
-                    text={command}
-                    label={
-                      all.length > 1
-                        ? `Copy command ${c + 1} of step ${i + 1}`
-                        : `Copy command from step ${i + 1}`
-                    }
-                  />
-                ))}
               </div>
             </div>
             {/* The condition and the reason are read before the command is
@@ -873,7 +1026,19 @@ function DiagnosisResult({
                 {diagnosis.recommendedReason}
               </p>
             )}
-            <AIMarkdown className="max-w-[100ch] text-sm [overflow-wrap:anywhere] [&_p]:my-0 [&_pre]:my-1.5">
+            <AIMarkdown
+              className="max-w-[100ch] text-sm [overflow-wrap:anywhere] [&_p]:my-0 [&_pre]:my-1.5"
+              codeActions={(code) => {
+                const command = code.trim();
+                if (!commands.includes(command)) return null;
+                return (
+                  <CopyButton
+                    text={command}
+                    label={`Copy command from step ${i + 1}`}
+                  />
+                );
+              }}
+            >
               {r}
             </AIMarkdown>
           </div>
@@ -1034,152 +1199,17 @@ function DiagnosisResult({
         </div>
       )}
 
-      {/* Full analysis — the agent's detailed evidence, on demand. Under the
-          story contract Findings renders the story itself, so only the
-          explanation and sources remain here. */}
-      {showConclusion &&
-        ((showAnalysisDisclosure && diagnosis.report) ||
-          (showAnalysisDisclosure && diagnosis.confidence != null) ||
-          explanation ||
-          assessmentAction ||
-          assessmentSources) && (
-          <div>
-            <div
-              className="flex flex-wrap items-center gap-x-3 gap-y-1 pt-2"
-              data-assessment-actions
-            >
-              {((showAnalysisDisclosure && diagnosis.report) ||
-                (showAnalysisDisclosure && diagnosis.confidence != null) ||
-                assessmentSources) && (
-                <button
-                  type="button"
-                  aria-expanded={showAnalysis}
-                  aria-controls={`${analysisId}-analysis`}
-                  onClick={() => {
-                    setDetail(showAnalysis ? null : "analysis");
-                    analysisReveal.revealAfterToggle(!showAnalysis);
-                  }}
-                  className="flex items-center gap-1.5 rounded-md py-2 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
-                >
-                  <CollapseChevron
-                    open={showAnalysis}
-                    className="h-3.5 w-3.5"
-                  />
-                  {showAnalysisDisclosure && diagnosis.report
-                    ? "Full analysis"
-                    : "Assessment details"}
-                </button>
-              )}
-              {explanation && (
-                <Tooltip
-                  content={
-                    explanation.status === "idle"
-                      ? explanation.onGenerate
-                        ? "Ask the agent to explain this assessment and its proposed next steps in plain language."
-                        : "Wait for the current agent request to finish before requesting an explanation."
-                      : explanation.status === "running"
-                        ? "The agent is preparing an explanation. You can close this and return while it runs."
-                        : explanation.status === "error"
-                          ? "View the explanation error and retry when the agent is available."
-                          : "Show the saved plain-language explanation. No new request is needed."
-                  }
-                >
-                  <button
-                    type="button"
-                    aria-expanded={detail === "explanation"}
-                    aria-controls={`${analysisId}-explanation`}
-                    disabled={
-                      explanation.status === "idle" && !explanation.onGenerate
-                    }
-                    onClick={() => {
-                      const open = detail !== "explanation";
-                      setDetail(open ? "explanation" : null);
-                      analysisReveal.revealAfterToggle(open);
-                      if (open && explanation.status === "idle")
-                        explanation.onGenerate?.();
-                    }}
-                    className="inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:opacity-50"
-                  >
-                    <HelpCircle className="h-3 w-3" />
-                    Explain simply
-                  </button>
-                </Tooltip>
-              )}
-              {assessmentAction && (
-                <div className="ml-auto">{assessmentAction}</div>
-              )}
-            </div>
-            <div id={analysisId} ref={analysisReveal.elementRef}>
-              <div id={`${analysisId}-analysis`}>
-                <Collapse open={detail === "analysis"} mountLazily>
-                  <div className="border-t border-theme-border/60 px-3 py-2">
-                    {showAnalysisDisclosure ? (
-                      <>
-                        <p className="mb-2 text-xs text-theme-text-tertiary">
-                          Agent confidence:{" "}
-                          {diagnosis.confidence != null
-                            ? confidenceLabel(diagnosis.confidence)
-                            : "not stated"}
-                          {diagnosis.confidence != null
-                            ? " · self-reported"
-                            : ""}
-                        </p>
-                        <AIMarkdown className="text-sm [overflow-wrap:anywhere] [&_h2:first-child]:mt-0 [&_h2]:mb-1.5 [&_h2]:mt-3 [&_h2]:text-xs [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wide [&_h2]:text-theme-text-tertiary [&_h3]:text-sm [&_li]:text-theme-text-secondary [&_p]:my-1.5 [&_p]:text-theme-text-secondary">
-                          {analysisText}
-                        </AIMarkdown>
-                      </>
-                    ) : null}
-                    {assessmentSources}
-                  </div>
-                </Collapse>
-              </div>
-              <div id={`${analysisId}-explanation`}>
-                <Collapse open={detail === "explanation"} mountLazily>
-                  <div className="border-t border-theme-border/60 px-3 py-2">
-                    {explanation?.status === "running" ? (
-                      <div
-                        role="status"
-                        className="flex items-center gap-2 py-2 text-sm text-theme-text-secondary"
-                      >
-                        <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-                        Explaining this assessment…
-                      </div>
-                    ) : explanation?.status === "done" ? (
-                      <div className="flex items-start gap-2">
-                        <AIMarkdown className="min-w-0 flex-1 text-sm text-theme-text-secondary [overflow-wrap:anywhere]">
-                          {explanation.text || ""}
-                        </AIMarkdown>
-                        <CopyButton
-                          text={explanation.text || ""}
-                          label="Copy explanation"
-                        />
-                      </div>
-                    ) : explanation?.status === "error" ? (
-                      <div
-                        role="alert"
-                        className="flex flex-wrap items-center gap-2 py-2 text-sm text-theme-text-secondary"
-                      >
-                        <span>
-                          {explanation.error ||
-                            "The agent did not return an explanation."}
-                        </span>
-                        {explanation.onGenerate && (
-                          <button
-                            type="button"
-                            onClick={explanation.onGenerate}
-                            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text hover:bg-theme-hover"
-                          >
-                            Try again
-                          </button>
-                        )}
-                      </div>
-                    ) : null}
-                  </div>
-                </Collapse>
-              </div>
-            </div>
-          </div>
-        )}
+      {showConclusion && (
+        <AssessmentDetails
+          diagnosis={diagnosis}
+          explanation={explanation}
+          assessmentAction={assessmentAction}
+          assessmentSources={assessmentSources}
+          showAnalysisDisclosure={showAnalysisDisclosure}
+          showConfidence
+          analysisText={analysisText}
+        />
+      )}
 
       {showConclusion && showDisclaimer && (
         <div className="flex items-start gap-1 px-0.5 text-[11px] text-theme-text-tertiary">
@@ -1204,6 +1234,7 @@ function healthFlagSentence(flag: {
 
 export function AllClearCard({
   diagnosis,
+  explanation,
   animate,
   showDisclaimer,
   coverageLimited,
@@ -1222,6 +1253,7 @@ export function AllClearCard({
   animate: boolean;
   showDisclaimer: boolean;
   coverageLimited: boolean;
+  explanation?: AssessmentExplanation;
   evidenceConflict: boolean;
   evidenceConflictExplainedBy?: string[];
   assessmentAction?: ReactNode;
@@ -1236,9 +1268,6 @@ export function AllClearCard({
   onRevealSource?: (sourceId: string) => void;
 }) {
   const storyShape = diagnosisHasStoryShape(diagnosis);
-  const [showAnalysis, setShowAnalysis] = useState(false);
-  const analysisReveal = useDisclosureReveal<HTMLDivElement>();
-  const analysisId = useId();
   const report =
     (storyShape && !storyInline ? "" : storyPlainText(diagnosis.report)) ||
     (storyShape
@@ -1283,43 +1312,14 @@ export function AllClearCard({
   // the disclaimer are the same in both shapes.
   const trailing = (
     <>
-      {detailed || assessmentAction || assessmentSources ? (
-        <div>
-          <div
-            className="flex flex-wrap items-center gap-3 pt-2"
-            data-assessment-actions
-          >
-            {(detailed || assessmentSources) && (
-              <button
-                type="button"
-                aria-expanded={showAnalysis}
-                aria-controls={analysisId}
-                onClick={() => {
-                  setShowAnalysis(!showAnalysis);
-                  analysisReveal.revealAfterToggle(!showAnalysis);
-                }}
-                className="flex items-center gap-1.5 rounded-md py-2 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
-              >
-                <CollapseChevron open={showAnalysis} className="h-3.5 w-3.5" />
-                {detailed ? "Full analysis" : "Assessment details"}
-              </button>
-            )}
-            {assessmentAction && (
-              <div className="ml-auto">{assessmentAction}</div>
-            )}
-          </div>
-          <div id={analysisId} ref={analysisReveal.elementRef}>
-            <Collapse open={showAnalysis}>
-              <div className="border-t border-theme-border/60 px-3 py-2">
-                <AIMarkdown className="text-sm [overflow-wrap:anywhere] [&_p]:my-1.5 [&_p]:text-theme-text-secondary [&_p:first-child]:mt-0 [&_p:last-child]:mb-0">
-                  {detailed ? report : ""}
-                </AIMarkdown>
-                {assessmentSources}
-              </div>
-            </Collapse>
-          </div>
-        </div>
-      ) : null}
+      <AssessmentDetails
+        diagnosis={diagnosis}
+        explanation={explanation}
+        assessmentAction={assessmentAction}
+        assessmentSources={assessmentSources}
+        showAnalysisDisclosure={detailed}
+        analysisText={report}
+      />
       {showDisclaimer ? (
         <div className="flex items-start gap-1 px-0.5 text-[11px] text-theme-text-tertiary">
           <ShieldCheck className="mt-0.5 h-3 w-3 shrink-0" />
@@ -1442,6 +1442,9 @@ export function AllClearCard({
 // all-clear) — so "I couldn't tell" never reads as "you're fine."
 export function InconclusiveCard({
   diagnosis,
+  explanation,
+  assessmentSources,
+  assessmentAction,
   animate,
   storyInline = false,
   revisedAfter,
@@ -1451,7 +1454,10 @@ export function InconclusiveCard({
   diagnosis: Diagnosis;
   animate: boolean;
   storyInline?: boolean;
+  explanation?: AssessmentExplanation;
   revisedAfter?: string;
+  assessmentSources?: ReactNode;
+  assessmentAction?: ReactNode;
   /** Reads Radar could not complete for this assessment; listed under Still open. */
   assessmentLimits?: string[];
   assessmentCopy?: Pick<AssessmentCopyRadar, "context" | "receipts">;
@@ -1496,6 +1502,12 @@ export function InconclusiveCard({
           addressing any errors shown in Activity.
         </span>
       </div>
+      <AssessmentDetails
+        diagnosis={diagnosis}
+        explanation={explanation}
+        assessmentSources={assessmentSources}
+        assessmentAction={assessmentAction}
+      />
     </div>
   );
 }
@@ -1547,10 +1559,10 @@ export function remediationHeadline(step: string): string {
  */
 export function remediationCommands(step: string): string[] {
   const commands: string[] = [];
-  // One pass in reading order, so button N is the Nth command in the text.
+  const normalized = tidyFences(step);
   const code = /```[a-zA-Z]*\n([\s\S]*?)```|`([^`\n]+)`/g;
   let match: RegExpExecArray | null;
-  while ((match = code.exec(step))) {
+  while ((match = code.exec(normalized))) {
     if (match[1] !== undefined) {
       const body = match[1].trim();
       if (body) commands.push(body);