@forwardimpact/pathway 0.1.0

package/app/lib/state.js

@@ -0,0 +1,148 @@
+/**
+ * Application state management
+ */
+
+/**
+ * @typedef {Object} AppState
+ * @property {Object} data - Loaded data from YAML files
+ * @property {Object} ui - UI state
+ */
+
+/** @type {AppState} */
+const state = {
+  data: {
+    skills: [],
+    behaviours: [],
+    disciplines: [],
+    tracks: [],
+    grades: [],
+    drivers: [],
+    questions: {},
+    capabilities: [],
+    stages: [],
+    framework: {},
+    loaded: false,
+    error: null,
+  },
+  ui: {
+    currentRoute: "/",
+    filters: {
+      skills: { capability: null, search: "" },
+      behaviours: { search: "" },
+      disciplines: { search: "" },
+      tracks: { search: "" },
+      grades: { search: "" },
+      drivers: { search: "" },
+    },
+  },
+};
+
+/** @type {Set<Function>} */
+const listeners = new Set();
+
+/**
+ * Get the current state
+ * @returns {AppState}
+ */
+export function getState() {
+  return state;
+}
+
+/**
+ * Get a specific path from state
+ * @param {string} path - Dot-notation path (e.g., 'data.skills')
+ * @returns {*}
+ */
+export function getStatePath(path) {
+  return path.split(".").reduce((obj, key) => obj?.[key], state);
+}
+
+/**
+ * Update state at a specific path
+ * @param {string} path - Dot-notation path
+ * @param {*} value - New value
+ */
+export function updateState(path, value) {
+  const keys = path.split(".");
+  const lastKey = keys.pop();
+  const target = keys.reduce((obj, key) => obj[key], state);
+  target[lastKey] = value;
+  notifyListeners();
+}
+
+/**
+ * Merge data into state
+ * @param {Object} data - Data to merge
+ */
+export function setData(data) {
+  Object.assign(state.data, data, { loaded: true, error: null });
+  notifyListeners();
+}
+
+/**
+ * Set an error in state
+ * @param {Error} error
+ */
+export function setError(error) {
+  state.data.error = error.message;
+  notifyListeners();
+}
+
+/**
+ * Subscribe to state changes
+ * @param {Function} listener
+ * @returns {Function} Unsubscribe function
+ */
+export function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/**
+ * Notify all listeners of state change
+ */
+function notifyListeners() {
+  listeners.forEach((listener) => listener(state));
+}
+
+/**
+ * Update a filter
+ * @param {string} entity - Entity type (skills, behaviours, etc.)
+ * @param {string} filterKey - Filter key
+ * @param {*} value - Filter value
+ */
+export function setFilter(entity, filterKey, value) {
+  if (state.ui.filters[entity]) {
+    state.ui.filters[entity][filterKey] = value;
+    notifyListeners();
+  }
+}
+
+/**
+ * Get filters for an entity
+ * @param {string} entity
+ * @returns {Object}
+ */
+export function getFilters(entity) {
+  return state.ui.filters[entity] || {};
+}
+
+/**
+ * @typedef {Object} Branding
+ * @property {string} title - Application title
+ * @property {string} tag - Brand hashtag/tag
+ * @property {string} description - Application description
+ */
+
+/**
+ * Get branding elements from framework data
+ * @returns {Branding}
+ */
+export function getBranding() {
+  const { framework } = state.data;
+  return {
+    title: framework.title || "Engineering Pathway",
+    tag: framework.tag || "#BenchTools",
+    description: framework.description || "",
+  };
+}

package/app/lib/utils.js

@@ -0,0 +1,14 @@
+/**
+ * General utility functions
+ */
+
+/**
+ * Get an array of items by their IDs
+ * @param {Array} items - Array of items with id property
+ * @param {string[]} ids - Array of IDs to find
+ * @returns {Array} - Found items, filtered to remove nulls
+ */
+export function getItemsByIds(items, ids) {
+  if (!ids) return [];
+  return ids.map((id) => items.find((item) => item.id === id)).filter(Boolean);
+}

package/app/lib/yaml-loader.js

@@ -0,0 +1,327 @@
+/**
+ * Browser-compatible YAML loading
+ *
+ * Uses _index.yaml files to discover files in directory structures.
+ * These index files are auto-generated by the CLI (npx pathway --generate-index).
+ */
+
+import { parse as parseYaml } from "https://cdn.jsdelivr.net/npm/yaml@2.3.4/+esm";
+
+/**
+ * Load and parse a YAML file
+ * @param {string} path - Path to the YAML file
+ * @returns {Promise<*>}
+ */
+export async function loadYamlFile(path) {
+  const response = await fetch(path);
+  if (!response.ok) {
+    throw new Error(
+      `Failed to load ${path}: ${response.status} ${response.statusText}`,
+    );
+  }
+  const text = await response.text();
+  return parseYaml(text);
+}
+
+/**
+ * Try to load a YAML file, return null if not found
+ * @param {string} path - Path to the YAML file
+ * @returns {Promise<*|null>}
+ */
+async function tryLoadYamlFile(path) {
+  const response = await fetch(path);
+  if (response.status === 404) {
+    return null;
+  }
+  if (!response.ok) {
+    throw new Error(
+      `Failed to load ${path}: ${response.status} ${response.statusText}`,
+    );
+  }
+  const text = await response.text();
+  return parseYaml(text);
+}
+
+/**
+ * Load directory index (list of file IDs)
+ * @param {string} dir - Directory path
+ * @returns {Promise<string[]>} Array of file IDs
+ */
+async function loadDirIndex(dir) {
+  const index = await loadYamlFile(`${dir}/_index.yaml`);
+  return index.files || [];
+}
+
+/**
+ * Load skills from capability files
+ * Skills are embedded in capability YAML files under the 'skills' array.
+ * This function extracts all skills and adds the capability ID back to each.
+ * @param {string} capabilitiesDir - Path to capabilities directory
+ * @returns {Promise<Array>} Array of skill objects
+ */
+async function loadSkillsFromCapabilities(capabilitiesDir) {
+  const capabilityIds = await loadDirIndex(capabilitiesDir);
+  const allSkills = [];
+
+  for (const capabilityId of capabilityIds) {
+    const capability = await loadYamlFile(
+      `${capabilitiesDir}/${capabilityId}.yaml`,
+    );
+
+    if (capability.skills && Array.isArray(capability.skills)) {
+      for (const skill of capability.skills) {
+        const { id, name, isHumanOnly, human, agent } = skill;
+        allSkills.push({
+          id,
+          name,
+          capability: capabilityId, // Add capability from parent
+          description: human.description,
+          levelDescriptions: human.levelDescriptions,
+          // Include isHumanOnly flag for agent filtering (defaults to false)
+          ...(isHumanOnly && { isHumanOnly }),
+          ...(agent && { agent }),
+        });
+      }
+    }
+  }
+
+  return allSkills;
+}
+
+/**
+ * Load disciplines from directory using _index.yaml
+ * @param {string} disciplinesDir - Path to disciplines directory
+ * @returns {Promise<Array>} Array of discipline objects
+ */
+async function loadDisciplinesFromDir(disciplinesDir) {
+  const disciplineIds = await loadDirIndex(disciplinesDir);
+
+  const disciplines = await Promise.all(
+    disciplineIds.map(async (id) => {
+      const content = await loadYamlFile(`${disciplinesDir}/${id}.yaml`);
+      // Shared content at top level, role summaries under human:
+      const {
+        specialization,
+        roleTitle,
+        // Shared content - now at root level
+        description,
+        // Structural properties (derivation inputs)
+        coreSkills,
+        supportingSkills,
+        broadSkills,
+        behaviourModifiers,
+        // Presentation sections
+        human,
+        agent,
+      } = content;
+      return {
+        id,
+        specialization,
+        roleTitle,
+        // Shared content at top level
+        description,
+        // Structural properties
+        coreSkills,
+        supportingSkills,
+        broadSkills,
+        behaviourModifiers,
+        // Human presentation content (role summaries only)
+        ...human,
+        ...(agent && { agent }),
+      };
+    }),
+  );
+  return disciplines;
+}
+
+/**
+ * Load tracks from directory using _index.yaml
+ * @param {string} tracksDir - Path to tracks directory
+ * @returns {Promise<Array>} Array of track objects
+ */
+async function loadTracksFromDir(tracksDir) {
+  const trackIds = await loadDirIndex(tracksDir);
+
+  const tracks = await Promise.all(
+    trackIds.map(async (id) => {
+      const content = await loadYamlFile(`${tracksDir}/${id}.yaml`);
+      // Shared content at top level (no human section for tracks anymore)
+      const {
+        name,
+        // Shared content - now at root level
+        description,
+        roleContext,
+        // Structural properties (derivation inputs)
+        isProfessional,
+        isManagement,
+        skillModifiers,
+        behaviourModifiers,
+        matchingWeights,
+        validDisciplines,
+        // Agent section (no human section anymore for tracks)
+        agent,
+      } = content;
+      return {
+        id,
+        name,
+        // Shared content at top level
+        description,
+        roleContext,
+        // Structural properties
+        isProfessional,
+        isManagement,
+        skillModifiers,
+        behaviourModifiers,
+        matchingWeights,
+        validDisciplines,
+        ...(agent && { agent }),
+      };
+    }),
+  );
+  return tracks;
+}
+
+/**
+ * Load behaviours from directory using _index.yaml
+ * @param {string} behavioursDir - Path to behaviours directory
+ * @returns {Promise<Array>} Array of behaviour objects
+ */
+async function loadBehavioursFromDir(behavioursDir) {
+  const behaviourIds = await loadDirIndex(behavioursDir);
+
+  const behaviours = await Promise.all(
+    behaviourIds.map(async (id) => {
+      const content = await loadYamlFile(`${behavioursDir}/${id}.yaml`);
+      // Flatten human properties to top level (behaviours use human: section in YAML)
+      const { name, human, agent } = content;
+      return {
+        id,
+        name,
+        ...human,
+        ...(agent && { agent }),
+      };
+    }),
+  );
+  return behaviours;
+}
+
+/**
+ * Load capabilities from directory using _index.yaml
+ * @param {string} capabilitiesDir - Path to capabilities directory
+ * @returns {Promise<Array>} Array of capability objects
+ */
+async function loadCapabilitiesFromDir(capabilitiesDir) {
+  const capabilityIds = await loadDirIndex(capabilitiesDir);
+
+  const capabilities = await Promise.all(
+    capabilityIds.map((id) => loadYamlFile(`${capabilitiesDir}/${id}.yaml`)),
+  );
+  return capabilities;
+}
+
+/**
+ * Load questions from folder structure using skill/behaviour IDs
+ * @param {string} questionsDir - Path to questions directory
+ * @param {Array} skills - Skills array (with id property)
+ * @param {Array} behaviours - Behaviours array (with id property)
+ * @returns {Promise<Object>}
+ */
+async function loadQuestionFolder(questionsDir, skills, behaviours) {
+  const [skillEntries, behaviourEntries] = await Promise.all([
+    Promise.all(
+      skills.map(async (skill) => {
+        const content = await tryLoadYamlFile(
+          `${questionsDir}/skills/${skill.id}.yaml`,
+        );
+        return [skill.id, content || {}];
+      }),
+    ),
+    Promise.all(
+      behaviours.map(async (behaviour) => {
+        const content = await tryLoadYamlFile(
+          `${questionsDir}/behaviours/${behaviour.id}.yaml`,
+        );
+        return [behaviour.id, content || {}];
+      }),
+    ),
+  ]);
+
+  return {
+    skillLevels: Object.fromEntries(skillEntries),
+    behaviourMaturities: Object.fromEntries(behaviourEntries),
+  };
+}
+
+/**
+ * Load all data files
+ * @param {string} [dataDir='./data'] - Path to data directory
+ * @returns {Promise<Object>}
+ */
+export async function loadAllData(dataDir = "./data") {
+  // Load capabilities first (skills are embedded in capabilities)
+  const capabilities = await loadCapabilitiesFromDir(`${dataDir}/capabilities`);
+
+  // Extract skills from capabilities
+  const skills = await loadSkillsFromCapabilities(`${dataDir}/capabilities`);
+
+  // Load remaining core data in parallel (using _index.yaml for discovery)
+  const [drivers, behaviours, disciplines, tracks, grades, stages, framework] =
+    await Promise.all([
+      loadYamlFile(`${dataDir}/drivers.yaml`),
+      loadBehavioursFromDir(`${dataDir}/behaviours`),
+      loadDisciplinesFromDir(`${dataDir}/disciplines`),
+      loadTracksFromDir(`${dataDir}/tracks`),
+      loadYamlFile(`${dataDir}/grades.yaml`),
+      loadYamlFile(`${dataDir}/stages.yaml`),
+      loadYamlFile(`${dataDir}/framework.yaml`),
+    ]);
+
+  // Load questions using skill/behaviour IDs
+  const questions = await loadQuestionFolder(
+    `${dataDir}/questions`,
+    skills,
+    behaviours,
+  );
+
+  return {
+    drivers,
+    behaviours,
+    skills,
+    disciplines,
+    tracks,
+    grades,
+    questions,
+    capabilities,
+    stages,
+    framework,
+  };
+}
+
+/**
+ * Load agent-specific data for browser-based agent generation
+ * Uses co-located files where agent sections are embedded in entity files
+ * @param {string} [dataDir='./data'] - Path to data directory
+ * @returns {Promise<Object>} Agent data including disciplines, tracks, behaviours, vscodeSettings
+ */
+export async function loadAgentDataBrowser(dataDir = "./data") {
+  const [disciplines, tracks, behaviours, vscodeSettings] = await Promise.all([
+    loadDisciplinesFromDir(`${dataDir}/disciplines`),
+    loadTracksFromDir(`${dataDir}/tracks`),
+    loadBehavioursFromDir(`${dataDir}/behaviours`),
+    tryLoadYamlFile(`${dataDir}/vscode-settings.yaml`),
+  ]);
+
+  // Extract agent sections from co-located files
+  return {
+    disciplines: disciplines
+      .filter((d) => d.agent)
+      .map((d) => ({ id: d.id, ...d.agent })),
+    tracks: tracks
+      .filter((t) => t.agent)
+      .map((t) => ({ id: t.id, ...t.agent })),
+    behaviours: behaviours
+      .filter((b) => b.agent)
+      .map((b) => ({ id: b.id, ...b.agent })),
+    vscodeSettings: vscodeSettings || {},
+  };
+}

package/app/main.js

@@ -0,0 +1,213 @@
+/**
+ * Main application entry point
+ */
+
+import { createPagesRouter } from "./lib/router-pages.js";
+import { setData, setError, getBranding } from "./lib/state.js";
+import { loadAllData } from "./lib/yaml-loader.js";
+import { render, div, h1, p, showError } from "./lib/render.js";
+
+const router = createPagesRouter({
+  onNotFound: renderNotFound,
+});
+
+// Import pages
+import { renderLanding } from "./pages/landing.js";
+import { renderSkillsList, renderSkillDetail } from "./pages/skill.js";
+import {
+  renderBehavioursList,
+  renderBehaviourDetail,
+} from "./pages/behaviour.js";
+import {
+  renderDisciplinesList,
+  renderDisciplineDetail,
+} from "./pages/discipline.js";
+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 { renderJobBuilder } from "./pages/job-builder.js";
+import { renderJobDetail } from "./pages/job.js";
+import { renderInterviewPrep } from "./pages/interview-builder.js";
+import { renderInterviewDetail } from "./pages/interview.js";
+import { renderCareerProgress } from "./pages/progress-builder.js";
+import { renderProgressDetail } from "./pages/progress.js";
+import { renderSelfAssessment } from "./pages/self-assessment.js";
+import { renderAssessmentResults } from "./pages/assessment-results.js";
+import { renderAgentBuilder } from "./pages/agent-builder.js";
+
+/**
+ * Initialize the application
+ */
+async function init() {
+  // Set up navigation toggle for mobile
+  setupMobileNav();
+
+  // Load data
+  try {
+    const data = await loadAllData("./data");
+    setData(data);
+
+    // Populate branding from framework data
+    populateBranding();
+  } catch (error) {
+    console.error("Failed to load data:", error);
+    setError(error);
+    showError(`Failed to load data: ${error.message}`);
+    return;
+  }
+
+  // Set up routes
+  setupRoutes();
+
+  // Start router
+  router.start();
+}
+
+/**
+ * Set up all application routes
+ */
+function setupRoutes() {
+  // Landing page
+  router.on("/", renderLanding);
+
+  // Skill
+  router.on("/skill", renderSkillsList);
+  router.on("/skill/:id", renderSkillDetail);
+
+  // Behaviour
+  router.on("/behaviour", renderBehavioursList);
+  router.on("/behaviour/:id", renderBehaviourDetail);
+
+  // Discipline
+  router.on("/discipline", renderDisciplinesList);
+  router.on("/discipline/:id", renderDisciplineDetail);
+
+  // Track
+  router.on("/track", renderTracksList);
+  router.on("/track/:id", renderTrackDetail);
+
+  // Grade
+  router.on("/grade", renderGradesList);
+  router.on("/grade/:id", renderGradeDetail);
+
+  // Driver
+  router.on("/driver", renderDriversList);
+  router.on("/driver/:id", renderDriverDetail);
+
+  // Stage
+  router.on("/stage", renderStagesList);
+  router.on("/stage/:id", renderStageDetail);
+
+  // Job builder
+  router.on("/job-builder", renderJobBuilder);
+  router.on("/job/:discipline/:track/:grade", renderJobDetail);
+
+  // Interview prep
+  router.on("/interview-prep", renderInterviewPrep);
+  router.on("/interview/:discipline/:track/:grade", renderInterviewDetail);
+
+  // Career progress
+  router.on("/career-progress", renderCareerProgress);
+  router.on("/progress/:discipline/:track/:grade", renderProgressDetail);
+
+  // Self-assessment
+  router.on("/self-assessment", renderSelfAssessment);
+  router.on("/self-assessment/results", renderAssessmentResults);
+
+  // Agent builder
+  router.on("/agent-builder", renderAgentBuilder);
+  router.on("/agent/:discipline/:track", renderAgentBuilder);
+  router.on("/agent/:discipline/:track/:stage", renderAgentBuilder);
+}
+
+/**
+ * Render 404 page
+ */
+function renderNotFound() {
+  render(
+    div(
+      { className: "not-found" },
+      h1({}, "404 - Page Not Found"),
+      p({}, "The page you are looking for does not exist."),
+      div(
+        { className: "not-found-actions" },
+        div(
+          {},
+          createElement(
+            "a",
+            { href: "#/", className: "btn btn-primary" },
+            "Go Home",
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+/**
+ * Helper to create elements (used in not found)
+ */
+function createElement(tag, attrs, text) {
+  const el = document.createElement(tag);
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (key === "className") el.className = value;
+    else el.setAttribute(key, value);
+  });
+  if (text) el.textContent = text;
+  return el;
+}
+
+/**
+ * Populate branding elements from framework data
+ */
+function populateBranding() {
+  const branding = getBranding();
+
+  // Update document title
+  document.title = branding.title;
+
+  // Update nav brand
+  const navBrand = document.querySelector(".nav-brand a");
+  if (navBrand) {
+    navBrand.textContent = branding.title;
+  }
+
+  // Update nav brand tag
+  const brandTag = document.querySelector(".nav-brand .brand-tag");
+  if (brandTag) {
+    brandTag.textContent = branding.tag;
+  }
+
+  // Update footer
+  const footer = document.querySelector("#app-footer p");
+  if (footer) {
+    footer.textContent = branding.title;
+  }
+}
+
+/**
+ * Set up mobile navigation toggle
+ */
+function setupMobileNav() {
+  const toggle = document.getElementById("nav-toggle");
+  const links = document.getElementById("nav-links");
+
+  if (toggle && links) {
+    toggle.addEventListener("click", () => {
+      links.classList.toggle("nav-open");
+      toggle.classList.toggle("nav-toggle-active");
+    });
+
+    // Close menu when a link is clicked
+    links.addEventListener("click", (e) => {
+      if (e.target.tagName === "A") {
+        links.classList.remove("nav-open");
+        toggle.classList.remove("nav-toggle-active");
+      }
+    });
+  }
+}
+
+// Start the app
+init();