@forwardimpact/pathway 0.13.0 → 0.14.0

package/src/formatters/agent/profile.js

@@ -23,7 +23,7 @@ import {
  */
 
 /**
- * @typedef {Object} BeforeHandoffEntry
+ * @typedef {Object} ConfirmChecklistEntry
  * @property {{id: string, name: string}} skill - Skill info
  * @property {{id: string, name: string, emojiIcon: string}} capability - Capability info
  * @property {string[]} items - Checklist items
@@ -41,12 +41,15 @@ import {
  * @param {Object} params.bodyData - Structured body data
  * @param {string} params.bodyData.title - Agent title
  * @param {string} params.bodyData.stageDescription - Stage description text
+ * @param {string} params.bodyData.stageId - Stage identifier (e.g. "plan", "code", "onboard")
+ * @param {string} params.bodyData.stageName - Human-readable stage name (e.g. "Plan", "Code", "Onboard")
+ * @param {boolean} params.bodyData.isOnboard - Whether this is the onboard stage
  * @param {string} params.bodyData.identity - Core identity text
  * @param {string} [params.bodyData.priority] - Priority/philosophy statement
  * @param {Array<{name: string, dirname: string, useWhen: string}>} params.bodyData.skillIndex - Skill index entries
  * @param {string} params.bodyData.roleContext - Role context text
  * @param {WorkingStyleEntry[]} params.bodyData.workingStyles - Working style entries
- * @param {BeforeHandoffEntry[]} [params.bodyData.beforeHandoff] - Before handoff checklist entries
+ * @param {ConfirmChecklistEntry[]} [params.bodyData.confirmChecklist] - Confirm Checklist entries
  * @param {string[]} params.bodyData.constraints - List of constraints
  * @param {Array<{id: string, name: string, description: string}>} [params.bodyData.agentIndex] - List of all available agents
  * @param {boolean} [params.bodyData.hasAgentIndex] - Whether agent index is available
@@ -77,8 +80,8 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
     content: "required",
   });
 
-  // Process beforeHandoff: trim items in each entry
-  const beforeHandoff = (bodyData.beforeHandoff || []).map((entry) => ({
+  // Process confirmChecklist: trim items in each entry
+  const confirmChecklist = (bodyData.confirmChecklist || []).map((entry) => ({
     skill: entry.skill,
     capability: entry.capability,
     items: (entry.items || []).map((item) => trimRequired(item)),
@@ -94,6 +97,9 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
     // Body data - trim all string fields
     title: bodyData.title,
     stageDescription: trimValue(bodyData.stageDescription),
+    stageId: bodyData.stageId,
+    stageName: bodyData.stageName,
+    isOnboard: bodyData.isOnboard,
     identity: trimValue(bodyData.identity),
     priority: trimValue(bodyData.priority),
     skillIndex,
@@ -101,8 +107,8 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
     roleContext: trimValue(bodyData.roleContext),
     workingStyles,
     hasWorkingStyles: workingStyles.length > 0,
-    beforeHandoff,
-    hasBeforeHandoff: beforeHandoff.length > 0,
+    confirmChecklist,
+    hasConfirmChecklist: confirmChecklist.length > 0,
     constraints,
     hasConstraints: constraints.length > 0,
     agentIndex,
@@ -127,7 +133,7 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
  * @param {Array<{name: string, dirname: string, useWhen: string}>} profile.bodyData.skillIndex - Skill index entries
  * @param {string} profile.bodyData.roleContext - Role context text
  * @param {WorkingStyleEntry[]} profile.bodyData.workingStyles - Working style entries
- * @param {BeforeHandoffEntry[]} [profile.bodyData.beforeHandoff] - Before handoff checklist entries (optional)
+ * @param {ConfirmChecklistEntry[]} [profile.bodyData.confirmChecklist] - Confirm Checklist entries (optional)
  * @param {string[]} profile.bodyData.constraints - List of constraints
  * @param {string} template - Mustache template string
  * @returns {string} Complete .agent.md file content

package/src/formatters/agent/skill.js

@@ -22,7 +22,7 @@ import { flattenToLine } from "../template-preprocess.js";
  * @param {string} params.frontmatter.description - Skill description (required)
  * @param {string} [params.frontmatter.useWhen] - When to use this skill
  * @param {string} params.title - Human-readable skill title for heading
- * @param {Array} params.stages - Array of stage objects with stageName, focus, activities, ready
+ * @param {Array} params.stages - Array of stage objects with stageName, focus, readChecklist, confirmChecklist
  * @param {string} params.reference - Reference content (markdown)
  * @param {Array} [params.toolReferences] - Array of tool reference objects
  * @returns {Object} Data object ready for Mustache template
@@ -37,8 +37,8 @@ function prepareAgentSkillData({
   // Process stages - trim focus and array values
   const processedStages = trimFields(stages, {
     focus: "required",
-    activities: "array",
-    ready: "array",
+    readChecklist: "array",
+    confirmChecklist: "array",
   });
 
   // Flatten multi-line strings to single line for front matter compatibility
@@ -77,7 +77,7 @@ function prepareAgentSkillData({
  * @param {string} skill.frontmatter.name - Skill name (required)
  * @param {string} skill.frontmatter.description - Skill description (required)
  * @param {string} skill.title - Human-readable skill title for heading
- * @param {Array} skill.stages - Array of stage objects with stageName, focus, activities, ready
+ * @param {Array} skill.stages - Array of stage objects with stageName, focus, readChecklist, confirmChecklist
  * @param {string} skill.reference - Reference content (markdown)
  * @param {Array} [skill.toolReferences] - Array of tool reference objects
  * @param {string} template - Mustache template string

package/src/formatters/stage/dom.js

@@ -34,33 +34,36 @@ export function stageToDOM(stage, { stages = [], showBackLink = true } = {}) {
       p({ className: "page-description" }, view.description),
     ),
 
-    // Entry/Exit Criteria
-    view.entryCriteria.length > 0 || view.exitCriteria.length > 0
+    // Read/Confirm Checklists
+    view.readChecklist.length > 0 || view.confirmChecklist.length > 0
       ? div(
           { className: "section section-detail" },
           div(
             { className: "content-columns" },
-            // Entry criteria column
-            view.entryCriteria.length > 0
+            // Read checklist column
+            view.readChecklist.length > 0
               ? div(
                   { className: "column" },
-                  h2({ className: "section-title" }, "Entry Criteria"),
+                  h2({ className: "section-title" }, "Read-Then-Do Checklist"),
                   ul(
                     { className: "criteria-list" },
-                    ...view.entryCriteria.map((item) =>
+                    ...view.readChecklist.map((item) =>
                       li({ className: "criteria-item" }, item),
                     ),
                   ),
                 )
               : null,
-            // Exit criteria column
-            view.exitCriteria.length > 0
+            // Confirm checklist column
+            view.confirmChecklist.length > 0
               ? div(
                   { className: "column" },
-                  h2({ className: "section-title" }, "Exit Criteria"),
+                  h2(
+                    { className: "section-title" },
+                    "Do-Then-Confirm Checklist",
+                  ),
                   ul(
                     { className: "criteria-list" },
-                    ...view.exitCriteria.map((item) =>
+                    ...view.confirmChecklist.map((item) =>
                       li({ className: "criteria-item" }, item),
                     ),
                   ),

package/src/formatters/stage/microdata.js

@@ -60,11 +60,11 @@ export function stageToMicrodata(stage) {
 
   const sections = [];
 
-  // Entry criteria
-  if (view.entryCriteria.length > 0) {
-    const criteriaItems = view.entryCriteria.map((c) => escapeHtml(c));
+  // Read checklist
+  if (view.readChecklist.length > 0) {
+    const readItems = view.readChecklist.map((c) => escapeHtml(c));
     sections.push(
-      section("Entry Criteria", ul(criteriaItems, "entryCriteria"), 2),
+      section("Read-Then-Do Checklist", ul(readItems, "readChecklist"), 2),
     );
   }
 
@@ -76,10 +76,16 @@ export function stageToMicrodata(stage) {
     );
   }
 
-  // Exit criteria
-  if (view.exitCriteria.length > 0) {
-    const exitItems = view.exitCriteria.map((c) => escapeHtml(c));
-    sections.push(section("Exit Criteria", ul(exitItems, "exitCriteria"), 2));
+  // Confirm checklist
+  if (view.confirmChecklist.length > 0) {
+    const confirmItems = view.confirmChecklist.map((c) => escapeHtml(c));
+    sections.push(
+      section(
+        "Do-Then-Confirm Checklist",
+        ul(confirmItems, "confirmChecklist"),
+        2,
+      ),
+    );
   }
 
   // Handoffs - using Handoff itemtype

package/src/formatters/stage/shared.js

@@ -46,8 +46,8 @@ export function prepareStagesList(stages, descriptionLimit = 150) {
  * @property {string} name
  * @property {string} description
  * @property {string[]} constraints
- * @property {string[]} entryCriteria
- * @property {string[]} exitCriteria
+ * @property {string[]} readChecklist
+ * @property {string[]} confirmChecklist
  * @property {Array<{target: string, label: string, prompt: string}>} handoffs
  */
 
@@ -62,8 +62,8 @@ export function prepareStageDetail(stage) {
     name: stage.name,
     description: stage.description,
     constraints: stage.constraints || [],
-    entryCriteria: stage.entryCriteria || [],
-    exitCriteria: stage.exitCriteria || [],
+    readChecklist: stage.readChecklist || [],
+    confirmChecklist: stage.confirmChecklist || [],
     handoffs: (stage.handoffs || []).map((h) => ({
       target: h.targetStage,
       label: h.label,

package/src/index.html

@@ -43,56 +43,81 @@
     </script>
   </head>
   <body>
-    <div id="app">
-      <nav id="app-nav">
-        <div class="nav-brand">
-          <a href="#/">Engineering Pathway</a>
-          <span class="brand-tag">#BenchTools</span>
-        </div>
+    <div id="app" class="drawer-open">
+      <header class="top-bar" id="top-bar">
         <button
-          class="nav-toggle"
-          id="nav-toggle"
-          aria-label="Toggle navigation"
+          class="top-bar__toggle"
+          id="sidebar-toggle"
+          aria-label="Toggle sidebar"
         >
-          <span></span>
-          <span></span>
-          <span></span>
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="3" />
+            <line x1="9" y1="3" x2="9" y2="21" />
+          </svg>
         </button>
-        <ul class="nav-links" id="nav-links">
-          <li><a href="#/discipline">Disciplines</a></li>
-          <li><a href="#/grade">Grades</a></li>
-          <li><a href="#/track">Tracks</a></li>
-          <li><a href="#/behaviour">Behaviours</a></li>
-          <li><a href="#/skill">Skills</a></li>
-          <li><a href="#/driver">Drivers</a></li>
-          <li><a href="#/stage">Stages</a></li>
-          <li><a href="#/tool">Tools</a></li>
-          <li><a href="#/job-builder" class="nav-cta">Build a Job</a></li>
-          <li><a href="#/agent-builder" class="nav-cta">Build an Agent</a></li>
-          <li><a href="#/interview-prep" class="nav-cta">Interview Prep</a></li>
-          <li>
-            <a href="#/career-progress" class="nav-cta">Career Progress</a>
-          </li>
-          <li>
-            <a href="#/self-assessment" class="nav-cta">Self-Assessment</a>
-          </li>
-        </ul>
-      </nav>
-
-      <main id="app-content">
-        <div class="loading">
-          <div class="loading-spinner"></div>
-          <p>Loading...</p>
+        <div class="top-bar__command">
+          <span class="top-bar__prompt">$</span>
+          <span class="top-bar__command-text" id="cli-command"
+            >npx fit-pathway</span
+          >
+          <button class="top-bar__copy" id="cli-copy" aria-label="Copy command">
+            <svg viewBox="0 0 24 24">
+              <rect x="9" y="9" width="13" height="13" rx="2" />
+              <path
+                d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+              />
+            </svg>
+          </button>
         </div>
-      </main>
+      </header>
 
-      <footer id="app-footer">
-        <p>Engineering Pathway</p>
-        <nav class="footer-links">
-          <a href="slides.html">Slides</a>
-          <a href="handout.html">Handouts</a>
+      <aside id="app-drawer">
+        <div class="drawer-header">
+          <a href="#/" class="nav-brand">
+            <span class="brand-emoji">🧭</span>
+            <span class="brand-title">Engineering Pathway</span>
+            <span class="brand-tag">#BenchTools</span>
+          </a>
+        </div>
+        <nav class="drawer-nav" id="drawer-nav">
+          <div class="drawer-section">
+            <span class="drawer-section-label">Browse</span>
+            <a href="#/discipline">Disciplines</a>
+            <a href="#/grade">Grades</a>
+            <a href="#/track">Tracks</a>
+            <a href="#/behaviour">Behaviours</a>
+            <a href="#/skill">Skills</a>
+            <a href="#/driver">Drivers</a>
+            <a href="#/stage">Stages</a>
+            <a href="#/tool">Tools</a>
+          </div>
+          <div class="drawer-section">
+            <span class="drawer-section-label">Work</span>
+            <a href="#/job-builder" class="drawer-cta">Build a Job</a>
+            <a href="#/agent-builder" class="drawer-cta">Build an Agent</a>
+            <a href="#/interview-prep" class="drawer-cta">Interview Prep</a>
+            <a href="#/career-progress" class="drawer-cta">Career Progress</a>
+            <a href="#/self-assessment" class="drawer-cta">Self-Assessment</a>
+          </div>
         </nav>
-      </footer>
+      </aside>
+
+      <div class="app-body">
+        <main id="app-content">
+          <div class="loading">
+            <div class="loading-spinner"></div>
+            <p>Loading...</p>
+          </div>
+        </main>
+
+        <footer id="app-footer">
+          <p>Engineering Pathway</p>
+          <nav class="footer-links">
+            <a href="slides.html">Slides</a>
+            <a href="handout.html">Handouts</a>
+          </nav>
+        </footer>
+      </div>
     </div>
 
     <script type="module" src="main.js"></script>

package/src/lib/cli-command.js

@@ -0,0 +1,145 @@
+/**
+ * CLI Command Mapping
+ *
+ * Maps hash routes to their equivalent `npx fit-pathway` CLI commands.
+ */
+
+/**
+ * Route-to-CLI command rules, checked in order.
+ * Each rule has a pattern (regex) and a function that produces the CLI string.
+ * @type {Array<{ pattern: RegExp, toCommand: (match: RegExpMatchArray) => string }>}
+ */
+const ROUTE_COMMANDS = [
+  // Landing
+  { pattern: /^\/$/, toCommand: () => "npx fit-pathway" },
+
+  // Entity lists
+  { pattern: /^\/skill$/, toCommand: () => "npx fit-pathway skill" },
+  { pattern: /^\/behaviour$/, toCommand: () => "npx fit-pathway behaviour" },
+  {
+    pattern: /^\/discipline$/,
+    toCommand: () => "npx fit-pathway discipline",
+  },
+  { pattern: /^\/track$/, toCommand: () => "npx fit-pathway track" },
+  { pattern: /^\/grade$/, toCommand: () => "npx fit-pathway grade" },
+  { pattern: /^\/driver$/, toCommand: () => "npx fit-pathway driver" },
+  { pattern: /^\/stage$/, toCommand: () => "npx fit-pathway stage" },
+  { pattern: /^\/tool$/, toCommand: () => "npx fit-pathway tool" },
+
+  // Entity details
+  {
+    pattern: /^\/skill\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway skill ${m[1]}`,
+  },
+  {
+    pattern: /^\/behaviour\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway behaviour ${m[1]}`,
+  },
+  {
+    pattern: /^\/discipline\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway discipline ${m[1]}`,
+  },
+  {
+    pattern: /^\/track\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway track ${m[1]}`,
+  },
+  {
+    pattern: /^\/grade\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway grade ${m[1]}`,
+  },
+  {
+    pattern: /^\/driver\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway driver ${m[1]}`,
+  },
+  {
+    pattern: /^\/stage\/(.+)$/,
+    toCommand: (m) => `npx fit-pathway stage ${m[1]}`,
+  },
+
+  // Job builder + detail
+  {
+    pattern: /^\/job-builder$/,
+    toCommand: () => "npx fit-pathway job --list",
+  },
+  {
+    pattern: /^\/job\/([^/]+)\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway job ${m[1]} ${m[2]} --track=${m[3]}`,
+  },
+  {
+    pattern: /^\/job\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway job ${m[1]} ${m[2]}`,
+  },
+
+  // Interview builder + detail
+  {
+    pattern: /^\/interview-prep$/,
+    toCommand: () => "npx fit-pathway interview --list",
+  },
+  {
+    pattern: /^\/interview\/([^/]+)\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) =>
+      `npx fit-pathway interview ${m[1]} ${m[2]} --track=${m[3]}`,
+  },
+  {
+    pattern: /^\/interview\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway interview ${m[1]} ${m[2]}`,
+  },
+
+  // Career progress builder + detail
+  {
+    pattern: /^\/career-progress$/,
+    toCommand: () => "npx fit-pathway progress --list",
+  },
+  {
+    pattern: /^\/progress\/([^/]+)\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) =>
+      `npx fit-pathway progress ${m[1]} ${m[2]} --track=${m[3]}`,
+  },
+  {
+    pattern: /^\/progress\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway progress ${m[1]} ${m[2]}`,
+  },
+
+  // Self-assessment
+  {
+    pattern: /^\/self-assessment$/,
+    toCommand: () => "npx fit-pathway self-assessment",
+  },
+  {
+    pattern: /^\/self-assessment\/results$/,
+    toCommand: () => "npx fit-pathway self-assessment",
+  },
+
+  // Agent builder + detail
+  {
+    pattern: /^\/agent-builder$/,
+    toCommand: () => "npx fit-pathway agent --list",
+  },
+  {
+    pattern: /^\/agent\/([^/]+)\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) =>
+      `npx fit-pathway agent ${m[1]} --track=${m[2]} --stage=${m[3]}`,
+  },
+  {
+    pattern: /^\/agent\/([^/]+)\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway agent ${m[1]} --track=${m[2]}`,
+  },
+  {
+    pattern: /^\/agent\/([^/]+)$/,
+    toCommand: (m) => `npx fit-pathway agent ${m[1]}`,
+  },
+];
+
+/**
+ * Get the CLI command equivalent for a given hash path
+ * @param {string} hashPath - The hash path (without #), e.g. "/skill/testing"
+ * @returns {string} The CLI command string
+ */
+export function getCliCommand(hashPath) {
+  const path = hashPath.split("?")[0] || "/";
+  for (const { pattern, toCommand } of ROUTE_COMMANDS) {
+    const match = path.match(pattern);
+    if (match) return toCommand(match);
+  }
+  return "npx fit-pathway";
+}

package/src/lib/state.js

@@ -132,6 +132,7 @@ export function getFilters(entity) {
  * @property {string} title - Application title
  * @property {string} tag - Brand hashtag/tag
  * @property {string} description - Application description
+ * @property {string} emojiIcon - Emoji icon for the framework
  */
 
 /**
@@ -144,5 +145,6 @@ export function getBranding() {
     title: framework.title || "Engineering Pathway",
     tag: framework.tag || "#BenchTools",
     description: framework.description || "",
+    emojiIcon: framework.emojiIcon || "🧭",
   };
 }

package/src/main.js

@@ -6,6 +6,8 @@ import { createPagesRouter } from "./lib/router-pages.js";
 import { setData, setError, getBranding } from "./lib/state.js";
 import { loadAllData } from "./lib/yaml-loader.js";
 import { render, div, h1, p, showError } from "./lib/render.js";
+import { updateActiveNav } from "./components/nav.js";
+import { setupTopBar, updateCommand } from "./components/top-bar.js";
 
 const router = createPagesRouter({
   onNotFound: renderNotFound,
@@ -41,8 +43,9 @@ import { renderAgentBuilder } from "./pages/agent-builder.js";
  * Initialize the application
  */
 async function init() {
-  // Set up navigation toggle for mobile
-  setupMobileNav();
+  // Set up top bar (sidebar toggle + CLI command display)
+  setupTopBar();
+  setupDrawerOverlay();
 
   // Load data
   try {
@@ -63,6 +66,14 @@ async function init() {
 
   // Start router
   router.start();
+
+  // Update active nav link and CLI command on route changes
+  const updateNav = () => {
+    updateActiveNav(window.location.hash.slice(1) || "/");
+    updateCommand();
+  };
+  window.addEventListener("hashchange", updateNav);
+  updateNav();
 }
 
 /**
@@ -175,13 +186,19 @@ function populateBranding() {
   // Update document title
   document.title = branding.title;
 
-  // Update nav brand
-  const navBrand = document.querySelector(".nav-brand a");
-  if (navBrand) {
-    navBrand.textContent = branding.title;
+  // Update drawer brand
+  const brandTitle = document.querySelector(".nav-brand .brand-title");
+  if (brandTitle) {
+    brandTitle.textContent = branding.title;
+  }
+
+  // Update drawer brand emoji
+  const brandEmoji = document.querySelector(".nav-brand .brand-emoji");
+  if (brandEmoji) {
+    brandEmoji.textContent = branding.emojiIcon;
   }
 
-  // Update nav brand tag
+  // Update drawer brand tag
   const brandTag = document.querySelector(".nav-brand .brand-tag");
   if (brandTag) {
     brandTag.textContent = branding.tag;
@@ -195,26 +212,30 @@ function populateBranding() {
 }
 
 /**
- * Set up mobile navigation toggle
+ * Set up drawer overlay for mobile backdrop and auto-close behavior
  */
-function setupMobileNav() {
-  const toggle = document.getElementById("nav-toggle");
-  const links = document.getElementById("nav-links");
-
-  if (toggle && links) {
-    toggle.addEventListener("click", () => {
-      links.classList.toggle("nav-open");
-      toggle.classList.toggle("nav-toggle-active");
-    });
-
-    // Close menu when a link is clicked
-    links.addEventListener("click", (e) => {
-      if (e.target.tagName === "A") {
-        links.classList.remove("nav-open");
-        toggle.classList.remove("nav-toggle-active");
-      }
-    });
-  }
+function setupDrawerOverlay() {
+  const app = document.getElementById("app");
+  const drawer = document.getElementById("app-drawer");
+
+  if (!drawer) return;
+
+  // Create overlay element for mobile backdrop
+  const overlay = document.createElement("div");
+  overlay.className = "drawer-overlay";
+  app.insertBefore(overlay, drawer);
+
+  // Close drawer when overlay is clicked (mobile)
+  overlay.addEventListener("click", () => {
+    app.classList.remove("drawer-open");
+  });
+
+  // Close drawer on mobile when a link is clicked
+  drawer.addEventListener("click", (e) => {
+    if (e.target.tagName === "A" && window.innerWidth <= 768) {
+      app.classList.remove("drawer-open");
+    }
+  });
 }
 
 // Start the app

package/src/pages/agent-builder.js

@@ -562,9 +562,6 @@ function createAllStagesPreview(context) {
           content: createToolkitTable(toolkit),
         })
       : null,
-
-    // CLI hint
-    createCliHint(humanDiscipline.id, humanTrack.id),
   );
 }
 
@@ -687,9 +684,6 @@ function createSingleStagePreview(context, stage) {
           content: createToolkitTable(toolkit),
         })
       : null,
-
-    // CLI hint
-    createCliHint(humanDiscipline.id, humanTrack.id, stage.id),
   );
 }
 
@@ -936,29 +930,7 @@ async function importJSZip() {
   return module.default;
 }
 
-/**
- * Create CLI hint section
- * @param {string} disciplineId - Discipline ID
- * @param {string} trackId - Track ID
- * @param {string} [stageId] - Optional stage ID
- * @returns {HTMLElement}
- */
-function createCliHint(disciplineId, trackId, stageId) {
-  const stageArg = stageId ? ` --stage=${stageId}` : "";
-  const command = `npx pathway agent ${disciplineId} ${trackId}${stageArg} --output=.github`;
-
-  const container = section(
-    { className: "agent-section cli-hint" },
-    h2({}, "CLI Alternative"),
-    p({}, "Generate this agent from the command line:"),
-    createCodeDisplay({
-      content: command,
-      language: "bash",
-    }),
-  );
 
-  return container;
-}
 
 /**
  * Create help section explaining how agent builder works