@forwardimpact/pathway 0.4.0 → 0.6.0

package/{app → src}/pages/agent-builder.js

@@ -16,6 +16,8 @@ import {
   span,
   label,
   section,
+  select,
+  option,
 } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { loadAgentDataBrowser } from "../lib/yaml-loader.js";
@@ -25,7 +27,7 @@ import {
   generateSkillMd,
   deriveAgentSkills,
   deriveReferenceGrade,
-} from "../model/agent.js";
+} from "@forwardimpact/model/agent";
 import {
   createSelectWithValue,
   createDisciplineSelect,
@@ -34,6 +36,7 @@ import { createReactive } from "../lib/reactive.js";
 import { getStageEmoji } from "../formatters/stage/shared.js";
 import { formatAgentProfile } from "../formatters/agent/profile.js";
 import { formatAgentSkill } from "../formatters/agent/skill.js";
+import { createCodeDisplay } from "../components/code-display.js";
 
 /** All stages option value */
 const ALL_STAGES_VALUE = "all";
@@ -101,9 +104,71 @@ export async function renderAgentBuilder() {
   const availableDisciplines = data.disciplines.filter((d) =>
     agentDisciplineIds.has(d.id),
   );
-  const availableTracks = data.tracks.filter((t) => agentTrackIds.has(t.id));
+  // All tracks with agent definitions (will be filtered per-discipline)
+  const allAgentTracks = data.tracks.filter((t) => agentTrackIds.has(t.id));
   const stages = data.stages || [];
 
+  /**
+   * Get tracks valid for a discipline that also have agent definitions
+   * @param {string} disciplineId - Discipline ID
+   * @returns {Array} - Valid tracks for the discipline
+   */
+  function getValidTracksForDiscipline(disciplineId) {
+    const discipline = data.disciplines.find((d) => d.id === disciplineId);
+    if (!discipline) return [];
+
+    const validTracks = discipline.validTracks ?? [];
+    // Filter to track IDs only (exclude null which means trackless)
+    const validTrackIds = validTracks.filter((t) => t !== null);
+
+    // Intersection: valid for discipline AND has agent definition
+    return allAgentTracks.filter((t) => validTrackIds.includes(t.id));
+  }
+
+  // Track select element - created once, options updated when discipline changes
+  const trackSelectEl = select(
+    { className: "form-select", id: "agent-track-select" },
+    option({ value: "", disabled: true, selected: true }, "Select a track..."),
+  );
+  trackSelectEl.disabled = true;
+
+  /**
+   * Update track select options based on selected discipline
+   * @param {string} disciplineId - Discipline ID
+   */
+  function updateTrackOptions(disciplineId) {
+    const validTracks = getValidTracksForDiscipline(disciplineId);
+
+    // Clear existing options
+    trackSelectEl.innerHTML = "";
+
+    if (validTracks.length === 0) {
+      trackSelectEl.appendChild(
+        option(
+          { value: "", disabled: true, selected: true },
+          "No tracks available for this discipline",
+        ),
+      );
+      trackSelectEl.disabled = true;
+      return;
+    }
+
+    // Add placeholder
+    trackSelectEl.appendChild(
+      option(
+        { value: "", disabled: true, selected: true },
+        "Select a track...",
+      ),
+    );
+
+    // Add available track options
+    validTracks.forEach((t) => {
+      trackSelectEl.appendChild(option({ value: t.id }, t.name));
+    });
+
+    trackSelectEl.disabled = false;
+  }
+
   // Build stage options with "All Stages" first
   const stageOptions = [
     { id: ALL_STAGES_VALUE, name: "All Stages" },
@@ -134,7 +199,7 @@ export async function renderAgentBuilder() {
   // Preview container - will be updated reactively
   const previewContainer = div(
     { className: "agent-preview" },
-    createEmptyState(availableDisciplines.length, availableTracks.length),
+    createEmptyState(availableDisciplines.length, allAgentTracks.length),
   );
 
   /**
@@ -156,7 +221,7 @@ export async function renderAgentBuilder() {
 
     if (!discipline) {
       previewContainer.appendChild(
-        createEmptyState(availableDisciplines.length, availableTracks.length),
+        createEmptyState(availableDisciplines.length, allAgentTracks.length),
       );
       return;
     }
@@ -251,7 +316,14 @@ export async function renderAgentBuilder() {
                 initialValue: selection.get().discipline,
                 placeholder: "Select a discipline...",
                 onChange: (value) => {
-                  selection.update((prev) => ({ ...prev, discipline: value }));
+                  // Update track options when discipline changes
+                  updateTrackOptions(value);
+                  // Reset track selection when discipline changes
+                  selection.update((prev) => ({
+                    ...prev,
+                    discipline: value,
+                    track: "",
+                  }));
                 },
                 getDisplayName: (d) => d.specialization || d.name,
               })
@@ -260,25 +332,32 @@ export async function renderAgentBuilder() {
                 "No disciplines have agent definitions.",
               ),
         ),
-        // Track selector
+        // Track selector (dynamically filtered by discipline)
         div(
           { className: "form-group" },
           label({ className: "form-label" }, "Track"),
-          availableTracks.length > 0
-            ? createSelectWithValue({
-                id: "agent-track-select",
-                items: availableTracks,
-                initialValue: selection.get().track,
-                placeholder: "Select a track...",
-                onChange: (value) => {
-                  selection.update((prev) => ({ ...prev, track: value }));
-                },
-                getDisplayName: (t) => t.name,
-              })
-            : p(
-                { className: "text-muted" },
-                "No tracks have agent definitions.",
-              ),
+          (() => {
+            // Wire up track select change handler
+            trackSelectEl.addEventListener("change", (e) => {
+              selection.update((prev) => ({ ...prev, track: e.target.value }));
+            });
+            // Initialize track options if discipline is pre-selected
+            const initialDiscipline = selection.get().discipline;
+            if (initialDiscipline) {
+              updateTrackOptions(initialDiscipline);
+              // Set initial track value if provided and valid
+              const initialTrack = selection.get().track;
+              const validTracks =
+                getValidTracksForDiscipline(initialDiscipline);
+              if (
+                initialTrack &&
+                validTracks.some((t) => t.id === initialTrack)
+              ) {
+                trackSelectEl.value = initialTrack;
+              }
+            }
+            return trackSelectEl;
+          })(),
         ),
         // Stage selector (dropdown with All Stages option)
         div(
@@ -590,10 +669,15 @@ function createAgentCard(stage, profile, stages, agentTemplate, _derived) {
         span({ className: "agent-card-emoji" }, stageEmoji),
         h3({}, `${stage.name} Agent`),
       ),
-      createCopyButton(content),
     ),
-    p({ className: "agent-card-filename" }, profile.filename),
-    div({ className: "agent-card-preview" }, createCodePreview(content)),
+    div(
+      { className: "agent-card-preview" },
+      createCodeDisplay({
+        content,
+        filename: profile.filename,
+        maxHeight: 400,
+      }),
+    ),
   );
 
   return card;
@@ -614,57 +698,18 @@ function createSkillCard(skill, skillTemplate) {
     div(
       { className: "skill-card-header" },
       span({ className: "skill-card-name" }, skill.frontmatter.name),
-      createCopyButton(content),
     ),
-    p({ className: "skill-card-filename" }, filename),
-    div({ className: "skill-card-preview" }, createCodePreview(content)),
+    div(
+      { className: "skill-card-preview" },
+      createCodeDisplay({
+        content,
+        filename,
+        maxHeight: 300,
+      }),
+    ),
   );
 }
 
-/**
- * Create a code preview element
- * @param {string} content - Code content
- * @returns {HTMLElement}
- */
-function createCodePreview(content) {
-  const pre = document.createElement("pre");
-  pre.className = "code-block code-preview";
-
-  const code = document.createElement("code");
-  code.textContent = content;
-
-  pre.appendChild(code);
-  return pre;
-}
-
-/**
- * Create a copy button
- * @param {string} content - Content to copy
- * @returns {HTMLElement}
- */
-function createCopyButton(content) {
-  const btn = document.createElement("button");
-  btn.className = "btn btn-sm copy-btn";
-  btn.textContent = "📋 Copy";
-
-  btn.addEventListener("click", async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      btn.textContent = "✓ Copied";
-      setTimeout(() => {
-        btn.textContent = "📋 Copy";
-      }, 2000);
-    } catch {
-      btn.textContent = "Failed";
-      setTimeout(() => {
-        btn.textContent = "📋 Copy";
-      }, 2000);
-    }
-  });
-
-  return btn;
-}
-
 /**
  * Create download all button for all stages
  * @param {Array} stageAgents - Array of {stage, derived, profile}
@@ -860,11 +905,10 @@ function createCliHint(disciplineId, trackId, stageId) {
     { className: "agent-section cli-hint" },
     h2({}, "CLI Alternative"),
     p({}, "Generate this agent from the command line:"),
-    div(
-      { className: "cli-command" },
-      createCodePreview(command),
-      createCopyButton(command),
-    ),
+    createCodeDisplay({
+      content: command,
+      language: "bash",
+    }),
   );
 
   return container;

package/{app → src}/pages/assessment-results.js

@@ -19,7 +19,7 @@ import { getState } from "../lib/state.js";
 import { createBadge } from "../components/card.js";
 import { formatLevel } from "../lib/render.js";
 import { getAssessmentState, resetAssessment } from "./self-assessment.js";
-import { findRealisticMatches } from "../model/matching.js";
+import { findRealisticMatches } from "@forwardimpact/model/matching";
 
 /**
  * Render the assessment results page

package/{app → src}/pages/interview.js

@@ -21,7 +21,7 @@ import { createBadge } from "../components/card.js";
 import { createBackLink } from "../components/nav.js";
 import { createDetailSection } from "../components/detail.js";
 import { renderError } from "../components/error-page.js";
-import { getConceptEmoji } from "../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 import {
   prepareAllInterviews,
   INTERVIEW_TYPES,

package/{app → src}/pages/job-builder.js

@@ -5,7 +5,7 @@
 import { render } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createBuilder, createStandardPreview } from "../components/builder.js";
-import { prepareJobBuilderPreview } from "../model/job.js";
+import { prepareJobBuilderPreview } from "@forwardimpact/model/job";
 
 /**
  * Render job builder page

package/{app → src}/pages/job.js

@@ -5,7 +5,7 @@
 import { render, div, p } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { renderError } from "../components/error-page.js";
-import { prepareJobDetail } from "../model/job.js";
+import { prepareJobDetail } from "@forwardimpact/model/job";
 import { jobToDOM } from "../formatters/job/dom.js";
 
 /** @type {string|null} Cached job template */

package/{app → src}/pages/landing.js

@@ -5,7 +5,10 @@
 import { render, div, h1, h2, p, a, span } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createStatCard } from "../components/card.js";
-import { groupSkillsByCapability, getConceptEmoji } from "../model/levels.js";
+import {
+  groupSkillsByCapability,
+  getConceptEmoji,
+} from "@forwardimpact/schema/levels";
 import { getStageEmoji } from "../formatters/stage/shared.js";
 import { aggregateTools } from "../formatters/tool/shared.js";
 
@@ -53,7 +56,7 @@ export function renderLanding() {
       { className: "landing-hero" },
       div(
         { className: "hero-title-wrapper" },
-        h1({}, `${framework.emoji} ${framework.title}`),
+        h1({}, `${framework.emojiIcon} ${framework.title}`),
         span({ className: "brand-tag brand-tag-hero" }, framework.tag),
       ),
       p({}, framework.description.trim()),

package/{app → src}/pages/self-assessment.js

@@ -25,7 +25,7 @@ import {
   CAPABILITY_ORDER,
   getCapabilityEmoji,
   getConceptEmoji,
-} from "../model/levels.js";
+} from "@forwardimpact/schema/levels";
 import { formatLevel } from "../lib/render.js";
 
 /**

package/{app → src}/pages/skill.js

@@ -10,7 +10,7 @@ import { renderNotFound } from "../components/error-page.js";
 import { prepareSkillsList } from "../formatters/skill/shared.js";
 import { skillToDOM } from "../formatters/skill/dom.js";
 import { skillToCardConfig } from "../lib/card-mappers.js";
-import { getCapabilityEmoji } from "../model/levels.js";
+import { getCapabilityEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Render skills list page

package/{app → src}/pages/stage.js

@@ -7,16 +7,16 @@ import { getState } from "../lib/state.js";
 import { createCardList } from "../components/list.js";
 import { renderNotFound } from "../components/error-page.js";
 import { prepareStagesList, stageToDOM } from "../formatters/stage/index.js";
-import { getConceptEmoji } from "../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Map stage to card configuration
- * @param {Object} stage - Prepared stage item (includes emoji)
+ * @param {Object} stage - Prepared stage item (includes emojiIcon)
  * @returns {Object} Card configuration
  */
 function stageToCardConfig(stage) {
   return {
-    title: `${stage.emoji} ${stage.name}`,
+    title: `${stage.emojiIcon} ${stage.name}`,
     description: stage.truncatedDescription,
     href: `/stage/${stage.id}`,
   };
@@ -24,7 +24,7 @@ function stageToCardConfig(stage) {
 
 /**
  * Create lifecycle flow visualization
- * @param {Array} stages - Array of stage items (each includes emoji)
+ * @param {Array} stages - Array of stage items (each includes emojiIcon)
  * @returns {HTMLElement}
  */
 function createLifecycleFlow(stages) {
@@ -35,7 +35,7 @@ function createLifecycleFlow(stages) {
       { className: "lifecycle-flow-item" },
       a(
         { href: `#/stage/${stage.id}`, className: "lifecycle-stage" },
-        span({ className: "lifecycle-emoji" }, stage.emoji),
+        span({ className: "lifecycle-emoji" }, stage.emojiIcon),
         span({ className: "lifecycle-name" }, stage.name),
       ),
       !isLast ? span({ className: "lifecycle-arrow" }, "→") : null,

package/{app → src}/pages/tool.js

@@ -10,7 +10,7 @@ import { prepareToolsList } from "../formatters/tool/shared.js";
 import { createBadge } from "../components/card.js";
 import { createCardList } from "../components/list.js";
 import { toolToCardConfig } from "../lib/card-mappers.js";
-import { getConceptEmoji } from "../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Render tools list page

package/{app → src}/slide-main.js

@@ -8,7 +8,7 @@ import { createSlideRouter } from "./lib/router-slides.js";
 import { setData, getState } from "./lib/state.js";
 import { loadAllData } from "./lib/yaml-loader.js";
 import { span, a } from "./lib/render.js";
-import { generateAllJobs } from "./model/derivation.js";
+import { generateAllJobs } from "@forwardimpact/model/derivation";
 import { sortTracksByName } from "./formatters/track/shared.js";
 
 // Import slide renderers
@@ -346,7 +346,7 @@ function populateBrandHeader(framework) {
   header.appendChild(
     a(
       { className: "brand-title", href: "#/" },
-      `${framework.emoji} ${framework.title}`,
+      `${framework.emojiIcon} ${framework.title}`,
     ),
   );
   header.appendChild(span({ className: "brand-tag" }, framework.tag));

package/{app → src}/slides/chapter.js

@@ -20,37 +20,37 @@ export function renderChapterSlide({ render, data, params }) {
   const chapterConfig = {
     driver: {
       title: framework.entityDefinitions.driver.title,
-      emoji: framework.entityDefinitions.driver.emoji,
+      emojiIcon: framework.entityDefinitions.driver.emojiIcon,
       description: framework.entityDefinitions.driver.description,
     },
     skill: {
       title: framework.entityDefinitions.skill.title,
-      emoji: framework.entityDefinitions.skill.emoji,
+      emojiIcon: framework.entityDefinitions.skill.emojiIcon,
       description: framework.entityDefinitions.skill.description,
     },
     behaviour: {
       title: framework.entityDefinitions.behaviour.title,
-      emoji: framework.entityDefinitions.behaviour.emoji,
+      emojiIcon: framework.entityDefinitions.behaviour.emojiIcon,
       description: framework.entityDefinitions.behaviour.description,
     },
     discipline: {
       title: framework.entityDefinitions.discipline.title,
-      emoji: framework.entityDefinitions.discipline.emoji,
+      emojiIcon: framework.entityDefinitions.discipline.emojiIcon,
       description: framework.entityDefinitions.discipline.description,
     },
     grade: {
       title: framework.entityDefinitions.grade.title,
-      emoji: framework.entityDefinitions.grade.emoji,
+      emojiIcon: framework.entityDefinitions.grade.emojiIcon,
       description: framework.entityDefinitions.grade.description,
     },
     track: {
       title: framework.entityDefinitions.track.title,
-      emoji: framework.entityDefinitions.track.emoji,
+      emojiIcon: framework.entityDefinitions.track.emojiIcon,
       description: framework.entityDefinitions.track.description,
     },
     job: {
       title: framework.entityDefinitions.job.title,
-      emoji: framework.entityDefinitions.job.emoji,
+      emojiIcon: framework.entityDefinitions.job.emojiIcon,
       description: framework.entityDefinitions.job.description,
     },
   };
@@ -72,7 +72,7 @@ export function renderChapterSlide({ render, data, params }) {
     { className: "slide chapter-cover" },
     h1(
       { className: "chapter-title" },
-      config.emoji ? `${config.emoji} ` : "",
+      config.emojiIcon ? `${config.emojiIcon} ` : "",
       span({ className: "gradient-text" }, config.title),
     ),
     p({ className: "chapter-description" }, config.description.trim()),

package/{app → src}/slides/index.js

@@ -5,8 +5,8 @@
  */
 
 import { div, heading1, heading2, p, a, ul, li, span } from "../lib/render.js";
-import { getConceptEmoji } from "../model/levels.js";
-import { generateAllJobs } from "../model/derivation.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
+import { generateAllJobs } from "@forwardimpact/model/derivation";
 
 /**
  * Render the slide index
@@ -22,7 +22,7 @@ export function renderSlideIndex({ render, data }) {
       { className: "page-header" },
       heading1(
         { className: "page-title" },
-        `${framework.emoji} ${framework.title}`,
+        `${framework.emojiIcon} ${framework.title}`,
       ),
       p(
         { className: "page-description" },

package/{app → src}/slides/job.js

@@ -5,7 +5,7 @@
  */
 
 import { div, h1, p } from "../lib/render.js";
-import { prepareJobDetail } from "../model/job.js";
+import { prepareJobDetail } from "@forwardimpact/model/job";
 import { jobToDOM } from "../formatters/index.js";
 
 /**

package/{app → src}/slides/overview.js

@@ -22,7 +22,7 @@ import { prepareBehavioursList } from "../formatters/behaviour/shared.js";
 import { prepareDriversList } from "../formatters/driver/shared.js";
 import { prepareGradesList } from "../formatters/grade/shared.js";
 import { prepareTracksList } from "../formatters/track/shared.js";
-import { generateAllJobs } from "../model/derivation.js";
+import { generateAllJobs } from "@forwardimpact/model/derivation";
 
 /**
  * Format discipline group name for display
@@ -63,14 +63,14 @@ export function renderOverviewSlide({ render, data, params }) {
   const chapterConfig = {
     driver: {
       title: framework.entityDefinitions.driver.title,
-      emoji: framework.entityDefinitions.driver.emoji,
+      emojiIcon: framework.entityDefinitions.driver.emojiIcon,
       description: framework.entityDefinitions.driver.description,
       entities: prepareDriversList(data.drivers).items,
       mapper: driverToCardConfig,
     },
     skill: {
       title: framework.entityDefinitions.skill.title,
-      emoji: framework.entityDefinitions.skill.emoji,
+      emojiIcon: framework.entityDefinitions.skill.emojiIcon,
       description: framework.entityDefinitions.skill.description,
       entities: Object.values(
         prepareSkillsList(data.skills, data.capabilities).groups,
@@ -79,14 +79,14 @@ export function renderOverviewSlide({ render, data, params }) {
     },
     behaviour: {
       title: framework.entityDefinitions.behaviour.title,
-      emoji: framework.entityDefinitions.behaviour.emoji,
+      emojiIcon: framework.entityDefinitions.behaviour.emojiIcon,
       description: framework.entityDefinitions.behaviour.description,
       entities: prepareBehavioursList(data.behaviours).items,
       mapper: behaviourToCardConfig,
     },
     discipline: {
       title: framework.entityDefinitions.discipline.title,
-      emoji: framework.entityDefinitions.discipline.emoji,
+      emojiIcon: framework.entityDefinitions.discipline.emojiIcon,
       description: framework.entityDefinitions.discipline.description,
       groups: prepareDisciplinesList(data.disciplines).groups,
       mapper: disciplineToCardConfig,
@@ -94,21 +94,21 @@ export function renderOverviewSlide({ render, data, params }) {
     },
     grade: {
       title: framework.entityDefinitions.grade.title,
-      emoji: framework.entityDefinitions.grade.emoji,
+      emojiIcon: framework.entityDefinitions.grade.emojiIcon,
       description: framework.entityDefinitions.grade.description,
       entities: prepareGradesList(data.grades).items,
       mapper: gradeToCardConfig,
     },
     track: {
       title: framework.entityDefinitions.track.title,
-      emoji: framework.entityDefinitions.track.emoji,
+      emojiIcon: framework.entityDefinitions.track.emojiIcon,
       description: framework.entityDefinitions.track.description,
       entities: prepareTracksList(data.tracks).items,
       mapper: trackToCardConfig,
     },
     job: {
       title: framework.entityDefinitions.job.title,
-      emoji: framework.entityDefinitions.job.emoji,
+      emojiIcon: framework.entityDefinitions.job.emojiIcon,
       description: framework.entityDefinitions.job.description,
       entities: generateAllJobs({
         disciplines: data.disciplines,
@@ -150,7 +150,7 @@ export function renderOverviewSlide({ render, data, params }) {
       { className: "overview-header" },
       h1(
         { className: "overview-title" },
-        config.emoji ? `${config.emoji} ` : "",
+        config.emojiIcon ? `${config.emojiIcon} ` : "",
         span({ className: "gradient-text" }, config.title),
       ),
       p({ className: "overview-description" }, config.description.trim()),

package/{app → src}/slides/skill.js

@@ -35,6 +35,7 @@ export function renderSkillSlide({ render, data, params }) {
       drivers: data.drivers,
       capabilities: data.capabilities,
       showBackLink: false,
+      showToolsAndPatterns: false,
     }),
   );
 }

package/{app → src}/slides.html

@@ -8,7 +8,22 @@
     <script type="importmap">
       {
         "imports": {
-          "mustache": "https://esm.sh/mustache@4.2.0"
+          "mustache": "https://esm.sh/mustache@4.2.0",
+          "@forwardimpact/schema": "/schema/lib/index.js",
+          "@forwardimpact/schema/levels": "/schema/lib/levels.js",
+          "@forwardimpact/schema/loader": "/schema/lib/loader.js",
+          "@forwardimpact/schema/validation": "/schema/lib/validation.js",
+          "@forwardimpact/model": "/model/lib/index.js",
+          "@forwardimpact/model/derivation": "/model/lib/derivation.js",
+          "@forwardimpact/model/modifiers": "/model/lib/modifiers.js",
+          "@forwardimpact/model/agent": "/model/lib/agent.js",
+          "@forwardimpact/model/interview": "/model/lib/interview.js",
+          "@forwardimpact/model/job": "/model/lib/job.js",
+          "@forwardimpact/model/job-cache": "/model/lib/job-cache.js",
+          "@forwardimpact/model/checklist": "/model/lib/checklist.js",
+          "@forwardimpact/model/matching": "/model/lib/matching.js",
+          "@forwardimpact/model/profile": "/model/lib/profile.js",
+          "@forwardimpact/model/progression": "/model/lib/progression.js"
         }
       }
     </script>