@forwardimpact/pathway 0.1.0

package/app/components/progression-table.js

@@ -0,0 +1,320 @@
+/**
+ * Progression table component
+ * Displays skill or behaviour changes between current and target levels
+ */
+
+/** @typedef {import('../types.js').SkillChangeItem} SkillChangeItem */
+/** @typedef {import('../types.js').BehaviourChangeItem} BehaviourChangeItem */
+
+import {
+  div,
+  table,
+  thead,
+  tbody,
+  tr,
+  th,
+  td,
+  a,
+  span,
+} from "../lib/render.js";
+import { formatLevel } from "../lib/render.js";
+import { createLevelCell, createEmptyLevelCell } from "./detail.js";
+import { createBadge } from "./card.js";
+
+/**
+ * Create a progression table showing changes
+ * @param {SkillChangeItem[]|BehaviourChangeItem[]} changes - Array of change objects
+ * @param {'skill'|'behaviour'} type - Type of changes
+ * @returns {HTMLElement}
+ */
+export function createProgressionTable(changes, type = "skill") {
+  if (!changes || changes.length === 0) {
+    return div({ className: "empty-state" }, "No changes required");
+  }
+
+  const isSkill = type === "skill";
+  const maxLevels = 5;
+
+  // Separate into changes, gained, lost, and no-changes
+  const gained = changes.filter((c) => c.isGained);
+  const lost = changes.filter((c) => c.isLost);
+  const changesRequired = changes.filter(
+    (c) => c.change !== 0 && !c.isGained && !c.isLost,
+  );
+  const noChanges = changes.filter((c) => c.change === 0);
+
+  const createRow = (item) => {
+    // Handle gained skills (new in target role)
+    if (item.isGained) {
+      if (isSkill) {
+        return tr(
+          { className: "change-gained" },
+          td(
+            {},
+            a({ href: `#/skill/${item.id}` }, item.name),
+            span({ className: "gained-badge" }, "NEW"),
+          ),
+          td({}, createBadge(item.capability, item.capability)),
+          td({}, createBadge(formatLevel(item.type), item.type)),
+          createEmptyLevelCell(),
+          createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+          td(
+            { className: "change-cell change-gained" },
+            span({ className: "change-indicator" }, "+"),
+          ),
+        );
+      } else {
+        return tr(
+          { className: "change-gained" },
+          td(
+            {},
+            a({ href: `#/behaviour/${item.id}` }, item.name),
+            span({ className: "gained-badge" }, "NEW"),
+          ),
+          createEmptyLevelCell(),
+          createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+          td(
+            { className: "change-cell change-gained" },
+            span({ className: "change-indicator" }, "+"),
+          ),
+        );
+      }
+    }
+
+    // Handle lost skills (removed in target role)
+    if (item.isLost) {
+      if (isSkill) {
+        return tr(
+          { className: "change-lost" },
+          td(
+            {},
+            a({ href: `#/skill/${item.id}` }, item.name),
+            span({ className: "lost-badge" }, "REMOVED"),
+          ),
+          td({}, createBadge(item.capability, item.capability)),
+          td({}, createBadge(formatLevel(item.type), item.type)),
+          createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+          createEmptyLevelCell(),
+          td(
+            { className: "change-cell change-lost" },
+            span({ className: "change-indicator" }, "−"),
+          ),
+        );
+      } else {
+        return tr(
+          { className: "change-lost" },
+          td(
+            {},
+            a({ href: `#/behaviour/${item.id}` }, item.name),
+            span({ className: "lost-badge" }, "REMOVED"),
+          ),
+          createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+          createEmptyLevelCell(),
+          td(
+            { className: "change-cell change-lost" },
+            span({ className: "change-indicator" }, "−"),
+          ),
+        );
+      }
+    }
+
+    // Normal change (both current and target exist)
+    const changeClass =
+      item.change > 0
+        ? "change-up"
+        : item.change < 0
+          ? "change-down"
+          : "change-same";
+    const changeIcon = item.change > 0 ? "↑" : item.change < 0 ? "↓" : "—";
+    const changeText =
+      item.change !== 0 ? `${changeIcon} ${Math.abs(item.change)}` : "—";
+
+    if (isSkill) {
+      return tr(
+        { className: changeClass },
+        td({}, a({ href: `#/skill/${item.id}` }, item.name)),
+        td({}, createBadge(item.capability, item.capability)),
+        td({}, createBadge(formatLevel(item.type), item.type)),
+        createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+        createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+        td(
+          { className: `change-cell ${changeClass}` },
+          span({ className: "change-indicator" }, changeText),
+        ),
+      );
+    } else {
+      return tr(
+        { className: changeClass },
+        td({}, a({ href: `#/behaviour/${item.id}` }, item.name)),
+        createLevelCell(item.currentIndex, maxLevels, item.currentLevel),
+        createLevelCell(item.targetIndex, maxLevels, item.targetLevel),
+        td(
+          { className: `change-cell ${changeClass}` },
+          span({ className: "change-indicator" }, changeText),
+        ),
+      );
+    }
+  };
+
+  const skillHeaders = tr(
+    {},
+    th({}, isSkill ? "Skill" : "Behaviour"),
+    ...(isSkill ? [th({}, "Capability"), th({}, "Type")] : []),
+    th({}, "Current"),
+    th({}, "Target"),
+    th({}, "Change"),
+  );
+
+  const content = [];
+
+  // Show new skills first (in target role but not current)
+  if (gained.length > 0) {
+    content.push(
+      div(
+        { className: "progression-group" },
+        div(
+          { className: "progression-group-header gained-header" },
+          span({ className: "group-icon" }, "➕"),
+          span(
+            {},
+            `${gained.length} new ${type}${gained.length > 1 ? "s" : ""}`,
+          ),
+        ),
+        div(
+          { className: "table-container" },
+          table(
+            {
+              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
+            },
+            thead({}, skillHeaders),
+            tbody({}, ...gained.map(createRow)),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // Show level changes
+  if (changesRequired.length > 0) {
+    content.push(
+      div(
+        { className: "progression-group" },
+        div(
+          { className: "progression-group-header" },
+          span({ className: "group-icon" }, "📈"),
+          span(
+            {},
+            `${changesRequired.length} ${type}${changesRequired.length > 1 ? "s" : ""} need growth`,
+          ),
+        ),
+        div(
+          { className: "table-container" },
+          table(
+            {
+              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
+            },
+            thead({}, skillHeaders),
+            tbody({}, ...changesRequired.map(createRow)),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // Show removed skills (in current role but not target)
+  if (lost.length > 0) {
+    content.push(
+      div(
+        { className: "progression-group" },
+        div(
+          { className: "progression-group-header lost-header" },
+          span({ className: "group-icon" }, "➖"),
+          span(
+            {},
+            `${lost.length} ${type}${lost.length > 1 ? "s" : ""} removed`,
+          ),
+        ),
+        div(
+          { className: "table-container" },
+          table(
+            {
+              className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
+            },
+            thead({}, skillHeaders),
+            tbody({}, ...lost.map(createRow)),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // Show no changes (collapsed by default)
+  if (noChanges.length > 0) {
+    const noChangeHeaders = tr(
+      {},
+      th({}, isSkill ? "Skill" : "Behaviour"),
+      ...(isSkill ? [th({}, "Capability"), th({}, "Type")] : []),
+      th({}, "Current"),
+      th({}, "Target"),
+      th({}, "Change"),
+    );
+
+    const detailsId = `no-changes-${type}-${Date.now()}`;
+    content.push(
+      div(
+        { className: "progression-group no-change-group" },
+        createCollapsibleHeader(
+          detailsId,
+          `${noChanges.length} ${type}${noChanges.length > 1 ? "s" : ""} unchanged`,
+          "✓",
+        ),
+        div(
+          {
+            className: "collapsible-content",
+            id: detailsId,
+            style: "display: none",
+          },
+          div(
+            { className: "table-container" },
+            table(
+              {
+                className: `table progression-table ${isSkill ? "skill-table" : "behaviour-table"}`,
+              },
+              thead({}, noChangeHeaders),
+              tbody({}, ...noChanges.map(createRow)),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  return div({ className: "progression-tables" }, ...content);
+}
+
+/**
+ * Create a collapsible header
+ */
+function createCollapsibleHeader(targetId, text, icon) {
+  const header = div(
+    { className: "progression-group-header collapsible-header" },
+    span({ className: "group-icon" }, icon),
+    span({}, text),
+    span({ className: "collapse-indicator" }, "▶"),
+  );
+
+  header.style.cursor = "pointer";
+  header.addEventListener("click", () => {
+    const content = document.getElementById(targetId);
+    const indicator = header.querySelector(".collapse-indicator");
+    if (content.style.display === "none") {
+      content.style.display = "block";
+      indicator.textContent = "▼";
+    } else {
+      content.style.display = "none";
+      indicator.textContent = "▶";
+    }
+  });
+
+  return header;
+}

package/app/components/radar-chart.js

@@ -0,0 +1,102 @@
+/**
+ * Radar chart component wrapper
+ */
+
+/** @typedef {import('../types.js').SkillMatrixItem} SkillMatrixItem */
+/** @typedef {import('../types.js').BehaviourProfileItem} BehaviourProfileItem */
+
+import { RadarChart } from "../lib/radar.js";
+import { div, h3 } from "../lib/render.js";
+import {
+  getSkillLevelIndex,
+  getBehaviourMaturityIndex,
+  formatLevel,
+} from "../lib/render.js";
+
+/**
+ * Create a skill radar chart
+ * @param {SkillMatrixItem[]} skillMatrix - Skill matrix entries
+ * @param {Object} [options]
+ * @returns {HTMLElement}
+ */
+export function createSkillRadar(skillMatrix, options = {}) {
+  const container = div(
+    { className: "radar-container" },
+    h3({ className: "radar-title" }, options.title || "Skills Radar"),
+    div({ className: "radar-chart-wrapper", id: "skill-radar-wrapper" }),
+  );
+
+  // Render chart after container is in DOM
+  setTimeout(() => {
+    const wrapper = container.querySelector("#skill-radar-wrapper");
+    if (!wrapper || !skillMatrix || skillMatrix.length === 0) return;
+
+    const data = skillMatrix.map((skill) => ({
+      label: skill.skillName,
+      value: getSkillLevelIndex(skill.level),
+      maxValue: 5,
+      description: `${formatLevel(skill.type)} skill - ${formatLevel(skill.level)}`,
+    }));
+
+    const chart = new RadarChart({
+      container: wrapper,
+      data,
+      options: {
+        levels: 5,
+        color: options.color || "#3b82f6",
+        strokeColor: options.strokeColor || "#2563eb",
+        size: options.size || 400,
+        showLabels: true,
+        showTooltips: true,
+      },
+    });
+
+    chart.render();
+  }, 0);
+
+  return container;
+}
+
+/**
+ * Create a behaviour radar chart
+ * @param {BehaviourProfileItem[]} behaviourProfile - Behaviour profile entries
+ * @param {Object} [options]
+ * @returns {HTMLElement}
+ */
+export function createBehaviourRadar(behaviourProfile, options = {}) {
+  const container = div(
+    { className: "radar-container" },
+    h3({ className: "radar-title" }, options.title || "Behaviours Radar"),
+    div({ className: "radar-chart-wrapper", id: "behaviour-radar-wrapper" }),
+  );
+
+  // Render chart after container is in DOM
+  setTimeout(() => {
+    const wrapper = container.querySelector("#behaviour-radar-wrapper");
+    if (!wrapper || !behaviourProfile || behaviourProfile.length === 0) return;
+
+    const data = behaviourProfile.map((behaviour) => ({
+      label: behaviour.behaviourName,
+      value: getBehaviourMaturityIndex(behaviour.maturity),
+      maxValue: 5,
+      description: `${formatLevel(behaviour.maturity)}`,
+    }));
+
+    const chart = new RadarChart({
+      container: wrapper,
+      data,
+      options: {
+        levels: 5,
+        color: options.color || "#10b981",
+        strokeColor: options.strokeColor || "#059669",
+        size: options.size || 400,
+        showLabels: true,
+        showTooltips: true,
+      },
+    });
+
+    chart.render();
+  }, 0);
+
+  return container;
+}

package/app/components/skill-matrix.js

@@ -0,0 +1,97 @@
+/**
+ * Skill matrix display component
+ */
+
+/** @typedef {import('../types.js').SkillMatrixItem} SkillMatrixItem */
+
+import {
+  div,
+  span,
+  table,
+  thead,
+  tbody,
+  tr,
+  th,
+  td,
+  a,
+} from "../lib/render.js";
+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 { truncate } from "../formatters/shared.js";
+
+/**
+ * Sort skills by level descending (expert first), then alphabetically
+ * @param {SkillMatrixItem[]} skills
+ * @returns {SkillMatrixItem[]}
+ */
+function sortByLevelDescending(skills) {
+  return [...skills].sort((a, b) => {
+    const levelA = SKILL_LEVEL_ORDER.indexOf(a.level);
+    const levelB = SKILL_LEVEL_ORDER.indexOf(b.level);
+    if (levelB !== levelA) {
+      return levelB - levelA;
+    }
+    return a.skillName.localeCompare(b.skillName);
+  });
+}
+
+/**
+ * Create a skill matrix table
+ * @param {SkillMatrixItem[]} skillMatrix - Skill matrix entries
+ * @returns {HTMLElement}
+ */
+export function createSkillMatrix(skillMatrix) {
+  if (!skillMatrix || skillMatrix.length === 0) {
+    return div({ className: "empty-state" }, "No skills in matrix");
+  }
+
+  const sortedSkills = sortByLevelDescending(skillMatrix);
+
+  const rows = sortedSkills.map((skill) => {
+    const levelIndex = getSkillLevelIndex(skill.level);
+
+    return tr(
+      { className: skill.isHumanOnly ? "human-only-row" : "" },
+      td(
+        {},
+        a({ href: `#/skill/${skill.skillId}` }, skill.skillName),
+        skill.isHumanOnly
+          ? span(
+              {
+                className: "human-only-indicator",
+                title:
+                  "Human-Only — Requires interpersonal skills; excluded from agents",
+              },
+              " 🤲",
+            )
+          : null,
+      ),
+      td({}, createBadge(skill.capability, skill.capability)),
+      createLevelCell(levelIndex, 5, skill.level),
+      td(
+        { className: "skill-description" },
+        truncate(skill.levelDescription, 80),
+      ),
+    );
+  });
+
+  return div(
+    { className: "table-container" },
+    table(
+      { className: "table matrix-table skill-matrix" },
+      thead(
+        {},
+        tr(
+          {},
+          th({}, "Skill"),
+          th({}, "Capability"),
+          th({}, "Level"),
+          th({}, "Description"),
+        ),
+      ),
+      tbody({}, ...rows),
+    ),
+  );
+}

package/app/css/base.css

@@ -0,0 +1,56 @@
+/**
+ * Base Styles
+ *
+ * Typography, links, and body defaults using design tokens.
+ * Import after tokens.css and reset.css.
+ */
+
+@layer base {
+  body {
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: var(--space-md);
+  }
+
+  h1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 700;
+  }
+
+  h2 {
+    font-size: var(--font-size-2xl);
+  }
+
+  h3 {
+    font-size: var(--font-size-xl);
+  }
+
+  h4 {
+    font-size: var(--font-size-lg);
+  }
+
+  p {
+    margin-bottom: var(--space-md);
+  }
+
+  a {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--color-primary-dark);
+    text-decoration: underline;
+  }
+}

package/app/css/bundles/app.css

@@ -0,0 +1,40 @@
+/**
+ * App Bundle
+ *
+ * Main entry point for index.html (web app).
+ * Single import for all app styles.
+ */
+
+/* Layer order declaration - must be first */
+@layer tokens, reset, base, components, utilities, pages;
+
+/* Foundation */
+@import "../tokens.css" layer(tokens);
+@import "../reset.css" layer(reset);
+@import "../base.css" layer(base);
+
+/* Components */
+@import "../components/layout.css" layer(components);
+@import "../components/surfaces.css" layer(components);
+@import "../components/typography.css" layer(components);
+@import "../components/badges.css" layer(components);
+@import "../components/buttons.css" layer(components);
+@import "../components/forms.css" layer(components);
+@import "../components/tables.css" layer(components);
+@import "../components/progress.css" layer(components);
+@import "../components/states.css" layer(components);
+@import "../components/nav.css" layer(components);
+
+/* Utilities */
+@import "../components/utilities.css" layer(utilities);
+
+/* Pages */
+@import "../pages/landing.css" layer(pages);
+@import "../pages/job-builder.css" layer(pages);
+@import "../pages/agent-builder.css" layer(pages);
+@import "../pages/lifecycle.css" layer(pages);
+@import "../pages/detail.css" layer(pages);
+@import "../pages/interview-builder.css" layer(pages);
+@import "../pages/self-assessment.css" layer(pages);
+@import "../pages/assessment-results.css" layer(pages);
+@import "../pages/progress-builder.css" layer(pages);

package/app/css/bundles/handout.css

@@ -0,0 +1,43 @@
+/**
+ * Handout Bundle
+ *
+ * Entry point for handout.html.
+ * Includes slide styles plus handout-specific overrides.
+ */
+
+/* Layer order declaration - must be first */
+@layer tokens, reset, base, components, utilities, pages, slides, handout, print;
+
+/* Foundation */
+@import "../tokens.css" layer(tokens);
+@import "../reset.css" layer(reset);
+@import "../base.css" layer(base);
+
+/* Components */
+@import "../components/layout.css" layer(components);
+@import "../components/surfaces.css" layer(components);
+@import "../components/typography.css" layer(components);
+@import "../components/badges.css" layer(components);
+@import "../components/buttons.css" layer(components);
+@import "../components/forms.css" layer(components);
+@import "../components/tables.css" layer(components);
+@import "../components/progress.css" layer(components);
+@import "../components/states.css" layer(components);
+
+/* Utilities */
+@import "../components/utilities.css" layer(utilities);
+
+/* Pages (for shared formatters) */
+@import "../pages/detail.css" layer(pages);
+
+/* Slide views */
+@import "../views/slide-animations.css" layer(slides);
+@import "../views/slide-base.css" layer(slides);
+@import "../views/slide-sections.css" layer(slides);
+@import "../views/slide-tables.css" layer(slides);
+
+/* Handout overrides */
+@import "../views/handout.css" layer(handout);
+
+/* Print */
+@import "../views/print.css" layer(print);

package/app/css/bundles/slides.css

@@ -0,0 +1,40 @@
+/**
+ * Slides Bundle
+ *
+ * Entry point for slides.html.
+ * Includes app styles plus slide-specific layers.
+ */
+
+/* Layer order declaration - must be first */
+@layer tokens, reset, base, components, utilities, pages, slides, print;
+
+/* Foundation */
+@import "../tokens.css" layer(tokens);
+@import "../reset.css" layer(reset);
+@import "../base.css" layer(base);
+
+/* Components */
+@import "../components/layout.css" layer(components);
+@import "../components/surfaces.css" layer(components);
+@import "../components/typography.css" layer(components);
+@import "../components/badges.css" layer(components);
+@import "../components/buttons.css" layer(components);
+@import "../components/forms.css" layer(components);
+@import "../components/tables.css" layer(components);
+@import "../components/progress.css" layer(components);
+@import "../components/states.css" layer(components);
+
+/* Utilities */
+@import "../components/utilities.css" layer(utilities);
+
+/* Pages (for shared formatters) */
+@import "../pages/detail.css" layer(pages);
+
+/* Slide views */
+@import "../views/slide-animations.css" layer(slides);
+@import "../views/slide-base.css" layer(slides);
+@import "../views/slide-sections.css" layer(slides);
+@import "../views/slide-tables.css" layer(slides);
+
+/* Print */
+@import "../views/print.css" layer(print);