@forwardimpact/pathway 0.25.12 → 0.25.20

package/src/pages/agent-builder.js

@@ -11,39 +11,25 @@ import {
   div,
   h1,
   h2,
-  h3,
   p,
-  span,
   label,
-  section,
   select,
   option,
 } from "../lib/render.js";
 import { getState } from "../lib/state.js";
 import { loadAgentDataBrowser } from "../lib/yaml-loader.js";
-import {
-  generateStageAgentProfile,
-  deriveStageAgent,
-  generateSkillMarkdown,
-  deriveAgentSkills,
-  deriveReferenceLevel,
-  deriveToolkit,
-} from "@forwardimpact/libskill";
+import { deriveReferenceLevel } from "@forwardimpact/libskill";
 import {
   createSelectWithValue,
   createDisciplineSelect,
 } from "../lib/form-controls.js";
 import { createReactive } from "../lib/reactive.js";
 import { getStageEmoji } from "../formatters/stage/shared.js";
-import { formatAgentProfile } from "../formatters/agent/profile.js";
 import {
-  formatAgentSkill,
-  formatInstallScript,
-  formatReference,
-} from "../formatters/agent/skill.js";
-import { createFileCard } from "../components/file-card.js";
-import { createToolkitTable } from "../formatters/toolkit/dom.js";
-import { createDetailSection } from "../components/detail.js";
+  createAllStagesPreview,
+  createSingleStagePreview,
+  createHelpSection,
+} from "./agent-builder-preview.js";
 
 /** All stages option value */
 const ALL_STAGES_VALUE = "all";
@@ -193,6 +179,7 @@ export async function renderAgentBuilder() {
   // Supports: /agent/discipline, /agent/discipline/track, /agent/discipline/track/stage
   const hash = window.location.hash;
   const pathMatch = hash.match(
+    // eslint-disable-next-line security/detect-unsafe-regex -- negated char classes prevent backtracking; parses internal URL hash
     /#\/agent\/([^/]+)(?:\/([^/]+))?(?:\/([^/?]+))?/,
   );
   const initialDiscipline = pathMatch ? pathMatch[1] : "";
@@ -426,534 +413,3 @@ function createEmptyState(disciplineCount, trackCount) {
     ),
   );
 }
-
-/**
- * Create preview for all stages
- * Shows cards for each stage agent and all skills
- * @param {Object} context - Generation context
- * @returns {HTMLElement}
- */
-function createAllStagesPreview(context) {
-  const {
-    humanDiscipline,
-    humanTrack,
-    agentDiscipline,
-    agentTrack,
-    level,
-    stages,
-    skills,
-    behaviours,
-    agentBehaviours,
-    claudeCodeSettings,
-    templates,
-  } = context;
-
-  // Generate all stage agents
-  const stageAgents = stages.map((stage) => {
-    const derived = deriveStageAgent({
-      discipline: humanDiscipline,
-      track: humanTrack,
-      stage,
-      level,
-      skills,
-      behaviours,
-      agentBehaviours,
-      agentDiscipline,
-      agentTrack,
-    });
-
-    const profile = generateStageAgentProfile({
-      discipline: humanDiscipline,
-      track: humanTrack,
-      stage,
-      level,
-      skills,
-      behaviours,
-      agentBehaviours,
-      agentDiscipline,
-      agentTrack,
-      stages,
-    });
-
-    return { stage, derived, profile };
-  });
-
-  // Get derived skills for skill cards
-  const derivedSkills = deriveAgentSkills({
-    discipline: humanDiscipline,
-    track: humanTrack,
-    level,
-    skills,
-  });
-
-  // Generate skill files
-  const skillFiles = derivedSkills
-    .map((derived) => skills.find((s) => s.id === derived.skillId))
-    .filter((skill) => skill?.agent)
-    .map((skill) => generateSkillMarkdown(skill, stages));
-
-  // Derive toolkit from agent skills
-  const toolkit = deriveToolkit({
-    skillMatrix: derivedSkills,
-    skills,
-  });
-
-  return div(
-    { className: "agent-deployment" },
-
-    // Download all button
-    createDownloadAllButton(
-      stageAgents,
-      skillFiles,
-      claudeCodeSettings,
-      context,
-    ),
-
-    // Agents section
-    section(
-      { className: "agent-section" },
-      h2({}, `Agents (${stageAgents.length})`),
-      p(
-        { className: "text-muted" },
-        "Stage-specific agents with skills, constraints, and stage transitions.",
-      ),
-      div(
-        { className: "agent-cards-grid" },
-        ...stageAgents.map(({ stage, profile }) => {
-          const content = formatAgentProfile(profile, templates.agent);
-          const stageEmoji = getStageEmoji(stages, stage.id);
-          return createFileCard({
-            header: [
-              span({ className: "file-card-emoji" }, stageEmoji),
-              h3({}, `${stage.name} Agent`),
-            ],
-            files: [
-              {
-                filename: profile.filename,
-                content,
-                language: "markdown",
-              },
-            ],
-            maxHeight: 400,
-          });
-        }),
-      ),
-    ),
-
-    // Skills section
-    section(
-      { className: "agent-section" },
-      h2({}, `Skills (${skillFiles.length})`),
-      skillFiles.length > 0
-        ? div(
-            { className: "skill-cards-grid" },
-            ...skillFiles.map((skill) => buildSkillFileCard(skill, templates)),
-          )
-        : p(
-            { className: "text-muted" },
-            "No skills with agent sections found for this discipline.",
-          ),
-    ),
-
-    // Tool Kit section
-    toolkit.length > 0
-      ? createDetailSection({
-          title: `Tool Kit (${toolkit.length})`,
-          content: createToolkitTable(toolkit),
-        })
-      : null,
-  );
-}
-
-/**
- * Create preview for a single stage
- * @param {Object} context - Generation context
- * @param {Object} stage - Selected stage
- * @returns {HTMLElement}
- */
-function createSingleStagePreview(context, stage) {
-  const {
-    humanDiscipline,
-    humanTrack,
-    agentDiscipline,
-    agentTrack,
-    level,
-    skills,
-    behaviours,
-    agentBehaviours,
-    claudeCodeSettings,
-    stages,
-    templates,
-  } = context;
-
-  const profile = generateStageAgentProfile({
-    discipline: humanDiscipline,
-    track: humanTrack,
-    stage,
-    level,
-    skills,
-    behaviours,
-    agentBehaviours,
-    agentDiscipline,
-    agentTrack,
-    stages,
-  });
-
-  // Get skills for this stage (using full derived skills)
-  const derivedSkills = deriveAgentSkills({
-    discipline: humanDiscipline,
-    track: humanTrack,
-    level,
-    skills,
-  });
-
-  const skillFiles = derivedSkills
-    .map((d) => skills.find((s) => s.id === d.skillId))
-    .filter((skill) => skill?.agent)
-    .map((skill) => generateSkillMarkdown(skill, stages));
-
-  // Derive toolkit from agent skills
-  const toolkit = deriveToolkit({
-    skillMatrix: derivedSkills,
-    skills,
-  });
-
-  return div(
-    { className: "agent-deployment" },
-
-    // Download button for single stage
-    createDownloadSingleButton(
-      profile,
-      skillFiles,
-      claudeCodeSettings,
-      templates,
-    ),
-
-    // Agents section (single card)
-    section(
-      { className: "agent-section" },
-      h2({}, "Agent"),
-      div(
-        { className: "agent-cards-grid single" },
-        (() => {
-          const content = formatAgentProfile(profile, templates.agent);
-          const stageEmoji = getStageEmoji(stages, stage.id);
-          return createFileCard({
-            header: [
-              span({ className: "file-card-emoji" }, stageEmoji),
-              h3({}, `${stage.name} Agent`),
-            ],
-            files: [
-              {
-                filename: profile.filename,
-                content,
-                language: "markdown",
-              },
-            ],
-            maxHeight: 400,
-          });
-        })(),
-      ),
-    ),
-
-    // Skills section
-    section(
-      { className: "agent-section" },
-      h2({}, `Skills (${skillFiles.length})`),
-      skillFiles.length > 0
-        ? div(
-            { className: "skill-cards-grid" },
-            ...skillFiles.map((skill) => buildSkillFileCard(skill, templates)),
-          )
-        : p(
-            { className: "text-muted" },
-            "No skills with agent sections found for this discipline.",
-          ),
-    ),
-
-    // Tool Kit section
-    toolkit.length > 0
-      ? createDetailSection({
-          title: `Tool Kit (${toolkit.length})`,
-          content: createToolkitTable(toolkit),
-        })
-      : null,
-  );
-}
-
-/**
- * Build a file card for a skill with 1–3 file panes (accordion).
- * @param {Object} skill - Skill with frontmatter and body
- * @param {{skill: string, install: string, reference: string}} templates - Mustache templates
- * @returns {HTMLElement}
- */
-function buildSkillFileCard(skill, templates) {
-  const content = formatAgentSkill(skill, templates.skill);
-
-  /** @type {import('../components/file-card.js').FileDescriptor[]} */
-  const files = [
-    {
-      filename: `${skill.dirname}/SKILL.md`,
-      content,
-      language: "markdown",
-    },
-  ];
-
-  if (skill.installScript) {
-    files.push({
-      filename: `${skill.dirname}/scripts/install.sh`,
-      content: formatInstallScript(skill, templates.install),
-      language: "bash",
-    });
-  }
-
-  if (skill.implementationReference) {
-    files.push({
-      filename: `${skill.dirname}/references/REFERENCE.md`,
-      content: formatReference(skill, templates.reference),
-      language: "markdown",
-    });
-  }
-
-  const headerChildren = [
-    span({ className: "file-card-name" }, skill.frontmatter.name),
-  ];
-  if (files.length > 1) {
-    headerChildren.push(
-      span({ className: "file-card-badge" }, `${files.length} files`),
-    );
-  }
-
-  return createFileCard({
-    header: headerChildren,
-    files,
-    maxHeight: 300,
-  });
-}
-
-/**
- * Create download all button for all stages
- * @param {Array} stageAgents - Array of {stage, derived, profile}
- * @param {Array} skillFiles - Array of skill file objects
- * @param {Object} claudeCodeSettings - Claude Code settings
- * @param {Object} context - Context with discipline/track info and templates
- * @returns {HTMLElement}
- */
-function createDownloadAllButton(
-  stageAgents,
-  skillFiles,
-  claudeCodeSettings,
-  context,
-) {
-  const { humanDiscipline, humanTrack, templates } = context;
-  const agentName = `${humanDiscipline.id}-${humanTrack.id}`.replace(/_/g, "-");
-
-  const btn = document.createElement("button");
-  btn.className = "btn btn-primary download-all-btn";
-  btn.textContent = "📦 Download All (.zip)";
-
-  btn.addEventListener("click", async () => {
-    btn.disabled = true;
-    btn.textContent = "Generating...";
-
-    try {
-      const JSZip = await importJSZip();
-      const zip = new JSZip();
-
-      // Add all stage agent profiles to .claude/agents/
-      for (const { profile } of stageAgents) {
-        const content = formatAgentProfile(profile, templates.agent);
-        zip.file(`.claude/agents/${profile.filename}`, content);
-      }
-
-      // Add skills (SKILL.md + optional install script + optional reference)
-      for (const skill of skillFiles) {
-        const content = formatAgentSkill(skill, templates.skill);
-        zip.file(`.claude/skills/${skill.dirname}/SKILL.md`, content);
-
-        if (skill.installScript) {
-          const installContent = formatInstallScript(skill, templates.install);
-          zip.file(
-            `.claude/skills/${skill.dirname}/scripts/install.sh`,
-            installContent,
-            { unixPermissions: "755" },
-          );
-        }
-
-        if (skill.implementationReference) {
-          const refContent = formatReference(skill, templates.reference);
-          zip.file(
-            `.claude/skills/${skill.dirname}/references/REFERENCE.md`,
-            refContent,
-          );
-        }
-      }
-
-      // Add Claude Code settings
-      if (Object.keys(claudeCodeSettings).length > 0) {
-        zip.file(
-          ".claude/settings.json",
-          JSON.stringify(claudeCodeSettings, null, 2) + "\n",
-        );
-      }
-
-      // Generate and download
-      const blob = await zip.generateAsync({ type: "blob" });
-      const url = URL.createObjectURL(blob);
-
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `${agentName}-agents.zip`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
-      URL.revokeObjectURL(url);
-    } finally {
-      btn.disabled = false;
-      btn.textContent = "📦 Download All (.zip)";
-    }
-  });
-
-  return btn;
-}
-
-/**
- * Create download button for single stage
- * @param {Object} profile - Agent profile
- * @param {Array} skillFiles - Skill files
- * @param {Object} claudeCodeSettings - Claude Code settings
- * @param {{agent: string, skill: string}} templates - Mustache templates
- * @returns {HTMLElement}
- */
-function createDownloadSingleButton(
-  profile,
-  skillFiles,
-  claudeCodeSettings,
-  templates,
-) {
-  const btn = document.createElement("button");
-  btn.className = "btn btn-primary download-all-btn";
-  btn.textContent = "📥 Download Agent (.zip)";
-
-  btn.addEventListener("click", async () => {
-    btn.disabled = true;
-    btn.textContent = "Generating...";
-
-    try {
-      const JSZip = await importJSZip();
-      const zip = new JSZip();
-
-      // Add profile to .claude/agents/
-      const content = formatAgentProfile(profile, templates.agent);
-      zip.file(`.claude/agents/${profile.filename}`, content);
-
-      // Add skills (SKILL.md + optional install script + optional reference)
-      for (const skill of skillFiles) {
-        const skillContent = formatAgentSkill(skill, templates.skill);
-        zip.file(`.claude/skills/${skill.dirname}/SKILL.md`, skillContent);
-
-        if (skill.installScript) {
-          const installContent = formatInstallScript(skill, templates.install);
-          zip.file(
-            `.claude/skills/${skill.dirname}/scripts/install.sh`,
-            installContent,
-            { unixPermissions: "755" },
-          );
-        }
-
-        if (skill.implementationReference) {
-          const refContent = formatReference(skill, templates.reference);
-          zip.file(
-            `.claude/skills/${skill.dirname}/references/REFERENCE.md`,
-            refContent,
-          );
-        }
-      }
-
-      // Add Claude Code settings
-      if (Object.keys(claudeCodeSettings).length > 0) {
-        zip.file(
-          ".claude/settings.json",
-          JSON.stringify(claudeCodeSettings, null, 2) + "\n",
-        );
-      }
-
-      // Generate and download
-      const blob = await zip.generateAsync({ type: "blob" });
-      const url = URL.createObjectURL(blob);
-
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `${profile.frontmatter.name}-agent.zip`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
-      URL.revokeObjectURL(url);
-    } finally {
-      btn.disabled = false;
-      btn.textContent = "📥 Download Agent (.zip)";
-    }
-  });
-
-  return btn;
-}
-
-/**
- * Dynamically import JSZip from CDN
- * @returns {Promise<typeof JSZip>}
- */
-async function importJSZip() {
-  const module = await import("https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm");
-  return module.default;
-}
-
-/**
- * Create help section explaining how agent builder works
- * @returns {HTMLElement}
- */
-function createHelpSection() {
-  return section(
-    { className: "section section-detail" },
-    h2({ className: "section-title" }, "How It Works"),
-    div(
-      { className: "auto-grid-md" },
-      div(
-        { className: "detail-item" },
-        div({ className: "detail-item-label" }, "Stages"),
-        p(
-          {},
-          "Agents are generated for each stage: Plan (research), Code (implement), and Review (verify). " +
-            "Each stage has specific skills, constraints, and stage transitions.",
-        ),
-      ),
-      div(
-        { className: "detail-item" },
-        div({ className: "detail-item-label" }, "Agent Profiles"),
-        p(
-          {},
-          "The .md files contain the agent's identity, skills, and constraints. " +
-            "Place them in .claude/agents/ for Claude Code to discover.",
-        ),
-      ),
-      div(
-        { className: "detail-item" },
-        div({ className: "detail-item-label" }, "Skills"),
-        p(
-          {},
-          "SKILL.md files provide specialized knowledge that agents can use. " +
-            "Place them in .claude/skills/{skill-name}/ directories.",
-        ),
-      ),
-      div(
-        { className: "detail-item" },
-        div({ className: "detail-item-label" }, "All Stages"),
-        p(
-          {},
-          "Select 'All Stages' to download a complete agent deployment with all stage agents and skills in one zip file.",
-        ),
-      ),
-    ),
-  );
-}

package/src/pages/progress-comparison.js

@@ -0,0 +1,110 @@
+/**
+ * Comparison result builder for progress page
+ */
+
+import { div, h2, a, section } from "../lib/render.js";
+import { createStatCard } from "../components/card.js";
+import {
+  createComparisonSkillRadar,
+  createComparisonBehaviourRadar,
+} from "../components/comparison-radar.js";
+import { createProgressionTable } from "../components/progression-table.js";
+
+/**
+ * Build the comparison result DOM from a progression view
+ * @param {Object} progressionView
+ * @param {Object} currentJobView
+ * @param {Object} currentLevel
+ * @param {Object} targetLevel
+ * @param {Object|null} targetTrack
+ * @param {Object} targetDiscipline
+ * @param {Object} data
+ * @returns {HTMLElement}
+ */
+export function buildComparisonResult(
+  progressionView,
+  currentJobView,
+  currentLevel,
+  targetLevel,
+  targetTrack,
+  targetDiscipline,
+  data,
+) {
+  const { skillChanges, behaviourChanges, summary, target } = progressionView;
+
+  return div(
+    { className: "comparison-result" },
+    div(
+      { className: "grid grid-6" },
+      summary.skillsGained > 0
+        ? createStatCard({ value: summary.skillsGained, label: "New Skills" })
+        : null,
+      createStatCard({ value: summary.skillsUp, label: "Skills to Grow" }),
+      summary.skillsDown > 0
+        ? createStatCard({
+            value: summary.skillsDown,
+            label: "Skills Decrease",
+          })
+        : null,
+      summary.skillsLost > 0
+        ? createStatCard({ value: summary.skillsLost, label: "Skills Removed" })
+        : null,
+      createStatCard({
+        value: summary.behavioursUp,
+        label: "Behaviours to Mature",
+      }),
+      summary.behavioursDown > 0
+        ? createStatCard({
+            value: summary.behavioursDown,
+            label: "Behaviours Decrease",
+          })
+        : null,
+    ),
+    div(
+      { className: "section auto-grid-lg" },
+      createComparisonSkillRadar(
+        currentJobView.skillMatrix,
+        target.skillMatrix,
+        {
+          title: "Skills Comparison",
+          currentLabel: `Current (${currentLevel.id})`,
+          targetLabel: `Target (${targetLevel.id})`,
+          size: 400,
+          capabilities: data.capabilities,
+        },
+      ),
+      createComparisonBehaviourRadar(
+        currentJobView.behaviourProfile,
+        target.behaviourProfile,
+        {
+          title: "Behaviours Comparison",
+          currentLabel: `Current (${currentLevel.id})`,
+          targetLabel: `Target (${targetLevel.id})`,
+          size: 400,
+        },
+      ),
+    ),
+    section(
+      { className: "section section-detail" },
+      h2({ className: "section-title" }, "Skill Changes"),
+      createProgressionTable(skillChanges, "skill"),
+    ),
+    section(
+      { className: "section section-detail" },
+      h2({ className: "section-title" }, "Behaviour Changes"),
+      createProgressionTable(behaviourChanges, "behaviour"),
+    ),
+    div(
+      { className: "page-actions" },
+      a(
+        {
+          href: targetTrack
+            ? `#/job/${targetDiscipline.id}/${targetLevel.id}/${targetTrack.id}`
+            : `#/job/${targetDiscipline.id}/${targetLevel.id}`,
+          className: "btn btn-secondary",
+        },
+        `View ${targetLevel.id}${targetTrack ? ` ${targetTrack.name}` : ""} Job Definition →`,
+      ),
+    ),
+  );
+}