@forwardimpact/pathway 0.1.0

package/app/components/checklist.js

@@ -0,0 +1,145 @@
+/**
+ * Checklist component
+ *
+ * Displays derived checklists grouped by capability.
+ * Used on job pages to show handoff checklists.
+ */
+
+import { div, span, details, summary } from "../lib/render.js";
+import { getCapabilityEmoji } from "../model/levels.js";
+
+/**
+ * Create checklist display grouped by capability
+ * @param {Array<{capability: string, items: string[]}>} checklist - Checklist groups
+ * @param {Object} options - Display options
+ * @param {boolean} [options.interactive=false] - Whether checkboxes are interactive
+ * @param {Array} [options.capabilities] - Capabilities array for emoji lookup
+ * @returns {HTMLElement}
+ */
+export function createChecklist(checklist, options = {}) {
+  const { interactive = false, capabilities = [] } = options;
+
+  if (!checklist || checklist.length === 0) {
+    return div(
+      { className: "checklist-empty text-muted" },
+      "No checklist items for this transition.",
+    );
+  }
+
+  return div(
+    { className: "checklist" },
+    ...checklist.map((group) =>
+      createChecklistGroup(group, { interactive, capabilities }),
+    ),
+  );
+}
+
+/**
+ * Create a single checklist group for a capability
+ * @param {Object} group - Group with capability and items
+ * @param {Object} options - Display options
+ * @returns {HTMLElement}
+ */
+function createChecklistGroup(group, options) {
+  const { interactive, capabilities } = options;
+  const emoji = getCapabilityEmoji(capabilities, group.capability);
+  const capabilityName = formatCapabilityName(group.capability);
+
+  return div(
+    { className: "checklist-group" },
+    div(
+      { className: "checklist-group-header" },
+      span({ className: "checklist-emoji" }, emoji),
+      span({ className: "checklist-capability" }, capabilityName),
+      span(
+        { className: "checklist-count badge badge-default" },
+        `${group.items.length}`,
+      ),
+    ),
+    div(
+      { className: "checklist-items" },
+      ...group.items.map((item) => createChecklistItem(item, { interactive })),
+    ),
+  );
+}
+
+/**
+ * Create a single checklist item
+ * @param {string} item - Checklist item text
+ * @param {Object} options - Display options
+ * @returns {HTMLElement}
+ */
+function createChecklistItem(item, { interactive }) {
+  const checkbox = interactive
+    ? createInteractiveCheckbox()
+    : span({ className: "checklist-checkbox" }, "☐");
+
+  return div({ className: "checklist-item" }, checkbox, span({}, item));
+}
+
+/**
+ * Create an interactive checkbox element
+ * @returns {HTMLElement}
+ */
+function createInteractiveCheckbox() {
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.className = "checklist-checkbox-input";
+  return input;
+}
+
+/**
+ * Format capability name for display
+ * @param {string} capability - Capability ID
+ * @returns {string}
+ */
+function formatCapabilityName(capability) {
+  return capability.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/**
+ * Create collapsible checklist sections for multiple handoffs
+ * @param {Object} checklists - Object with handoff types as keys
+ * @param {Object} options - Display options
+ * @param {Array} [options.capabilities] - Capabilities for emoji lookup
+ * @returns {HTMLElement}
+ */
+export function createChecklistSections(checklists, options = {}) {
+  const { capabilities = [] } = options;
+  const handoffLabels = {
+    plan_to_code: "📋 → 💻 Plan → Code",
+    code_to_review: "💻 → ✅ Code → Review",
+  };
+
+  const sections = Object.entries(checklists)
+    .filter(([_, items]) => items && items.length > 0)
+    .map(([handoff, items]) => {
+      const label = handoffLabels[handoff] || handoff;
+      const totalItems = items.reduce((sum, g) => sum + g.items.length, 0);
+
+      return details(
+        { className: "checklist-section" },
+        summary(
+          { className: "checklist-section-header" },
+          span({ className: "checklist-section-label" }, label),
+          span(
+            { className: "checklist-section-count badge badge-default" },
+            `${totalItems} items`,
+          ),
+        ),
+        div(
+          { className: "checklist-section-content" },
+          createChecklist(items, { capabilities }),
+        ),
+      );
+    });
+
+  if (sections.length === 0) {
+    return div(
+      { className: "checklist-empty text-muted" },
+      "No checklists available for this role.",
+    );
+  }
+
+  return div({ className: "checklist-sections" }, ...sections);
+}

package/app/components/comparison-radar.js

@@ -0,0 +1,237 @@
+/**
+ * Comparison radar chart component
+ * Displays two overlaid radar charts for comparing current vs target levels
+ */
+
+/** @typedef {import('../types.js').SkillMatrixItem} SkillMatrixItem */
+/** @typedef {import('../types.js').BehaviourProfileItem} BehaviourProfileItem */
+
+import { ComparisonRadarChart } from "../lib/radar.js";
+import { div, h3 } from "../lib/render.js";
+import {
+  getSkillLevelIndex,
+  getBehaviourMaturityIndex,
+  formatLevel,
+} from "../lib/render.js";
+import { getCapabilityIndex } from "../model/levels.js";
+
+/**
+ * Create a comparison skill radar chart
+ * @param {SkillMatrixItem[]} currentMatrix - Current skill matrix entries
+ * @param {SkillMatrixItem[]} targetMatrix - Target skill matrix entries
+ * @param {Object} [options]
+ * @returns {HTMLElement}
+ */
+export function createComparisonSkillRadar(
+  currentMatrix,
+  targetMatrix,
+  options = {},
+) {
+  const container = div(
+    { className: "radar-container comparison-radar" },
+    h3({ className: "radar-title" }, options.title || "Skills Comparison"),
+    div(
+      { className: "radar-legend" },
+      div(
+        { className: "legend-item" },
+        div({ className: "legend-color", style: "background: #3b82f6" }),
+        options.currentLabel || "Current",
+      ),
+      div(
+        { className: "legend-item" },
+        div({ className: "legend-color", style: "background: #10b981" }),
+        options.targetLabel || "Target",
+      ),
+    ),
+    div({
+      className: "radar-chart-wrapper",
+      id: `skill-comparison-${Date.now()}`,
+    }),
+  );
+
+  // Render chart after container is in DOM
+  setTimeout(() => {
+    const wrapper = container.querySelector(".radar-chart-wrapper");
+    if (!wrapper || !currentMatrix || currentMatrix.length === 0) return;
+
+    // Build aligned data arrays that include all skills from both matrices
+    // This handles new skills (in target but not current) and removed skills (in current but not target)
+    const allSkillIds = new Set([
+      ...currentMatrix.map((s) => s.skillId),
+      ...targetMatrix.map((s) => s.skillId),
+    ]);
+
+    // Build skill entries with capability info for sorting
+    const skillEntries = [];
+    for (const skillId of allSkillIds) {
+      const currentSkill = currentMatrix.find((s) => s.skillId === skillId);
+      const targetSkill = targetMatrix.find((s) => s.skillId === skillId);
+      const capability =
+        currentSkill?.capability || targetSkill?.capability || "";
+      const skillName = currentSkill?.skillName || targetSkill?.skillName;
+
+      skillEntries.push({
+        skillId,
+        skillName,
+        capability,
+        currentSkill,
+        targetSkill,
+      });
+    }
+
+    // Sort by capability order, then by skill name within capability
+    skillEntries.sort((a, b) => {
+      const capDiff =
+        getCapabilityIndex(a.capability) - getCapabilityIndex(b.capability);
+      if (capDiff !== 0) return capDiff;
+      return a.skillName.localeCompare(b.skillName);
+    });
+
+    const currentData = [];
+    const targetData = [];
+
+    for (const entry of skillEntries) {
+      const { skillName, currentSkill, targetSkill } = entry;
+
+      currentData.push({
+        label: skillName,
+        value: currentSkill ? getSkillLevelIndex(currentSkill.level) : 0,
+        maxValue: 5,
+        description: currentSkill
+          ? `${formatLevel(currentSkill.type)} - ${formatLevel(currentSkill.level)}`
+          : "Not required",
+      });
+
+      targetData.push({
+        label: skillName,
+        value: targetSkill ? getSkillLevelIndex(targetSkill.level) : 0,
+        maxValue: 5,
+        description: targetSkill
+          ? `${formatLevel(targetSkill.type)} - ${formatLevel(targetSkill.level)}`
+          : "Not required",
+      });
+    }
+
+    const chart = new ComparisonRadarChart({
+      container: wrapper,
+      currentData,
+      targetData,
+      options: {
+        levels: 5,
+        currentColor: options.currentColor || "#3b82f6",
+        targetColor: options.targetColor || "#10b981",
+        size: options.size || 400,
+        showLabels: true,
+        showTooltips: true,
+      },
+    });
+
+    chart.render();
+  }, 0);
+
+  return container;
+}
+
+/**
+ * Create a comparison behaviour radar chart
+ * @param {BehaviourProfileItem[]} currentProfile - Current behaviour profile entries
+ * @param {BehaviourProfileItem[]} targetProfile - Target behaviour profile entries
+ * @param {Object} [options]
+ * @returns {HTMLElement}
+ */
+export function createComparisonBehaviourRadar(
+  currentProfile,
+  targetProfile,
+  options = {},
+) {
+  const container = div(
+    { className: "radar-container comparison-radar" },
+    h3({ className: "radar-title" }, options.title || "Behaviours Comparison"),
+    div(
+      { className: "radar-legend" },
+      div(
+        { className: "legend-item" },
+        div({ className: "legend-color", style: "background: #3b82f6" }),
+        options.currentLabel || "Current",
+      ),
+      div(
+        { className: "legend-item" },
+        div({ className: "legend-color", style: "background: #10b981" }),
+        options.targetLabel || "Target",
+      ),
+    ),
+    div({
+      className: "radar-chart-wrapper",
+      id: `behaviour-comparison-${Date.now()}`,
+    }),
+  );
+
+  // Render chart after container is in DOM
+  setTimeout(() => {
+    const wrapper = container.querySelector(".radar-chart-wrapper");
+    if (!wrapper || !currentProfile || currentProfile.length === 0) return;
+
+    // Build aligned data arrays that include all behaviours from both profiles
+    // This handles new behaviours (in target but not current) and removed behaviours (in current but not target)
+    const allBehaviourIds = new Set([
+      ...currentProfile.map((b) => b.behaviourId),
+      ...targetProfile.map((b) => b.behaviourId),
+    ]);
+
+    const currentData = [];
+    const targetData = [];
+
+    for (const behaviourId of allBehaviourIds) {
+      const currentBehaviour = currentProfile.find(
+        (b) => b.behaviourId === behaviourId,
+      );
+      const targetBehaviour = targetProfile.find(
+        (b) => b.behaviourId === behaviourId,
+      );
+
+      // Use whichever behaviour entry exists for the label
+      const behaviourName =
+        currentBehaviour?.behaviourName || targetBehaviour?.behaviourName;
+
+      currentData.push({
+        label: behaviourName,
+        value: currentBehaviour
+          ? getBehaviourMaturityIndex(currentBehaviour.maturity)
+          : 0,
+        maxValue: 5,
+        description: currentBehaviour
+          ? `${formatLevel(currentBehaviour.maturity)}`
+          : "Not required",
+      });
+
+      targetData.push({
+        label: behaviourName,
+        value: targetBehaviour
+          ? getBehaviourMaturityIndex(targetBehaviour.maturity)
+          : 0,
+        maxValue: 5,
+        description: targetBehaviour
+          ? `${formatLevel(targetBehaviour.maturity)}`
+          : "Not required",
+      });
+    }
+
+    const chart = new ComparisonRadarChart({
+      container: wrapper,
+      currentData,
+      targetData,
+      options: {
+        levels: 5,
+        currentColor: options.currentColor || "#3b82f6",
+        targetColor: options.targetColor || "#10b981",
+        size: options.size || 400,
+        showLabels: true,
+        showTooltips: true,
+      },
+    });
+
+    chart.render();
+  }, 0);
+
+  return container;
+}

package/app/components/detail.js

@@ -0,0 +1,230 @@
+/**
+ * Reusable detail view component
+ */
+
+import {
+  div,
+  h1,
+  h2,
+  p,
+  a,
+  span,
+  table,
+  thead,
+  tbody,
+  tr,
+  th,
+  td,
+  section,
+} from "../lib/render.js";
+import { createBackLink } from "./nav.js";
+import { createTag } from "./card.js";
+import { formatLevel } from "../lib/render.js";
+import {
+  SKILL_LEVEL_ORDER,
+  BEHAVIOUR_MATURITY_ORDER,
+} from "../model/levels.js";
+
+/**
+ * Create a detail page header
+ * @param {Object} options
+ * @param {string} options.title
+ * @param {string} [options.description]
+ * @param {string} options.backLink - Path to go back to
+ * @param {string} [options.backText] - Back link text
+ * @param {HTMLElement[]} [options.badges]
+ * @param {HTMLElement[]} [options.actions] - Action buttons
+ * @returns {HTMLElement}
+ */
+export function createDetailHeader({
+  title,
+  description,
+  backLink,
+  backText = "← Back to list",
+  badges = [],
+  actions = [],
+}) {
+  return div(
+    { className: "page-header" },
+    createBackLink(backLink, backText),
+    div(
+      { className: "card-header" },
+      h1({ className: "page-title" }, title),
+      badges.length > 0 ? div({ className: "page-meta" }, ...badges) : null,
+    ),
+    description ? p({ className: "page-description" }, description) : null,
+    actions.length > 0 ? div({ className: "page-actions" }, ...actions) : null,
+  );
+}
+
+/**
+ * Create a detail section
+ * @param {Object} options
+ * @param {string} options.title
+ * @param {HTMLElement} options.content
+ * @returns {HTMLElement}
+ */
+export function createDetailSection({ title, content }) {
+  return section(
+    { className: "section section-detail" },
+    h2({ className: "section-title" }, title),
+    content,
+  );
+}
+
+/**
+ * Create a level descriptions table
+ * @param {Object} descriptions - Level descriptions object
+ * @param {string} [type='skill'] - 'skill' or 'behaviour'
+ * @returns {HTMLElement}
+ */
+export function createLevelTable(descriptions, type = "skill") {
+  const levels =
+    type === "skill" ? SKILL_LEVEL_ORDER : BEHAVIOUR_MATURITY_ORDER;
+
+  const levelLabels = Object.fromEntries(
+    levels.map((level, index) => [level, String(index + 1)]),
+  );
+
+  const maxLevels = levels.length;
+
+  const rows = levels.map((level) => {
+    const description = descriptions?.[level] || "—";
+    const levelIndex = parseInt(levelLabels[level]);
+    return tr(
+      {},
+      createLevelCell(levelIndex, maxLevels, level),
+      td({}, description),
+    );
+  });
+
+  return div(
+    { className: "table-container" },
+    table(
+      { className: "table levels-table" },
+      thead({}, tr({}, th({}, "Level"), th({}, "Description"))),
+      tbody({}, ...rows),
+    ),
+  );
+}
+
+/**
+ * Create level dots indicator
+ * @param {number} level - Current level (1-based)
+ * @param {number} maxLevel - Maximum level
+ * @returns {HTMLElement}
+ */
+export function createLevelDots(level, maxLevel) {
+  const dots = [];
+  for (let i = 1; i <= maxLevel; i++) {
+    const dot = div({
+      className: `level-dot ${i <= level ? "filled level-" + i : ""}`,
+    });
+    dots.push(dot);
+  }
+  return div({ className: "level-bar" }, ...dots);
+}
+
+/**
+ * Create a level cell with dots and label
+ * @param {number} levelIndex - Current level (1-based index)
+ * @param {number} maxLevels - Maximum levels
+ * @param {string} levelName - Level name to display
+ * @returns {HTMLElement}
+ */
+export function createLevelCell(levelIndex, maxLevels, levelName) {
+  return td(
+    { className: "level-cell" },
+    createLevelDots(levelIndex, maxLevels),
+    span({ className: "level-label" }, formatLevel(levelName)),
+  );
+}
+
+/**
+ * Create an empty level cell (for gained/lost states)
+ * @returns {HTMLElement}
+ */
+export function createEmptyLevelCell() {
+  return td(
+    { className: "level-cell" },
+    span({ className: "level-label text-muted" }, "—"),
+  );
+}
+
+/**
+ * Create a links list
+ * @param {Array<{id: string, name: string}>} items
+ * @param {string} basePath - Base path for links (e.g., '/skill')
+ * @param {string} [emptyMessage='None']
+ * @param {Function} [getDisplayName] - Optional function to get display name
+ * @returns {HTMLElement}
+ */
+export function createLinksList(
+  items,
+  basePath,
+  emptyMessage = "None",
+  getDisplayName,
+) {
+  if (!items || items.length === 0) {
+    return p({ className: "text-muted" }, emptyMessage);
+  }
+
+  const displayFn = getDisplayName || ((item) => item.name);
+  const links = items.map((item) =>
+    a({ href: `#${basePath}/${item.id}` }, displayFn(item)),
+  );
+
+  return div({ className: "links-list" }, ...links);
+}
+
+/**
+ * Create a tags list
+ * @param {string[]} tags
+ * @param {string} [emptyMessage='None']
+ * @returns {HTMLElement}
+ */
+export function createTagsList(tags, emptyMessage = "None") {
+  if (!tags || tags.length === 0) {
+    return p({ className: "text-muted" }, emptyMessage);
+  }
+
+  return div({ className: "tags" }, ...tags.map((tag) => createTag(tag)));
+}
+
+/**
+ * Create a detail grid item
+ * @param {string} label
+ * @param {string|HTMLElement} value
+ * @returns {HTMLElement}
+ */
+export function createDetailItem(label, value) {
+  const valueEl =
+    typeof value === "string"
+      ? div({ className: "detail-item-value" }, value)
+      : value;
+
+  return div(
+    { className: "detail-item" },
+    div({ className: "detail-item-label" }, label),
+    valueEl,
+  );
+}
+
+/**
+ * Create an expectations card
+ * @param {Object} expectations
+ * @returns {HTMLElement}
+ */
+export function createExpectationsCard(expectations) {
+  if (!expectations) return null;
+
+  const items = Object.entries(expectations).map(([key, value]) =>
+    div(
+      { className: "expectation-item" },
+      div({ className: "expectation-label" }, formatLevel(key)),
+      div({ className: "expectation-value" }, value),
+    ),
+  );
+
+  return div({ className: "auto-grid-sm" }, ...items);
+}

package/app/components/error-page.js

@@ -0,0 +1,72 @@
+/**
+ * Error page components
+ */
+
+import { render, div, h1, p, a } from "../lib/render.js";
+
+/**
+ * Render a not found error page
+ * @param {Object} options - Configuration options
+ * @param {string} options.entityType - Type of entity not found (e.g., 'Skill', 'Behaviour')
+ * @param {string} options.entityId - ID that was not found
+ * @param {string} options.backPath - Path to navigate back to
+ * @param {string} options.backText - Text for back link
+ */
+export function renderNotFound({ entityType, entityId, backPath, backText }) {
+  render(
+    div(
+      { className: "error-message" },
+      h1({}, `${entityType} Not Found`),
+      p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
+      a({ href: `#${backPath}` }, backText),
+    ),
+  );
+}
+
+/**
+ * Create a not found error element (without rendering)
+ * @param {Object} options - Configuration options
+ * @param {string} options.entityType - Type of entity not found
+ * @param {string} options.entityId - ID that was not found
+ * @param {string} options.backPath - Path to navigate back to
+ * @param {string} options.backText - Text for back link
+ * @returns {HTMLElement}
+ */
+export function createNotFound({ entityType, entityId, backPath, backText }) {
+  return div(
+    { className: "error-message" },
+    h1({}, `${entityType} Not Found`),
+    p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
+    a({ href: `#${backPath}` }, backText),
+  );
+}
+
+/**
+ * Create an invalid state error element
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Error title
+ * @param {string} options.message - Error message
+ * @param {string} options.backPath - Path to navigate back to
+ * @param {string} options.backText - Text for back link
+ * @returns {HTMLElement}
+ */
+export function createErrorMessage({ title, message, backPath, backText }) {
+  return div(
+    { className: "error-message" },
+    h1({}, title),
+    p({}, message),
+    a({ href: `#${backPath}` }, backText),
+  );
+}
+
+/**
+ * Render an invalid state error page
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Error title
+ * @param {string} options.message - Error message
+ * @param {string} options.backPath - Path to navigate back to
+ * @param {string} options.backText - Text for back link
+ */
+export function renderError({ title, message, backPath, backText }) {
+  render(createErrorMessage({ title, message, backPath, backText }));
+}