feat: inline pipeline steps in each command panel

Each command tab panel now shows a compact "How it works" pipeline
directly below the code block. Steps are numbered pills with arrows
between them, hovering shows the description tooltip.

This solves the UX issue where the How It Works section was too far
down the page to notice when switching command tabs. Now the pipeline
is visible immediately in context.

Author: avifenesh

site/assets/css/main.css

@@ -884,6 +884,76 @@
   color: var(--color-text-faint);
 }
 
+/* --------------------------------------------------------------------------
+ * INLINE PIPELINE (inside command panels)
+ * -------------------------------------------------------------------------- */
+.pipeline-inline {
+  margin-top: var(--space-6);
+  padding-top: var(--space-5);
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.pipeline-inline__label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  margin-bottom: var(--space-3);
+}
+
+.pipeline-inline__steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.pipeline-inline__step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  background: var(--color-bg-surface-2);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-default);
+  cursor: default;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background var(--duration-fast) var(--ease-out);
+}
+
+.pipeline-inline__step:hover {
+  border-color: var(--color-border-default);
+  background: var(--color-bg-surface-3);
+}
+
+.pipeline-inline__num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+  font-weight: var(--font-semibold);
+  color: var(--color-accent-purple);
+  background: var(--color-accent-muted);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.pipeline-inline__title {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.pipeline-inline__arrow {
+  color: var(--color-text-faint);
+  font-size: var(--text-sm);
+  flex-shrink: 0;
+}
+
 /* --------------------------------------------------------------------------
  * SCROLL CUE
  * -------------------------------------------------------------------------- */

site/assets/js/main.js

@@ -837,6 +837,52 @@
         updateHowItWorks(e.detail.index);
       });
     }
+
+    // Inject inline pipeline steps into each command panel so users see them without scrolling
+    var commandPanels = document.querySelectorAll('.commands .tabs__panel');
+    commandPanels.forEach(function (panel, idx) {
+      var data = howItWorksData[idx];
+      if (!data || !data.steps) return;
+
+      var pipeline = document.createElement('div');
+      pipeline.className = 'pipeline-inline';
+
+      var label = document.createElement('p');
+      label.className = 'pipeline-inline__label';
+      label.textContent = 'How it works';
+      pipeline.appendChild(label);
+
+      var stepsRow = document.createElement('div');
+      stepsRow.className = 'pipeline-inline__steps';
+
+      data.steps.forEach(function (step, i) {
+        if (i > 0) {
+          var arrow = document.createElement('span');
+          arrow.className = 'pipeline-inline__arrow';
+          arrow.setAttribute('aria-hidden', 'true');
+          arrow.textContent = '\u2192';
+          stepsRow.appendChild(arrow);
+        }
+        var stepEl = document.createElement('div');
+        stepEl.className = 'pipeline-inline__step';
+        stepEl.setAttribute('title', step.desc);
+
+        var num = document.createElement('span');
+        num.className = 'pipeline-inline__num';
+        num.textContent = i + 1;
+        stepEl.appendChild(num);
+
+        var title = document.createElement('span');
+        title.className = 'pipeline-inline__title';
+        title.textContent = step.title;
+        stepEl.appendChild(title);
+
+        stepsRow.appendChild(stepEl);
+      });
+
+      pipeline.appendChild(stepsRow);
+      panel.appendChild(pipeline);
+    });
   }
 
   // ========================================================================