@forwardimpact/pathway 0.3.0 → 0.5.0

package/app/components/markdown-textarea.js

@@ -0,0 +1,153 @@
+/**
+ * Code Display Component
+ *
+ * Reusable read-only code block with copy buttons and syntax highlighting.
+ * Used for markdown content, agent profiles, skills, and code snippets.
+ */
+
+/* global Prism */
+import { div, p, span, button } from "../lib/render.js";
+
+const COPY_LABEL = "📋 Copy";
+const COPY_HTML_LABEL = "Copy as HTML";
+
+/**
+ * Create a copy button that copies content to clipboard
+ * @param {string} content - The text content to copy
+ * @returns {HTMLElement}
+ */
+export function createCopyButton(content) {
+  const btn = button(
+    {
+      className: "btn btn-sm copy-btn",
+      onClick: async () => {
+        try {
+          await navigator.clipboard.writeText(content);
+          btn.textContent = "✓ Copied!";
+          btn.classList.add("copied");
+          setTimeout(() => {
+            btn.textContent = COPY_LABEL;
+            btn.classList.remove("copied");
+          }, 2000);
+        } catch (err) {
+          console.error("Failed to copy:", err);
+          btn.textContent = "Copy failed";
+          setTimeout(() => {
+            btn.textContent = COPY_LABEL;
+          }, 2000);
+        }
+      },
+    },
+    COPY_LABEL,
+  );
+  return btn;
+}
+
+/**
+ * Create a copy button that copies HTML to clipboard (for rich text pasting)
+ * @param {string} html - The HTML content to copy
+ * @returns {HTMLElement}
+ */
+function createCopyHtmlButton(html) {
+  const btn = button(
+    {
+      className: "btn btn-sm btn-secondary copy-btn",
+      onClick: async () => {
+        try {
+          const blob = new Blob([html], { type: "text/html" });
+          const clipboardItem = new ClipboardItem({ "text/html": blob });
+          await navigator.clipboard.write([clipboardItem]);
+          btn.textContent = "✓ Copied!";
+          btn.classList.add("copied");
+          setTimeout(() => {
+            btn.textContent = COPY_HTML_LABEL;
+            btn.classList.remove("copied");
+          }, 2000);
+        } catch (err) {
+          console.error("Failed to copy:", err);
+          btn.textContent = "Copy failed";
+          setTimeout(() => {
+            btn.textContent = COPY_HTML_LABEL;
+          }, 2000);
+        }
+      },
+    },
+    COPY_HTML_LABEL,
+  );
+  return btn;
+}
+
+/**
+ * Create a code display component with syntax highlighting and copy button
+ * @param {Object} options
+ * @param {string} options.content - The code content to display
+ * @param {string} [options.language="markdown"] - Language for syntax highlighting
+ * @param {string} [options.filename] - Optional filename to display in header
+ * @param {string} [options.description] - Optional description text
+ * @param {Function} [options.toHtml] - Function to convert content to HTML (enables "Copy as HTML" button)
+ * @param {number} [options.minHeight] - Optional minimum height in pixels
+ * @param {number} [options.maxHeight] - Optional maximum height in pixels
+ * @returns {HTMLElement}
+ */
+export function createCodeDisplay({
+  content,
+  language = "markdown",
+  filename,
+  description,
+  toHtml,
+  minHeight,
+  maxHeight,
+}) {
+  // Create highlighted code block
+  const pre = document.createElement("pre");
+  pre.className = "code-display";
+  if (minHeight) pre.style.minHeight = `${minHeight}px`;
+  if (maxHeight) {
+    pre.style.maxHeight = `${maxHeight}px`;
+    pre.style.overflowY = "auto";
+  }
+
+  const code = document.createElement("code");
+  if (language) {
+    code.className = `language-${language}`;
+  }
+  code.textContent = content;
+  pre.appendChild(code);
+
+  // Apply Prism highlighting if available and language specified
+  if (language && typeof Prism !== "undefined") {
+    Prism.highlightElement(code);
+  }
+
+  // Build header content
+  const headerLeft = [];
+  if (filename) {
+    headerLeft.push(span({ className: "code-display-filename" }, filename));
+  }
+  if (description) {
+    headerLeft.push(p({ className: "text-muted" }, description));
+  }
+
+  // Build buttons
+  const buttons = [createCopyButton(content)];
+  if (toHtml) {
+    buttons.push(createCopyHtmlButton(toHtml(content)));
+  }
+
+  // Only show header if there's content for it
+  const hasHeader = headerLeft.length > 0 || buttons.length > 0;
+
+  return div(
+    { className: "code-display-container" },
+    hasHeader
+      ? div(
+          { className: "code-display-header" },
+          headerLeft.length > 0
+            ? div({ className: "code-display-info" }, ...headerLeft)
+            : null,
+          div({ className: "button-group" }, ...buttons),
+        )
+      : null,
+    pre,
+  );
+}

package/app/css/bundles/app.css

@@ -38,3 +38,17 @@
 @import "../pages/self-assessment.css" layer(pages);
 @import "../pages/assessment-results.css" layer(pages);
 @import "../pages/progress-builder.css" layer(pages);
+
+/**
+ * Prism overrides (unlayered to beat Prism's unlayered CSS)
+ */
+pre.code-display[class*="language-"] {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--color-surface);
+}
+
+pre.code-display > code[class*="language-"] {
+  font-family: inherit;
+  font-size: inherit;
+}

package/app/css/components/badges.css

@@ -5,10 +5,13 @@
  */
 
 @layer components {
-  /* Base badge */
+  /* Base badge - 28px height matches tool icons for consistent row heights */
   .badge {
-    display: inline-block;
-    padding: var(--space-xs) var(--space-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-md);
     font-size: var(--font-size-xs);
     font-weight: 500;
@@ -78,10 +81,13 @@
     color: #5b21b6;
   }
 
-  /* Level badge base style */
+  /* Level badge base style - 28px height matches tool icons */
   .level-badge {
-    display: inline-block;
-    padding: var(--space-xs) var(--space-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     font-weight: 500;
@@ -142,11 +148,12 @@
     padding: var(--space-xs) var(--space-sm);
   }
 
-  /* Modifier tags - consolidated definition */
+  /* Modifier tags - 28px height matches badges and tool icons */
   .modifier {
     display: inline-flex;
     align-items: center;
-    padding: var(--space-xs) var(--space-sm);
+    height: 28px;
+    padding: 0 var(--space-sm);
     border-radius: var(--radius-sm);
     font-size: var(--font-size-sm);
     font-weight: 600;

package/app/css/components/forms.css

@@ -102,4 +102,59 @@
     background: var(--color-primary-light, rgba(37, 99, 235, 0.1));
     color: var(--color-primary);
   }
+
+  /* Code display - unified component for code/markdown with copy buttons */
+  .code-display-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .code-display-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+  }
+
+  .code-display-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .code-display-info .text-muted {
+    margin: 0;
+  }
+
+  .code-display-filename {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+  }
+
+  .code-display {
+    width: 100%;
+    margin: 0;
+    padding: var(--space-md);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    line-height: 1.6;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    overflow: auto;
+    color: var(--color-text);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .code-display code {
+    background: transparent;
+    padding: 0;
+    color: inherit;
+  }
 }

package/app/css/components/layout.css

@@ -95,6 +95,10 @@
     grid-template-columns: repeat(3, 1fr);
   }
 
+  .grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
   .grid-6 {
     grid-template-columns: repeat(6, 1fr);
   }
@@ -174,6 +178,10 @@
       grid-template-columns: repeat(2, 1fr);
     }
 
+    .grid-4 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
     .grid-6 {
       grid-template-columns: repeat(3, 1fr);
     }
@@ -198,6 +206,10 @@
       grid-template-columns: 1fr;
     }
 
+    .grid-4 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
     .grid-6 {
       grid-template-columns: repeat(2, 1fr);
     }

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;
@@ -53,6 +77,28 @@
     margin-top: var(--space-md);
   }
 
+  /* Tool skills list (inside cards) */
+  .tool-skills-list {
+    list-style: none;
+    padding: 0;
+    margin: var(--space-sm) 0 0 0;
+    font-size: var(--font-size-sm);
+  }
+
+  .tool-skills-list li {
+    padding: var(--space-xs) 0;
+  }
+
+  .tool-skills-list a {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+  }
+
+  .tool-skills-list a:hover {
+    color: var(--color-primary);
+    text-decoration: underline;
+  }
+
   /* Stat cards */
   .stat-card {
     background: var(--color-surface);
@@ -100,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);
   }
 
@@ -187,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

@@ -56,4 +56,64 @@
     align-items: center;
     gap: var(--space-xs);
   }
+
+  /* Tools table (for skill detail page) */
+  .tools-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: var(--space-md);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    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 {
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    background: var(--color-bg);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .tools-table th:first-child {
+    width: 260px;
+    white-space: nowrap;
+  }
+
+  .tools-table td:first-child {
+    white-space: nowrap;
+  }
+
+  .tools-table tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  .tools-table tbody tr:hover {
+    background: var(--color-bg);
+  }
+
+  /* See all link */
+  .see-all-link {
+    margin-top: var(--space-md);
+  }
+
+  .see-all-link a {
+    color: var(--color-primary);
+    font-size: var(--font-size-sm);
+  }
 }