@forwardimpact/pathway 0.1.0 → 0.3.0

package/app/pages/landing.js

@@ -89,16 +89,16 @@ export function renderLanding() {
         label: "Disciplines",
         href: "/discipline",
       }),
-      createStatCard({
-        value: data.tracks.length,
-        label: "Tracks",
-        href: "/track",
-      }),
       createStatCard({
         value: data.grades.length,
         label: "Grades",
         href: "/grade",
       }),
+      createStatCard({
+        value: data.tracks.length,
+        label: "Tracks",
+        href: "/track",
+      }),
       createStatCard({
         value: data.skills.length,
         label: "Skills",
@@ -140,16 +140,16 @@ export function renderLanding() {
           `${data.disciplines.length} ${framework.entityDefinitions.discipline.title.toLowerCase()} — ${framework.entityDefinitions.discipline.description.trim().split("\n")[0]}`,
           "/discipline",
         ),
-        createQuickLinkCard(
-          `${getConceptEmoji(framework, "track")} ${framework.entityDefinitions.track.title}`,
-          `${data.tracks.length} ${framework.entityDefinitions.track.title.toLowerCase()} — ${framework.entityDefinitions.track.description.trim().split("\n")[0]}`,
-          "/track",
-        ),
         createQuickLinkCard(
           `${getConceptEmoji(framework, "grade")} ${framework.entityDefinitions.grade.title}`,
           `${data.grades.length} ${framework.entityDefinitions.grade.title.toLowerCase()} — ${framework.entityDefinitions.grade.description.trim().split("\n")[0]}`,
           "/grade",
         ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "track")} ${framework.entityDefinitions.track.title}`,
+          `${data.tracks.length} ${framework.entityDefinitions.track.title.toLowerCase()} — ${framework.entityDefinitions.track.description.trim().split("\n")[0]}`,
+          "/track",
+        ),
         createQuickLinkCard(
           `${getConceptEmoji(framework, "skill")} ${framework.entityDefinitions.skill.title}`,
           `${data.skills.length} ${framework.entityDefinitions.skill.title.toLowerCase()} across ${capabilityCount} capabilities — ${framework.entityDefinitions.skill.description.trim().split("\n")[0]}`,

package/app/pages/progress-builder.js

@@ -30,7 +30,9 @@ export function renderCareerProgress() {
           tracks: data.tracks,
         }),
       detailPath: (sel) =>
-        `/progress/${sel.discipline}/${sel.track}/${sel.grade}`,
+        sel.track
+          ? `/progress/${sel.discipline}/${sel.grade}/${sel.track}`
+          : `/progress/${sel.discipline}/${sel.grade}`,
       renderPreview: createProgressPreview,
       labels: {
         grade: "Current Grade",

package/app/pages/progress.js

@@ -13,7 +13,10 @@ import {
 } from "../components/comparison-radar.js";
 import { createProgressionTable } from "../components/progression-table.js";
 import { renderError } from "../components/error-page.js";
-import { createSelectWithValue } from "../lib/form-controls.js";
+import {
+  createSelectWithValue,
+  createDisciplineSelect,
+} from "../lib/form-controls.js";
 import {
   prepareCurrentJob,
   prepareCustomProgression,
@@ -26,18 +29,29 @@ import {
  * @param {Object} params - Route params
  */
 export function renderProgressDetail(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: "Role Not Found",
-      message: "Invalid role combination. One or more components are missing.",
+      message: "Invalid role combination. Discipline or grade not found.",
+      backPath: "/career-progress",
+      backText: "← Back to Career Progress",
+    });
+    return;
+  }
+
+  // If trackId was provided but not found, error
+  if (trackId && !track) {
+    renderError({
+      title: "Role Not Found",
+      message: `Track "${trackId}" not found.`,
       backPath: "/career-progress",
       backText: "← Back to Career Progress",
     });
@@ -79,8 +93,9 @@ export function renderProgressDetail(params) {
         a({ href: `#/discipline/${discipline.id}` }, discipline.specialization),
         " × ",
         a({ href: `#/grade/${grade.id}` }, grade.id),
-        " × ",
-        a({ href: `#/track/${track.id}` }, track.name),
+        track
+          ? [" × ", a({ href: `#/track/${track.id}` }, track.name)]
+          : " (Generalist)",
       ),
     ),
 
@@ -120,7 +135,9 @@ export function renderProgressDetail(params) {
       { className: "page-actions", style: "margin-top: 2rem" },
       a(
         {
-          href: `#/job/${disciplineId}/${trackId}/${gradeId}`,
+          href: trackId
+            ? `#/job/${disciplineId}/${gradeId}/${trackId}`
+            : `#/job/${disciplineId}/${gradeId}`,
           className: "btn btn-secondary",
         },
         "View Full Job Definition",
@@ -160,17 +177,29 @@ function createComparisonSelectorsSection({
   // State to track current selections - default to same discipline, same track, next grade
   let selectedDisciplineId = discipline.id;
   let selectedGradeId = nextGrade?.id || "";
-  let selectedTrackId = currentTrack.id;
+  let selectedTrackId = currentTrack?.id || "";
 
   // Get available options based on selected discipline
   function getAvailableOptions(disciplineId) {
     const selectedDisc = data.disciplines.find((d) => d.id === disciplineId);
-    if (!selectedDisc) return { grades: [], tracks: [] };
+    if (!selectedDisc)
+      return { grades: [], tracks: [], allowsTrackless: false };
 
     const validGrades = [];
     const validTracks = new Set();
+    let allowsTrackless = false;
 
     for (const grade of data.grades) {
+      // Check trackless combination
+      if (
+        isValidCombination({ discipline: selectedDisc, grade, track: null })
+      ) {
+        if (!validGrades.find((g) => g.id === grade.id)) {
+          validGrades.push(grade);
+        }
+        allowsTrackless = true;
+      }
+      // Check each track combination
       for (const track of data.tracks) {
         if (isValidCombination({ discipline: selectedDisc, grade, track })) {
           if (!validGrades.find((g) => g.id === grade.id)) {
@@ -186,6 +215,7 @@ function createComparisonSelectorsSection({
       tracks: data.tracks
         .filter((t) => validTracks.has(t.id))
         .sort((a, b) => a.name.localeCompare(b.name)),
+      allowsTrackless,
     };
   }
 
@@ -196,13 +226,14 @@ function createComparisonSelectorsSection({
     // Clear previous results
     comparisonResultsContainer.innerHTML = "";
 
-    if (!selectedDisciplineId || !selectedGradeId || !selectedTrackId) {
+    // Track can be empty string for generalist, but discipline and grade are required
+    if (!selectedDisciplineId || !selectedGradeId) {
       comparisonResultsContainer.appendChild(
         div(
           { className: "comparison-placeholder" },
           p(
             { className: "text-muted" },
-            "Select a discipline, track, and grade to see the comparison.",
+            "Select a discipline and grade to see the comparison.",
           ),
         ),
       );
@@ -213,9 +244,12 @@ function createComparisonSelectorsSection({
       (d) => d.id === selectedDisciplineId,
     );
     const targetGrade = data.grades.find((g) => g.id === selectedGradeId);
-    const targetTrack = data.tracks.find((t) => t.id === selectedTrackId);
+    // selectedTrackId can be empty string for generalist
+    const targetTrack = selectedTrackId
+      ? data.tracks.find((t) => t.id === selectedTrackId)
+      : null;
 
-    if (!targetDiscipline || !targetGrade || !targetTrack) {
+    if (!targetDiscipline || !targetGrade) {
       return;
     }
 
@@ -223,7 +257,7 @@ function createComparisonSelectorsSection({
     if (
       targetDiscipline.id === discipline.id &&
       targetGrade.id === currentGrade.id &&
-      targetTrack.id === currentTrack.id
+      targetTrack?.id === currentTrack?.id
     ) {
       comparisonResultsContainer.appendChild(
         div(
@@ -343,10 +377,12 @@ function createComparisonSelectorsSection({
         { className: "page-actions" },
         a(
           {
-            href: `#/job/${targetDiscipline.id}/${targetTrack.id}/${targetGrade.id}`,
+            href: targetTrack
+              ? `#/job/${targetDiscipline.id}/${targetGrade.id}/${targetTrack.id}`
+              : `#/job/${targetDiscipline.id}/${targetGrade.id}`,
             className: "btn btn-secondary",
           },
-          `View ${targetGrade.id} ${targetTrack.name} Job Definition →`,
+          `View ${targetGrade.id}${targetTrack ? ` ${targetTrack.name}` : ""} Job Definition →`,
         ),
       ),
     );
@@ -394,10 +430,20 @@ function createComparisonSelectorsSection({
     // Update track selector
     if (trackSelectEl) {
       trackSelectEl.innerHTML = "";
-      const placeholderOpt = document.createElement("option");
-      placeholderOpt.value = "";
-      placeholderOpt.textContent = "Select track...";
-      trackSelectEl.appendChild(placeholderOpt);
+
+      // Add generalist option if discipline allows trackless
+      if (availableOptions.allowsTrackless) {
+        const generalistOpt = document.createElement("option");
+        generalistOpt.value = "";
+        generalistOpt.textContent = "Generalist";
+        trackSelectEl.appendChild(generalistOpt);
+      } else {
+        const placeholderOpt = document.createElement("option");
+        placeholderOpt.value = "";
+        placeholderOpt.textContent = "Select track...";
+        placeholderOpt.disabled = true;
+        trackSelectEl.appendChild(placeholderOpt);
+      }
 
       for (const track of availableOptions.tracks) {
         const opt = document.createElement("option");
@@ -407,8 +453,16 @@ function createComparisonSelectorsSection({
       }
 
       // Try to keep current selection if valid
-      if (availableOptions.tracks.find((t) => t.id === selectedTrackId)) {
+      const hasValidTrack = availableOptions.tracks.find(
+        (t) => t.id === selectedTrackId,
+      );
+      const isValidGeneralist =
+        selectedTrackId === "" && availableOptions.allowsTrackless;
+      if (hasValidTrack || isValidGeneralist) {
         trackSelectEl.value = selectedTrackId;
+      } else if (availableOptions.allowsTrackless) {
+        selectedTrackId = "";
+        trackSelectEl.value = "";
       } else {
         selectedTrackId = "";
         trackSelectEl.value = "";
@@ -462,11 +516,9 @@ function createComparisonSelectorsSection({
       div(
         { className: "form-group" },
         label({ for: "compare-discipline-select" }, "Target Discipline"),
-        createSelectWithValue({
+        createDisciplineSelect({
           id: "compare-discipline-select",
-          items: data.disciplines.sort((a, b) =>
-            a.specialization.localeCompare(b.specialization),
-          ),
+          disciplines: data.disciplines,
           initialValue: selectedDisciplineId,
           placeholder: "Select discipline...",
           getDisplayName: (d) => d.specialization,

package/app/pages/self-assessment.js

@@ -17,7 +17,7 @@ import {
 } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createBadge } from "../components/card.js";
-import { createSelectWithValue } from "../lib/form-controls.js";
+import { createDisciplineSelect } from "../lib/form-controls.js";
 import {
   SKILL_LEVEL_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
@@ -306,9 +306,9 @@ function renderIntroStep(data) {
           "Select a discipline to highlight which skills are most relevant for that role. " +
             "You can still assess all skills.",
         ),
-        createSelectWithValue({
+        createDisciplineSelect({
           id: "discipline-filter-select",
-          items: data.disciplines,
+          disciplines: data.disciplines,
           initialValue: assessmentState.discipline || "",
           placeholder: "Select discipline",
           onChange: (value) => {

package/app/pages/stage.js

@@ -5,14 +5,8 @@
 import { render, div, h1, h2, p, span, a, section } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { createCardList } from "../components/list.js";
-import { createDetailHeader } from "../components/detail.js";
 import { renderNotFound } from "../components/error-page.js";
-import {
-  prepareStagesList,
-  prepareStageDetail,
-  getStageEmoji,
-} from "../formatters/stage/index.js";
-import { createBadge } from "../components/card.js";
+import { prepareStagesList, stageToDOM } from "../formatters/stage/index.js";
 
 /**
  * Map stage to card configuration
@@ -24,7 +18,6 @@ function stageToCardConfig(stage) {
     title: `${stage.emoji || "🔄"} ${stage.name}`,
     description: stage.truncatedDescription,
     href: `/stage/${stage.id}`,
-    meta: [createBadge(`${stage.tools.length} tools`, "default")],
   };
 }
 
@@ -110,122 +103,6 @@ export function renderStageDetail(params) {
     return;
   }
 
-  // Transform data for detail view
-  const view = prepareStageDetail(stage);
-  const emoji = getStageEmoji(stages, stage.id);
-
-  const page = div(
-    { className: "stage-detail" },
-    createDetailHeader({
-      title: `${emoji} ${view.name}`,
-      description: view.description,
-      backLink: "/stage",
-      backText: "← Back to Stages",
-    }),
-
-    // Tools section
-    view.tools.length > 0
-      ? section(
-          { className: "section section-detail" },
-          h2({ className: "section-title" }, "Available Tools"),
-          div(
-            { className: "tool-badges" },
-            ...view.tools.map((tool) =>
-              span(
-                { className: "badge badge-tool", title: tool.label },
-                `${tool.icon} ${tool.label}`,
-              ),
-            ),
-          ),
-        )
-      : null,
-
-    // Entry/Exit Criteria
-    view.entryCriteria.length > 0 || view.exitCriteria.length > 0
-      ? section(
-          { className: "section section-detail" },
-          div(
-            { className: "content-columns" },
-            // Entry criteria column
-            view.entryCriteria.length > 0
-              ? div(
-                  { className: "column" },
-                  h2({ className: "section-title" }, "Entry Criteria"),
-                  div(
-                    { className: "criteria-list" },
-                    ...view.entryCriteria.map((item) =>
-                      div({ className: "criteria-item" }, `✓ ${item}`),
-                    ),
-                  ),
-                )
-              : null,
-            // Exit criteria column
-            view.exitCriteria.length > 0
-              ? div(
-                  { className: "column" },
-                  h2({ className: "section-title" }, "Exit Criteria"),
-                  div(
-                    { className: "criteria-list" },
-                    ...view.exitCriteria.map((item) =>
-                      div({ className: "criteria-item" }, `✓ ${item}`),
-                    ),
-                  ),
-                )
-              : null,
-          ),
-        )
-      : null,
-
-    // Constraints
-    view.constraints.length > 0
-      ? section(
-          { className: "section section-detail" },
-          h2({ className: "section-title" }, "Constraints"),
-          div(
-            { className: "constraint-list" },
-            ...view.constraints.map((item) =>
-              div({ className: "constraint-item" }, `⚠️ ${item}`),
-            ),
-          ),
-        )
-      : null,
-
-    // Handoffs
-    view.handoffs.length > 0
-      ? section(
-          { className: "section section-detail" },
-          h2({ className: "section-title" }, "Handoffs"),
-          div(
-            { className: "handoff-list" },
-            ...view.handoffs.map((handoff) => {
-              const targetStage = stages.find((s) => s.id === handoff.target);
-              const targetEmoji = getStageEmoji(stages, handoff.target);
-              return div(
-                { className: "card handoff-card" },
-                div(
-                  { className: "handoff-header" },
-                  targetStage
-                    ? a(
-                        {
-                          href: `#/stage/${handoff.target}`,
-                          className: "handoff-link",
-                        },
-                        `${targetEmoji} ${handoff.label}`,
-                      )
-                    : span({}, `${targetEmoji} ${handoff.label}`),
-                ),
-                handoff.prompt
-                  ? p(
-                      { className: "handoff-prompt text-muted" },
-                      handoff.prompt,
-                    )
-                  : null,
-              );
-            }),
-          ),
-        )
-      : null,
-  );
-
-  render(page);
+  // Use DOM formatter - it handles transformation internally
+  render(stageToDOM(stage, { stages }));
 }

package/app/slide-main.js

@@ -9,7 +9,7 @@ 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 { sortTracksByType } from "./formatters/track/shared.js";
+import { sortTracksByName } from "./formatters/track/shared.js";
 
 // Import slide renderers
 import { renderChapterSlide } from "./slides/chapter.js";
@@ -150,13 +150,21 @@ function setupRoutes() {
     renderTrackSlide({ render: renderSlide, data: getState().data, params });
   });
 
-  // Jobs
-  router.on("/job/:discipline/:track/:grade", (params) => {
+  // Jobs - new format: discipline/grade/track (track optional)
+  router.on("/job/:discipline/:grade/:track", (params) => {
     renderJobSlide({ render: renderSlide, data: getState().data, params });
   });
 
-  // Interviews
-  router.on("/interview/:discipline/:track/:grade", (params) => {
+  router.on("/job/:discipline/:grade", (params) => {
+    renderJobSlide({
+      render: renderSlide,
+      data: getState().data,
+      params: { ...params, track: null },
+    });
+  });
+
+  // Interviews - new format: discipline/grade/track (track optional)
+  router.on("/interview/:discipline/:grade/:track", (params) => {
     renderInterviewSlide({
       render: renderSlide,
       data: getState().data,
@@ -164,10 +172,26 @@ function setupRoutes() {
     });
   });
 
-  // Progress
-  router.on("/progress/:discipline/:track/:grade", (params) => {
+  router.on("/interview/:discipline/:grade", (params) => {
+    renderInterviewSlide({
+      render: renderSlide,
+      data: getState().data,
+      params: { ...params, track: null },
+    });
+  });
+
+  // Progress - new format: discipline/grade/track (track optional)
+  router.on("/progress/:discipline/:grade/:track", (params) => {
     renderProgressSlide({ render: renderSlide, data: getState().data, params });
   });
+
+  router.on("/progress/:discipline/:grade", (params) => {
+    renderProgressSlide({
+      render: renderSlide,
+      data: getState().data,
+      params: { ...params, track: null },
+    });
+  });
 }
 
 /**
@@ -187,15 +211,7 @@ function buildSlideOrder(data) {
     data.disciplines.forEach((d) => order.push(`/discipline/${d.id}`));
   }
 
-  // Tracks
-  if (data.tracks && data.tracks.length > 0) {
-    boundaries.push(order.length);
-    order.push("/chapter/track");
-    order.push("/overview/track");
-    sortTracksByType(data.tracks).forEach((t) => order.push(`/track/${t.id}`));
-  }
-
-  // Grades
+  // Grades (moved before Tracks)
   if (data.grades && data.grades.length > 0) {
     boundaries.push(order.length);
     order.push("/chapter/grade");
@@ -203,6 +219,14 @@ function buildSlideOrder(data) {
     data.grades.forEach((g) => order.push(`/grade/${g.id}`));
   }
 
+  // Tracks (moved after Grades)
+  if (data.tracks && data.tracks.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/track");
+    order.push("/overview/track");
+    sortTracksByName(data.tracks).forEach((t) => order.push(`/track/${t.id}`));
+  }
+
   // Skills
   if (data.skills && data.skills.length > 0) {
     boundaries.push(order.length);
@@ -241,7 +265,11 @@ function buildSlideOrder(data) {
     order.push("/chapter/job");
     order.push("/overview/job");
     jobs.forEach((job) =>
-      order.push(`/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`),
+      order.push(
+        job.track
+          ? `/job/${job.discipline.id}/${job.grade.id}/${job.track.id}`
+          : `/job/${job.discipline.id}/${job.grade.id}`,
+      ),
     );
   }
 

package/app/slides/index.js

@@ -184,7 +184,9 @@ export function renderSlideIndex({ render, data }) {
             {},
             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,
             ),

package/app/slides/overview.js

@@ -4,8 +4,9 @@
  * Displays overview slides for each chapter with cards for all entities.
  */
 
-import { div, h1, p, span } from "../lib/render.js";
-import { createCardList } from "../components/list.js";
+import { div, h1, h2, p, span } from "../lib/render.js";
+import { createCardList, createGroupedList } from "../components/list.js";
+import { createBadge } from "../components/card.js";
 import {
   disciplineToCardConfig,
   skillToCardConfig,
@@ -23,6 +24,31 @@ import { prepareGradesList } from "../formatters/grade/shared.js";
 import { prepareTracksList } from "../formatters/track/shared.js";
 import { generateAllJobs } from "../model/derivation.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 overview slide
  * @param {Object} params
@@ -62,8 +88,9 @@ export function renderOverviewSlide({ render, data, params }) {
       title: framework.entityDefinitions.discipline.title,
       emoji: framework.entityDefinitions.discipline.emoji,
       description: framework.entityDefinitions.discipline.description,
-      entities: prepareDisciplinesList(data.disciplines).items,
+      groups: prepareDisciplinesList(data.disciplines).groups,
       mapper: disciplineToCardConfig,
+      isGrouped: true,
     },
     grade: {
       title: framework.entityDefinitions.grade.title,
@@ -108,6 +135,15 @@ export function renderOverviewSlide({ render, data, params }) {
     return;
   }
 
+  // Render content based on whether it's grouped or flat
+  const contentElement = config.isGrouped
+    ? createGroupedList(
+        config.groups,
+        config.mapper,
+        renderDisciplineGroupHeader,
+      )
+    : createCardList(config.entities, config.mapper, "No items found.");
+
   const slide = div(
     { className: "slide overview-slide" },
     div(
@@ -119,7 +155,7 @@ export function renderOverviewSlide({ render, data, params }) {
       ),
       p({ className: "overview-description" }, config.description.trim()),
     ),
-    createCardList(config.entities, config.mapper, "No items found."),
+    contentElement,
   );
 
   render(slide);

package/app/slides/progress.js

@@ -21,9 +21,11 @@ import { progressToDOM } from "../formatters/index.js";
 export function renderProgressSlide({ render, data, params }) {
   const discipline = data.disciplines.find((d) => d.id === params.discipline);
   const grade = data.grades.find((g) => g.id === params.grade);
-  const track = data.tracks.find((t) => t.id === params.track);
+  const track = params.track
+    ? data.tracks.find((t) => t.id === params.track)
+    : null;
 
-  if (!discipline || !grade || !track) {
+  if (!discipline || !grade) {
     render(
       div(
         { className: "slide-error" },

package/app/slides.html

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