@forwardimpact/pathway 0.12.0 → 0.14.0

package/src/css/components/top-bar.css

@@ -0,0 +1,180 @@
+/**
+ * Top Bar
+ *
+ * Fixed bar across the top of the viewport with sidebar toggle and
+ * CLI command display. Inspired by Safari's URL bar + sidebar layout.
+ */
+
+@layer components {
+  /* --------------------------------------------------------------------------
+   Bar container - fixed across top
+   -------------------------------------------------------------------------- */
+  .top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--top-bar-height);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 0 var(--space-sm);
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  /* --------------------------------------------------------------------------
+   Sidebar toggle button
+   -------------------------------------------------------------------------- */
+  .top-bar__toggle {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .top-bar__toggle:hover {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+  }
+
+  .top-bar__toggle:active {
+    background: var(--color-border);
+  }
+
+  /* Sidebar icon: simple sidebar SVG */
+  .top-bar__toggle svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Highlight toggle when drawer is open */
+  .drawer-open .top-bar__toggle {
+    color: var(--color-primary);
+    background: rgba(59, 130, 246, 0.08);
+  }
+
+  /* --------------------------------------------------------------------------
+   Command bar (mimics Safari-style URL bar)
+   -------------------------------------------------------------------------- */
+  .top-bar__command {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 var(--space-sm) 0 var(--space-md);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+    gap: var(--space-xs);
+  }
+
+  .top-bar__command:hover {
+    border-color: var(--color-text-light);
+  }
+
+  .top-bar__command:focus-within {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  }
+
+  /* Terminal prompt icon */
+  .top-bar__prompt {
+    flex-shrink: 0;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-light);
+    user-select: none;
+  }
+
+  /* CLI command text */
+  .top-bar__command-text {
+    flex: 1;
+    min-width: 0;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: all;
+    line-height: 36px;
+  }
+
+  /* Copy button inside the command bar */
+  .top-bar__copy {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-light);
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .top-bar__copy:hover {
+    background: var(--color-border);
+    color: var(--color-text);
+  }
+
+  .top-bar__copy svg {
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Copied state */
+  .top-bar__copy.copied {
+    color: var(--color-success);
+  }
+
+  .top-bar__copy.copied svg {
+    /* Swap from copy icon to checkmark via CSS — JS swaps the class */
+  }
+
+  /* --------------------------------------------------------------------------
+   Layout adjustments - push content below the top bar
+   -------------------------------------------------------------------------- */
+  .app-body {
+    padding-top: var(--top-bar-height);
+  }
+
+  /* --------------------------------------------------------------------------
+   Mobile tweaks
+   -------------------------------------------------------------------------- */
+  @media (max-width: 768px) {
+    .top-bar__prompt {
+      display: none;
+    }
+  }
+}

package/src/css/pages/agent-builder.css

@@ -160,15 +160,6 @@
     gap: var(--space-md);
   }
 
-  /* CLI hint */
-  .cli-hint {
-    background: var(--color-bg);
-  }
-
-  .cli-hint h2 {
-    margin-bottom: var(--space-sm);
-  }
-
   /* Role agents list */
   .role-agents-list {
     display: flex;

package/src/css/pages/landing.css

@@ -37,6 +37,10 @@
     margin: 0 auto var(--space-xl);
   }
 
+  .landing-hero .command-prompt {
+    margin-bottom: var(--space-xl);
+  }
+
   @media (max-width: 640px) {
     .landing-hero h1 {
       font-size: var(--font-size-2xl);

package/src/css/pages/lifecycle.css

@@ -21,9 +21,11 @@
     display: flex;
     align-items: center;
     gap: var(--space-md);
+    flex: 1;
   }
 
   .lifecycle-stage {
+    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -67,8 +69,9 @@
     flex-wrap: wrap;
   }
 
-  .page-title-row .page-title {
-    margin: 0;
+  .page-title-row .page-title,
+  .page-title-row .page-title-badges {
+    margin: 0 0 var(--space-md);
   }
 
   /* Criteria and constraints */

package/src/css/reset.css

@@ -28,7 +28,7 @@
   h5,
   h6 {
     margin: 0;
-    line-height: 1.3;
+    line-height: 1;
     font-weight: 600;
   }
 

package/src/css/tokens.css

@@ -43,22 +43,34 @@
     --color-maturity-5: #c4b5fd;
 
     /* --------------------------------------------------------------------------
-     Colors - Capabilities (text)
+     Colors - Capabilities (text) - matches data/capabilities/*.yaml IDs
      -------------------------------------------------------------------------- */
-    --color-cap-delivery: #dc2626; /* red - speed and efficiency */
-    --color-cap-scale: #1d4ed8; /* blue - infrastructure and systems */
-    --color-cap-reliability: #0891b2; /* cyan - stability and operations */
-    --color-cap-business: #b45309; /* amber - strategy and outcomes */
-    --color-cap-people: #be185d; /* pink - collaboration and leadership */
+    --color-cap-ai: #7c3aed; /* violet */
+    --color-cap-business: #b45309; /* amber */
+    --color-cap-data: #0f766e; /* teal */
+    --color-cap-delivery: #dc2626; /* red */
+    --color-cap-documentation: #15803d; /* green */
+    --color-cap-ml: #9333ea; /* purple */
+    --color-cap-people: #be185d; /* pink */
+    --color-cap-process: #c2410c; /* orange */
+    --color-cap-product: #4f46e5; /* indigo */
+    --color-cap-reliability: #0891b2; /* cyan */
+    --color-cap-scale: #1d4ed8; /* blue */
 
     /* --------------------------------------------------------------------------
      Colors - Capabilities (backgrounds)
      -------------------------------------------------------------------------- */
-    --color-cap-delivery-light: #fecaca; /* red */
-    --color-cap-scale-light: #dbeafe; /* blue */
-    --color-cap-reliability-light: #cffafe; /* cyan */
+    --color-cap-ai-light: #ede9fe; /* violet */
     --color-cap-business-light: #fef3c7; /* amber */
+    --color-cap-data-light: #ccfbf1; /* teal */
+    --color-cap-delivery-light: #fecaca; /* red */
+    --color-cap-documentation-light: #dcfce7; /* green */
+    --color-cap-ml-light: #f3e8ff; /* purple */
     --color-cap-people-light: #fce7f3; /* pink */
+    --color-cap-process-light: #ffedd5; /* orange */
+    --color-cap-product-light: #e0e7ff; /* indigo */
+    --color-cap-reliability-light: #cffafe; /* cyan */
+    --color-cap-scale-light: #dbeafe; /* blue */
 
     /* --------------------------------------------------------------------------
      Colors - Neutrals
@@ -137,11 +149,13 @@
      Layout
      -------------------------------------------------------------------------- */
     --max-width: 1400px;
-    --nav-height: 60px;
+    --drawer-width: 240px;
+    --top-bar-height: 48px;
 
     /*
    * Responsive breakpoints (used in @media queries):
-   * - 1280px: Tablet/laptop - nav hamburger, layout stacking
+   * - 1280px: Tablet/laptop - layout stacking
+   * - 768px: Mobile - drawer overlays instead of pushing content
    * - 640px: Mobile - full-width buttons, simplified layouts
    */
   }

package/src/css/views/slide-base.css

@@ -241,7 +241,8 @@
   .slide-view footer,
   .slide-view .action-buttons,
   .slide-view .back-link,
-  .slide-view #app-nav,
+  .slide-view #app-drawer,
+  .slide-view .top-bar,
   .slide-view #app-footer {
     display: none !important;
   }

package/src/formatters/agent/dom.js

@@ -92,14 +92,6 @@ export function agentDeploymentToDOM({
             "No skills with agent sections found for this discipline.",
           ),
     ),
-
-    // CLI hint section
-    section(
-      { className: "agent-section cli-hint" },
-      h2({}, "CLI Alternative"),
-      p({}, "Generate this agent from the command line:"),
-      createCliCommand(agentName),
-    ),
   );
 }
 
@@ -200,24 +192,6 @@ function createRoleAgentCard(agent) {
   );
 }
 
-/**
- * Create CLI command display
- * @param {string} agentName - Agent name (kebab-case)
- * @returns {HTMLElement}
- */
-function createCliCommand(agentName) {
-  // Convert kebab-case name to discipline and track
-  const parts = agentName.split("-");
-  const track = parts.pop();
-  const discipline = parts.join("_");
-
-  const command = `npx pathway agent ${discipline} ${track} --output=.github --all-roles`;
-
-  return createCodeDisplay({
-    content: command,
-    language: "bash",
-  });
-}
 
 /**
  * Download all agent files as a ZIP

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/interview/markdown.js

@@ -27,6 +27,9 @@ export function interviewToMarkdown(view, { framework } = {}) {
   // Group sections by type
   const skillSections = view.sections.filter((s) => s.type === "skill");
   const behaviourSections = view.sections.filter((s) => s.type === "behaviour");
+  const capabilitySections = view.sections.filter(
+    (s) => s.type === "capability",
+  );
 
   // Skill questions
   if (skillSections.length > 0) {
@@ -36,27 +39,83 @@ export function interviewToMarkdown(view, { framework } = {}) {
       for (const q of section.questions) {
         lines.push(`**Q**: ${q.question}`);
         if (q.followUps.length > 0) {
+          lines.push("", "**Follow-ups:**");
           for (const followUp of q.followUps) {
             lines.push(`  → ${followUp}`);
           }
         }
+        if (q.lookingFor && q.lookingFor.length > 0) {
+          lines.push("", "**What to look for:**");
+          for (const item of q.lookingFor) {
+            lines.push(`- ${item}`);
+          }
+        }
         lines.push("");
       }
     }
   }
 
-  // Behaviour questions
+  // Capability decomposition questions
+  if (capabilitySections.length > 0) {
+    lines.push(`## 🧩 Decomposition Questions`, "");
+    for (const section of capabilitySections) {
+      lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
+      for (const q of section.questions) {
+        lines.push(`**Scenario**: ${q.question}`);
+        if (q.context) {
+          lines.push(`> ${q.context}`);
+        }
+        if (q.decompositionPrompts && q.decompositionPrompts.length > 0) {
+          lines.push("", "**Guide the candidate through:**");
+          for (const prompt of q.decompositionPrompts) {
+            lines.push(`- ${prompt}`);
+          }
+        }
+        if (q.followUps.length > 0) {
+          lines.push("", "**Follow-ups:**");
+          for (const followUp of q.followUps) {
+            lines.push(`  → ${followUp}`);
+          }
+        }
+        if (q.lookingFor && q.lookingFor.length > 0) {
+          lines.push("", "**What to look for:**");
+          for (const item of q.lookingFor) {
+            lines.push(`- ${item}`);
+          }
+        }
+        lines.push("");
+      }
+    }
+  }
+
+  // Behaviour stakeholder simulation questions
   if (behaviourSections.length > 0) {
-    lines.push(`## ${behaviourEmoji} Behaviour Questions`, "");
+    lines.push(`## ${behaviourEmoji} Stakeholder Simulation`, "");
     for (const section of behaviourSections) {
       lines.push(`### ${section.name} (${formatLevel(section.level)})`, "");
       for (const q of section.questions) {
-        lines.push(`**Q**: ${q.question}`);
+        lines.push(`**Scenario**: ${q.question}`);
+        if (q.context) {
+          lines.push(`> ${q.context}`);
+        }
+        if (q.simulationPrompts && q.simulationPrompts.length > 0) {
+          lines.push("", "**Steer the simulation:**");
+          for (const prompt of q.simulationPrompts) {
+            lines.push(`- ${prompt}`);
+          }
+        }
         if (q.followUps.length > 0) {
+          lines.push("", "**Follow-ups:**");
           for (const followUp of q.followUps) {
             lines.push(`  → ${followUp}`);
           }
         }
+        if (q.lookingFor && q.lookingFor.length > 0) {
+          lines.push("", "**What to look for:**");
+          for (const item of q.lookingFor) {
+            lines.push(`- ${item}`);
+          }
+        }
         lines.push("");
       }
     }