npm - @forwardimpact/pathway - Versions diffs - 0.2.0 → 0.4.0 - Mend

@forwardimpact/pathway 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/app/commands/agent.js +20 -20
package/app/commands/index.js +4 -3
package/app/commands/job.js +9 -4
package/app/commands/skill.js +56 -2
package/app/commands/tool.js +112 -0
package/app/components/builder.js +6 -3
package/app/components/checklist.js +6 -4
package/app/components/markdown-textarea.js +132 -0
package/app/css/components/forms.css +45 -0
package/app/css/components/layout.css +12 -0
package/app/css/components/surfaces.css +22 -0
package/app/css/pages/detail.css +50 -0
package/app/css/pages/job-builder.css +0 -42
package/app/formatters/agent/profile.js +61 -120
package/app/formatters/agent/skill.js +48 -60
package/app/formatters/grade/dom.js +2 -4
package/app/formatters/job/description.js +74 -82
package/app/formatters/job/dom.js +45 -179
package/app/formatters/job/markdown.js +17 -13
package/app/formatters/shared.js +65 -2
package/app/formatters/skill/dom.js +57 -2
package/app/formatters/skill/markdown.js +18 -0
package/app/formatters/skill/shared.js +12 -4
package/app/formatters/stage/microdata.js +1 -1
package/app/formatters/stage/shared.js +1 -1
package/app/formatters/tool/shared.js +72 -0
package/app/handout-main.js +7 -7
package/app/handout.html +7 -0
package/app/index.html +10 -3
package/app/lib/card-mappers.js +64 -17
package/app/lib/form-controls.js +64 -1
package/app/lib/render.js +12 -1
package/app/lib/template-loader.js +9 -0
package/app/lib/yaml-loader.js +12 -1
package/app/main.js +4 -0
package/app/model/agent.js +26 -18
package/app/model/derivation.js +3 -3
package/app/model/levels.js +2 -0
package/app/model/loader.js +12 -1
package/app/model/validation.js +74 -8
package/app/pages/agent-builder.js +8 -5
package/app/pages/job.js +28 -4
package/app/pages/landing.js +34 -14
package/app/pages/progress.js +6 -5
package/app/pages/self-assessment.js +10 -8
package/app/pages/skill.js +5 -17
package/app/pages/stage.js +10 -6
package/app/pages/tool.js +50 -0
package/app/slides/index.js +25 -25
package/app/slides.html +7 -0
package/bin/pathway.js +41 -27
package/examples/capabilities/business.yaml +17 -17
package/examples/capabilities/delivery.yaml +51 -36
package/examples/capabilities/reliability.yaml +127 -114
package/examples/capabilities/scale.yaml +38 -36
package/examples/disciplines/engineering_management.yaml +1 -1
package/examples/framework.yaml +12 -0
package/examples/grades.yaml +18 -19
package/examples/self-assessments.yaml +1 -1
package/package.json +1 -1
package/templates/job.template.md +47 -0
package/templates/skill.template.md +31 -12

package/app/handout-main.js CHANGED Viewed

@@ -135,25 +135,25 @@ function renderIndex(data) {
             `${getConceptEmoji(framework, "job")} ${framework.entityDefinitions.job.title}`,
           ),
           " - ",
-          `${data.disciplines.length} disciplines, ${data.tracks.length} tracks, ${data.grades.length} grades`,
+          `${data.disciplines.length} disciplines, ${data.grades.length} grades, ${data.tracks.length} tracks`,
         ),
         li(
           {},
           a(
-            { href: "#/skill" },
-            `${getConceptEmoji(framework, "skill")} ${framework.entityDefinitions.skill.title}`,
+            { href: "#/behaviour" },
+            `${getConceptEmoji(framework, "behaviour")} ${framework.entityDefinitions.behaviour.title}`,
           ),
           " - ",
-          `${data.skills.length} skill definitions`,
+          `${data.behaviours.length} behaviour definitions`,
         ),
         li(
           {},
           a(
-            { href: "#/behaviour" },
-            `${getConceptEmoji(framework, "behaviour")} ${framework.entityDefinitions.behaviour.title}`,
+            { href: "#/skill" },
+            `${getConceptEmoji(framework, "skill")} ${framework.entityDefinitions.skill.title}`,
           ),
           " - ",
-          `${data.behaviours.length} behaviour definitions`,
+          `${data.skills.length} skill definitions`,
         ),
         li(
           {},

package/app/handout.html CHANGED Viewed

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Engineering Pathway - Handout View</title>
     <link rel="stylesheet" href="css/bundles/handout.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "mustache": "https://esm.sh/mustache@4.2.0"
+        }
+      }
+    </script>
   </head>
   <body class="slide-view handout-view">
     <header

package/app/index.html CHANGED Viewed

@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Engineering Pathway</title>
     <link rel="stylesheet" href="css/bundles/app.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markdown.min.js"></script>
     <script type="importmap">
       {
         "imports": {
@@ -31,12 +37,13 @@
         </button>
         <ul class="nav-links" id="nav-links">
           <li><a href="#/discipline">Disciplines</a></li>
-          <li><a href="#/track">Tracks</a></li>
           <li><a href="#/grade">Grades</a></li>
-          <li><a href="#/skill">Skills</a></li>
+          <li><a href="#/track">Tracks</a></li>
           <li><a href="#/behaviour">Behaviours</a></li>
-          <li><a href="#/stage">Stages</a></li>
+          <li><a href="#/skill">Skills</a></li>
           <li><a href="#/driver">Drivers</a></li>
+          <li><a href="#/stage">Stages</a></li>
+          <li><a href="#/tool">Tools</a></li>
           <li><a href="#/job-builder" class="nav-cta">Build a Job</a></li>
           <li><a href="#/agent-builder" class="nav-cta">Build an Agent</a></li>
           <li><a href="#/interview-prep" class="nav-cta">Interview Prep</a></li>

package/app/lib/card-mappers.js CHANGED Viewed

@@ -9,6 +9,23 @@ import { createBadge } from "../components/card.js";
 import { formatLevel } from "./render.js";
 import { getCapabilityEmoji } from "../model/levels.js";
+/**
+ * Create an external link element styled as a badge
+ * @param {string} text - Link text
+ * @param {string} url - External URL
+ * @returns {HTMLElement}
+ */
+function createExternalLink(text, url) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.className = "badge badge-primary";
+  link.textContent = text;
+  link.addEventListener("click", (e) => e.stopPropagation()); // Don't trigger card click
+  return link;
+}
 /**
  * Map discipline to card config
  * @param {Object} discipline
@@ -155,24 +172,54 @@ export function jobToCardConfig(job) {
 }
 /**
- * Format capability for display
- * @param {string} capability
+ * Map tool to card config
+ * @param {Object} tool - Aggregated tool with usages
+ * @param {Array} capabilities - Capability entities for emoji lookup
+ * @returns {Object}
+ */
+export function toolToCardConfig(tool, capabilities) {
+  // Create skills list as card content
+  const skillsList = createSkillsList(tool.usages, capabilities);
+  return {
+    title: tool.name,
+    description: tool.description,
+    // Docs link in header badges (upper right)
+    badges: tool.url ? [createExternalLink("Docs →", tool.url)] : [],
+    content: skillsList,
+  };
+}
+/**
+ * Create an unordered list of skill links with capability emoji
+ * @param {Array} usages - Tool usage objects with skillId, skillName, capabilityId
+ * @param {Array} capabilities - Capability entities
+ * @returns {HTMLElement}
+ */
+function createSkillsList(usages, capabilities) {
+  const ul = document.createElement("ul");
+  ul.className = "tool-skills-list";
+  for (const usage of usages) {
+    const emoji = getCapabilityEmoji(capabilities, usage.capabilityId);
+    const li = document.createElement("li");
+    const link = document.createElement("a");
+    link.href = `#/skill/${usage.skillId}`;
+    link.textContent = `${emoji} ${usage.skillName}`;
+    li.appendChild(link);
+    ul.appendChild(li);
+  }
+  return ul;
+}
+/**
+ * Format capability for badge display (short, tag-like)
+ * @param {string} capabilityId
  * @param {Array} capabilities
  * @returns {string}
  */
-function formatCapability(capability, capabilities) {
-  const capabilityLabels = {
-    delivery: "Delivery",
-    scale: "Scale",
-    reliability: "Reliability",
-    data: "Data",
-    ai: "AI",
-    process: "Process",
-    business: "Business",
-    people: "People",
-    documentation: "Documentation",
-  };
-  const label = capabilityLabels[capability] || formatLevel(capability);
-  const emoji = getCapabilityEmoji(capabilities, capability);
-  return `${emoji} ${label}`;
+function formatCapability(capabilityId, capabilities) {
+  const emoji = getCapabilityEmoji(capabilities, capabilityId);
+  return `${emoji} ${capabilityId.toUpperCase()}`;
 }

package/app/lib/form-controls.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * Reusable form control components
  */
-import { select, option } from "./render.js";
+import { select, option, optgroup } from "./render.js";
 /**
  * Create a select element with initial value and change handler
@@ -45,3 +45,66 @@ export function createSelectWithValue({
   return selectEl;
 }
+/**
+ * Create a discipline select with optgroups for Professional and Management
+ * @param {Object} options - Configuration options
+ * @param {string} options.id - Element ID
+ * @param {Array} options.disciplines - Array of discipline objects
+ * @param {string} options.initialValue - Initial selected value
+ * @param {string} options.placeholder - Placeholder text for empty option
+ * @param {Function} options.onChange - Callback when selection changes
+ * @param {Function} [options.getDisplayName] - Optional function to get display name from item
+ * @returns {HTMLElement}
+ */
+export function createDisciplineSelect({
+  id,
+  disciplines,
+  initialValue,
+  placeholder,
+  onChange,
+  getDisplayName,
+}) {
+  const displayFn = getDisplayName || ((d) => d.specialization || d.name);
+  // Separate disciplines by type
+  const professional = disciplines.filter((d) => d.isProfessional);
+  const management = disciplines.filter((d) => d.isManagement);
+  // Sort each group alphabetically by display name
+  professional.sort((a, b) => displayFn(a).localeCompare(displayFn(b)));
+  management.sort((a, b) => displayFn(a).localeCompare(displayFn(b)));
+  // Build options for a group
+  const buildOptions = (items) =>
+    items.map((item) => {
+      const opt = option({ value: item.id }, displayFn(item));
+      if (item.id === initialValue) {
+        opt.selected = true;
+      }
+      return opt;
+    });
+  // Build optgroups - Professional first, then Management
+  const groups = [];
+  if (professional.length > 0) {
+    groups.push(
+      optgroup({ label: "Professional" }, ...buildOptions(professional)),
+    );
+  }
+  if (management.length > 0) {
+    groups.push(optgroup({ label: "Management" }, ...buildOptions(management)));
+  }
+  const selectEl = select(
+    { className: "form-select", id },
+    option({ value: "" }, placeholder),
+    ...groups,
+  );
+  selectEl.addEventListener("change", (e) => {
+    onChange(e.target.value);
+  });
+  return selectEl;
+}

package/app/lib/render.js CHANGED Viewed

@@ -111,6 +111,10 @@ export const th = (attrs, ...children) =>
   createElement("th", attrs, ...children);
 export const td = (attrs, ...children) =>
   createElement("td", attrs, ...children);
+export const pre = (attrs, ...children) =>
+  createElement("pre", attrs, ...children);
+export const code = (attrs, ...children) =>
+  createElement("code", attrs, ...children);
 export const button = (attrs, ...children) =>
   createElement("button", attrs, ...children);
 export const input = (attrs) => createElement("input", attrs);
@@ -118,6 +122,8 @@ export const select = (attrs, ...children) =>
   createElement("select", attrs, ...children);
 export const option = (attrs, ...children) =>
   createElement("option", attrs, ...children);
+export const optgroup = (attrs, ...children) =>
+  createElement("optgroup", attrs, ...children);
 export const label = (attrs, ...children) =>
   createElement("label", attrs, ...children);
 export const form = (attrs, ...children) =>
@@ -185,12 +191,17 @@ export function showError(message) {
 /**
  * Format a skill level or behaviour maturity for display
+ * Handles both snake_case and camelCase
  * @param {string} value - The level/maturity value
  * @returns {string}
  */
 export function formatLevel(value) {
   if (!value) return "";
-  return value.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  // Insert space before uppercase letters (for camelCase), then handle snake_case
+  return value
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 /**

package/app/lib/template-loader.js CHANGED Viewed

@@ -64,3 +64,12 @@ export async function loadAgentTemplate(dataDir) {
 export async function loadSkillTemplate(dataDir) {
   return loadTemplate("skill.template.md", dataDir);
 }
+/**
+ * Load job description template
+ * @param {string} dataDir - Path to data directory
+ * @returns {Promise<string>} Job template content
+ */
+export async function loadJobTemplate(dataDir) {
+  return loadTemplate("job.template.md", dataDir);
+}

package/app/lib/yaml-loader.js CHANGED Viewed

@@ -70,7 +70,15 @@ async function loadSkillsFromCapabilities(capabilitiesDir) {
     if (capability.skills && Array.isArray(capability.skills)) {
       for (const skill of capability.skills) {
-        const { id, name, isHumanOnly, human, agent } = skill;
+        const {
+          id,
+          name,
+          isHumanOnly,
+          human,
+          agent,
+          implementationReference,
+          toolReferences,
+        } = skill;
         allSkills.push({
           id,
           name,
@@ -80,6 +88,9 @@ async function loadSkillsFromCapabilities(capabilitiesDir) {
           // Include isHumanOnly flag for agent filtering (defaults to false)
           ...(isHumanOnly && { isHumanOnly }),
           ...(agent && { agent }),
+          // Include implementation reference and tool references (shared by human and agent)
+          ...(implementationReference && { implementationReference }),
+          ...(toolReferences && { toolReferences }),
         });
       }
     }

package/app/main.js CHANGED Viewed

@@ -26,6 +26,7 @@ import { renderTracksList, renderTrackDetail } from "./pages/track.js";
 import { renderGradesList, renderGradeDetail } from "./pages/grade.js";
 import { renderDriversList, renderDriverDetail } from "./pages/driver.js";
 import { renderStagesList, renderStageDetail } from "./pages/stage.js";
+import { renderToolsList } from "./pages/tool.js";
 import { renderJobBuilder } from "./pages/job-builder.js";
 import { renderJobDetail } from "./pages/job.js";
 import { renderInterviewPrep } from "./pages/interview-builder.js";
@@ -99,6 +100,9 @@ function setupRoutes() {
   router.on("/stage", renderStagesList);
   router.on("/stage/:id", renderStageDetail);
+  // Tool
+  router.on("/tool", renderToolsList);
   // Job builder
   router.on("/job-builder", renderJobBuilder);
   router.on("/job/:discipline/:grade/:track", renderJobDetail);

package/app/model/agent.js CHANGED Viewed

@@ -225,21 +225,13 @@ function buildWorkingStyleFromBehaviours(
   return sections.join("\n");
 }
-/**
- * Stage ID to display name and next stage mapping
- */
-const STAGE_INFO = {
-  plan: { name: "Plan", nextStage: "Code" },
-  code: { name: "Code", nextStage: "Review" },
-  review: { name: "Review", nextStage: "Complete" },
-};
 /**
  * Generate SKILL.md content from skill data
  * @param {Object} skillData - Skill with agent section containing stages
+ * @param {Array} stages - All stage entities
  * @returns {Object} Skill with frontmatter, title, stages array, reference, dirname
  */
-export function generateSkillMd(skillData) {
+export function generateSkillMd(skillData, stages) {
   const { agent, name } = skillData;
   if (!agent) {
@@ -250,17 +242,31 @@ export function generateSkillMd(skillData) {
     throw new Error(`Skill ${skillData.id} agent section missing stages`);
   }
+  // Build stage lookup map
+  const stageMap = new Map(stages.map((s) => [s.id, s]));
   // Transform stages object to array for template rendering
   const stagesArray = Object.entries(agent.stages).map(
     ([stageId, stageData]) => {
-      const info = STAGE_INFO[stageId] || {
-        name: stageId,
-        nextStage: "Next",
-      };
+      const stageEntity = stageMap.get(stageId);
+      const stageName = stageEntity?.name || stageId;
+      // Find next stage from handoffs
+      let nextStageName = "Complete";
+      if (stageEntity?.handoffs) {
+        const nextHandoff = stageEntity.handoffs.find(
+          (h) => h.targetStage !== stageId,
+        );
+        if (nextHandoff) {
+          const nextStage = stageMap.get(nextHandoff.targetStage);
+          nextStageName = nextStage?.name || nextHandoff.targetStage;
+        }
+      }
       return {
         stageId,
-        stageName: info.name,
-        nextStageName: info.nextStage,
+        stageName,
+        nextStageName,
         focus: stageData.focus,
         activities: stageData.activities || [],
         ready: stageData.ready || [],
@@ -277,11 +283,13 @@ export function generateSkillMd(skillData) {
   return {
     frontmatter: {
       name: agent.name,
-      description: agent.description.trim(),
+      description: agent.description,
+      useWhen: agent.useWhen || "",
     },
     title: name,
     stages: stagesArray,
-    reference: agent.reference ? agent.reference.trim() : "",
+    reference: skillData.implementationReference || "",
+    toolReferences: skillData.toolReferences || [],
     dirname: agent.name,
   };
 }

package/app/model/derivation.js CHANGED Viewed

@@ -376,17 +376,17 @@ export function isValidJobCombination({
  * @returns {string} Generated job title
  */
 export function generateJobTitle(discipline, grade, track = null) {
-  const { roleTitle, specialization, isManagement } = discipline;
+  const { roleTitle, isManagement } = discipline;
   const { professionalTitle, managementTitle } = grade;
   // Management discipline (no track needed)
   if (isManagement && !track) {
-    return `${managementTitle}, ${specialization}`;
+    return `${managementTitle}, ${roleTitle}`;
   }
   // Management discipline with track
   if (isManagement && track) {
-    return `${managementTitle}, ${track.name}`;
+    return `${managementTitle}, ${roleTitle} – ${track.name}`;
   }
   // IC discipline with track

package/app/model/levels.js CHANGED Viewed

@@ -90,6 +90,7 @@ export const Capability = {
   RELIABILITY: "reliability",
   DATA: "data",
   AI: "ai",
+  ML: "ml",
   PROCESS: "process",
   BUSINESS: "business",
   PEOPLE: "people",
@@ -111,6 +112,7 @@ export const CAPABILITY_ORDER = [
   Capability.DELIVERY,
   Capability.DATA,
   Capability.AI,
+  Capability.ML,
   Capability.SCALE,
   Capability.RELIABILITY,
   Capability.PEOPLE,

package/app/model/loader.js CHANGED Viewed

@@ -84,7 +84,15 @@ async function loadSkillsFromCapabilities(capabilitiesDir) {
     if (capability.skills && Array.isArray(capability.skills)) {
       for (const skill of capability.skills) {
-        const { id, name, isHumanOnly, human, agent } = skill;
+        const {
+          id,
+          name,
+          isHumanOnly,
+          human,
+          agent,
+          implementationReference,
+          toolReferences,
+        } = skill;
         allSkills.push({
           id,
           name,
@@ -95,6 +103,9 @@ async function loadSkillsFromCapabilities(capabilitiesDir) {
           ...(isHumanOnly && { isHumanOnly }),
           // Preserve agent section for agent generation
           ...(agent && { agent }),
+          // Include implementation reference and tool references (shared by human and agent)
+          ...(implementationReference && { implementationReference }),
+          ...(toolReferences && { toolReferences }),
         });
       }
     }

package/app/model/validation.js CHANGED Viewed

@@ -241,17 +241,13 @@ function validateSkill(skill, index, requiredStageIds = []) {
       }
     }
-    // reference is optional but should be a string if present
-    if (
-      skill.agent.reference !== undefined &&
-      typeof skill.agent.reference !== "string"
-    ) {
+    // Error if old 'reference' field is still present (moved to skill.implementationReference)
+    if (skill.agent.reference !== undefined) {
       errors.push(
         createError(
-          "INVALID_VALUE",
-          "Skill agent reference must be a string",
+          "INVALID_FIELD",
+          "Skill agent 'reference' field is not supported. Use skill.implementationReference instead.",
           `${agentPath}.reference`,
-          skill.agent.reference,
         ),
       );
     }
@@ -295,6 +291,76 @@ function validateSkill(skill, index, requiredStageIds = []) {
     }
   }
+  // Validate implementationReference if present (optional string)
+  if (
+    skill.implementationReference !== undefined &&
+    typeof skill.implementationReference !== "string"
+  ) {
+    errors.push(
+      createError(
+        "INVALID_VALUE",
+        "Skill implementationReference must be a string",
+        `${path}.implementationReference`,
+        skill.implementationReference,
+      ),
+    );
+  }
+  // Validate toolReferences array if present
+  if (skill.toolReferences !== undefined) {
+    if (!Array.isArray(skill.toolReferences)) {
+      errors.push(
+        createError(
+          "INVALID_VALUE",
+          "Skill toolReferences must be an array",
+          `${path}.toolReferences`,
+          skill.toolReferences,
+        ),
+      );
+    } else {
+      skill.toolReferences.forEach((tool, i) => {
+        const toolPath = `${path}.toolReferences[${i}]`;
+        if (!tool.name) {
+          errors.push(
+            createError(
+              "MISSING_REQUIRED",
+              "Tool reference missing name",
+              `${toolPath}.name`,
+            ),
+          );
+        }
+        if (!tool.description) {
+          errors.push(
+            createError(
+              "MISSING_REQUIRED",
+              "Tool reference missing description",
+              `${toolPath}.description`,
+            ),
+          );
+        }
+        if (!tool.useWhen) {
+          errors.push(
+            createError(
+              "MISSING_REQUIRED",
+              "Tool reference missing useWhen",
+              `${toolPath}.useWhen`,
+            ),
+          );
+        }
+        if (tool.url !== undefined && typeof tool.url !== "string") {
+          errors.push(
+            createError(
+              "INVALID_VALUE",
+              "Tool reference url must be a string",
+              `${toolPath}.url`,
+              tool.url,
+            ),
+          );
+        }
+      });
+    }
+  }
   return { errors, warnings };
 }

package/app/pages/agent-builder.js CHANGED Viewed

@@ -26,7 +26,10 @@ import {
   deriveAgentSkills,
   deriveReferenceGrade,
 } from "../model/agent.js";
-import { createSelectWithValue } from "../lib/form-controls.js";
+import {
+  createSelectWithValue,
+  createDisciplineSelect,
+} from "../lib/form-controls.js";
 import { createReactive } from "../lib/reactive.js";
 import { getStageEmoji } from "../formatters/stage/shared.js";
 import { formatAgentProfile } from "../formatters/agent/profile.js";
@@ -242,9 +245,9 @@ export async function renderAgentBuilder() {
           { className: "form-group" },
           label({ className: "form-label" }, "Discipline"),
           availableDisciplines.length > 0
-            ? createSelectWithValue({
+            ? createDisciplineSelect({
                 id: "agent-discipline-select",
-                items: availableDisciplines,
+                disciplines: availableDisciplines,
                 initialValue: selection.get().discipline,
                 placeholder: "Select a discipline...",
                 onChange: (value) => {
@@ -404,7 +407,7 @@ function createAllStagesPreview(context) {
   const skillFiles = derivedSkills
     .map((derived) => skills.find((s) => s.id === derived.skillId))
     .filter((skill) => skill?.agent)
-    .map((skill) => generateSkillMd(skill));
+    .map((skill) => generateSkillMd(skill, stages));
   return div(
     { className: "agent-deployment" },
@@ -519,7 +522,7 @@ function createSingleStagePreview(context, stage) {
   const skillFiles = derivedSkills
     .map((d) => skills.find((s) => s.id === d.skillId))
     .filter((skill) => skill?.agent)
-    .map((skill) => generateSkillMd(skill));
+    .map((skill) => generateSkillMd(skill, stages));
   return div(
     { className: "agent-deployment" },