@forwardimpact/pathway 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forwardimpact/pathway",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Career progression web app and CLI for exploring roles and generating agent teams",
   "license": "Apache-2.0",
   "repository": {
@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "@forwardimpact/map": "^0.11.0",
-    "@forwardimpact/libpathway": "^3.0.0",
+    "@forwardimpact/libskill": "^3.0.0",
+    "@forwardimpact/libui": "^1.0.0",
     "mustache": "^4.2.0",
     "simple-icons": "^16.7.0",
     "yaml": "^2.3.4"

package/src/commands/agent.js

@@ -42,7 +42,7 @@ import {
   buildAgentIndex,
   getDisciplineAbbreviation,
   toKebabCase,
-} from "@forwardimpact/libpathway";
+} from "@forwardimpact/libskill";
 import { formatAgentProfile } from "../formatters/agent/profile.js";
 import {
   formatAgentSkill,
@@ -199,7 +199,7 @@ function showAgentSummary(data, agentData, skillsWithAgent) {
  */
 function listAgentCombinations(data, agentData, verbose = false) {
   if (!verbose) {
-    // Clean output for piping
+    // Descriptive output for piping and AI agent discovery
     for (const discipline of agentData.disciplines) {
       for (const track of agentData.tracks) {
         const humanDiscipline = data.disciplines.find(
@@ -209,7 +209,11 @@ function listAgentCombinations(data, agentData, verbose = false) {
         if (humanDiscipline && humanTrack) {
           const abbrev = getDisciplineAbbreviation(discipline.id);
           const agentName = `${abbrev}-${toKebabCase(track.id)}`;
-          console.log(`${agentName} ${discipline.id} ${track.id}`);
+          const specName =
+            humanDiscipline.specialization || humanDiscipline.id;
+          console.log(
+            `${agentName} ${discipline.id} ${track.id}, ${specName} (${humanTrack.name})`,
+          );
         }
       }
     }

package/src/commands/behaviour.js

@@ -14,6 +14,15 @@ import { createEntityCommand } from "./command-factory.js";
 import { behaviourToMarkdown } from "../formatters/behaviour/markdown.js";
 import { formatTable } from "../lib/cli-output.js";
 
+/**
+ * Format behaviour list item for --list output
+ * @param {Object} behaviour - Behaviour entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(behaviour) {
+  return `${behaviour.id}, ${behaviour.name}`;
+}
+
 /**
  * Format behaviour summary output
  * @param {Array} behaviours - Raw behaviour entities
@@ -34,7 +43,7 @@ function formatSummary(behaviours, data) {
 
   console.log(formatTable(["ID", "Name", "Drivers"], rows));
   console.log(`\nTotal: ${behaviours.length} behaviours`);
-  console.log(`\nRun 'npx pathway behaviour --list' for IDs`);
+  console.log(`\nRun 'npx pathway behaviour --list' for IDs and names`);
   console.log(`Run 'npx pathway behaviour <id>' for details\n`);
 }
 
@@ -57,5 +66,6 @@ export const runBehaviourCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "🧠",
 });

package/src/commands/build.js

@@ -42,7 +42,8 @@ function resolvePackageLib(packageName) {
 }
 
 const mapLibDir = resolvePackageLib("@forwardimpact/map");
-const modelLibDir = resolvePackageLib("@forwardimpact/libpathway");
+const modelLibDir = resolvePackageLib("@forwardimpact/libskill");
+const uiLibDir = resolvePackageLib("@forwardimpact/libui");
 
 /**
  * Files and directories to copy from app/
@@ -141,13 +142,21 @@ ${framework.emojiIcon} Generating ${framework.title} static site...
     }
   }
 
-  // Copy @forwardimpact/map and @forwardimpact/libpathway packages
+  // Copy @forwardimpact/map and @forwardimpact/libskill packages
   // These are needed by the browser's import map
   console.log("📚 Copying package dependencies...");
   await cp(mapLibDir, join(outputDir, "map/lib"), { recursive: true });
   console.log(`   ✓ map/lib`);
   await cp(modelLibDir, join(outputDir, "model/lib"), { recursive: true });
   console.log(`   ✓ model/lib`);
+  // Copy libui JS (src/) and CSS (src/css/)
+  await cp(uiLibDir, join(outputDir, "ui/lib"), { recursive: true });
+  // CSS is within uiLibDir/css/ so it's already copied as ui/lib/css/
+  // Create ui/css/ symlink-like copy for the CSS @import paths
+  await cp(join(uiLibDir, "css"), join(outputDir, "ui/css"), {
+    recursive: true,
+  });
+  console.log(`   ✓ ui/lib + ui/css`);
 
   // Copy data directory (dereference symlinks to copy actual content)
   console.log("📁 Copying data files...");

package/src/commands/command-factory.js

@@ -22,6 +22,7 @@ import { capitalize } from "../formatters/shared.js";
  * @param {Function} config.presentDetail - Function to present detail: (entity, data, options) => view
  * @param {Function} config.formatSummary - Function to format summary output: (items, data) => void
  * @param {Function} config.formatDetail - Function to format detail output: (view, framework) => void
+ * @param {Function} [config.formatListItem] - Optional function to format list item: (item) => string (defaults to item.id)
  * @param {Function} [config.sortItems] - Optional function to sort items: (items) => sortedItems
  * @param {Function} [config.validate] - Optional validation function: (data) => {errors: [], warnings: []}
  * @param {string} [config.emojiIcon] - Optional emoji for the entity
@@ -34,6 +35,7 @@ export function createEntityCommand({
   presentDetail,
   formatSummary,
   formatDetail,
+  formatListItem,
   sortItems,
   validate,
   _emojiIcon = "",
@@ -48,10 +50,10 @@ export function createEntityCommand({
       return handleValidate({ data, entityName, pluralName, validate });
     }
 
-    // --list: Output clean newline-separated IDs for piping
+    // --list: Output descriptive comma-separated lines for piping and AI agent discovery
     if (options.list) {
       for (const item of items) {
-        console.log(item.id);
+        console.log(formatListItem ? formatListItem(item) : item.id);
       }
       return;
     }

package/src/commands/dev.js

@@ -31,7 +31,8 @@ function resolvePackageLib(packageName) {
 }
 
 const mapLibDir = resolvePackageLib("@forwardimpact/map");
-const modelLibDir = resolvePackageLib("@forwardimpact/libpathway");
+const modelLibDir = resolvePackageLib("@forwardimpact/libskill");
+const uiLibDir = resolvePackageLib("@forwardimpact/libui");
 
 const MIME_TYPES = {
   ".html": "text/html; charset=utf-8",
@@ -138,8 +139,14 @@ export async function runDevCommand({ dataDir, options }) {
       // Serve @forwardimpact/map package files (resolved via Node module resolution)
       filePath = join(mapLibDir, pathname.slice(9));
     } else if (pathname.startsWith("/model/lib/")) {
-      // Serve @forwardimpact/libpathway package files (resolved via Node module resolution)
+      // Serve @forwardimpact/libskill package files (resolved via Node module resolution)
       filePath = join(modelLibDir, pathname.slice(11));
+    } else if (pathname.startsWith("/ui/lib/")) {
+      // Serve @forwardimpact/libui package JS files
+      filePath = join(uiLibDir, pathname.slice(8));
+    } else if (pathname.startsWith("/ui/css/")) {
+      // Serve @forwardimpact/libui package CSS files
+      filePath = join(uiLibDir, "css", pathname.slice(8));
     } else if (pathname === "/" || pathname === "") {
       // Serve index.html for root
       filePath = join(publicDir, "index.html");

package/src/commands/discipline.js

@@ -14,6 +14,15 @@ import { createEntityCommand } from "./command-factory.js";
 import { disciplineToMarkdown } from "../formatters/discipline/markdown.js";
 import { formatTable } from "../lib/cli-output.js";
 
+/**
+ * Format discipline list item for --list output
+ * @param {Object} discipline - Discipline entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(discipline) {
+  return `${discipline.id}, ${discipline.specialization || discipline.id}, ${discipline.roleTitle || discipline.id}`;
+}
+
 /**
  * Format discipline summary output
  * @param {Array} disciplines - Raw discipline entities
@@ -23,14 +32,21 @@ function formatSummary(disciplines) {
 
   const rows = disciplines.map((d) => [
     d.id,
+    d.specialization || d.id,
+    d.roleTitle || d.id,
     d.coreSkills?.length || 0,
     d.supportingSkills?.length || 0,
     d.broadSkills?.length || 0,
   ]);
 
-  console.log(formatTable(["ID", "Core", "Supporting", "Broad"], rows));
+  console.log(
+    formatTable(
+      ["ID", "Specialization", "Role Title", "Core", "Supporting", "Broad"],
+      rows,
+    ),
+  );
   console.log(`\nTotal: ${disciplines.length} disciplines`);
-  console.log(`\nRun 'npx pathway discipline --list' for IDs`);
+  console.log(`\nRun 'npx pathway discipline --list' for IDs and names`);
   console.log(`Run 'npx pathway discipline <id>' for details\n`);
 }
 
@@ -54,5 +70,6 @@ export const runDisciplineCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "📋",
 });

package/src/commands/driver.js

@@ -20,6 +20,15 @@ import {
 } from "../lib/cli-output.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 
+/**
+ * Format driver list item for --list output
+ * @param {Object} driver - Driver entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(driver) {
+  return `${driver.id}, ${driver.name}`;
+}
+
 /**
  * Format driver summary output
  * @param {Array} drivers - Raw driver entities
@@ -43,7 +52,7 @@ function formatSummary(drivers, data) {
 
   console.log(formatTable(["ID", "Name", "Skills", "Behaviours"], rows));
   console.log(`\nTotal: ${drivers.length} drivers`);
-  console.log(`\nRun 'npx pathway driver --list' for IDs`);
+  console.log(`\nRun 'npx pathway driver --list' for IDs and names`);
   console.log(`Run 'npx pathway driver <id>' for details\n`);
 }
 
@@ -90,5 +99,6 @@ export const runDriverCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "🎯",
 });

package/src/commands/job.js

@@ -14,14 +14,14 @@
  *   npx pathway job --validate                               # Validation checks
  */
 
-import { prepareJobDetail } from "@forwardimpact/libpathway/job";
+import { prepareJobDetail } from "@forwardimpact/libskill/job";
 import { jobToMarkdown } from "../formatters/job/markdown.js";
-import { generateAllJobs } from "@forwardimpact/libpathway/derivation";
+import { generateJobTitle, generateAllJobs } from "@forwardimpact/libskill/derivation";
 import { formatTable } from "../lib/cli-output.js";
 import {
   deriveChecklist,
   formatChecklistMarkdown,
-} from "@forwardimpact/libpathway/checklist";
+} from "@forwardimpact/libskill/checklist";
 import { loadJobTemplate } from "../lib/template-loader.js";
 import { toolkitToPlainList } from "../formatters/toolkit/markdown.js";
 
@@ -54,13 +54,16 @@ export async function runJobCommand({ data, args, options, dataDir }) {
     validationRules: data.framework.validationRules,
   });
 
-  // --list: Output clean lines for piping (discipline level track format)
+  // --list: Output descriptive comma-separated lines for piping and AI agent discovery
   if (options.list) {
     for (const job of jobs) {
+      const title = generateJobTitle(job.discipline, job.level, job.track);
       if (job.track) {
-        console.log(`${job.discipline.id} ${job.level.id} ${job.track.id}`);
+        console.log(
+          `${job.discipline.id} ${job.level.id} ${job.track.id}, ${title}`,
+        );
       } else {
-        console.log(`${job.discipline.id} ${job.level.id}`);
+        console.log(`${job.discipline.id} ${job.level.id}, ${title}`);
       }
     }
     return;
@@ -70,17 +73,27 @@ export async function runJobCommand({ data, args, options, dataDir }) {
   if (args.length === 0) {
     console.log(`\n💼 Jobs\n`);
 
-    // Count by discipline
+    // Count by discipline with name
     const byDiscipline = {};
     for (const job of jobs) {
-      byDiscipline[job.discipline.id] =
-        (byDiscipline[job.discipline.id] || 0) + 1;
+      const key = job.discipline.id;
+      if (!byDiscipline[key]) {
+        byDiscipline[key] = {
+          name: job.discipline.specialization || job.discipline.id,
+          count: 0,
+        };
+      }
+      byDiscipline[key].count++;
     }
 
-    const rows = Object.entries(byDiscipline).map(([id, count]) => [id, count]);
-    console.log(formatTable(["Discipline", "Combinations"], rows));
+    const rows = Object.entries(byDiscipline).map(([id, info]) => [
+      id,
+      info.name,
+      info.count,
+    ]);
+    console.log(formatTable(["ID", "Specialization", "Combinations"], rows));
     console.log(`\nTotal: ${jobs.length} valid job combinations`);
-    console.log(`\nRun 'npx pathway job --list' for all combinations`);
+    console.log(`\nRun 'npx pathway job --list' for all combinations with titles`);
     console.log(
       `Run 'npx pathway job <discipline> <level> [--track=<track>]' for details\n`,
     );

package/src/commands/level.js

@@ -16,6 +16,15 @@ import { formatTable } from "../lib/cli-output.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 import { capitalize } from "../formatters/shared.js";
 
+/**
+ * Format level list item for --list output
+ * @param {Object} level - Level entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(level) {
+  return `${level.id}, ${level.professionalTitle || level.id}, ${level.managementTitle || level.id}`;
+}
+
 /**
  * Format level summary output
  * @param {Array} levels - Raw level entities
@@ -29,14 +38,20 @@ function formatSummary(levels, data) {
 
   const rows = levels.map((g) => [
     g.id,
-    g.displayName || g.id,
+    g.professionalTitle || g.displayName || g.id,
+    g.managementTitle || "-",
     g.typicalExperienceRange || "-",
     capitalize(g.baseSkillProficiencies?.primary || "-"),
   ]);
 
-  console.log(formatTable(["ID", "Name", "Experience", "Primary Level"], rows));
+  console.log(
+    formatTable(
+      ["ID", "Professional Title", "Management Title", "Experience", "Primary Level"],
+      rows,
+    ),
+  );
   console.log(`\nTotal: ${levels.length} levels`);
-  console.log(`\nRun 'npx pathway level --list' for IDs`);
+  console.log(`\nRun 'npx pathway level --list' for IDs and titles`);
   console.log(`Run 'npx pathway level <id>' for details\n`);
 }
 
@@ -56,5 +71,6 @@ export const runLevelCommand = createEntityCommand({
   presentDetail: (entity) => entity,
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "📊",
 });

package/src/commands/skill.js

@@ -16,7 +16,7 @@ import { skillToMarkdown } from "../formatters/skill/markdown.js";
 import { prepareSkillsList } from "../formatters/skill/shared.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 import { formatTable, formatError } from "../lib/cli-output.js";
-import { generateSkillMarkdown } from "@forwardimpact/libpathway/agent";
+import { generateSkillMarkdown } from "@forwardimpact/libskill/agent";
 import { formatAgentSkill } from "../formatters/agent/skill.js";
 import { loadSkillTemplate } from "../lib/template-loader.js";
 
@@ -85,6 +85,15 @@ async function formatAgentDetail(skill, stages, dataDir) {
   console.log(output);
 }
 
+/**
+ * Format skill list item for --list output
+ * @param {Object} skill - Skill entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(skill) {
+  return `${skill.id}, ${skill.name}, ${skill.capability || "-"}`;
+}
+
 const baseSkillCommand = createEntityCommand({
   entityName: "skill",
   pluralName: "skills",
@@ -98,6 +107,7 @@ const baseSkillCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "📚",
 });
 

package/src/commands/stage.js

@@ -21,6 +21,15 @@ import {
   formatBullet,
 } from "../lib/cli-output.js";
 
+/**
+ * Format stage list item for --list output
+ * @param {Object} stage - Stage entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(stage) {
+  return `${stage.id}, ${stage.name}`;
+}
+
 /**
  * Format stage summary output
  * @param {Array} stages - Raw stage entities
@@ -43,7 +52,7 @@ function formatSummary(stages, _data) {
 
   console.log(formatTable(["ID", "Name", "Mode", "Tools", "Handoffs"], rows));
   console.log(`\nTotal: ${stages.length} stages`);
-  console.log(`\nRun 'npx pathway stage --list' for IDs`);
+  console.log(`\nRun 'npx pathway stage --list' for IDs and names`);
   console.log(`Run 'npx pathway stage <id>' for details\n`);
 }
 
@@ -115,5 +124,6 @@ export const runStageCommand = createEntityCommand({
   }),
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "🔄",
 });

package/src/commands/tool.js

@@ -9,6 +9,7 @@
  *   npx pathway tool <name>       # Detail view for specific tool
  */
 
+import { truncate } from "../formatters/shared.js";
 import { prepareToolsList } from "../formatters/tool/shared.js";
 import {
   formatTable,
@@ -27,10 +28,10 @@ export async function runToolCommand({ data, args, options }) {
   const [name] = args;
   const { tools, totalCount } = prepareToolsList(data.skills);
 
-  // --list: Output clean newline-separated tool names for piping
+  // --list: Output descriptive comma-separated tool lines for piping
   if (options.list) {
     for (const tool of tools) {
-      console.log(tool.name);
+      console.log(`${tool.name}, ${truncate(tool.description, 60)}`);
     }
     return;
   }
@@ -87,7 +88,7 @@ function formatSummary(tools, totalCount) {
   if (sorted.length > 15) {
     console.log(`(showing top 15 by usage)`);
   }
-  console.log(`\nRun 'npx pathway tool --list' for all tool names`);
+  console.log(`\nRun 'npx pathway tool --list' for all tool names and descriptions`);
   console.log(`Run 'npx pathway tool <name>' for details\n`);
 }
 

package/src/commands/track.js

@@ -16,6 +16,15 @@ import { sortTracksByName } from "../formatters/track/shared.js";
 import { formatTable } from "../lib/cli-output.js";
 import { getConceptEmoji } from "@forwardimpact/map/levels";
 
+/**
+ * Format track list item for --list output
+ * @param {Object} track - Track entity
+ * @returns {string} Formatted list line
+ */
+function formatListItem(track) {
+  return `${track.id}, ${track.name}`;
+}
+
 /**
  * Format track summary output
  * @param {Array} tracks - Raw track entities
@@ -34,7 +43,7 @@ function formatSummary(tracks, data) {
 
   console.log(formatTable(["ID", "Name", "Modifiers"], rows));
   console.log(`\nTotal: ${tracks.length} tracks`);
-  console.log(`\nRun 'npx pathway track --list' for IDs`);
+  console.log(`\nRun 'npx pathway track --list' for IDs and names`);
   console.log(`Run 'npx pathway track <id>' for details\n`);
 }
 
@@ -63,5 +72,6 @@ export const runTrackCommand = createEntityCommand({
   sortItems: sortTracksByName,
   formatSummary,
   formatDetail,
+  formatListItem,
   emojiIcon: "🛤️",
 });

package/src/components/card.js

@@ -1,108 +1,12 @@
 /**
  * Reusable card component
+ *
+ * Re-exports from @forwardimpact/libui/components/card.
  */
 
-import { div, h3, p, span } from "../lib/render.js";
-
-/**
- * Create a card component
- * @param {Object} options
- * @param {string} options.title - Card title
- * @param {string} [options.description] - Card description
- * @param {string} [options.href] - Link destination (makes card clickable)
- * @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}
- */
-export function createCard({
-  title,
-  description,
-  href,
-  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" },
-    titleContent,
-    badges.length > 0 ? div({ className: "card-badges" }, ...badges) : null,
-  );
-
-  const card = div(
-    {
-      className:
-        `card ${isClickable ? "card-clickable" : ""} ${className}`.trim(),
-    },
-    cardHeader,
-    description ? p({ className: "card-description" }, description) : null,
-    content || null,
-    meta.length > 0 ? div({ className: "card-meta" }, ...meta) : null,
-  );
-
-  if (isClickable) {
-    card.addEventListener("click", () => {
-      window.location.hash = href;
-    });
-  }
-
-  return card;
-}
-
-/**
- * Create a stat card for the landing page
- * @param {Object} options
- * @param {number|string} options.value - The stat value
- * @param {string} options.label - The stat label
- * @param {string} [options.href] - Optional link
- * @returns {HTMLElement}
- */
-export function createStatCard({ value, label, href }) {
-  const card = div(
-    { className: "stat-card" },
-    div({ className: "stat-value" }, String(value)),
-    div({ className: "stat-label" }, label),
-  );
-
-  if (href) {
-    card.style.cursor = "pointer";
-    card.addEventListener("click", () => {
-      window.location.hash = href;
-    });
-  }
-
-  return card;
-}
-
-/**
- * Create a badge element
- * @param {string} text - Badge text
- * @param {string} [type] - Badge type (default, primary, secondary, broad, technical, ai, etc.)
- * @returns {HTMLElement}
- */
-export function createBadge(text, type = "default") {
-  return span({ className: `badge badge-${type}` }, text);
-}
-
-/**
- * Create a tag element
- * @param {string} text
- * @returns {HTMLElement}
- */
-export function createTag(text) {
-  return span({ className: "info-tag" }, text);
-}
+export {
+  createCard,
+  createStatCard,
+  createBadge,
+  createTag,
+} from "@forwardimpact/libui/components/card";

package/src/components/comparison-radar.js

@@ -13,7 +13,7 @@ import {
   getBehaviourMaturityIndex,
   formatLevel,
 } from "../lib/render.js";
-import { compareByCapability } from "@forwardimpact/libpathway/policies";
+import { compareByCapability } from "@forwardimpact/libskill/policies";
 
 /**
  * Create a comparison skill radar chart