@forwardimpact/pathway 0.13.0 → 0.14.0

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 {

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

@@ -149,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