@forwardimpact/pathway 0.1.0

package/app/pages/landing.js

@@ -0,0 +1,305 @@
+/**
+ * Landing page
+ */
+
+import { render, div, h1, h2, p, a, span } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createStatCard } from "../components/card.js";
+import { groupSkillsByCapability, getConceptEmoji } from "../model/levels.js";
+import { getStageEmoji } from "../formatters/stage/shared.js";
+
+/**
+ * Create lifecycle flow visualization for landing page
+ * @param {Array} stages - Array of stage objects
+ * @returns {HTMLElement}
+ */
+function createLifecycleFlow(stages) {
+  const flowItems = stages.map((stage, index) => {
+    const emoji = getStageEmoji(stages, stage.id);
+    const isLast = index === stages.length - 1;
+
+    return div(
+      { className: "lifecycle-flow-item" },
+      a(
+        { href: `#/stage/${stage.id}`, className: "lifecycle-stage" },
+        span({ className: "lifecycle-emoji" }, emoji),
+        span({ className: "lifecycle-name" }, stage.name),
+      ),
+      !isLast ? span({ className: "lifecycle-arrow" }, "→") : null,
+    );
+  });
+
+  return div({ className: "lifecycle-flow" }, ...flowItems);
+}
+
+/**
+ * Render the landing page
+ */
+export function renderLanding() {
+  const { data } = getState();
+  const { framework } = data;
+  const stages = data.stages || [];
+
+  // Calculate stats using centralized capability ordering
+  const skillsByCapability = groupSkillsByCapability(data.skills);
+  const capabilityCount = Object.keys(skillsByCapability).length;
+
+  const page = div(
+    { className: "landing-page" },
+    // Hero section
+    div(
+      { className: "landing-hero" },
+      div(
+        { className: "hero-title-wrapper" },
+        h1({}, `${framework.emoji} ${framework.title}`),
+        span({ className: "brand-tag brand-tag-hero" }, framework.tag),
+      ),
+      p({}, framework.description.trim()),
+      // Job builder CTA
+      div(
+        { className: "page-actions", style: "justify-content: center" },
+        a(
+          { href: "#/job-builder", className: "btn btn-primary btn-lg" },
+          "Build a Job",
+        ),
+        a(
+          { href: "#/agent-builder", className: "btn btn-primary btn-lg" },
+          "Build an Agent",
+        ),
+        a(
+          { href: "#/interview-prep", className: "btn btn-secondary btn-lg" },
+          "Interview Prep",
+        ),
+        a(
+          { href: "#/career-progress", className: "btn btn-secondary btn-lg" },
+          "Career Progress",
+        ),
+        a(
+          { href: "#/self-assessment", className: "btn btn-secondary btn-lg" },
+          "Self-Assessment",
+        ),
+      ),
+    ),
+
+    // Stats grid
+    div(
+      { className: "grid grid-6" },
+      createStatCard({
+        value: data.disciplines.length,
+        label: "Disciplines",
+        href: "/discipline",
+      }),
+      createStatCard({
+        value: data.tracks.length,
+        label: "Tracks",
+        href: "/track",
+      }),
+      createStatCard({
+        value: data.grades.length,
+        label: "Grades",
+        href: "/grade",
+      }),
+      createStatCard({
+        value: data.skills.length,
+        label: "Skills",
+        href: "/skill",
+      }),
+      createStatCard({
+        value: data.behaviours.length,
+        label: "Behaviours",
+        href: "/behaviour",
+      }),
+      createStatCard({
+        value: stages.length,
+        label: "Stages",
+        href: "/stage",
+      }),
+    ),
+
+    // Lifecycle flow visualization
+    stages.length > 0
+      ? div(
+          { className: "section section-detail" },
+          h2({ className: "section-title" }, "🔄 Engineering Lifecycle"),
+          p(
+            { className: "text-muted", style: "margin-bottom: 1rem" },
+            "The three stages of engineering work, from planning through review.",
+          ),
+          createLifecycleFlow(stages),
+        )
+      : null,
+
+    // Quick links section
+    div(
+      { className: "section section-detail" },
+      h2({ className: "section-title" }, "Explore the Framework"),
+      div(
+        { className: "grid grid-3" },
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "discipline")} ${framework.entityDefinitions.discipline.title}`,
+          `${data.disciplines.length} ${framework.entityDefinitions.discipline.title.toLowerCase()} — ${framework.entityDefinitions.discipline.description.trim().split("\n")[0]}`,
+          "/discipline",
+        ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "track")} ${framework.entityDefinitions.track.title}`,
+          `${data.tracks.length} ${framework.entityDefinitions.track.title.toLowerCase()} — ${framework.entityDefinitions.track.description.trim().split("\n")[0]}`,
+          "/track",
+        ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "grade")} ${framework.entityDefinitions.grade.title}`,
+          `${data.grades.length} ${framework.entityDefinitions.grade.title.toLowerCase()} — ${framework.entityDefinitions.grade.description.trim().split("\n")[0]}`,
+          "/grade",
+        ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "skill")} ${framework.entityDefinitions.skill.title}`,
+          `${data.skills.length} ${framework.entityDefinitions.skill.title.toLowerCase()} across ${capabilityCount} capabilities — ${framework.entityDefinitions.skill.description.trim().split("\n")[0]}`,
+          "/skill",
+        ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "behaviour")} ${framework.entityDefinitions.behaviour.title}`,
+          `${data.behaviours.length} ${framework.entityDefinitions.behaviour.title.toLowerCase()} — ${framework.entityDefinitions.behaviour.description.trim().split("\n")[0]}`,
+          "/behaviour",
+        ),
+        createQuickLinkCard(
+          "🔄 Stages",
+          `${stages.length} stages — The engineering lifecycle from planning through review.`,
+          "/stage",
+        ),
+        createQuickLinkCard(
+          `${getConceptEmoji(framework, "driver")} ${framework.entityDefinitions.driver.title}`,
+          `${data.drivers.length} ${framework.entityDefinitions.driver.title.toLowerCase()} — ${framework.entityDefinitions.driver.description.trim().split("\n")[0]}`,
+          "/driver",
+        ),
+      ),
+    ),
+
+    // Build Your Team section
+    div(
+      { className: "section section-detail" },
+      h2({ className: "section-title" }, "Build Your Team"),
+
+      // CTA cards grid
+      div(
+        { className: "grid grid-2" },
+        // Job builder CTA
+        div(
+          { className: "card", style: "text-align: center" },
+          h2({}, "🔨 Build a Job Definition"),
+          p(
+            {},
+            "Combine a discipline, track, and grade to generate a complete job definition " +
+              "with skill matrices and behaviour profiles.",
+          ),
+          div(
+            { className: "page-actions", style: "justify-content: center" },
+            a(
+              { href: "#/job-builder", className: "btn btn-primary btn-lg" },
+              "Start Building →",
+            ),
+          ),
+        ),
+
+        // Interview prep CTA
+        div(
+          { className: "card", style: "text-align: center" },
+          h2({}, "🎤 Prep for an Interview"),
+          p(
+            {},
+            "Generate tailored interview questions based on role requirements " +
+              "to ensure comprehensive candidate assessment.",
+          ),
+          div(
+            { className: "page-actions", style: "justify-content: center" },
+            a(
+              { href: "#/interview-prep", className: "btn btn-primary btn-lg" },
+              "Interview Prep →",
+            ),
+          ),
+        ),
+
+        // Career progress CTA
+        div(
+          { className: "card", style: "text-align: center" },
+          h2({}, "📈 Plan Your Career"),
+          p(
+            {},
+            "Visualize your progression to the next grade and compare expectations " +
+              "across different tracks to plan your career development.",
+          ),
+          div(
+            { className: "page-actions", style: "justify-content: center" },
+            a(
+              {
+                href: "#/career-progress",
+                className: "btn btn-primary btn-lg",
+              },
+              "Career Progress →",
+            ),
+          ),
+        ),
+
+        // Self-assessment CTA
+        div(
+          { className: "card", style: "text-align: center" },
+          h2({}, `${getConceptEmoji(framework, "driver")} Assess Your Skills`),
+          p(
+            {},
+            "Assess your current skills and behaviours to discover matching roles " +
+              "and identify development opportunities.",
+          ),
+          div(
+            { className: "page-actions", style: "justify-content: center" },
+            a(
+              {
+                href: "#/self-assessment",
+                className: "btn btn-primary btn-lg",
+              },
+              "Start Assessment →",
+            ),
+          ),
+        ),
+
+        // Agent builder CTA
+        div(
+          { className: "card", style: "text-align: center" },
+          h2({}, "🤖 Build an AI Agent"),
+          p(
+            {},
+            "Generate AI coding agent configurations from discipline × track combinations " +
+              "for GitHub Copilot custom agents.",
+          ),
+          div(
+            { className: "page-actions", style: "justify-content: center" },
+            a(
+              { href: "#/agent-builder", className: "btn btn-primary btn-lg" },
+              "Build Agent →",
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  render(page);
+}
+
+/**
+ * Create a quick link card
+ * @param {string} title
+ * @param {string} description
+ * @param {string} href
+ * @returns {HTMLElement}
+ */
+function createQuickLinkCard(title, description, href) {
+  const card = div(
+    { className: "card card-clickable" },
+    h2({ className: "card-title", style: "font-size: 1.25rem" }, title),
+    p({ className: "card-description" }, description),
+  );
+
+  card.addEventListener("click", () => {
+    window.location.hash = href;
+  });
+
+  return card;
+}

package/app/pages/progress-builder.js

@@ -0,0 +1,58 @@
+/**
+ * Career progress selection page
+ */
+
+import { render } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBuilder, createProgressPreview } from "../components/builder.js";
+import { prepareCareerProgressPreview } from "../formatters/progress/shared.js";
+
+/**
+ * Render career progress selection page
+ */
+export function renderCareerProgress() {
+  const { data } = getState();
+
+  render(
+    createBuilder({
+      title: "Career Progress",
+      description:
+        "Select your current role to visualize career progression. See what skills and behaviours " +
+        "change as you advance to the next grade, or compare expectations across different tracks.",
+      formTitle: "Select Your Current Role",
+      emptyPreviewText:
+        "Select all three components to preview progression paths.",
+      buttonText: "View Career Progress →",
+      previewPresenter: (selection) =>
+        prepareCareerProgressPreview({
+          ...selection,
+          grades: data.grades,
+          tracks: data.tracks,
+        }),
+      detailPath: (sel) =>
+        `/progress/${sel.discipline}/${sel.track}/${sel.grade}`,
+      renderPreview: createProgressPreview,
+      labels: {
+        grade: "Current Grade",
+      },
+      helpItems: [
+        {
+          label: "📈 Grade Progression",
+          text: "See exactly which skills and behaviours need to grow to advance to the next grade level.",
+        },
+        {
+          label: "🔀 Track Comparison",
+          text: "Compare how expectations differ across tracks at the same grade - useful for exploring lateral moves.",
+        },
+        {
+          label: "🎯 Development Focus",
+          text: "Identify the specific areas to focus on for career growth based on the engineering pathway.",
+        },
+        {
+          label: "📊 Visual Comparison",
+          text: "Radar charts and comparison tables make it easy to see gaps and growth areas at a glance.",
+        },
+      ],
+    }),
+  );
+}