@forwardimpact/pathway 0.1.0 → 0.3.0

package/app/pages/agent-builder.js

@@ -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";
@@ -38,6 +41,9 @@ const ALL_STAGES_VALUE = "all";
 /** @type {Object|null} Cached agent data */
 let agentDataCache = null;
 
+/** @type {{agent: string, skill: string}|null} Cached templates */
+let templateCache = null;
+
 /**
  * Load agent data with caching
  * @param {string} dataDir - Data directory path
@@ -50,6 +56,24 @@ async function getAgentData(dataDir = "./data") {
   return agentDataCache;
 }
 
+/**
+ * Load templates with caching
+ * @returns {Promise<{agent: string, skill: string}>}
+ */
+async function getTemplates() {
+  if (!templateCache) {
+    const [agentRes, skillRes] = await Promise.all([
+      fetch("./templates/agent.template.md"),
+      fetch("./templates/skill.template.md"),
+    ]);
+    templateCache = {
+      agent: await agentRes.text(),
+      skill: await skillRes.text(),
+    };
+  }
+  return templateCache;
+}
+
 /**
  * Render agent builder page
  */
@@ -64,8 +88,11 @@ export async function renderAgentBuilder() {
     ),
   );
 
-  // Load agent-specific data
-  const agentData = await getAgentData();
+  // Load agent-specific data and templates
+  const [agentData, templates] = await Promise.all([
+    getAgentData(),
+    getTemplates(),
+  ]);
 
   // Filter to only disciplines/tracks that have agent definitions
   const agentDisciplineIds = new Set(agentData.disciplines.map((d) => d.id));
@@ -87,10 +114,13 @@ export async function renderAgentBuilder() {
   ];
 
   // Parse URL params for pre-selection
+  // Supports: /agent/discipline, /agent/discipline/track, /agent/discipline/track/stage
   const hash = window.location.hash;
-  const pathMatch = hash.match(/#\/agent\/([^/]+)\/([^/]+)(?:\/([^/?]+))?/);
+  const pathMatch = hash.match(
+    /#\/agent\/([^/]+)(?:\/([^/]+))?(?:\/([^/?]+))?/,
+  );
   const initialDiscipline = pathMatch ? pathMatch[1] : "";
-  const initialTrack = pathMatch ? pathMatch[2] : "";
+  const initialTrack = pathMatch && pathMatch[2] ? pathMatch[2] : "";
   const initialStage =
     pathMatch && pathMatch[3] ? pathMatch[3] : ALL_STAGES_VALUE;
 
@@ -113,9 +143,10 @@ export async function renderAgentBuilder() {
    */
   function updatePreview({ discipline, track, stage }) {
     // Update URL without triggering navigation
-    if (discipline && track) {
+    if (discipline) {
+      const trackPart = track ? `/${track}` : "";
       const stagePart = stage && stage !== ALL_STAGES_VALUE ? `/${stage}` : "";
-      const newHash = `#/agent/${discipline}/${track}${stagePart}`;
+      const newHash = `#/agent/${discipline}${trackPart}${stagePart}`;
       if (window.location.hash !== newHash) {
         history.replaceState(null, "", newHash);
       }
@@ -123,7 +154,7 @@ export async function renderAgentBuilder() {
 
     previewContainer.innerHTML = "";
 
-    if (!discipline || !track) {
+    if (!discipline) {
       previewContainer.appendChild(
         createEmptyState(availableDisciplines.length, availableTracks.length),
       );
@@ -132,7 +163,7 @@ export async function renderAgentBuilder() {
 
     // Get full objects
     const humanDiscipline = data.disciplines.find((d) => d.id === discipline);
-    const humanTrack = data.tracks.find((t) => t.id === track);
+    const humanTrack = track ? data.tracks.find((t) => t.id === track) : null;
     const agentDiscipline = agentData.disciplines.find(
       (d) => d.id === discipline,
     );
@@ -164,6 +195,8 @@ export async function renderAgentBuilder() {
       agentBehaviours: agentData.behaviours,
       capabilities: data.capabilities,
       vscodeSettings: agentData.vscodeSettings,
+      devcontainer: agentData.devcontainer,
+      templates,
     };
 
     // Generate preview based on stage selection
@@ -212,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) => {
@@ -325,6 +358,8 @@ function createAllStagesPreview(context) {
     agentBehaviours,
     capabilities,
     vscodeSettings,
+    devcontainer,
+    templates,
   } = context;
 
   // Generate all stage agents
@@ -378,7 +413,13 @@ function createAllStagesPreview(context) {
     { className: "agent-deployment" },
 
     // Download all button
-    createDownloadAllButton(stageAgents, skillFiles, vscodeSettings, context),
+    createDownloadAllButton(
+      stageAgents,
+      skillFiles,
+      vscodeSettings,
+      devcontainer,
+      context,
+    ),
 
     // Agents section
     section(
@@ -391,7 +432,7 @@ function createAllStagesPreview(context) {
       div(
         { className: "agent-cards-grid" },
         ...stageAgents.map(({ stage, profile }) =>
-          createAgentCard(stage, profile, stages),
+          createAgentCard(stage, profile, stages, templates.agent),
         ),
       ),
     ),
@@ -403,7 +444,9 @@ function createAllStagesPreview(context) {
       skillFiles.length > 0
         ? div(
             { className: "skill-cards-grid" },
-            ...skillFiles.map((skill) => createSkillCard(skill)),
+            ...skillFiles.map((skill) =>
+              createSkillCard(skill, templates.skill),
+            ),
           )
         : p(
             { className: "text-muted" },
@@ -434,7 +477,9 @@ function createSingleStagePreview(context, stage) {
     agentBehaviours,
     capabilities,
     vscodeSettings,
+    devcontainer,
     stages,
+    templates,
   } = context;
 
   // Derive stage agent
@@ -483,7 +528,13 @@ function createSingleStagePreview(context, stage) {
     { className: "agent-deployment" },
 
     // Download button for single stage
-    createDownloadSingleButton(profile, skillFiles, vscodeSettings),
+    createDownloadSingleButton(
+      profile,
+      skillFiles,
+      vscodeSettings,
+      devcontainer,
+      templates,
+    ),
 
     // Agents section (single card)
     section(
@@ -491,7 +542,7 @@ function createSingleStagePreview(context, stage) {
       h2({}, "Agent"),
       div(
         { className: "agent-cards-grid single" },
-        createAgentCard(stage, profile, stages, derived),
+        createAgentCard(stage, profile, stages, templates.agent, derived),
       ),
     ),
 
@@ -502,7 +553,9 @@ function createSingleStagePreview(context, stage) {
       skillFiles.length > 0
         ? div(
             { className: "skill-cards-grid" },
-            ...skillFiles.map((skill) => createSkillCard(skill)),
+            ...skillFiles.map((skill) =>
+              createSkillCard(skill, templates.skill),
+            ),
           )
         : p(
             { className: "text-muted" },
@@ -520,11 +573,12 @@ function createSingleStagePreview(context, stage) {
  * @param {Object} stage - Stage object
  * @param {Object} profile - Generated profile
  * @param {Array} stages - All stages for emoji lookup
+ * @param {string} agentTemplate - Mustache template for agent profile
  * @param {Object} [_derived] - Optional derived agent data for extra info
  * @returns {HTMLElement}
  */
-function createAgentCard(stage, profile, stages, _derived) {
-  const content = formatAgentProfile(profile);
+function createAgentCard(stage, profile, stages, agentTemplate, _derived) {
+  const content = formatAgentProfile(profile, agentTemplate);
   const stageEmoji = getStageEmoji(stages, stage.id);
 
   const card = div(
@@ -548,10 +602,11 @@ function createAgentCard(stage, profile, stages, _derived) {
 /**
  * Create a skill card
  * @param {Object} skill - Skill with frontmatter and body
+ * @param {string} skillTemplate - Mustache template for skill
  * @returns {HTMLElement}
  */
-function createSkillCard(skill) {
-  const content = formatAgentSkill(skill);
+function createSkillCard(skill, skillTemplate) {
+  const content = formatAgentSkill(skill, skillTemplate);
   const filename = `${skill.dirname}/SKILL.md`;
 
   return div(
@@ -615,16 +670,18 @@ function createCopyButton(content) {
  * @param {Array} stageAgents - Array of {stage, derived, profile}
  * @param {Array} skillFiles - Array of skill file objects
  * @param {Object} vscodeSettings - VS Code settings
- * @param {Object} context - Context with discipline/track info
+ * @param {Object} devcontainer - Devcontainer config
+ * @param {Object} context - Context with discipline/track info and templates
  * @returns {HTMLElement}
  */
 function createDownloadAllButton(
   stageAgents,
   skillFiles,
   vscodeSettings,
+  devcontainer,
   context,
 ) {
-  const { humanDiscipline, humanTrack } = context;
+  const { humanDiscipline, humanTrack, templates } = context;
   const agentName = `${humanDiscipline.id}-${humanTrack.id}`.replace(/_/g, "-");
 
   const btn = document.createElement("button");
@@ -641,13 +698,13 @@ function createDownloadAllButton(
 
       // Add all stage agent profiles
       for (const { profile } of stageAgents) {
-        const content = formatAgentProfile(profile);
+        const content = formatAgentProfile(profile, templates.agent);
         zip.file(`.github/agents/${profile.filename}`, content);
       }
 
       // Add skills
       for (const skill of skillFiles) {
-        const content = formatAgentSkill(skill);
+        const content = formatAgentSkill(skill, templates.skill);
         zip.file(`.claude/skills/${skill.dirname}/SKILL.md`, content);
       }
 
@@ -659,6 +716,22 @@ function createDownloadAllButton(
         );
       }
 
+      // Add devcontainer.json with VS Code settings embedded
+      if (devcontainer && Object.keys(devcontainer).length > 0) {
+        const devcontainerJson = {
+          ...devcontainer,
+          customizations: {
+            vscode: {
+              settings: vscodeSettings,
+            },
+          },
+        };
+        zip.file(
+          ".devcontainer/devcontainer.json",
+          JSON.stringify(devcontainerJson, null, 2) + "\n",
+        );
+      }
+
       // Generate and download
       const blob = await zip.generateAsync({ type: "blob" });
       const url = URL.createObjectURL(blob);
@@ -685,9 +758,17 @@ function createDownloadAllButton(
  * @param {Object} profile - Agent profile
  * @param {Array} skillFiles - Skill files
  * @param {Object} vscodeSettings - VS Code settings
+ * @param {Object} devcontainer - Devcontainer config
+ * @param {{agent: string, skill: string}} templates - Mustache templates
  * @returns {HTMLElement}
  */
-function createDownloadSingleButton(profile, skillFiles, vscodeSettings) {
+function createDownloadSingleButton(
+  profile,
+  skillFiles,
+  vscodeSettings,
+  devcontainer,
+  templates,
+) {
   const btn = document.createElement("button");
   btn.className = "btn btn-primary download-all-btn";
   btn.textContent = "📥 Download Agent (.zip)";
@@ -701,12 +782,12 @@ function createDownloadSingleButton(profile, skillFiles, vscodeSettings) {
       const zip = new JSZip();
 
       // Add profile
-      const content = formatAgentProfile(profile);
+      const content = formatAgentProfile(profile, templates.agent);
       zip.file(`.github/agents/${profile.filename}`, content);
 
       // Add skills
       for (const skill of skillFiles) {
-        const skillContent = formatAgentSkill(skill);
+        const skillContent = formatAgentSkill(skill, templates.skill);
         zip.file(`.claude/skills/${skill.dirname}/SKILL.md`, skillContent);
       }
 
@@ -718,6 +799,22 @@ function createDownloadSingleButton(profile, skillFiles, vscodeSettings) {
         );
       }
 
+      // Add devcontainer.json with VS Code settings embedded
+      if (devcontainer && Object.keys(devcontainer).length > 0) {
+        const devcontainerJson = {
+          ...devcontainer,
+          customizations: {
+            vscode: {
+              settings: vscodeSettings,
+            },
+          },
+        };
+        zip.file(
+          ".devcontainer/devcontainer.json",
+          JSON.stringify(devcontainerJson, null, 2) + "\n",
+        );
+      }
+
       // Generate and download
       const blob = await zip.generateAsync({ type: "blob" });
       const url = URL.createObjectURL(blob);

package/app/pages/assessment-results.js

@@ -379,7 +379,9 @@ function createMatchCard(match, _index, _selfAssessment, _data) {
           { className: "match-job-title" },
           a(
             {
-              href: `#/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`,
+              href: job.track
+                ? `#/job/${job.discipline.id}/${job.grade.id}/${job.track.id}`
+                : `#/job/${job.discipline.id}/${job.grade.id}`,
             },
             job.title,
           ),
@@ -388,7 +390,7 @@ function createMatchCard(match, _index, _selfAssessment, _data) {
           { className: "match-badges" },
           createBadge(job.discipline.name, "default"),
           createBadge(job.grade.name, "secondary"),
-          createBadge(job.track.name, "broad"),
+          job.track && createBadge(job.track.name, "broad"),
         ),
       ),
       div(
@@ -437,14 +439,18 @@ function createMatchCard(match, _index, _selfAssessment, _data) {
       { className: "match-card-actions" },
       a(
         {
-          href: `#/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`,
+          href: job.track
+            ? `#/job/${job.discipline.id}/${job.grade.id}/${job.track.id}`
+            : `#/job/${job.discipline.id}/${job.grade.id}`,
           className: "btn btn-secondary btn-sm",
         },
         "View Job Details",
       ),
       a(
         {
-          href: `#/interview/${job.discipline.id}/${job.track.id}/${job.grade.id}`,
+          href: job.track
+            ? `#/interview/${job.discipline.id}/${job.grade.id}/${job.track.id}`
+            : `#/interview/${job.discipline.id}/${job.grade.id}`,
           className: "btn btn-secondary btn-sm",
         },
         "Interview Prep",

package/app/pages/discipline.js

@@ -2,14 +2,40 @@
  * Disciplines pages
  */
 
-import { render, div, h1, p } from "../lib/render.js";
+import { render, div, h1, h2, p } from "../lib/render.js";
 import { getState } from "../lib/state.js";
-import { createCardList } from "../components/list.js";
+import { createGroupedList } from "../components/list.js";
+import { createBadge } from "../components/card.js";
 import { renderNotFound } from "../components/error-page.js";
 import { prepareDisciplinesList } from "../formatters/discipline/shared.js";
 import { disciplineToDOM } from "../formatters/discipline/dom.js";
 import { disciplineToCardConfig } from "../lib/card-mappers.js";
 
+/**
+ * Format discipline group name for display
+ * @param {string} groupName - Group name (professional/management)
+ * @returns {string}
+ */
+function formatDisciplineGroupName(groupName) {
+  if (groupName === "professional") return "Professional";
+  if (groupName === "management") return "Management";
+  return groupName.charAt(0).toUpperCase() + groupName.slice(1);
+}
+
+/**
+ * Render discipline group header
+ * @param {string} groupName - Group name
+ * @param {number} count - Number of items in group
+ * @returns {HTMLElement}
+ */
+function renderDisciplineGroupHeader(groupName, count) {
+  return div(
+    { className: "capability-header" },
+    h2({ className: "capability-title" }, formatDisciplineGroupName(groupName)),
+    createBadge(`${count}`, "default"),
+  );
+}
+
 /**
  * Render disciplines list page
  */
@@ -17,8 +43,8 @@ export function renderDisciplinesList() {
   const { data } = getState();
   const { framework } = data;
 
-  // Transform data for list view
-  const { items } = prepareDisciplinesList(data.disciplines);
+  // Transform data for list view (grouped by professional/management)
+  const { groups } = prepareDisciplinesList(data.disciplines);
 
   const page = div(
     { className: "disciplines-page" },
@@ -35,8 +61,12 @@ export function renderDisciplinesList() {
       ),
     ),
 
-    // Disciplines list
-    createCardList(items, disciplineToCardConfig, "No disciplines found."),
+    // Disciplines list (grouped by type)
+    createGroupedList(
+      groups,
+      disciplineToCardConfig,
+      renderDisciplineGroupHeader,
+    ),
   );
 
   render(page);

package/app/pages/driver.js

@@ -2,15 +2,12 @@
  * Drivers pages
  */
 
-import { render, div, h1, h2, p, section } from "../lib/render.js";
+import { render, div, h1, p } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createCardList } from "../components/list.js";
-import { createDetailHeader, createLinksList } from "../components/detail.js";
 import { renderNotFound } from "../components/error-page.js";
-import {
-  prepareDriversList,
-  prepareDriverDetail,
-} from "../formatters/driver/shared.js";
+import { prepareDriversList } from "../formatters/driver/shared.js";
+import { driverToDOM } from "../formatters/driver/dom.js";
 import { driverToCardConfig } from "../lib/card-mappers.js";
 
 /**
@@ -60,47 +57,12 @@ export function renderDriverDetail(params) {
     return;
   }
 
-  // Transform data for detail view
-  const view = prepareDriverDetail(driver, {
-    skills: data.skills,
-    behaviours: data.behaviours,
-  });
-
-  const page = div(
-    { className: "driver-detail" },
-    createDetailHeader({
-      title: view.name,
-      description: view.description,
-      backLink: "/driver",
-      backText: "← Back to Drivers",
+  // Use DOM formatter - it handles transformation internally
+  render(
+    driverToDOM(driver, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      framework: data.framework,
     }),
-
-    // Contributing Skills and Contributing Behaviours in two columns
-    view.contributingSkills.length > 0 || view.contributingBehaviours.length > 0
-      ? section(
-          { className: "section section-detail" },
-          div(
-            { className: "content-columns" },
-            // Contributing Skills column
-            view.contributingSkills.length > 0
-              ? div(
-                  { className: "column" },
-                  h2({ className: "section-title" }, "Contributing Skills"),
-                  createLinksList(view.contributingSkills, "/skill"),
-                )
-              : null,
-            // Contributing Behaviours column
-            view.contributingBehaviours.length > 0
-              ? div(
-                  { className: "column" },
-                  h2({ className: "section-title" }, "Contributing Behaviours"),
-                  createLinksList(view.contributingBehaviours, "/behaviour"),
-                )
-              : null,
-          ),
-        )
-      : null,
   );
-
-  render(page);
 }

package/app/pages/interview-builder.js

@@ -29,7 +29,9 @@ export function renderInterviewPrep() {
           grades: data.grades,
         }),
       detailPath: (sel) =>
-        `/interview/${sel.discipline}/${sel.track}/${sel.grade}`,
+        sel.track
+          ? `/interview/${sel.discipline}/${sel.grade}/${sel.track}`
+          : `/interview/${sel.discipline}/${sel.grade}`,
       renderPreview: createStandardPreview,
       helpItems: [
         {

package/app/pages/interview.js

@@ -32,18 +32,29 @@ import {
  * @param {Object} params - Route params
  */
 export function renderInterviewDetail(params) {
-  const { discipline: disciplineId, track: trackId, grade: gradeId } = params;
+  const { discipline: disciplineId, grade: gradeId, track: trackId } = params;
   const { data } = getState();
 
   // Find the components
   const discipline = data.disciplines.find((d) => d.id === disciplineId);
-  const track = data.tracks.find((t) => t.id === trackId);
   const grade = data.grades.find((g) => g.id === gradeId);
+  const track = trackId ? data.tracks.find((t) => t.id === trackId) : null;
 
-  if (!discipline || !track || !grade) {
+  if (!discipline || !grade) {
     renderError({
       title: "Interview Not Found",
-      message: "Invalid combination. One or more components are missing.",
+      message: "Invalid combination. Discipline or grade not found.",
+      backPath: "/interview-prep",
+      backText: "← Back to Interview Prep",
+    });
+    return;
+  }
+
+  // If trackId was provided but not found, error
+  if (trackId && !track) {
+    renderError({
+      title: "Interview Not Found",
+      message: `Track "${trackId}" not found.`,
       backPath: "/interview-prep",
       backText: "← Back to Interview Prep",
     });

package/app/pages/job-builder.js

@@ -29,7 +29,10 @@ export function renderJobBuilder() {
           behaviourCount: data.behaviours.length,
           grades: data.grades,
         }),
-      detailPath: (sel) => `/job/${sel.discipline}/${sel.track}/${sel.grade}`,
+      detailPath: (sel) =>
+        sel.track
+          ? `/job/${sel.discipline}/${sel.grade}/${sel.track}`
+          : `/job/${sel.discipline}/${sel.grade}`,
       renderPreview: createStandardPreview,
       helpItems: [
         {

package/app/pages/job.js

@@ -2,29 +2,55 @@
  * Job detail page with visualizations
  */
 
-import { render } from "../lib/render.js";
+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 { jobToDOM } from "../formatters/job/dom.js";
 
+/** @type {string|null} Cached job template */
+let jobTemplateCache = null;
+
+/**
+ * Load job template with caching
+ * @returns {Promise<string>}
+ */
+async function getJobTemplate() {
+  if (!jobTemplateCache) {
+    const response = await fetch("./templates/job.template.md");
+    jobTemplateCache = await response.text();
+  }
+  return jobTemplateCache;
+}
+
 /**
  * Render job detail page
  * @param {Object} params - Route params
  */
-export function renderJobDetail(params) {
-  const { discipline: disciplineId, track: trackId, grade: gradeId } = params;
+export async function renderJobDetail(params) {
+  const { discipline: disciplineId, grade: gradeId, track: trackId } = params;
   const { data } = getState();
 
   // Find the components
   const discipline = data.disciplines.find((d) => d.id === disciplineId);
-  const track = data.tracks.find((t) => t.id === trackId);
   const grade = data.grades.find((g) => g.id === gradeId);
+  const track = trackId ? data.tracks.find((t) => t.id === trackId) : null;
 
-  if (!discipline || !track || !grade) {
+  if (!discipline || !grade) {
     renderError({
       title: "Job Not Found",
-      message: "Invalid job combination. One or more components are missing.",
+      message: "Invalid job combination. Discipline or grade not found.",
+      backPath: "/job-builder",
+      backText: "← Back to Job Builder",
+    });
+    return;
+  }
+
+  // If trackId was provided but not found, error
+  if (trackId && !track) {
+    renderError({
+      title: "Job Not Found",
+      message: `Track "${trackId}" not found.`,
       backPath: "/job-builder",
       backText: "← Back to Job Builder",
     });
@@ -52,7 +78,16 @@ export function renderJobDetail(params) {
     return;
   }
 
-  // Format using DOM formatter
-  const page = jobToDOM(jobView, { discipline, grade, track });
+  // Show loading while fetching template
+  render(
+    div(
+      { className: "job-detail-page" },
+      div({ className: "loading" }, p({}, "Loading...")),
+    ),
+  );
+
+  // Load template and format
+  const jobTemplate = await getJobTemplate();
+  const page = jobToDOM(jobView, { discipline, grade, track, jobTemplate });
   render(page);
 }