feat(reader): show workflow kit on chapter pages

marketing-site/components/reader/WorkflowBlock.jsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import TermOutput from "./TermOutput";
 
 const JUMP = [
+  { id: "kit", label: "Kit" },
   { id: "problem", label: "Problem" },
   { id: "actors", label: "Actors" },
   { id: "setup", label: "Setup" },
@@ -69,6 +70,31 @@ async function copyText(text) {
   }
 }
 
+
+function WorkflowKit({ recipe }) {
+  const k = recipe.kit;
+  if (!k) return null;
+  const rows = [
+    ["You run", k.youRun],
+    ["Tools", (k.tools || []).join(" · ")],
+    ["Files", (k.files || []).join(" · ")],
+    ["Model", k.model],
+    ["Time", recipe.time],
+    ["Cost", recipe.cost],
+    ["You produce", k.artifact],
+  ].filter(([, v]) => v);
+  return (
+    <dl className="workflow-kit" id={`${recipe.anchor}-kit`} aria-label="What this workflow uses">
+      {rows.map(([label, value]) => (
+        <div key={label}>
+          <dt>{label}</dt>
+          <dd>{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
 function Field({ anchor, name, label, children }) {
   return (
     <div className="row" id={`${anchor}-${name}`}>
@@ -114,6 +140,8 @@ export default function WorkflowBlock({
           {recipe.title}
         </h3>
 
+        <WorkflowKit recipe={recipe} />
+
         <nav className="recipe-jump" aria-label="In this workflow">
           {JUMP.map((j) => (
             <a key={j.id} href={`#${a}-${j.id}`}>