@forwardimpact/pathway 0.1.0

package/app/formatters/driver/dom.js

@@ -0,0 +1,103 @@
+/**
+ * Driver formatting for DOM output
+ */
+
+import { div, heading1, heading2, p, a, span } from "../../lib/render.js";
+import { createBackLink } from "../../components/nav.js";
+import { prepareDriverDetail } from "./shared.js";
+import { getConceptEmoji } from "../../model/levels.js";
+
+/**
+ * Format driver detail as DOM elements
+ * @param {Object} driver - Raw driver entity
+ * @param {Object} context - Additional context and options
+ * @param {Array} context.skills - All skills
+ * @param {Array} context.behaviours - All behaviours
+ * @param {Object} [context.framework] - Framework config for emojis
+ * @param {boolean} [context.showBackLink=true] - Whether to show back navigation link
+ * @returns {HTMLElement}
+ */
+export function driverToDOM(
+  driver,
+  { skills, behaviours, framework, showBackLink = true } = {},
+) {
+  const view = prepareDriverDetail(driver, { skills, behaviours });
+  const emoji = framework ? getConceptEmoji(framework, "driver") : "🎯";
+  return div(
+    { className: "detail-page driver-detail" },
+    // Header
+    div(
+      { className: "page-header" },
+      showBackLink ? createBackLink("/driver", "← Back to Drivers") : null,
+      heading1({ className: "page-title" }, `${emoji} `, view.name),
+      p({ className: "page-description" }, view.description),
+    ),
+
+    // Stats
+    div(
+      { className: "stats" },
+      div(
+        { className: "stat" },
+        div(
+          { className: "stat-value" },
+          String(view.contributingSkills.length),
+        ),
+        div({ className: "stat-label" }, "Contributing Skills"),
+      ),
+      div(
+        { className: "stat" },
+        div(
+          { className: "stat-value" },
+          String(view.contributingBehaviours.length),
+        ),
+        div({ className: "stat-label" }, "Contributing Behaviours"),
+      ),
+    ),
+
+    // Contributing Skills and Contributing Behaviours in two columns
+    view.contributingSkills.length > 0 || view.contributingBehaviours.length > 0
+      ? div(
+          { className: "detail-section" },
+          div(
+            { className: "content-columns" },
+            // Contributing Skills column
+            view.contributingSkills.length > 0
+              ? div(
+                  { className: "column" },
+                  heading2(
+                    { className: "section-title" },
+                    "Contributing Skills",
+                  ),
+                  ...view.contributingSkills.map((s) =>
+                    div(
+                      { className: "list-item" },
+                      showBackLink
+                        ? a({ href: `#/skill/${s.id}` }, s.name)
+                        : span({}, s.name),
+                    ),
+                  ),
+                )
+              : null,
+            // Contributing Behaviours column
+            view.contributingBehaviours.length > 0
+              ? div(
+                  { className: "column" },
+                  heading2(
+                    { className: "section-title" },
+                    "Contributing Behaviours",
+                  ),
+                  ...view.contributingBehaviours.map((b) =>
+                    div(
+                      { className: "list-item" },
+                      showBackLink
+                        ? a({ href: `#/behaviour/${b.id}` }, b.name)
+                        : span({}, b.name),
+                    ),
+                  ),
+                )
+              : null,
+          ),
+        )
+      : null,
+  );
+}

package/app/formatters/driver/shared.js

@@ -0,0 +1,92 @@
+/**
+ * Driver presentation helpers
+ *
+ * Shared utilities for formatting driver data across DOM and markdown outputs.
+ */
+
+import { truncate } from "../shared.js";
+
+/**
+ * Get 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
+ */
+function getItemsByIds(items, ids) {
+  if (!ids) return [];
+  return ids.map((id) => items.find((item) => item.id === id)).filter(Boolean);
+}
+
+/**
+ * @typedef {Object} DriverListItem
+ * @property {string} id
+ * @property {string} name
+ * @property {string} description
+ * @property {string} truncatedDescription
+ * @property {number} contributingSkillsCount
+ * @property {number} contributingBehavioursCount
+ */
+
+/**
+ * Transform drivers for list view
+ * @param {Array} drivers - Raw driver entities
+ * @param {number} [descriptionLimit=150] - Maximum description length
+ * @returns {{ items: DriverListItem[] }}
+ */
+export function prepareDriversList(drivers, descriptionLimit = 150) {
+  const items = drivers.map((driver) => ({
+    id: driver.id,
+    name: driver.name,
+    description: driver.description,
+    truncatedDescription: truncate(driver.description, descriptionLimit),
+    contributingSkillsCount: driver.contributingSkills?.length || 0,
+    contributingBehavioursCount: driver.contributingBehaviours?.length || 0,
+  }));
+
+  return { items };
+}
+
+/**
+ * @typedef {Object} DriverDetailView
+ * @property {string} id
+ * @property {string} name
+ * @property {string} description
+ * @property {Array<{id: string, name: string}>} contributingSkills
+ * @property {Array<{id: string, name: string}>} contributingBehaviours
+ */
+
+/**
+ * Transform driver for detail view
+ * @param {Object} driver - Raw driver entity
+ * @param {Object} context - Additional context
+ * @param {Array} context.skills - All skills
+ * @param {Array} context.behaviours - All behaviours
+ * @returns {DriverDetailView|null}
+ */
+export function prepareDriverDetail(driver, { skills, behaviours }) {
+  if (!driver) return null;
+
+  const contributingSkills = getItemsByIds(
+    skills,
+    driver.contributingSkills,
+  ).map((s) => ({
+    id: s.id,
+    name: s.name,
+  }));
+
+  const contributingBehaviours = getItemsByIds(
+    behaviours,
+    driver.contributingBehaviours,
+  ).map((b) => ({
+    id: b.id,
+    name: b.name,
+  }));
+
+  return {
+    id: driver.id,
+    name: driver.name,
+    description: driver.description,
+    contributingSkills,
+    contributingBehaviours,
+  };
+}

package/app/formatters/grade/dom.js

@@ -0,0 +1,208 @@
+/**
+ * Grade formatting for DOM output
+ */
+
+import {
+  div,
+  heading1,
+  heading2,
+  p,
+  span,
+  table,
+  tbody,
+  thead,
+  tr,
+  th,
+  td,
+} from "../../lib/render.js";
+import { createBackLink } from "../../components/nav.js";
+import { createLevelDots } from "../../components/detail.js";
+import {
+  SKILL_LEVEL_ORDER,
+  BEHAVIOUR_MATURITY_ORDER,
+  getConceptEmoji,
+} from "../../model/levels.js";
+import { createJobBuilderButton } from "../../components/action-buttons.js";
+import { prepareGradeDetail } from "./shared.js";
+
+/**
+ * Format grade detail as DOM elements
+ * @param {Object} grade - Raw grade entity
+ * @param {Object} options - Formatting options
+ * @param {Object} [options.framework] - Framework config for emojis
+ * @param {boolean} [options.showBackLink=true] - Whether to show back navigation link
+ * @returns {HTMLElement}
+ */
+export function gradeToDOM(grade, { framework, showBackLink = true } = {}) {
+  const view = prepareGradeDetail(grade);
+  const emoji = framework ? getConceptEmoji(framework, "grade") : "📊";
+  return div(
+    { className: "detail-page grade-detail" },
+    // Header
+    div(
+      { className: "page-header" },
+      showBackLink ? createBackLink("/grade", "← Back to Grades") : null,
+      heading1({ className: "page-title" }, `${emoji} `, view.displayName),
+      div(
+        { className: "page-meta" },
+        span({ className: "badge badge-default" }, view.id),
+      ),
+      view.typicalExperienceRange
+        ? p(
+            { className: "page-description" },
+            `Typical experience: ${view.typicalExperienceRange}`,
+          )
+        : null,
+      showBackLink
+        ? div(
+            { className: "page-actions" },
+            createJobBuilderButton({
+              paramName: "grade",
+              paramValue: grade.id,
+            }),
+          )
+        : null,
+    ),
+
+    // Titles section
+    view.professionalTitle || view.managementTitle
+      ? div(
+          { className: "detail-section" },
+          heading2({ className: "section-title" }, "Titles"),
+          div(
+            { className: "content-columns" },
+            view.professionalTitle
+              ? div(
+                  { className: "list-item" },
+                  p({ className: "label" }, "Professional Track"),
+                  p({}, view.professionalTitle),
+                )
+              : null,
+            view.managementTitle
+              ? div(
+                  { className: "list-item" },
+                  p({ className: "label" }, "Management Track"),
+                  p({}, view.managementTitle),
+                )
+              : null,
+          ),
+        )
+      : null,
+
+    // Expectations
+    view.expectations && Object.keys(view.expectations).length > 0
+      ? div(
+          { className: "detail-section" },
+          heading2({ className: "section-title" }, "Expectations"),
+          div(
+            { className: "content-columns" },
+            ...Object.entries(view.expectations).map(([key, value]) =>
+              div(
+                { className: "list-item" },
+                p(
+                  { className: "label" },
+                  key.charAt(0).toUpperCase() + key.slice(1),
+                ),
+                p({}, value),
+              ),
+            ),
+          ),
+        )
+      : null,
+
+    // Base Skill Levels and Base Behaviour Maturity in two columns
+    div(
+      { className: "detail-section" },
+      div(
+        { className: "content-columns" },
+        // Base Skill Levels column
+        div(
+          { className: "column" },
+          heading2({ className: "section-title" }, "Base Skill Levels"),
+          table(
+            { className: "level-table" },
+            thead({}, tr({}, th({}, "Type"), th({}, "Level"))),
+            tbody(
+              {},
+              tr(
+                {},
+                td({}, span({ className: "badge badge-primary" }, "Primary")),
+                td(
+                  {},
+                  view.baseSkillLevels?.primary
+                    ? createLevelDots(
+                        SKILL_LEVEL_ORDER.indexOf(view.baseSkillLevels.primary),
+                        SKILL_LEVEL_ORDER.length,
+                      )
+                    : span({ className: "text-muted" }, "—"),
+                ),
+              ),
+              tr(
+                {},
+                td(
+                  {},
+                  span({ className: "badge badge-secondary" }, "Secondary"),
+                ),
+                td(
+                  {},
+                  view.baseSkillLevels?.secondary
+                    ? createLevelDots(
+                        SKILL_LEVEL_ORDER.indexOf(
+                          view.baseSkillLevels.secondary,
+                        ),
+                        SKILL_LEVEL_ORDER.length,
+                      )
+                    : span({ className: "text-muted" }, "—"),
+                ),
+              ),
+              tr(
+                {},
+                td({}, span({ className: "badge badge-broad" }, "Broad")),
+                td(
+                  {},
+                  view.baseSkillLevels?.broad
+                    ? createLevelDots(
+                        SKILL_LEVEL_ORDER.indexOf(view.baseSkillLevels.broad),
+                        SKILL_LEVEL_ORDER.length,
+                      )
+                    : span({ className: "text-muted" }, "—"),
+                ),
+              ),
+            ),
+          ),
+        ),
+        // Base Behaviour Maturity column
+        div(
+          { className: "column" },
+          heading2({ className: "section-title" }, "Base Behaviour Maturity"),
+          view.baseBehaviourMaturity
+            ? table(
+                { className: "level-table" },
+                thead({}, tr({}, th({}, "Maturity"), th({}, "Level"))),
+                tbody(
+                  {},
+                  tr(
+                    {},
+                    td(
+                      {},
+                      view.baseBehaviourMaturity.charAt(0).toUpperCase() +
+                        view.baseBehaviourMaturity.slice(1),
+                    ),
+                    td(
+                      {},
+                      createLevelDots(
+                        BEHAVIOUR_MATURITY_ORDER.indexOf(
+                          view.baseBehaviourMaturity,
+                        ),
+                        BEHAVIOUR_MATURITY_ORDER.length,
+                      ),
+                    ),
+                  ),
+                ),
+              )
+            : p({ className: "text-muted" }, "—"),
+        ),
+      ),
+    ),
+  );
+}

package/app/formatters/grade/markdown.js

@@ -0,0 +1,94 @@
+/**
+ * Grade formatting for markdown/CLI output
+ */
+
+import { tableToMarkdown, capitalize } from "../shared.js";
+import { prepareGradesList, prepareGradeDetail } from "./shared.js";
+import { getConceptEmoji } from "../../model/levels.js";
+
+/**
+ * Format grade list as markdown
+ * @param {Array} grades - Raw grade entities
+ * @param {Object} [framework] - Framework config for emojis
+ * @returns {string}
+ */
+export function gradeListToMarkdown(grades, framework) {
+  const { items } = prepareGradesList(grades);
+  const emoji = framework ? getConceptEmoji(framework, "grade") : "📊";
+  const lines = [`# ${emoji} Grades`, ""];
+
+  const rows = items.map((g) => [
+    g.id,
+    g.displayName,
+    g.typicalExperienceRange || "-",
+    capitalize(g.baseSkillLevels?.primary || "-"),
+  ]);
+
+  lines.push(tableToMarkdown(["ID", "Name", "Years", "Primary Level"], rows));
+  lines.push("");
+
+  return lines.join("\n");
+}
+
+/**
+ * Format grade detail as markdown
+ * @param {Object} grade - Raw grade entity
+ * @param {Object} [framework] - Framework config for emojis
+ * @returns {string}
+ */
+export function gradeToMarkdown(grade, framework) {
+  const view = prepareGradeDetail(grade);
+  const emoji = framework ? getConceptEmoji(framework, "grade") : "📊";
+  const lines = [`# ${emoji} ${view.displayName} (${view.id})`, ""];
+
+  if (view.typicalExperienceRange) {
+    lines.push(`**Experience**: ${view.typicalExperienceRange}`, "");
+  }
+
+  // Titles
+  if (view.professionalTitle || view.managementTitle) {
+    lines.push("## Titles", "");
+    if (view.professionalTitle) {
+      lines.push(`- **Professional Track**: ${view.professionalTitle}`);
+    }
+    if (view.managementTitle) {
+      lines.push(`- **Management Track**: ${view.managementTitle}`);
+    }
+    lines.push("");
+  }
+
+  // Base skill levels
+  lines.push("## Base Skill Levels", "");
+  const skillRows = Object.entries(view.baseSkillLevels).map(
+    ([type, level]) => [capitalize(type), capitalize(level)],
+  );
+  lines.push(tableToMarkdown(["Skill Type", "Level"], skillRows));
+  lines.push("");
+
+  // Base behaviour maturity
+  if (
+    view.baseBehaviourMaturity &&
+    Object.keys(view.baseBehaviourMaturity).length > 0
+  ) {
+    lines.push("## Base Behaviour Maturity", "");
+    const behaviourRows = Object.entries(view.baseBehaviourMaturity).map(
+      ([type, maturity]) => [
+        capitalize(type),
+        capitalize(maturity.replace(/_/g, " ")),
+      ],
+    );
+    lines.push(tableToMarkdown(["Type", "Maturity"], behaviourRows));
+    lines.push("");
+  }
+
+  // Expectations
+  if (view.expectations && Object.keys(view.expectations).length > 0) {
+    lines.push("## Expectations", "");
+    for (const [key, value] of Object.entries(view.expectations)) {
+      lines.push(`- **${capitalize(key)}**: ${value}`);
+    }
+    lines.push("");
+  }
+
+  return lines.join("\n");
+}

package/app/formatters/grade/shared.js

@@ -0,0 +1,86 @@
+/**
+ * Grade presentation helpers
+ *
+ * Shared utilities for formatting grade data across DOM and markdown outputs.
+ */
+
+/**
+ * Get grade display name (shows both professional and management titles)
+ * @param {Object} grade
+ * @returns {string}
+ */
+export function getGradeDisplayName(grade) {
+  if (grade.professionalTitle && grade.managementTitle) {
+    if (grade.professionalTitle === grade.managementTitle) {
+      return grade.professionalTitle;
+    }
+    return `${grade.professionalTitle} / ${grade.managementTitle}`;
+  }
+  return grade.professionalTitle || grade.managementTitle || grade.id;
+}
+
+/**
+ * @typedef {Object} GradeListItem
+ * @property {string} id
+ * @property {string} displayName
+ * @property {number} ordinalRank
+ * @property {string|null} typicalExperienceRange
+ * @property {Object} baseSkillLevels
+ * @property {string|null} impactScope
+ */
+
+/**
+ * Transform grades for list view
+ * @param {Array} grades - Raw grade entities
+ * @returns {{ items: GradeListItem[] }}
+ */
+export function prepareGradesList(grades) {
+  const sortedGrades = [...grades].sort(
+    (a, b) => a.ordinalRank - b.ordinalRank,
+  );
+
+  const items = sortedGrades.map((grade) => ({
+    id: grade.id,
+    displayName: getGradeDisplayName(grade),
+    ordinalRank: grade.ordinalRank,
+    typicalExperienceRange: grade.typicalExperienceRange || null,
+    baseSkillLevels: grade.baseSkillLevels || {},
+    impactScope: grade.expectations?.impactScope || null,
+  }));
+
+  return { items };
+}
+
+/**
+ * @typedef {Object} GradeDetailView
+ * @property {string} id
+ * @property {string} displayName
+ * @property {string} professionalTitle
+ * @property {string} managementTitle
+ * @property {number} ordinalRank
+ * @property {string|null} typicalExperienceRange
+ * @property {Object} baseSkillLevels
+ * @property {Object} baseBehaviourMaturity
+ * @property {Object} expectations
+ */
+
+/**
+ * Transform grade for detail view
+ * @param {Object} grade - Raw grade entity
+ * @returns {GradeDetailView|null}
+ */
+export function prepareGradeDetail(grade) {
+  if (!grade) return null;
+
+  return {
+    id: grade.id,
+    displayName: getGradeDisplayName(grade),
+    professionalTitle: grade.professionalTitle || null,
+    managementTitle: grade.managementTitle || null,
+    ordinalRank: grade.ordinalRank,
+    typicalExperienceRange: grade.typicalExperienceRange || null,
+    baseSkillLevels: grade.baseSkillLevels || {},
+    baseBehaviourMaturity: grade.baseBehaviourMaturity || {},
+    expectations: grade.expectations || {},
+  };
+}

package/app/formatters/index.js

@@ -0,0 +1,50 @@
+/**
+ * Formatter Layer
+ *
+ * Export all formatters for easy importing.
+ * Formatters transform presenter output into specific formats (DOM, markdown)
+ */
+
+// Shared utilities
+export * from "./shared.js";
+
+// Job formatters
+export { jobToMarkdown } from "./job/markdown.js";
+export { jobToDOM } from "./job/dom.js";
+
+// Interview formatters
+export { interviewToMarkdown } from "./interview/markdown.js";
+export { interviewToDOM } from "./interview/dom.js";
+
+// Progress formatters
+export { progressToMarkdown } from "./progress/markdown.js";
+export { progressToDOM } from "./progress/dom.js";
+
+// Driver formatters
+export { driverToDOM } from "./driver/dom.js";
+
+// Skill formatters
+export { skillListToMarkdown, skillToMarkdown } from "./skill/markdown.js";
+export { skillToDOM } from "./skill/dom.js";
+
+// Behaviour formatters
+export {
+  behaviourListToMarkdown,
+  behaviourToMarkdown,
+} from "./behaviour/markdown.js";
+export { behaviourToDOM } from "./behaviour/dom.js";
+
+// Discipline formatters
+export {
+  disciplineListToMarkdown,
+  disciplineToMarkdown,
+} from "./discipline/markdown.js";
+export { disciplineToDOM } from "./discipline/dom.js";
+
+// Grade formatters
+export { gradeListToMarkdown, gradeToMarkdown } from "./grade/markdown.js";
+export { gradeToDOM } from "./grade/dom.js";
+
+// Track formatters
+export { trackListToMarkdown, trackToMarkdown } from "./track/markdown.js";
+export { trackToDOM } from "./track/dom.js";