@forwardimpact/pathway 0.4.0 → 0.5.0

package/app/commands/behaviour.js

@@ -57,5 +57,5 @@ export const runBehaviourCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
-  emoji: "🧠",
+  emojiIcon: "🧠",
 });

package/app/commands/command-factory.js

@@ -24,7 +24,7 @@ import { capitalize } from "../formatters/shared.js";
  * @param {Function} config.formatDetail - Function to format detail output: (view, framework) => void
  * @param {Function} [config.sortItems] - Optional function to sort items: (items) => sortedItems
  * @param {Function} [config.validate] - Optional validation function: (data) => {errors: [], warnings: []}
- * @param {string} [config.emoji] - Optional emoji for the entity
+ * @param {string} [config.emojiIcon] - Optional emoji for the entity
  * @returns {Function} Command handler
  */
 export function createEntityCommand({
@@ -36,7 +36,7 @@ export function createEntityCommand({
   formatDetail,
   sortItems,
   validate,
-  _emoji = "",
+  _emojiIcon = "",
 }) {
   return async function runCommand({ data, args, options }) {
     const [id] = args;

package/app/commands/discipline.js

@@ -54,5 +54,5 @@ export const runDisciplineCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
-  emoji: "📋",
+  emojiIcon: "📋",
 });

package/app/commands/driver.js

@@ -90,5 +90,5 @@ export const runDriverCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
-  emoji: "🎯",
+  emojiIcon: "🎯",
 });

package/app/commands/grade.js

@@ -56,5 +56,5 @@ export const runGradeCommand = createEntityCommand({
   presentDetail: (entity) => entity,
   formatSummary,
   formatDetail,
-  emoji: "📊",
+  emojiIcon: "📊",
 });

package/app/commands/serve.js

@@ -94,7 +94,7 @@ export async function runServeCommand({ dataDir, options }) {
     framework = await loadFrameworkConfig(dataDir);
   } catch {
     // Fallback if framework config fails
-    framework = { emoji: "🚀", title: "Engineering Pathway" };
+    framework = { emojiIcon: "🚀", title: "Engineering Pathway" };
   }
 
   // Generate _index.yaml files before serving
@@ -136,7 +136,7 @@ export async function runServeCommand({ dataDir, options }) {
 
   server.listen(port, () => {
     console.log(`
-${framework.emoji} ${framework.title} running at http://localhost:${port}
+${framework.emojiIcon} ${framework.title} running at http://localhost:${port}
 📁 Data directory: ${dataDir}
 
 Press Ctrl+C to stop the server.

package/app/commands/site.js

@@ -38,6 +38,11 @@ const PUBLIC_ASSETS = [
   "formatters",
 ];
 
+/**
+ * Files and directories to copy from project root
+ */
+const ROOT_ASSETS = ["templates"];
+
 /**
  * Run the site command
  * @param {Object} params - Command parameters
@@ -53,11 +58,11 @@ export async function runSiteCommand({ dataDir, options }) {
   try {
     framework = await loadFrameworkConfig(dataDir);
   } catch {
-    framework = { emoji: "🚀", title: "Engineering Pathway" };
+    framework = { emojiIcon: "🚀", title: "Engineering Pathway" };
   }
 
   console.log(`
-${framework.emoji} Generating ${framework.title} static site...
+${framework.emojiIcon} Generating ${framework.title} static site...
 `);
 
   // Clean output directory if requested
@@ -93,6 +98,21 @@ ${framework.emoji} Generating ${framework.title} static site...
     }
   }
 
+  // Copy root assets (templates, etc.)
+  const rootDir = join(appDir, "..");
+  for (const asset of ROOT_ASSETS) {
+    const src = join(rootDir, asset);
+    const dest = join(outputDir, asset);
+
+    try {
+      await access(src);
+      await cp(src, dest, { recursive: true });
+      console.log(`   ✓ ${asset}`);
+    } catch (err) {
+      console.log(`   ⚠️  Skipped ${asset}: ${err.message}`);
+    }
+  }
+
   // Copy data directory (dereference symlinks to copy actual content)
   console.log("📁 Copying data files...");
   const dataOutputDir = join(outputDir, "data");

package/app/commands/skill.js

@@ -98,7 +98,7 @@ const baseSkillCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
-  emoji: "📚",
+  emojiIcon: "📚",
 });
 
 /**

package/app/commands/stage.js

@@ -115,5 +115,5 @@ export const runStageCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
-  emoji: "🔄",
+  emojiIcon: "🔄",
 });

package/app/commands/track.js

@@ -63,5 +63,5 @@ export const runTrackCommand = createEntityCommand({
   sortItems: sortTracksByName,
   formatSummary,
   formatDetail,
-  emoji: "🛤️",
+  emojiIcon: "🛤️",
 });

package/app/components/card.js

@@ -13,6 +13,7 @@ import { div, h3, p, span } from "../lib/render.js";
  * @param {HTMLElement[]} [options.badges] - Badges to display
  * @param {HTMLElement[]} [options.meta] - Meta information
  * @param {HTMLElement} [options.content] - Additional content
+ * @param {HTMLElement} [options.icon] - Icon element to display
  * @param {string} [options.className] - Additional CSS class
  * @returns {HTMLElement}
  */
@@ -23,13 +24,22 @@ export function createCard({
   badges = [],
   meta = [],
   content,
+  icon,
   className = "",
 }) {
   const isClickable = !!href;
 
+  const titleContent = icon
+    ? div(
+        { className: "card-title-with-icon" },
+        icon,
+        h3({ className: "card-title" }, title),
+      )
+    : h3({ className: "card-title" }, title);
+
   const cardHeader = div(
     { className: "card-header" },
-    h3({ className: "card-title" }, title),
+    titleContent,
     badges.length > 0 ? div({ className: "card-badges" }, ...badges) : null,
   );
 

package/app/components/code-display.js

@@ -0,0 +1,153 @@
+/**
+ * Code Display Component
+ *
+ * Reusable read-only code block with copy buttons and syntax highlighting.
+ * Used for markdown content, agent profiles, skills, and code snippets.
+ */
+
+/* global Prism */
+import { div, p, span, button } from "../lib/render.js";
+
+const COPY_LABEL = "📋 Copy";
+const COPY_HTML_LABEL = "Copy as HTML";
+
+/**
+ * Create a copy button that copies content to clipboard
+ * @param {string} content - The text content to copy
+ * @returns {HTMLElement}
+ */
+export function createCopyButton(content) {
+  const btn = button(
+    {
+      className: "btn btn-sm copy-btn",
+      onClick: async () => {
+        try {
+          await navigator.clipboard.writeText(content);
+          btn.textContent = "✓ Copied!";
+          btn.classList.add("copied");
+          setTimeout(() => {
+            btn.textContent = COPY_LABEL;
+            btn.classList.remove("copied");
+          }, 2000);
+        } catch (err) {
+          console.error("Failed to copy:", err);
+          btn.textContent = "Copy failed";
+          setTimeout(() => {
+            btn.textContent = COPY_LABEL;
+          }, 2000);
+        }
+      },
+    },
+    COPY_LABEL,
+  );
+  return btn;
+}
+
+/**
+ * Create a copy button that copies HTML to clipboard (for rich text pasting)
+ * @param {string} html - The HTML content to copy
+ * @returns {HTMLElement}
+ */
+function createCopyHtmlButton(html) {
+  const btn = button(
+    {
+      className: "btn btn-sm btn-secondary copy-btn",
+      onClick: async () => {
+        try {
+          const blob = new Blob([html], { type: "text/html" });
+          const clipboardItem = new ClipboardItem({ "text/html": blob });
+          await navigator.clipboard.write([clipboardItem]);
+          btn.textContent = "✓ Copied!";
+          btn.classList.add("copied");
+          setTimeout(() => {
+            btn.textContent = COPY_HTML_LABEL;
+            btn.classList.remove("copied");
+          }, 2000);
+        } catch (err) {
+          console.error("Failed to copy:", err);
+          btn.textContent = "Copy failed";
+          setTimeout(() => {
+            btn.textContent = COPY_HTML_LABEL;
+          }, 2000);
+        }
+      },
+    },
+    COPY_HTML_LABEL,
+  );
+  return btn;
+}
+
+/**
+ * Create a code display component with syntax highlighting and copy button
+ * @param {Object} options
+ * @param {string} options.content - The code content to display
+ * @param {string} [options.language="markdown"] - Language for syntax highlighting
+ * @param {string} [options.filename] - Optional filename to display in header
+ * @param {string} [options.description] - Optional description text
+ * @param {Function} [options.toHtml] - Function to convert content to HTML (enables "Copy as HTML" button)
+ * @param {number} [options.minHeight] - Optional minimum height in pixels
+ * @param {number} [options.maxHeight] - Optional maximum height in pixels
+ * @returns {HTMLElement}
+ */
+export function createCodeDisplay({
+  content,
+  language = "markdown",
+  filename,
+  description,
+  toHtml,
+  minHeight,
+  maxHeight,
+}) {
+  // Create highlighted code block
+  const pre = document.createElement("pre");
+  pre.className = "code-display";
+  if (minHeight) pre.style.minHeight = `${minHeight}px`;
+  if (maxHeight) {
+    pre.style.maxHeight = `${maxHeight}px`;
+    pre.style.overflowY = "auto";
+  }
+
+  const code = document.createElement("code");
+  if (language) {
+    code.className = `language-${language}`;
+  }
+  code.textContent = content;
+  pre.appendChild(code);
+
+  // Apply Prism highlighting if available and language specified
+  if (language && typeof Prism !== "undefined") {
+    Prism.highlightElement(code);
+  }
+
+  // Build header content
+  const headerLeft = [];
+  if (filename) {
+    headerLeft.push(span({ className: "code-display-filename" }, filename));
+  }
+  if (description) {
+    headerLeft.push(p({ className: "text-muted" }, description));
+  }
+
+  // Build buttons
+  const buttons = [createCopyButton(content)];
+  if (toHtml) {
+    buttons.push(createCopyHtmlButton(toHtml(content)));
+  }
+
+  // Only show header if there's content for it
+  const hasHeader = headerLeft.length > 0 || buttons.length > 0;
+
+  return div(
+    { className: "code-display-container" },
+    hasHeader
+      ? div(
+          { className: "code-display-header" },
+          headerLeft.length > 0
+            ? div({ className: "code-display-info" }, ...headerLeft)
+            : null,
+          div({ className: "button-group" }, ...buttons),
+        )
+      : null,
+    pre,
+  );
+}

package/app/components/markdown-textarea.js

@@ -1,47 +1,44 @@
 /**
- * Markdown Textarea Component
+ * Code Display Component
  *
- * Reusable read-only textarea with copy buttons for displaying markdown content.
- * Used by job descriptions and skill implementation patterns.
+ * Reusable read-only code block with copy buttons and syntax highlighting.
+ * Used for markdown content, agent profiles, skills, and code snippets.
  */
 
 /* global Prism */
-import { div, p, button } from "../lib/render.js";
+import { div, p, span, button } from "../lib/render.js";
+
+const COPY_LABEL = "📋 Copy";
+const COPY_HTML_LABEL = "Copy as HTML";
 
 /**
  * Create a copy button that copies content to clipboard
  * @param {string} content - The text content to copy
- * @param {string} label - Button label text
- * @param {string} [className="btn btn-primary"] - Button class
  * @returns {HTMLElement}
  */
-export function createCopyButton(
-  content,
-  label,
-  className = "btn btn-primary",
-) {
+export function createCopyButton(content) {
   const btn = button(
     {
-      className: `${className} copy-btn`,
+      className: "btn btn-sm copy-btn",
       onClick: async () => {
         try {
           await navigator.clipboard.writeText(content);
           btn.textContent = "✓ Copied!";
           btn.classList.add("copied");
           setTimeout(() => {
-            btn.textContent = label;
+            btn.textContent = COPY_LABEL;
             btn.classList.remove("copied");
           }, 2000);
         } catch (err) {
           console.error("Failed to copy:", err);
           btn.textContent = "Copy failed";
           setTimeout(() => {
-            btn.textContent = label;
+            btn.textContent = COPY_LABEL;
           }, 2000);
         }
       },
     },
-    label,
+    COPY_LABEL,
   );
   return btn;
 }
@@ -49,13 +46,12 @@ export function createCopyButton(
 /**
  * Create a copy button that copies HTML to clipboard (for rich text pasting)
  * @param {string} html - The HTML content to copy
- * @param {string} label - Button label text
  * @returns {HTMLElement}
  */
-export function createCopyHtmlButton(html, label) {
+function createCopyHtmlButton(html) {
   const btn = button(
     {
-      className: "btn btn-secondary copy-btn",
+      className: "btn btn-sm btn-secondary copy-btn",
       onClick: async () => {
         try {
           const blob = new Blob([html], { type: "text/html" });
@@ -64,69 +60,94 @@ export function createCopyHtmlButton(html, label) {
           btn.textContent = "✓ Copied!";
           btn.classList.add("copied");
           setTimeout(() => {
-            btn.textContent = label;
+            btn.textContent = COPY_HTML_LABEL;
             btn.classList.remove("copied");
           }, 2000);
         } catch (err) {
           console.error("Failed to copy:", err);
           btn.textContent = "Copy failed";
           setTimeout(() => {
-            btn.textContent = label;
+            btn.textContent = COPY_HTML_LABEL;
           }, 2000);
         }
       },
     },
-    label,
+    COPY_HTML_LABEL,
   );
   return btn;
 }
 
 /**
- * Create a markdown textarea with copy buttons
+ * Create a code display component with syntax highlighting and copy button
  * @param {Object} options
- * @param {string} options.markdown - The markdown content to display
- * @param {string} [options.description] - Optional description text above the textarea
- * @param {string} [options.copyLabel="Copy Markdown"] - Label for the copy button
- * @param {Function} [options.toHtml] - Optional function to convert markdown to HTML for rich copy
- * @param {string} [options.copyHtmlLabel="Copy as HTML"] - Label for the HTML copy button
- * @param {number} [options.minHeight=300] - Minimum height in pixels
+ * @param {string} options.content - The code content to display
+ * @param {string} [options.language="markdown"] - Language for syntax highlighting
+ * @param {string} [options.filename] - Optional filename to display in header
+ * @param {string} [options.description] - Optional description text
+ * @param {Function} [options.toHtml] - Function to convert content to HTML (enables "Copy as HTML" button)
+ * @param {number} [options.minHeight] - Optional minimum height in pixels
+ * @param {number} [options.maxHeight] - Optional maximum height in pixels
  * @returns {HTMLElement}
  */
-export function createMarkdownTextarea({
-  markdown,
+export function createCodeDisplay({
+  content,
+  language = "markdown",
+  filename,
   description,
-  copyLabel = "Copy Markdown",
   toHtml,
-  copyHtmlLabel = "Copy as HTML",
-  minHeight = 300,
+  minHeight,
+  maxHeight,
 }) {
   // Create highlighted code block
   const pre = document.createElement("pre");
-  pre.className = "markdown-display";
-  pre.style.minHeight = `${minHeight}px`;
+  pre.className = "code-display";
+  if (minHeight) pre.style.minHeight = `${minHeight}px`;
+  if (maxHeight) {
+    pre.style.maxHeight = `${maxHeight}px`;
+    pre.style.overflowY = "auto";
+  }
 
   const code = document.createElement("code");
-  code.className = "language-markdown";
-  code.textContent = markdown;
+  if (language) {
+    code.className = `language-${language}`;
+  }
+  code.textContent = content;
   pre.appendChild(code);
 
-  // Apply Prism highlighting if available
-  if (typeof Prism !== "undefined") {
+  // Apply Prism highlighting if available and language specified
+  if (language && typeof Prism !== "undefined") {
     Prism.highlightElement(code);
   }
 
-  const buttons = [createCopyButton(markdown, copyLabel)];
+  // Build header content
+  const headerLeft = [];
+  if (filename) {
+    headerLeft.push(span({ className: "code-display-filename" }, filename));
+  }
+  if (description) {
+    headerLeft.push(p({ className: "text-muted" }, description));
+  }
+
+  // Build buttons
+  const buttons = [createCopyButton(content)];
   if (toHtml) {
-    buttons.push(createCopyHtmlButton(toHtml(markdown), copyHtmlLabel));
+    buttons.push(createCopyHtmlButton(toHtml(content)));
   }
 
+  // Only show header if there's content for it
+  const hasHeader = headerLeft.length > 0 || buttons.length > 0;
+
   return div(
-    { className: "markdown-textarea-container" },
-    div(
-      { className: "markdown-textarea-header" },
-      description ? p({ className: "text-muted" }, description) : null,
-      div({ className: "button-group" }, ...buttons),
-    ),
+    { className: "code-display-container" },
+    hasHeader
+      ? div(
+          { className: "code-display-header" },
+          headerLeft.length > 0
+            ? div({ className: "code-display-info" }, ...headerLeft)
+            : null,
+          div({ className: "button-group" }, ...buttons),
+        )
+      : null,
     pre,
   );
 }

package/app/css/bundles/app.css

@@ -38,3 +38,17 @@
 @import "../pages/self-assessment.css" layer(pages);
 @import "../pages/assessment-results.css" layer(pages);
 @import "../pages/progress-builder.css" layer(pages);
+
+/**
+ * Prism overrides (unlayered to beat Prism's unlayered CSS)
+ */
+pre.code-display[class*="language-"] {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--color-surface);
+}
+
+pre.code-display > code[class*="language-"] {
+  font-family: inherit;
+  font-size: inherit;
+}

package/app/css/components/badges.css

@@ -5,10 +5,13 @@
  */
 
 @layer components {
-  /* Base badge */
+  /* Base badge - 28px height matches tool icons for consistent row heights */
   .badge {
-    display: inline-block;
-    padding: var(--space-xs) var(--space-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-md);
     font-size: var(--font-size-xs);
     font-weight: 500;
@@ -78,10 +81,13 @@
     color: #5b21b6;
   }
 
-  /* Level badge base style */
+  /* Level badge base style - 28px height matches tool icons */
   .level-badge {
-    display: inline-block;
-    padding: var(--space-xs) var(--space-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     font-weight: 500;
@@ -142,11 +148,12 @@
     padding: var(--space-xs) var(--space-sm);
   }
 
-  /* Modifier tags - consolidated definition */
+  /* Modifier tags - 28px height matches badges and tool icons */
   .modifier {
     display: inline-flex;
     align-items: center;
-    padding: var(--space-xs) var(--space-sm);
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-sm);
     font-size: var(--font-size-sm);
     font-weight: 600;

package/app/css/components/forms.css

@@ -103,14 +103,14 @@
     color: var(--color-primary);
   }
 
-  /* Markdown display - read-only code block with copy buttons */
-  .markdown-textarea-container {
+  /* Code display - unified component for code/markdown with copy buttons */
+  .code-display-container {
     display: flex;
     flex-direction: column;
-    gap: var(--space-md);
+    gap: var(--space-sm);
   }
 
-  .markdown-textarea-header {
+  .code-display-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -118,21 +118,32 @@
     gap: var(--space-md);
   }
 
-  .markdown-textarea-header .text-muted {
-    margin: 0;
+  .code-display-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
     flex: 1;
     min-width: 200px;
   }
 
-  .markdown-display {
+  .code-display-info .text-muted {
+    margin: 0;
+  }
+
+  .code-display-filename {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+  }
+
+  .code-display {
     width: 100%;
     margin: 0;
     padding: var(--space-md);
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
     line-height: 1.6;
-    background-color: var(--color-surface) !important;
+    background-color: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     overflow: auto;
@@ -141,10 +152,9 @@
     word-wrap: break-word;
   }
 
-  .markdown-display code {
+  .code-display code {
     background: transparent;
     padding: 0;
-    font-size: inherit;
     color: inherit;
   }
 }