@forwardimpact/pathway 0.12.0 → 0.14.0

package/src/components/nav.js

@@ -5,11 +5,11 @@
 import { div, a } from "../lib/render.js";
 
 /**
- * Update the active navigation link
+ * Update the active navigation link in the drawer
  * @param {string} path - Current path
  */
 export function updateActiveNav(path) {
-  const links = document.querySelectorAll("#nav-links a");
+  const links = document.querySelectorAll("#drawer-nav a");
   links.forEach((link) => {
     const href = link.getAttribute("href").slice(1); // Remove #
     const isActive = path === href || (href !== "/" && path.startsWith(href));

package/src/components/top-bar.js

@@ -0,0 +1,97 @@
+/**
+ * Top Bar Component
+ *
+ * Fixed bar across the top of the app with:
+ * - Sidebar toggle button (left)
+ * - CLI command display with copy button (center)
+ *
+ * Similar to Safari's URL bar with sidebar toggle.
+ */
+
+import { getCliCommand } from "../lib/cli-command.js";
+
+/** @type {HTMLElement|null} */
+let commandDisplay = null;
+
+/** @type {HTMLButtonElement|null} */
+let copyButton = null;
+
+/**
+ * Set up the top bar: wire toggle and initial command display.
+ * Call after DOM is ready.
+ */
+export function setupTopBar() {
+  const app = document.getElementById("app");
+  const toggle = document.getElementById("sidebar-toggle");
+  const commandEl = document.getElementById("cli-command");
+  const copyBtn = document.getElementById("cli-copy");
+
+  commandDisplay = commandEl;
+  copyButton = copyBtn;
+
+  if (toggle) {
+    toggle.addEventListener("click", () => {
+      app.classList.toggle("drawer-open");
+    });
+  }
+
+  if (copyBtn) {
+    copyBtn.addEventListener("click", handleCopy);
+  }
+
+  // Intercept history.replaceState so CLI command updates when pages
+  // change the hash without triggering hashchange (e.g. agent builder)
+  const originalReplaceState = history.replaceState.bind(history);
+  history.replaceState = (...args) => {
+    originalReplaceState(...args);
+    updateCommand();
+  };
+
+  // Set initial command
+  updateCommand();
+}
+
+/**
+ * Update the CLI command display for the current route.
+ * Call on every route change.
+ */
+export function updateCommand() {
+  if (!commandDisplay) return;
+  const path = window.location.hash.slice(1) || "/";
+  commandDisplay.textContent = getCliCommand(path);
+  // Reset copy button state
+  if (copyButton) {
+    copyButton.setAttribute("aria-label", "Copy command");
+    copyButton.classList.remove("copied");
+  }
+}
+
+/**
+ * Copy the current CLI command to clipboard
+ */
+async function handleCopy() {
+  if (!commandDisplay || !copyButton) return;
+  const text = commandDisplay.textContent;
+
+  try {
+    await navigator.clipboard.writeText(text);
+    copyButton.classList.add("copied");
+    copyButton.setAttribute("aria-label", "Copied!");
+    setTimeout(() => {
+      copyButton.classList.remove("copied");
+      copyButton.setAttribute("aria-label", "Copy command");
+    }, 2000);
+  } catch {
+    // Fallback for older browsers
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+    copyButton.classList.add("copied");
+    setTimeout(() => copyButton.classList.remove("copied"), 2000);
+  }
+}

package/src/css/bundles/app.css

@@ -24,6 +24,8 @@
 @import "../components/progress.css" layer(components);
 @import "../components/states.css" layer(components);
 @import "../components/nav.css" layer(components);
+@import "../components/top-bar.css" layer(components);
+@import "../components/command-prompt.css" layer(components);
 
 /* Utilities */
 @import "../components/utilities.css" layer(utilities);

package/src/css/components/badges.css

@@ -94,24 +94,34 @@
   }
 
   /* Capability badges - each capability ID maps to its own distinct color */
+  .badge-ai {
+    background: var(--color-cap-ai-light);
+    color: var(--color-cap-ai);
+  }
+
+  .badge-business {
+    background: var(--color-cap-business-light);
+    color: var(--color-cap-business);
+  }
+
+  .badge-data {
+    background: var(--color-cap-data-light);
+    color: var(--color-cap-data);
+  }
+
   .badge-delivery {
     background: var(--color-cap-delivery-light);
     color: var(--color-cap-delivery);
   }
 
-  .badge-scale {
-    background: var(--color-cap-scale-light);
-    color: var(--color-cap-scale);
-  }
-
-  .badge-reliability {
-    background: var(--color-cap-reliability-light);
-    color: var(--color-cap-reliability);
+  .badge-documentation {
+    background: var(--color-cap-documentation-light);
+    color: var(--color-cap-documentation);
   }
 
-  .badge-business {
-    background: var(--color-cap-business-light);
-    color: var(--color-cap-business);
+  .badge-ml {
+    background: var(--color-cap-ml-light);
+    color: var(--color-cap-ml);
   }
 
   .badge-people {
@@ -119,6 +129,26 @@
     color: var(--color-cap-people);
   }
 
+  .badge-process {
+    background: var(--color-cap-process-light);
+    color: var(--color-cap-process);
+  }
+
+  .badge-product {
+    background: var(--color-cap-product-light);
+    color: var(--color-cap-product);
+  }
+
+  .badge-reliability {
+    background: var(--color-cap-reliability-light);
+    color: var(--color-cap-reliability);
+  }
+
+  .badge-scale {
+    background: var(--color-cap-scale-light);
+    color: var(--color-cap-scale);
+  }
+
   /* Tool badge */
   .badge-tool {
     background: var(--color-bg);

package/src/css/components/command-prompt.css

@@ -0,0 +1,98 @@
+/**
+ * Command Prompt
+ *
+ * Terminal-style command display with copy button.
+ * Pill-shaped container with $ prompt, monospace text, and copy action.
+ */
+
+@layer components {
+  .command-prompt {
+    width: 100%;
+    max-width: 600px;
+    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);
+    background: var(--color-surface);
+    gap: var(--space-xs);
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .command-prompt:hover {
+    border-color: var(--color-text-light);
+  }
+
+  /* Terminal prompt symbol */
+  .command-prompt__prompt {
+    flex-shrink: 0;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-light);
+    user-select: none;
+  }
+
+  /* Command text */
+  .command-prompt__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 */
+  .command-prompt__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;
+  }
+
+  .command-prompt__copy:hover {
+    background: var(--color-border);
+    color: var(--color-text);
+  }
+
+  .command-prompt__copy svg {
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Copied state */
+  .command-prompt__copy.copied {
+    color: var(--color-success);
+  }
+
+  /* --------------------------------------------------------------------------
+   Mobile tweaks
+   -------------------------------------------------------------------------- */
+  @media (max-width: 768px) {
+    .command-prompt__prompt {
+      display: none;
+    }
+  }
+}

package/src/css/components/layout.css

@@ -8,8 +8,6 @@
   /* App container */
   #app {
     min-height: 100vh;
-    display: flex;
-    flex-direction: column;
   }
 
   #app-content {
@@ -18,7 +16,6 @@
     width: 100%;
     margin: 0 auto;
     padding: var(--space-lg);
-    padding-top: calc(var(--nav-height) + var(--space-lg));
   }
 
   /* Stack - vertical flex container with gap */

package/src/css/components/nav.css

@@ -1,44 +1,73 @@
 /**
- * Navigation Component
+ * Navigation Drawer
  *
- * Fixed navigation bar, brand, links, and mobile hamburger menu.
+ * Left-hand drawer with vertically stacked links, toggled by top bar button.
+ * Open by default on desktop, overlays on mobile.
  */
 
 @layer components {
-  #app-nav {
+  /* --------------------------------------------------------------------------
+   Drawer Panel
+   -------------------------------------------------------------------------- */
+  #app-drawer {
     position: fixed;
-    top: 0;
+    top: var(--top-bar-height);
     left: 0;
-    right: 0;
-    height: var(--nav-height);
+    bottom: 0;
+    width: var(--drawer-width);
     background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    align-items: center;
-    padding: 0 var(--space-lg);
+    border-right: 1px solid var(--color-border);
     z-index: 100;
-    box-shadow: var(--shadow-sm);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(calc(-1 * var(--drawer-width)));
+    transition: transform 0.3s ease;
+  }
+
+  .drawer-open #app-drawer {
+    transform: translateX(0);
+  }
+
+  /* --------------------------------------------------------------------------
+   Drawer Header - brand area
+   -------------------------------------------------------------------------- */
+  .drawer-header {
+    padding: var(--space-lg) var(--space-md);
+    border-bottom: 1px solid var(--color-border);
+    flex-shrink: 0;
   }
 
   .nav-brand {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: var(--space-sm);
+    gap: var(--space-xs);
+    text-decoration: none;
+    color: var(--color-text);
+  }
+
+  .brand-emoji {
+    font-size: 2.5rem;
+    line-height: 1;
   }
 
-  .nav-brand a {
+  .nav-brand:hover {
+    text-decoration: none;
+  }
+
+  .brand-title {
     font-size: var(--font-size-lg);
     font-weight: 700;
     color: var(--color-text);
-    text-decoration: none;
   }
 
-  .nav-brand a:hover {
+  .nav-brand:hover .brand-title {
     color: var(--color-primary);
-    text-decoration: none;
   }
 
   .brand-tag {
+    display: inline-block;
     font-size: var(--font-size-xs);
     font-weight: 600;
     letter-spacing: 0.5px;
@@ -70,97 +99,108 @@
     }
   }
 
-  .nav-links {
+  /* --------------------------------------------------------------------------
+   Drawer Navigation - sections and links
+   -------------------------------------------------------------------------- */
+  .drawer-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-sm) 0;
+  }
+
+  .drawer-section {
     display: flex;
-    gap: var(--space-xs);
-    margin-left: auto;
-    align-items: center;
+    flex-direction: column;
+    padding: var(--space-sm) 0;
   }
 
-  .nav-links a {
+  .drawer-section + .drawer-section {
+    border-top: 1px solid var(--color-border);
+  }
+
+  .drawer-section-label {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-light);
+    padding: var(--space-xs) var(--space-md);
+    margin-bottom: var(--space-xs);
+  }
+
+  .drawer-nav a {
+    display: block;
     color: var(--color-text-muted);
     font-weight: 500;
-    font-size: 0.9rem;
-    padding: var(--space-xs) var(--space-sm);
-    border-radius: var(--radius-md);
-    transition: all 0.2s;
-    white-space: nowrap;
+    font-size: var(--font-size-sm);
+    padding: var(--space-xs) var(--space-md);
+    text-decoration: none;
+    transition: all 0.15s;
+    border-left: 3px solid transparent;
   }
 
-  .nav-links a:hover {
+  .drawer-nav a:hover {
     color: var(--color-primary);
-    background: var(--color-primary-light);
-    background: rgba(59, 130, 246, 0.1);
+    background: rgba(59, 130, 246, 0.06);
+    border-left-color: var(--color-primary-light);
     text-decoration: none;
   }
 
-  .nav-cta {
-    background: var(--color-primary) !important;
-    color: white !important;
+  .drawer-nav a.active {
+    color: var(--color-primary);
+    background: rgba(59, 130, 246, 0.1);
+    border-left-color: var(--color-primary);
+    font-weight: 600;
   }
 
-  .nav-cta:hover {
-    background: var(--color-primary-dark) !important;
-    color: white !important;
+  /* CTA links in drawer */
+  .drawer-cta {
+    color: var(--color-primary) !important;
+    font-weight: 600 !important;
   }
 
-  .nav-toggle {
-    display: none;
-    flex-direction: column;
-    gap: 4px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: var(--space-sm);
-    margin-left: auto;
+  .drawer-cta:hover {
+    background: rgba(59, 130, 246, 0.1) !important;
   }
 
-  .nav-toggle span {
-    display: block;
-    width: 24px;
-    height: 2px;
-    background: var(--color-text);
-    transition: all 0.3s;
-  }
-
-  .nav-toggle-active span:nth-child(1) {
-    transform: rotate(45deg) translate(4px, 4px);
+  /* --------------------------------------------------------------------------
+   App Body - content area that shifts with drawer
+   -------------------------------------------------------------------------- */
+  .app-body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    transition: margin-left 0.3s ease;
   }
 
-  .nav-toggle-active span:nth-child(2) {
-    opacity: 0;
+  .drawer-open .app-body {
+    margin-left: var(--drawer-width);
   }
 
-  .nav-toggle-active span:nth-child(3) {
-    transform: rotate(-45deg) translate(4px, -4px);
+  /* --------------------------------------------------------------------------
+   Drawer Overlay - backdrop on mobile when drawer is open
+   -------------------------------------------------------------------------- */
+  .drawer-overlay {
+    display: none;
+    position: fixed;
+    top: var(--top-bar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 90;
   }
 
-  /* Mobile navigation */
-  @media (max-width: 1280px) {
-    .nav-toggle {
-      display: flex;
-    }
-
-    .nav-links {
-      position: absolute;
-      top: var(--nav-height);
-      left: 0;
-      right: 0;
-      flex-direction: column;
-      background: var(--color-surface);
-      border-bottom: 1px solid var(--color-border);
-      padding: var(--space-md);
-      display: none;
-      gap: var(--space-xs);
-    }
-
-    .nav-links.nav-open {
-      display: flex;
+  /* --------------------------------------------------------------------------
+   Mobile - overlay instead of push
+   -------------------------------------------------------------------------- */
+  @media (max-width: 768px) {
+    .drawer-open .app-body {
+      margin-left: 0;
     }
 
-    .nav-links a {
+    .drawer-open .drawer-overlay {
       display: block;
-      text-align: center;
     }
   }
 }

package/src/css/components/surfaces.css

@@ -168,7 +168,7 @@
   .page-title {
     font-size: var(--font-size-3xl);
     font-weight: 700;
-    margin: 0 0 var(--space-sm);
+    margin: 0 0 var(--space-md);
   }
 
   .page-description {