@forwardimpact/pathway 0.4.0 → 0.6.0

package/{app → src}/formatters/skill/dom.js

@@ -18,8 +18,9 @@ import {
 } from "../../lib/render.js";
 import { createBackLink } from "../../components/nav.js";
 import { createLevelCell } from "../../components/detail.js";
-import { createMarkdownTextarea } from "../../components/markdown-textarea.js";
-import { SKILL_LEVEL_ORDER } from "../../model/levels.js";
+import { createCodeDisplay } from "../../components/code-display.js";
+import { createToolIcon } from "../../lib/card-mappers.js";
+import { SKILL_LEVEL_ORDER } from "@forwardimpact/schema/levels";
 import { prepareSkillDetail } from "./shared.js";
 import { createJsonLdScript, skillToJsonLd } from "../json-ld.js";
 
@@ -32,11 +33,19 @@ import { createJsonLdScript, skillToJsonLd } from "../json-ld.js";
  * @param {Array} context.drivers - All drivers
  * @param {Array} context.capabilities - Capability entities
  * @param {boolean} [context.showBackLink=true] - Whether to show back navigation link
+ * @param {boolean} [context.showToolsAndPatterns=true] - Whether to show recommended tools and implementation patterns
  * @returns {HTMLElement}
  */
 export function skillToDOM(
   skill,
-  { disciplines, tracks, drivers, capabilities, showBackLink = true } = {},
+  {
+    disciplines,
+    tracks,
+    drivers,
+    capabilities,
+    showBackLink = true,
+    showToolsAndPatterns = true,
+  } = {},
 ) {
   const view = prepareSkillDetail(skill, {
     disciplines,
@@ -98,60 +107,6 @@ export function skillToDOM(
       ),
     ),
 
-    // Recommended Tools
-    view.toolReferences.length > 0
-      ? div(
-          { className: "detail-section" },
-          heading2({ className: "section-title" }, "Recommended Tools"),
-          table(
-            { className: "tools-table" },
-            thead({}, tr({}, th({}, "Tool"), th({}, "Use When"))),
-            tbody(
-              {},
-              ...view.toolReferences.map((tool) =>
-                tr(
-                  {},
-                  td(
-                    {},
-                    tool.url
-                      ? a(
-                          {
-                            href: tool.url,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                          },
-                          tool.name,
-                        )
-                      : tool.name,
-                  ),
-                  td({}, tool.useWhen),
-                ),
-              ),
-            ),
-          ),
-          showBackLink
-            ? p(
-                { className: "see-all-link" },
-                a({ href: "#/tool" }, "See all tools →"),
-              )
-            : null,
-        )
-      : null,
-
-    // Implementation Reference
-    view.implementationReference
-      ? div(
-          { className: "detail-section" },
-          heading2({ className: "section-title" }, "Implementation Patterns"),
-          createMarkdownTextarea({
-            markdown: view.implementationReference,
-            description:
-              "Project-specific implementation guidance for this skill.",
-            minHeight: 450,
-          }),
-        )
-      : null,
-
     // Used in Disciplines and Linked to Drivers in two columns
     view.relatedDisciplines.length > 0 || view.relatedDrivers.length > 0
       ? div(
@@ -222,5 +177,62 @@ export function skillToDOM(
           ),
         )
       : null,
+
+    // Recommended Tools
+    showToolsAndPatterns && view.toolReferences.length > 0
+      ? div(
+          { className: "detail-section" },
+          heading2({ className: "section-title" }, "Recommended Tools"),
+          table(
+            { className: "tools-table" },
+            thead({}, tr({}, th({}, "Tool"), th({}, "Use When"))),
+            tbody(
+              {},
+              ...view.toolReferences.map((tool) =>
+                tr(
+                  {},
+                  td(
+                    { className: "tool-name-cell" },
+                    tool.simpleIcon
+                      ? createToolIcon(tool.simpleIcon, tool.name)
+                      : null,
+                    tool.url
+                      ? a(
+                          {
+                            href: tool.url,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                          },
+                          tool.name,
+                        )
+                      : tool.name,
+                  ),
+                  td({}, tool.useWhen),
+                ),
+              ),
+            ),
+          ),
+          showBackLink
+            ? p(
+                { className: "see-all-link" },
+                a({ href: "#/tool" }, "See all tools →"),
+              )
+            : null,
+        )
+      : null,
+
+    // Implementation Reference
+    showToolsAndPatterns && view.implementationReference
+      ? div(
+          { className: "detail-section" },
+          heading2({ className: "section-title" }, "Implementation Patterns"),
+          createCodeDisplay({
+            content: view.implementationReference,
+            description:
+              "Project-specific implementation guidance for this skill.",
+            minHeight: 450,
+          }),
+        )
+      : null,
   );
 }

package/{app → src}/formatters/skill/markdown.js

@@ -4,7 +4,7 @@
 
 import { tableToMarkdown, capitalize } from "../shared.js";
 import { prepareSkillsList, prepareSkillDetail } from "./shared.js";
-import { getConceptEmoji } from "../../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Format skill list as markdown

package/{app → src}/formatters/skill/shared.js

@@ -7,8 +7,8 @@
 import {
   groupSkillsByCapability,
   getCapabilityEmoji,
-} from "../../model/levels.js";
-import { getSkillTypeForDiscipline } from "../../model/derivation.js";
+} from "@forwardimpact/schema/levels";
+import { getSkillTypeForDiscipline } from "@forwardimpact/model/derivation";
 import { truncate } from "../shared.js";
 
 /**
@@ -127,7 +127,9 @@ export function prepareSkillDetail(
     relatedDisciplines,
     relatedTracks,
     relatedDrivers,
-    toolReferences: skill.toolReferences || [],
+    toolReferences: (skill.toolReferences || [])
+      .slice()
+      .sort((a, b) => a.name.localeCompare(b.name)),
     implementationReference: skill.implementationReference || null,
   };
 }

package/{app → src}/formatters/stage/microdata.js

@@ -32,7 +32,7 @@ export function stageListToMicrodata(stages) {
           ? `→ ${stage.handoffs.map((h) => h.target).join(", ")}`
           : "";
       return `${openTag("article", { itemtype: "Stage", itemid: `#${stage.id}` })}
-${prop("h2", "name", `${stage.emoji} ${stage.name}`)}
+${prop("h2", "name", `${stage.emojiIcon} ${stage.name}`)}
 ${prop("p", "description", stage.truncatedDescription)}
 ${handoffText ? `<p>Handoffs: ${handoffText}</p>` : ""}
 </article>`;
@@ -100,7 +100,7 @@ ${prop("p", "prompt", h.prompt)}
 ${openTag("article", { itemtype: "Stage", itemid: `#${view.id}` })}
 ${prop("h1", "name", view.name)}
 ${metaTag("id", view.id)}
-${stage.emoji ? metaTag("emoji", stage.emoji) : ""}
+${stage.emojiIcon ? metaTag("emojiIcon", stage.emojiIcon) : ""}
 ${prop("p", "description", view.description)}
 ${sections.join("\n")}
 </article>

package/{app → src}/formatters/stage/shared.js

@@ -10,7 +10,7 @@ import { truncate } from "../shared.js";
  * @typedef {Object} StageListItem
  * @property {string} id
  * @property {string} name
- * @property {string} emoji
+ * @property {string} emojiIcon
  * @property {string} description
  * @property {string} truncatedDescription
  * @property {Array<{target: string, label: string}>} handoffs
@@ -27,7 +27,7 @@ export function prepareStagesList(stages, descriptionLimit = 150) {
     return {
       id: stage.id,
       name: stage.name,
-      emoji: stage.emoji,
+      emojiIcon: stage.emojiIcon,
       description: stage.description,
       truncatedDescription: truncate(stage.description, descriptionLimit),
       handoffs: (stage.handoffs || []).map((h) => ({
@@ -80,5 +80,5 @@ export function prepareStageDetail(stage) {
  */
 export function getStageEmoji(stages, stageId) {
   const stage = stages.find((s) => s.id === stageId);
-  return stage?.emoji;
+  return stage?.emojiIcon;
 }

package/{app → src}/formatters/tool/shared.js

@@ -16,6 +16,7 @@
  * @typedef {Object} AggregatedTool
  * @property {string} name
  * @property {string} [url]
+ * @property {string} [simpleIcon]
  * @property {string} description
  * @property {ToolUsage[]} usages
  */
@@ -42,10 +43,15 @@ export function aggregateTools(skills) {
       const existing = toolMap.get(tool.name);
       if (existing) {
         existing.usages.push(usage);
+        // Prefer simpleIcon from first occurrence that has one
+        if (!existing.simpleIcon && tool.simpleIcon) {
+          existing.simpleIcon = tool.simpleIcon;
+        }
       } else {
         toolMap.set(tool.name, {
           name: tool.name,
           url: tool.url,
+          simpleIcon: tool.simpleIcon,
           description: tool.description,
           usages: [usage],
         });

package/{app → src}/formatters/track/dom.js

@@ -15,7 +15,7 @@ import {
   createBehaviourModifierTable,
   createSkillModifierTableWithCapabilities,
 } from "../../components/modifier-table.js";
-import { getConceptEmoji } from "../../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 import { prepareTrackDetail } from "./shared.js";
 import { createJsonLdScript, trackToJsonLd } from "../json-ld.js";
 

package/{app → src}/formatters/track/markdown.js

@@ -4,7 +4,7 @@
 
 import { tableToMarkdown } from "../shared.js";
 import { prepareTracksList, prepareTrackDetail } from "./shared.js";
-import { getConceptEmoji } from "../../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Format track list as markdown

package/{app → src}/formatters/track/shared.js

@@ -4,7 +4,10 @@
  * Shared utilities for formatting track data across DOM and markdown outputs.
  */
 
-import { isCapability, getSkillsByCapability } from "../../model/modifiers.js";
+import {
+  isCapability,
+  getSkillsByCapability,
+} from "@forwardimpact/model/modifiers";
 import { truncate } from "../shared.js";
 
 /**

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

@@ -25,7 +25,10 @@ import {
 } from "./lib/render.js";
 
 // Import model functions
-import { getCapabilityOrder, getConceptEmoji } from "./model/levels.js";
+import {
+  getCapabilityOrder,
+  getConceptEmoji,
+} from "@forwardimpact/schema/levels";
 
 // Import formatters
 import {
@@ -41,17 +44,17 @@ import { sortTracksByName } from "./formatters/track/shared.js";
 /**
  * Create a chapter cover page
  * @param {Object} params
- * @param {string} params.emoji - Chapter emoji
+ * @param {string} params.emojiIcon - Chapter emoji
  * @param {string} params.title - Chapter title
  * @param {string} params.description - Chapter description
  * @returns {HTMLElement}
  */
-function createChapterCover({ emoji, title, description }) {
+function createChapterCover({ emojiIcon, title, description }) {
   return div(
     { className: "chapter-cover" },
     h1(
       { className: "chapter-title" },
-      emoji,
+      emojiIcon,
       " ",
       span({ className: "gradient-text" }, title),
     ),
@@ -111,7 +114,7 @@ function renderIndex(data) {
       { className: "page-header" },
       heading1(
         { className: "page-title" },
-        `${framework.emoji} ${framework.title} Handouts`,
+        `${framework.emojiIcon} ${framework.title} Handouts`,
       ),
       p(
         { className: "page-description" },
@@ -190,7 +193,7 @@ function renderDriverHandout(data) {
   const content = div(
     {},
     createChapterCover({
-      emoji: getConceptEmoji(framework, "driver"),
+      emojiIcon: getConceptEmoji(framework, "driver"),
       title: framework.entityDefinitions.driver.title,
       description: framework.entityDefinitions.driver.description,
     }),
@@ -227,13 +230,14 @@ function renderSkillHandout(data) {
       drivers: data.drivers,
       capabilities: data.capabilities,
       showBackLink: false,
+      showToolsAndPatterns: false,
     });
   });
 
   const content = div(
     {},
     createChapterCover({
-      emoji: getConceptEmoji(framework, "skill"),
+      emojiIcon: getConceptEmoji(framework, "skill"),
       title: framework.entityDefinitions.skill.title,
       description: framework.entityDefinitions.skill.description,
     }),
@@ -261,7 +265,7 @@ function renderBehaviourHandout(data) {
   const content = div(
     {},
     createChapterCover({
-      emoji: getConceptEmoji(framework, "behaviour"),
+      emojiIcon: getConceptEmoji(framework, "behaviour"),
       title: framework.entityDefinitions.behaviour.title,
       description: framework.entityDefinitions.behaviour.description,
     }),
@@ -322,7 +326,7 @@ function renderJobHandout(data) {
     {},
     // Disciplines chapter
     createChapterCover({
-      emoji: getConceptEmoji(framework, "discipline"),
+      emojiIcon: getConceptEmoji(framework, "discipline"),
       title: framework.entityDefinitions.discipline.title,
       description: framework.entityDefinitions.discipline.description,
     }),
@@ -330,7 +334,7 @@ function renderJobHandout(data) {
 
     // Grades chapter (moved before Tracks)
     createChapterCover({
-      emoji: getConceptEmoji(framework, "grade"),
+      emojiIcon: getConceptEmoji(framework, "grade"),
       title: framework.entityDefinitions.grade.title,
       description: framework.entityDefinitions.grade.description,
     }),
@@ -338,7 +342,7 @@ function renderJobHandout(data) {
 
     // Tracks chapter (moved after Grades)
     createChapterCover({
-      emoji: getConceptEmoji(framework, "track"),
+      emojiIcon: getConceptEmoji(framework, "track"),
       title: framework.entityDefinitions.track.title,
       description: framework.entityDefinitions.track.description,
     }),
@@ -393,7 +397,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/src/handout.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Engineering Pathway - Handout View</title>
+    <link rel="stylesheet" href="css/bundles/handout.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "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>
+  </head>
+  <body class="slide-view handout-view">
+    <header
+      id="page-brand-header"
+      class="page-brand-header"
+      style="display: none"
+    ></header>
+    <div id="slide-loading" class="slide-loading">
+      <p>Loading...</p>
+    </div>
+    <main id="handout-content"></main>
+    <script type="module" src="handout-main.js"></script>
+  </body>
+</html>

package/{app → src}/index.html

@@ -4,17 +4,38 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Engineering Pathway</title>
-    <link rel="stylesheet" href="css/bundles/app.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"
     />
+    <link rel="stylesheet" href="css/bundles/app.css" />
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markdown.min.js"></script>
     <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>

package/{app → src}/lib/card-mappers.js

@@ -7,7 +7,7 @@
 
 import { createBadge } from "../components/card.js";
 import { formatLevel } from "./render.js";
-import { getCapabilityEmoji } from "../model/levels.js";
+import { getCapabilityEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Create an external link element styled as a badge
@@ -181,13 +181,40 @@ export function toolToCardConfig(tool, capabilities) {
   // Create skills list as card content
   const skillsList = createSkillsList(tool.usages, capabilities);
 
+  // Create icon element if available
+  const icon = tool.simpleIcon
+    ? createToolIcon(tool.simpleIcon, tool.name)
+    : null;
+
   return {
     title: tool.name,
     description: tool.description,
     // Docs link in header badges (upper right)
     badges: tool.url ? [createExternalLink("Docs →", tool.url)] : [],
     content: skillsList,
+    icon,
+  };
+}
+
+/**
+ * Create a tool icon element using Simple Icons CDN
+ * @param {string} slug - Simple Icons slug (e.g., 'terraform', 'docker')
+ * @param {string} name - Tool name for alt text
+ * @returns {HTMLElement}
+ */
+export function createToolIcon(slug, name) {
+  const img = document.createElement("img");
+  // Use black color for consistent monochrome appearance
+  img.src = `https://cdn.simpleicons.org/${slug}/000000`;
+  img.alt = `${name} icon`;
+  img.className = "tool-icon";
+  img.width = 28;
+  img.height = 28;
+  // Gracefully handle missing icons
+  img.onerror = () => {
+    img.style.display = "none";
   };
+  return img;
 }
 
 /**

package/{app → src}/lib/job-cache.js

@@ -5,7 +5,7 @@
  * Provides consistent key generation and get-or-create pattern.
  */
 
-import { deriveJob } from "../model/derivation.js";
+import { deriveJob } from "@forwardimpact/model/derivation";
 
 /** @type {Map<string, Object>} */
 const cache = new Map();

package/{app → src}/lib/render.js

@@ -5,7 +5,7 @@
 import {
   SKILL_LEVEL_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
-} from "../model/levels.js";
+} from "@forwardimpact/schema/levels";
 
 /**
  * Get the main content container