@forwardimpact/pathway 0.4.0 → 0.5.0

package/app/css/components/surfaces.css

@@ -40,6 +40,30 @@
     font-size: var(--font-size-lg);
   }
 
+  .card-title-with-icon {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .card-title-with-icon .card-title {
+    margin: 0;
+  }
+
+  /* Tool icons */
+  .tool-icon {
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+  }
+
+  /* Tool name cell with icon */
+  .tool-name-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
   .card-description {
     color: var(--color-text-muted);
     margin: 0;
@@ -122,7 +146,7 @@
   .section-title {
     font-size: var(--font-size-xl);
     font-weight: 600;
-    margin: 0 0 var(--space-sm);
+    margin: 0 0 var(--space-md);
     color: var(--color-text);
   }
 
@@ -209,11 +233,33 @@
     font-weight: 500;
   }
 
+  /*
+   * List items: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
+   * Uses bottom-border only for 1px gaps between items (like table rows)
+   * Left/right borders and rounded corners on first/last items match table styling
+   */
   .list-item {
-    padding: var(--space-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-height: 60px;
+    padding: var(--space-md) var(--space-lg);
     background: var(--color-surface);
-    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
+    border-top: none;
+  }
+
+  /* First list-item in a sequence (handles heading before list items) */
+  .list-item:first-child,
+  :not(.list-item) + .list-item {
+    border-top: 1px solid var(--color-border);
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
+
+  .list-item:last-child {
+    border-bottom-left-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
   }
 
   /* Accent borders */

package/app/css/components/typography.css

@@ -111,8 +111,7 @@
 
   /* Code inline */
   .code-inline {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-family: var(--font-family-mono);
     font-size: 0.9em;
     background: var(--color-bg);
     padding: 0.1em 0.4em;

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

@@ -51,32 +51,12 @@
   }
 
   .agent-section .filename {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
     color: var(--color-text-muted);
     margin-bottom: var(--space-sm);
   }
 
-  .agent-section .code-block {
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: var(--space-md);
-    overflow-x: auto;
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
-    line-height: 1.5;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  .agent-section .code-block code {
-    font-family: inherit;
-    font-size: inherit;
-  }
-
   /* Agent cards grid */
   .agent-cards-grid {
     display: grid;
@@ -122,24 +102,16 @@
     font-size: 1.5rem;
   }
 
-  .agent-card-filename {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    margin: 0;
-    padding: 0 var(--space-md);
-    padding-top: var(--space-sm);
-  }
-
   .agent-card-preview {
     padding: var(--space-md);
   }
 
-  .agent-card-preview .code-preview {
+  .agent-card-preview .code-display-container {
     margin: 0;
+  }
+
+  .agent-card-preview .code-display {
     max-height: 400px;
-    overflow-y: auto;
   }
 
   /* Skill cards grid */
@@ -170,38 +142,16 @@
     font-size: var(--font-size-sm);
   }
 
-  .skill-card-filename {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
-    margin: 0;
-    padding: var(--space-xs) var(--space-md);
-  }
-
   .skill-card-preview {
     padding: var(--space-sm) var(--space-md) var(--space-md);
   }
 
-  .skill-card-preview .code-preview {
+  .skill-card-preview .code-display-container {
     margin: 0;
-    max-height: 300px;
-    overflow-y: auto;
   }
 
-  /* Code preview */
-  .code-preview {
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: var(--space-sm);
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-xs);
-    line-height: 1.4;
-    white-space: pre-wrap;
-    word-break: break-word;
-    color: var(--color-text-muted);
+  .skill-card-preview .code-display {
+    max-height: 300px;
   }
 
   .skills-list {
@@ -210,30 +160,6 @@
     gap: var(--space-md);
   }
 
-  .skill-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-sm) var(--space-md);
-    background: var(--color-bg);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .skill-filename {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-  }
-
-  .skill-card .code-block {
-    margin: 0;
-    border: none;
-    border-radius: 0;
-    max-height: 300px;
-    overflow-y: auto;
-  }
-
   /* CLI hint */
   .cli-hint {
     background: var(--color-bg);
@@ -243,17 +169,6 @@
     margin-bottom: var(--space-sm);
   }
 
-  .cli-command {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-md);
-  }
-
-  .cli-command .code-block {
-    flex: 1;
-    margin: 0;
-  }
-
   /* Role agents list */
   .role-agents-list {
     display: flex;
@@ -295,9 +210,8 @@
   }
 
   .role-filename {
-    font-family:
-      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    font-size: var(--font-size-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
     color: var(--color-text-muted);
   }
 
@@ -315,11 +229,6 @@
     margin-bottom: var(--space-sm);
   }
 
-  .role-agent-content .code-block {
-    max-height: 400px;
-    overflow-y: auto;
-  }
-
   /* Stage agent preview */
   .stage-agent-preview .stage-header {
     display: flex;

package/app/css/pages/detail.css

@@ -69,11 +69,16 @@
     background: var(--color-surface);
   }
 
+  /*
+   * Table cells: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
+   * Matches list-item height for visual consistency
+   */
   .tools-table th,
   .tools-table td {
     padding: var(--space-md) var(--space-lg);
     text-align: left;
     border-bottom: 1px solid var(--color-border);
+    height: 60px;
   }
 
   .tools-table th {
@@ -86,7 +91,12 @@
   }
 
   .tools-table th:first-child {
-    width: 200px;
+    width: 260px;
+    white-space: nowrap;
+  }
+
+  .tools-table td:first-child {
+    white-space: nowrap;
   }
 
   .tools-table tbody tr:last-child td {

package/app/css/tokens.css

@@ -130,6 +130,9 @@
     --font-family:
       system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       sans-serif;
+    --font-family-mono:
+      "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+      Consolas, monospace;
     --font-size-xs: 0.75rem;
     --font-size-sm: 0.875rem;
     --font-size-base: 1rem;

package/app/formatters/agent/dom.js

@@ -16,6 +16,7 @@ import {
   details,
   summary,
 } from "../../lib/render.js";
+import { createCodeDisplay } from "../../components/code-display.js";
 import { formatAgentProfile } from "./profile.js";
 import { formatAgentSkill } from "./skill.js";
 import { getStageEmoji } from "../stage/shared.js";
@@ -53,13 +54,12 @@ export function agentDeploymentToDOM({
     // Profile section
     section(
       { className: "agent-section" },
-      div(
-        { className: "section-header" },
-        h2({}, "Agent Profile"),
-        createCopyButton(profileContent),
-      ),
-      p({ className: "filename" }, profile.filename),
-      createCodeBlock(profileContent),
+      h2({}, "Agent Profile"),
+      createCodeDisplay({
+        content: profileContent,
+        filename: profile.filename,
+        maxHeight: 600,
+      }),
     ),
 
     // Role Agents section
@@ -145,48 +145,6 @@ function createDownloadButton(
   return btn;
 }
 
-/**
- * Create a copy button for content
- * @param {string} content - Content to copy
- * @returns {HTMLElement}
- */
-function createCopyButton(content) {
-  const btn = button({ className: "btn btn-sm copy-btn" }, "📋 Copy");
-
-  btn.addEventListener("click", async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      btn.textContent = "✓ Copied";
-      setTimeout(() => {
-        btn.textContent = "📋 Copy";
-      }, 2000);
-    } catch {
-      btn.textContent = "Failed";
-      setTimeout(() => {
-        btn.textContent = "📋 Copy";
-      }, 2000);
-    }
-  });
-
-  return btn;
-}
-
-/**
- * Create a code block with content
- * @param {string} content - Code content
- * @returns {HTMLElement}
- */
-function createCodeBlock(content) {
-  const pre = document.createElement("pre");
-  pre.className = "code-block";
-
-  const code = document.createElement("code");
-  code.textContent = content;
-
-  pre.appendChild(code);
-  return pre;
-}
-
 /**
  * Create a skill card with content and copy button
  * @param {Object} skill - Skill with frontmatter and body
@@ -198,12 +156,11 @@ function createSkillCard(skill) {
 
   return div(
     { className: "skill-card" },
-    div(
-      { className: "skill-header" },
-      span({ className: "skill-filename" }, filename),
-      createCopyButton(content),
-    ),
-    createCodeBlock(content),
+    createCodeDisplay({
+      content,
+      filename,
+      maxHeight: 300,
+    }),
   );
 }
 
@@ -235,8 +192,10 @@ function createRoleAgentCard(agent) {
         { className: "text-muted role-description" },
         agent.frontmatter.description,
       ),
-      div({ className: "role-agent-actions" }, createCopyButton(content)),
-      createCodeBlock(content),
+      createCodeDisplay({
+        content,
+        maxHeight: 400,
+      }),
     ),
   );
 }
@@ -254,13 +213,10 @@ function createCliCommand(agentName) {
 
   const command = `npx pathway agent ${discipline} ${track} --output=.github --all-roles`;
 
-  const container = div(
-    { className: "cli-command" },
-    createCodeBlock(command),
-    createCopyButton(command),
-  );
-
-  return container;
+  return createCodeDisplay({
+    content: command,
+    language: "bash",
+  });
 }
 
 /**
@@ -445,13 +401,12 @@ export function stageAgentToDOM(stageAgent, profile, options = {}) {
     // Profile section
     section(
       { className: "agent-section" },
-      div(
-        { className: "section-header" },
-        h3({}, "Agent Profile"),
-        createCopyButton(profileContent),
-      ),
-      p({ className: "filename" }, profile.filename),
-      createCodeBlock(profileContent),
+      h3({}, "Agent Profile"),
+      createCodeDisplay({
+        content: profileContent,
+        filename: profile.filename,
+        maxHeight: 600,
+      }),
     ),
 
     // Download button

package/app/formatters/agent/profile.js

@@ -26,7 +26,7 @@ import { trimValue, trimRequired, trimFields } from "../shared.js";
  * @param {string} params.bodyData.stageDescription - Stage description text
  * @param {string} params.bodyData.identity - Core identity text
  * @param {string} [params.bodyData.priority] - Priority/philosophy statement
- * @param {string[]} params.bodyData.capabilities - List of capability names
+ * @param {Array<{name: string, dirname: string, useWhen: string}>} params.bodyData.skillIndex - Skill index entries
  * @param {Array<{index: number, text: string}>} params.bodyData.beforeMakingChanges - Numbered steps
  * @param {string} [params.bodyData.delegation] - Delegation guidance
  * @param {string} params.bodyData.operationalContext - Operational context text
@@ -44,9 +44,13 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
 
   // Trim simple string arrays
   const constraints = (bodyData.constraints || []).map((c) => trimRequired(c));
-  const capabilities = (bodyData.capabilities || []).map((c) =>
-    trimRequired(c),
-  );
+
+  // Trim skill index entries
+  const skillIndex = (bodyData.skillIndex || []).map((s) => ({
+    name: trimRequired(s.name),
+    dirname: trimRequired(s.dirname),
+    useWhen: trimRequired(s.useWhen),
+  }));
 
   return {
     // Frontmatter
@@ -60,7 +64,8 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
     stageDescription: trimValue(bodyData.stageDescription),
     identity: trimValue(bodyData.identity),
     priority: trimValue(bodyData.priority),
-    capabilities,
+    skillIndex,
+    hasSkills: skillIndex.length > 0,
     beforeMakingChanges,
     delegation: trimValue(bodyData.delegation),
     operationalContext: trimValue(bodyData.operationalContext),
@@ -84,7 +89,7 @@ function prepareAgentProfileData({ frontmatter, bodyData }) {
  * @param {string} profile.bodyData.stageDescription - Stage description text
  * @param {string} profile.bodyData.identity - Core identity text
  * @param {string} [profile.bodyData.priority] - Priority/philosophy statement (optional)
- * @param {string[]} profile.bodyData.capabilities - List of capability names
+ * @param {Array<{name: string, dirname: string, useWhen: string}>} profile.bodyData.skillIndex - Skill index entries
  * @param {Array<{index: number, text: string}>} profile.bodyData.beforeMakingChanges - Numbered steps
  * @param {string} [profile.bodyData.delegation] - Delegation guidance (optional)
  * @param {string} profile.bodyData.operationalContext - Operational context text

package/app/formatters/grade/dom.js

@@ -77,16 +77,16 @@ export function gradeToDOM(grade, { framework, showBackLink = true } = {}) {
             { className: "content-columns" },
             view.professionalTitle
               ? div(
-                  { className: "list-item" },
+                  { className: "card" },
                   p({ className: "label" }, "Professional Track"),
-                  p({}, view.professionalTitle),
+                  p({ className: "card-description" }, view.professionalTitle),
                 )
               : null,
             view.managementTitle
               ? div(
-                  { className: "list-item" },
+                  { className: "card" },
                   p({ className: "label" }, "Management Track"),
-                  p({}, view.managementTitle),
+                  p({ className: "card-description" }, view.managementTitle),
                 )
               : null,
           ),
@@ -102,9 +102,9 @@ export function gradeToDOM(grade, { framework, showBackLink = true } = {}) {
             { className: "content-columns" },
             ...Object.entries(view.expectations).map(([key, value]) =>
               div(
-                { className: "list-item" },
+                { className: "card" },
                 p({ className: "label" }, formatLevel(key)),
-                p({}, value),
+                p({ className: "card-description" }, value),
               ),
             ),
           ),

package/app/formatters/job/dom.js

@@ -14,7 +14,7 @@ import {
 } from "../../components/radar-chart.js";
 import { createSkillMatrix } from "../../components/skill-matrix.js";
 import { createBehaviourProfile } from "../../components/behaviour-profile.js";
-import { createMarkdownTextarea } from "../../components/markdown-textarea.js";
+import { createCodeDisplay } from "../../components/code-display.js";
 import { markdownToHtml } from "../../lib/markdown.js";
 import { formatJobDescription } from "./description.js";
 
@@ -226,8 +226,8 @@ export function createJobDescriptionSection({
 
   return createDetailSection({
     title: "Job Description",
-    content: createMarkdownTextarea({
-      markdown,
+    content: createCodeDisplay({
+      content: markdown,
       description:
         "Copy this markdown-formatted job description for use in job postings, documentation, or sharing.",
       toHtml: markdownToHtml,

package/app/formatters/json-ld.js

@@ -228,7 +228,7 @@ export function stageToJsonLd(stage) {
     identifier: stage.id,
     name: stage.name,
     description: stage.description,
-    ...(stage.emoji && { emoji: stage.emoji }),
+    ...(stage.emojiIcon && { emojiIcon: stage.emojiIcon }),
     ...(stage.tools?.length > 0 && { tools: stage.tools }),
     ...(stage.constraints?.length > 0 && { constraints: stage.constraints }),
     ...(stage.handoffs && {