@forwardimpact/pathway 0.4.0 → 0.6.0

package/{app → src}/commands/track.js

@@ -14,7 +14,7 @@ import { createEntityCommand } from "./command-factory.js";
 import { trackToMarkdown } from "../formatters/track/markdown.js";
 import { sortTracksByName } from "../formatters/track/shared.js";
 import { formatTable } from "../lib/cli-output.js";
-import { getConceptEmoji } from "../model/levels.js";
+import { getConceptEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Format track summary output
@@ -63,5 +63,5 @@ export const runTrackCommand = createEntityCommand({
   sortItems: sortTracksByName,
   formatSummary,
   formatDetail,
-  emoji: "🛤️",
+  emojiIcon: "🛤️",
 });

package/{app → src}/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 → src}/components/checklist.js

@@ -6,7 +6,7 @@
  */
 
 import { div, span, details, summary } from "../lib/render.js";
-import { getCapabilityEmoji } from "../model/levels.js";
+import { getCapabilityEmoji } from "@forwardimpact/schema/levels";
 
 /**
  * Create checklist display grouped by capability

package/src/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 → src}/components/comparison-radar.js

@@ -13,7 +13,7 @@ import {
   getBehaviourMaturityIndex,
   formatLevel,
 } from "../lib/render.js";
-import { getCapabilityIndex } from "../model/levels.js";
+import { getCapabilityIndex } from "@forwardimpact/schema/levels";
 
 /**
  * Create a comparison skill radar chart

package/{app → src}/components/detail.js

@@ -23,7 +23,7 @@ import { formatLevel } from "../lib/render.js";
 import {
   SKILL_LEVEL_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
-} from "../model/levels.js";
+} from "@forwardimpact/schema/levels";
 
 /**
  * Create a detail page header

package/src/components/markdown-textarea.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 → src}/components/skill-matrix.js

@@ -18,7 +18,7 @@ import {
 import { getSkillLevelIndex } from "../lib/render.js";
 import { createLevelCell } from "./detail.js";
 import { createBadge } from "./card.js";
-import { SKILL_LEVEL_ORDER } from "../model/levels.js";
+import { SKILL_LEVEL_ORDER } from "@forwardimpact/schema/levels";
 import { truncate } from "../formatters/shared.js";
 
 /**

package/{app → src}/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 → src}/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 → src}/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;
   }
 }

package/{app → src}/css/components/surfaces.css

@@ -40,6 +40,30 @@
     font-size: var(--font-size-lg);
   }
 
+  .card-title-with-icon {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .card-title-with-icon .card-title {
+    margin: 0;
+  }
+
+  /* Tool icons */
+  .tool-icon {
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+  }
+
+  /* Tool name cell with icon */
+  .tool-name-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
   .card-description {
     color: var(--color-text-muted);
     margin: 0;
@@ -122,7 +146,7 @@
   .section-title {
     font-size: var(--font-size-xl);
     font-weight: 600;
-    margin: 0 0 var(--space-sm);
+    margin: 0 0 var(--space-md);
     color: var(--color-text);
   }
 
@@ -209,11 +233,33 @@
     font-weight: 500;
   }
 
+  /*
+   * List items: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
+   * Uses bottom-border only for 1px gaps between items (like table rows)
+   * Left/right borders and rounded corners on first/last items match table styling
+   */
   .list-item {
-    padding: var(--space-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-height: 60px;
+    padding: var(--space-md) var(--space-lg);
     background: var(--color-surface);
-    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
+    border-top: none;
+  }
+
+  /* First list-item in a sequence (handles heading before list items) */
+  .list-item:first-child,
+  :not(.list-item) + .list-item {
+    border-top: 1px solid var(--color-border);
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
+
+  .list-item:last-child {
+    border-bottom-left-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
   }
 
   /* Accent borders */

package/{app → src}/css/components/typography.css

@@ -111,8 +111,7 @@
 
   /* Code inline */
   .code-inline {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-family: var(--font-family-mono);
     font-size: 0.9em;
     background: var(--color-bg);
     padding: 0.1em 0.4em;