good_pipeline 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f30546b22291c0898027eb5a9458771ab943c424c20312f3ea3a03b954e9f30
-  data.tar.gz: 965deb9b03bfca479696dbf1c6baa980e57c332c4f75752912abb5027d31b44a
+  metadata.gz: ecdb6ba1864f5d087489e9f6b6fb74436af9da054fe2bf2d9443a34327d75ac8
+  data.tar.gz: 67d2ed61cd52229e854872e04e8e5da18ec3d95981a8287cf7c28742ebbb5f69
 SHA512:
-  metadata.gz: 8faa2b2c58f1a6dce5a5b10b3498a24f70d36516b4a5d949afa594297eae4f28b10806f4484dad65645a0c7807f9daea0277d36ff127452ccfd845b610978749
-  data.tar.gz: 250813f051c7a5566666e11f73e260251b10b3a1c6957d7da52c2a4b79faa8d38bbf720741dce429ec09fa31a69cf50d23b5eb87d75d6c80e35bbb75643ae0ea
+  metadata.gz: ea301d87d187f22b3f35585b3a08fc9ff1d94d3ae793bedfe2efcbdc1224b828af50beff05a36cebc81b1b0b8167b62d40d016178c6a5488210b8809893c25cc
+  data.tar.gz: 4afe3fdb1d05f01773a3e4bca22711e1751a83db47a0db49dc955feff2402b81c57a0d60f6e5a1b65d21e06a40f571f07158dcb744fc3029996285ff23cf4e16

data/CHANGELOG.md

@@ -1,5 +1,31 @@
 ## [Unreleased]
 
+## [0.2.0] - 2026-03-24
+
+### Added
+
+- **Conditional branching** — `branch` DSL verb with `on` arms for runtime decision-making. The `by:` option names a method that returns which arm to execute. Non-matching arms are `skipped_by_branch` (satisfied for downstream). Decision results are validated against declared arms — undeclared results fail the branch step with a `ConfigurationError` and the pipeline reaches a terminal state through normal failure propagation.
+- **Empty arms** — `on :skip` without a block for if-without-else patterns. Empty arms draw direct edges to the next step in the dashboard.
+- **Sequential branches** — multiple `branch` calls in sequence, where each branch waits for the previous branch's chosen arm to complete before running its decision method.
+- **Multiple steps per arm** — arms can contain multiple `run` calls with intra-arm `after:` dependencies.
+- **Interactive diagrams** — zoom (buttons + mouse wheel), click-drag pan, and fullscreen toggle on pipeline DAG visualizations.
+- **Terminal "End" node** — all DAG diagrams now show an End node connecting from terminal steps, giving every diagram a clear finish point.
+- **`skipped_by_branch` status** — new terminal coordination status that counts as satisfied for downstream dependency resolution, distinct from failure-based `skipped`.
+- **`branch` JSONB column** — stores all branch metadata (`decides`, `branch_result`, `branch_key`, `branch_arm`, `empty_arms`) via `store_accessor` on a single column on the steps table.
+- **Database indexes** — added index on `coordination_status` (steps) and a unique index on chains.
+- **Step-level failure strategy validation** — `StepDefinition` rejects invalid `on_failure:` values at definition time with a `ConfigurationError`.
+- **`display_name`** — optional class-level DSL method to override how a pipeline appears on the dashboard. Falls back to the default `underscore.titleize` format when not set.
+
+### Changed
+
+- **`enqueue_options` column** — replaced separate `queue` and `priority` columns with a single `enqueue_options` JSONB column. Supports `queue`, `priority`, `wait`, `good_job_labels`, and `good_job_notify`.
+- **`private_class_method` replaced with `class << self`** — `Coordinator`, `ChainCoordinator`, `CycleDetector`, and `FailureMetadata` now use `class << self` with `private` keyword instead of `private_class_method` lists at the bottom of each class.
+
+### Fixed
+
+- **Late `.then` registrations no longer strand downstream pipelines** — if `.then` is called after the upstream pipeline has already reached a terminal state, the chain coordinator now immediately propagates that state.
+- **Step-level `:ignore` under `:halt` now protects the full downstream subgraph** — `skip_all_pending_steps` now computes the transitive closure of downstream steps (via BFS) instead of only exempting direct children. Previously, `A(ignore) -> B -> C` under `:halt` would preserve `B` but immediately skip `C`.
+
 ## [0.1.0] - 2026-03-20
 
 ### Added

data/README.md

@@ -2,7 +2,7 @@
 
 DAG-based job pipeline orchestration for Rails, built on [GoodJob](https://github.com/bensheldon/good_job).
 
-Define multi-step workflows as directed acyclic graphs, where each step is a GoodJob job. GoodPipeline handles dependency resolution, parallel execution, failure strategies, pipeline chaining, lifecycle callbacks, and provides a built-in web dashboard.
+Define multi-step workflows as directed acyclic graphs, where each step is a GoodJob job. GoodPipeline handles dependency resolution, parallel execution, failure strategies, pipeline chaining, and lifecycle callbacks. It also ships with a web dashboard.
 
 ## Requirements
 
@@ -87,11 +87,10 @@ VideoProcessingPipeline.run(video_id: 123)
 
 ```ruby
 run :step_key, JobClass,
-  with:       { key: "value" },  # keyword args passed to the job
-  after:      :other_step,       # dependency (symbol or array of symbols)
-  on_failure: :ignore,           # step-level failure strategy override
-  queue:      :media,            # optional queue override
-  priority:   10                 # optional priority override
+  with:       { key: "value" },                # keyword args passed to the job
+  after:      :other_step,                     # dependency (symbol or array of symbols)
+  on_failure: :ignore,                         # step-level failure strategy override
+  enqueue:    { queue: :media, priority: 10 }  # options passed to job.enqueue()
 ```
 
 ### Failure strategies
@@ -106,6 +105,52 @@ Set at the pipeline level with `failure_strategy`:
 
 Per-step overrides via `on_failure:` in `run` apply to that step's outgoing edges only.
 
+### Conditional branching
+
+Use `branch` to take different paths at runtime based on application state:
+
+```ruby
+class MediaPipeline < GoodPipeline::Pipeline
+  def configure(media_id:)
+    run :analyze, AnalyzeJob, with: { media_id: media_id }
+
+    branch :format_check, after: :analyze, by: :detect_format do
+      on :hd do
+        run :transcode_hd, TranscodeHDJob, with: { media_id: media_id }
+        run :upscale, UpscaleJob, with: { media_id: media_id }, after: :transcode_hd
+      end
+
+      on :sd do
+        run :transcode_sd, TranscodeSDJob, with: { media_id: media_id }
+      end
+    end
+
+    run :publish, PublishJob, after: :format_check
+  end
+
+  private
+
+  def detect_format
+    Media.find(params[:media_id]).hd? ? :hd : :sd
+  end
+end
+```
+
+The `by:` method is evaluated at runtime when the branch step is reached. The matching arm runs; other arms are skipped. `after: :format_check` waits for whichever arm was chosen to complete.
+
+Arms can also be empty for an if-without-else pattern:
+
+```ruby
+branch :quality_check, after: :analyze, by: :needs_processing do
+  on :yes do
+    run :process, ProcessJob
+  end
+  on :no  # skip — pipeline continues to next step
+end
+```
+
+The dashboard renders branches as diamond decision nodes with labeled edges.
+
 ### Pipeline chaining
 
 Chain pipelines together with `.then()`:
@@ -187,7 +232,7 @@ The dashboard provides:
 
 ![Pipeline Definitions](docs/screenshots/definitions.png)
 
-No build step required. Uses Pico CSS and Mermaid.js from CDN.
+No build step. Uses Pico CSS and Mermaid.js from CDN.
 
 ## Cleanup
 

data/app/controllers/good_pipeline/pipelines_controller.rb

@@ -19,14 +19,15 @@ module GoodPipeline
       pipeline_ids = pipeline_types.filter_map do |type|
         PipelineRecord.where(type: type).order(created_at: :desc).pick(:id)
       end
-      @pipelines = PipelineRecord.includes(:steps, dependencies: %i[step depends_on_step])
+      @pipelines = PipelineRecord.includes(steps: :upstream_steps, dependencies: %i[step depends_on_step])
                                  .where(id: pipeline_ids)
                                  .sort_by(&:type)
     end
 
     def show
       scope = PipelineRecord.includes(
-        :upstream_pipelines, :downstream_pipelines, :steps,
+        :upstream_pipelines, :downstream_pipelines,
+        steps: :upstream_steps,
         dependencies: %i[step depends_on_step]
       )
       @pipeline = scope.find(params[:id])

data/app/frontend/good_pipeline/style.css

@@ -121,6 +121,7 @@ body {
 .badge-failed { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
 .badge-halted { background-color: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
 .badge-skipped { background-color: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; }
+.badge-skipped_by_branch { background-color: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; }
 
 /* Strategy label */
 .strategy-label {
@@ -468,18 +469,18 @@ article.table-card > header {
 
 /* Detail panel */
 .definitions-detail {
-  min-height: 400px;
   position: relative;
 }
 
 .definition-panel {
-  position: absolute;
+  height: 0;
+  overflow: hidden;
   visibility: hidden;
-  width: 100%;
 }
 
 .definition-panel.active {
-  position: static;
+  height: auto;
+  overflow: visible;
   visibility: visible;
 }
 
@@ -516,3 +517,81 @@ article.table-card > header {
   font-size: 0.8em;
   padding: 0.1em 0.35em;
 }
+
+/* Interactive diagram container */
+.diagram-container {
+  position: relative;
+}
+
+.diagram-toolbar {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0.4;
+  transition: opacity 0.15s ease;
+}
+
+.diagram-container:hover .diagram-toolbar {
+  opacity: 1;
+}
+
+.diagram-btn {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #555;
+  user-select: none;
+  transition: background-color 0.1s ease;
+}
+
+.diagram-btn[data-action="zoom-reset"] {
+  width: auto;
+  padding: 0 0.4rem;
+  font-size: 0.62rem;
+  font-weight: 500;
+}
+
+.diagram-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.diagram-viewport {
+  overflow: hidden;
+  cursor: grab;
+  min-height: 200px;
+}
+
+.diagram-viewport:active {
+  cursor: grabbing;
+}
+
+.diagram-canvas {
+  transform-origin: 0 0;
+  transition: transform 0.15s ease;
+}
+
+.diagram-canvas.dragging {
+  transition: none;
+}
+
+.diagram-container:fullscreen {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.diagram-container:fullscreen .diagram-viewport {
+  flex: 1;
+}

data/app/helpers/good_pipeline/mermaid_diagram_builder.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module GoodPipeline
+  class MermaidDiagramBuilder
+    DEFINITION_CLASSES = [
+      "  classDef step fill:#4a90d9,color:#fff,stroke:#3a7bc8",
+      "  classDef branch fill:#ff9800,color:#fff,stroke:#f57c00",
+      "  classDef terminal fill:#1a1a2e,color:#fff,stroke:#1a1a2e"
+    ].freeze
+
+    STATUS_CLASSES = [
+      "  classDef pending fill:#9e9e9e,color:#fff",
+      "  classDef enqueued fill:#2196f3,color:#fff",
+      "  classDef succeeded fill:#4caf50,color:#fff",
+      "  classDef failed fill:#f44336,color:#fff",
+      "  classDef skipped fill:#bdbdbd,color:#333",
+      "  classDef skipped_by_branch fill:#bdbdbd,color:#333",
+      "  classDef branch fill:#ff9800,color:#fff,stroke:#f57c00",
+      "  classDef terminal fill:#1a1a2e,color:#fff,stroke:#1a1a2e"
+    ].freeze
+
+    def initialize(pipeline)
+      @pipeline = pipeline
+    end
+
+    def definition_diagram
+      lines = ["graph TD"]
+      append_step_nodes(lines) { |step| step.branch_step? ? "branch" : "step" }
+      append_edges(lines)
+      append_terminal_node(lines)
+      lines.concat(DEFINITION_CLASSES)
+      lines.join("\n")
+    end
+
+    def status_diagram
+      lines = ["graph TD"]
+      append_step_nodes(lines) { |step| step.branch_step? ? "branch" : step.coordination_status }
+      append_edges(lines)
+      append_terminal_node(lines)
+      lines.concat(STATUS_CLASSES)
+      lines.join("\n")
+    end
+
+    private
+
+    def append_step_nodes(lines)
+      @pipeline.steps.each do |step|
+        css_class = yield(step)
+        lines << if step.branch_step?
+                   "  #{step.key}{\"#{step.key}\"}:::#{css_class}"
+                 else
+                   "  #{step.key}(\"#{step.key}\"):::#{css_class}"
+                 end
+      end
+    end
+
+    def append_edges(lines)
+      @pipeline.dependencies.each do |dependency|
+        upstream = dependency.depends_on_step
+        downstream = dependency.step
+        lines << if upstream.branch_step? && downstream.branch_arm_step?
+                   "  #{upstream.key} -->|#{downstream.branch_arm}| #{downstream.key}"
+                 else
+                   "  #{upstream.key} --> #{downstream.key}"
+                 end
+      end
+    end
+
+    def append_terminal_node(lines)
+      has_downstream_ids = @pipeline.dependencies.to_set { |dependency| dependency.depends_on_step.id }
+      terminal_steps = @pipeline.steps.reject { |step| has_downstream_ids.include?(step.id) }
+
+      lines << "  end_node((\" \")):::terminal"
+      terminal_steps.each { |step| lines << "  #{step.key} --> end_node" }
+
+      append_empty_arm_edges(lines)
+    end
+
+    def append_empty_arm_edges(lines) # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/MethodLength, Metrics/PerceivedComplexity
+      arm_step_keys_by_branch = @pipeline.steps.select(&:branch_arm_step?).group_by(&:branch_key)
+
+      @pipeline.steps.select(&:branch_step?).each do |branch_step|
+        next if branch_step.empty_arms.blank?
+
+        targets = find_post_branch_targets(branch_step, arm_step_keys_by_branch)
+
+        branch_step.empty_arms.each do |arm_name|
+          if targets.any?
+            targets.each { |target| lines << "  #{branch_step.key} -->|#{arm_name}| #{target.key}" }
+          else
+            lines << "  #{branch_step.key} -->|#{arm_name}| end_node"
+          end
+        end
+      end
+    end
+
+    def find_post_branch_targets(branch_step, arm_step_keys_by_branch)
+      arm_keys = (arm_step_keys_by_branch[branch_step.key] || []).to_set(&:key)
+
+      @pipeline.steps.select do |step|
+        !arm_keys.include?(step.key) && step.upstream_steps.any? { |upstream| arm_keys.include?(upstream.key) }
+      end
+    end
+  end
+end

data/app/helpers/good_pipeline/pipelines_helper.rb

@@ -9,7 +9,8 @@ module GoodPipeline
       "succeeded" => "\u2713 Succeeded",
       "failed" => "\u2717 Failed",
       "halted" => "\u2298 Halted",
-      "skipped" => "\u2298 Skipped"
+      "skipped" => "\u2298 Skipped",
+      "skipped_by_branch" => "\u2298 Skipped (branch)"
     }.freeze
 
     def status_badge(status)
@@ -18,7 +19,7 @@ module GoodPipeline
     end
 
     def humanized_type(pipeline_type)
-      pipeline_type.to_s.underscore.titleize
+      pipeline_type.to_s.safe_constantize&.display_name || pipeline_type.to_s.underscore.titleize
     end
 
     def relative_time_tag(datetime)
@@ -41,27 +42,11 @@ module GoodPipeline
     end
 
     def mermaid_definition_diagram(pipeline)
-      lines = ["graph TD"]
-      pipeline.steps.each do |step|
-        lines << "  #{step.key}(\"#{step.key}\"):::step"
-      end
-      pipeline.dependencies.each do |dependency|
-        lines << "  #{dependency.depends_on_step.key} --> #{dependency.step.key}"
-      end
-      lines << "  classDef step fill:#4a90d9,color:#fff,stroke:#3a7bc8"
-      lines.join("\n")
+      MermaidDiagramBuilder.new(pipeline).definition_diagram
     end
 
     def mermaid_diagram(pipeline)
-      lines = ["graph TD"]
-      pipeline.steps.each do |step|
-        lines << "  #{step.key}(\"#{step.key}\"):::#{step.coordination_status}"
-      end
-      pipeline.dependencies.each do |dependency|
-        lines << "  #{dependency.depends_on_step.key} --> #{dependency.step.key}"
-      end
-      lines.concat(mermaid_status_classes)
-      lines.join("\n")
+      MermaidDiagramBuilder.new(pipeline).status_diagram
     end
 
     def good_job_step_url(step)
@@ -94,16 +79,6 @@ module GoodPipeline
 
     private
 
-    def mermaid_status_classes
-      [
-        "  classDef pending fill:#9e9e9e,color:#fff",
-        "  classDef enqueued fill:#2196f3,color:#fff",
-        "  classDef succeeded fill:#4caf50,color:#fff",
-        "  classDef failed fill:#f44336,color:#fff",
-        "  classDef skipped fill:#bdbdbd,color:#333"
-      ]
-    end
-
     def good_job_mount_path
       return nil unless defined?(GoodJob::Engine)
 

data/app/jobs/good_pipeline/pipeline_callback_job.rb

@@ -10,7 +10,7 @@ module GoodPipeline
       end
 
       pipeline_record = GoodPipeline::PipelineRecord.find(pipeline_id)
-      pipeline = pipeline_record.type.constantize.for_callback(pipeline_record)
+      pipeline = pipeline_record.type.constantize.reconstruct(pipeline_record)
 
       errors = []
 
@@ -34,8 +34,8 @@ module GoodPipeline
       return unless callback
 
       pipeline.send(callback)
-    rescue StandardError => e
-      errors << e
+    rescue StandardError => error
+      errors << error
     end
 
     def raise_callback_errors(errors)
@@ -44,7 +44,7 @@ module GoodPipeline
       primary = errors.first
       if errors.size > 1
         suppressed = errors[1..].map { |error| "#{error.class}: #{error.message}" }.join("; ")
-        raise primary.class, "#{primary.message} (suppressed #{errors.size - 1} additional error(s): #{suppressed})"
+        raise primary, "#{primary.message} (suppressed #{errors.size - 1} additional error(s): #{suppressed})"
       end
       raise primary
     end

data/app/models/good_pipeline/step_record.rb

@@ -4,10 +4,10 @@ module GoodPipeline
   class StepRecord < ActiveRecord::Base
     self.table_name = "good_pipeline_steps"
 
-    TERMINAL_COORDINATION_STATUSES = %w[succeeded failed skipped].freeze
+    TERMINAL_COORDINATION_STATUSES = %w[succeeded failed skipped skipped_by_branch].freeze
 
     VALID_COORDINATION_TRANSITIONS = {
-      "pending" => %w[enqueued skipped],
+      "pending" => %w[enqueued skipped skipped_by_branch succeeded failed],
       "enqueued" => %w[succeeded failed]
     }.freeze
 
@@ -16,11 +16,14 @@ module GoodPipeline
       enqueued: "enqueued",
       succeeded: "succeeded",
       failed: "failed",
-      skipped: "skipped"
+      skipped: "skipped",
+      skipped_by_branch: "skipped_by_branch"
     }
 
     enum :on_failure_strategy, { halt: "halt", continue: "continue", ignore: "ignore" }
 
+    store_accessor :branch, :decides, :branch_result, :branch_key, :branch_arm, :empty_arms
+
     belongs_to :pipeline,
                class_name: "GoodPipeline::PipelineRecord",
                foreign_key: :pipeline_id,
@@ -46,6 +49,9 @@ module GoodPipeline
              through: :downstream_dependencies,
              source: :step
 
+    def branch_step? = job_class == GoodPipeline::BRANCH_JOB_CLASS
+    def branch_arm_step? = branch_arm.present?
+
     def duration
       return nil unless good_job_id
 

data/app/views/good_pipeline/pipelines/definitions.html.erb

@@ -23,7 +23,19 @@
               <%= link_to "View Executions \u2192", pipelines_path(pipeline_type: pipeline.type), class: "definition-executions-link" %>
             </header>
             <% if pipeline.steps.any? %>
-              <pre class="mermaid"><%= raw mermaid_definition_diagram(pipeline) %></pre>
+              <div class="diagram-container">
+                <div class="diagram-toolbar">
+                  <button type="button" class="diagram-btn" data-action="zoom-in" title="Zoom in">+</button>
+                  <button type="button" class="diagram-btn" data-action="zoom-out" title="Zoom out">&minus;</button>
+                  <button type="button" class="diagram-btn" data-action="zoom-reset" title="Reset zoom">Reset</button>
+                  <button type="button" class="diagram-btn" data-action="fullscreen" title="Fullscreen">&#x26F6;</button>
+                </div>
+                <div class="diagram-viewport">
+                  <div class="diagram-canvas">
+                    <pre class="mermaid"><%= raw mermaid_definition_diagram(pipeline) %></pre>
+                  </div>
+                </div>
+              </div>
             <% else %>
               <p class="empty-state">No steps defined.</p>
             <% end %>

data/app/views/good_pipeline/pipelines/show.html.erb

@@ -31,7 +31,19 @@
     <article>
       <header><h3>Pipeline Graph</h3></header>
       <% if @pipeline.steps.any? %>
-        <pre class="mermaid"><%= raw mermaid_diagram(@pipeline) %></pre>
+        <div class="diagram-container">
+          <div class="diagram-toolbar">
+            <button type="button" class="diagram-btn" data-action="zoom-in" title="Zoom in">+</button>
+            <button type="button" class="diagram-btn" data-action="zoom-out" title="Zoom out">&minus;</button>
+            <button type="button" class="diagram-btn" data-action="zoom-reset" title="Reset zoom">Reset</button>
+            <button type="button" class="diagram-btn" data-action="fullscreen" title="Fullscreen">&#x26F6;</button>
+          </div>
+          <div class="diagram-viewport">
+            <div class="diagram-canvas">
+              <pre class="mermaid"><%= raw mermaid_diagram(@pipeline) %></pre>
+            </div>
+          </div>
+        </div>
       <% else %>
         <p class="empty-state">No steps defined.</p>
       <% end %>

data/app/views/layouts/good_pipeline/application.html.erb

@@ -36,5 +36,120 @@
       });
     });
   </script>
+  <script>
+    (function() {
+      var MIN_SCALE = 0.5, MAX_SCALE = 4, ZOOM_STEP = 0.25;
+      var states = new WeakMap();
+
+      function getState(container) {
+        if (!states.has(container)) states.set(container, { scale: 1, panX: 0, panY: 0 });
+        return states.get(container);
+      }
+
+      function applyTransform(container) {
+        var s = getState(container);
+        var canvas = container.querySelector('.diagram-canvas');
+        if (canvas) canvas.style.transform = 'translate(' + s.panX + 'px, ' + s.panY + 'px) scale(' + s.scale + ')';
+      }
+
+      function clampScale(val) {
+        return Math.min(MAX_SCALE, Math.max(MIN_SCALE, val));
+      }
+
+      function zoomAroundPoint(s, centerX, centerY, newScale) {
+        var oldScale = s.scale;
+        newScale = clampScale(newScale);
+        if (newScale === oldScale) return;
+        var ratio = newScale / oldScale;
+        s.panX = centerX - (centerX - s.panX) * ratio;
+        s.panY = centerY - (centerY - s.panY) * ratio;
+        s.scale = newScale;
+      }
+
+      // Button actions via event delegation
+      document.addEventListener('click', function(e) {
+        var btn = e.target.closest('[data-action]');
+        if (!btn) return;
+        var container = btn.closest('.diagram-container');
+        if (!container) return;
+        var s = getState(container);
+        var action = btn.dataset.action;
+
+        if (action === 'zoom-in' || action === 'zoom-out') {
+          var viewport = container.querySelector('.diagram-viewport');
+          var rect = viewport.getBoundingClientRect();
+          var centerX = rect.width / 2;
+          var centerY = rect.height / 2;
+          var delta = action === 'zoom-in' ? ZOOM_STEP : -ZOOM_STEP;
+          zoomAroundPoint(s, centerX, centerY, s.scale + delta);
+        } else if (action === 'zoom-reset') {
+          s.scale = 1; s.panX = 0; s.panY = 0;
+        } else if (action === 'fullscreen') {
+          if (document.fullscreenElement === container) {
+            document.exitFullscreen();
+          } else {
+            container.requestFullscreen();
+          }
+          return;
+        }
+        applyTransform(container);
+      });
+
+      // Mouse wheel zoom toward cursor
+      document.querySelectorAll('.diagram-viewport').forEach(function(viewport) {
+        viewport.addEventListener('wheel', function(e) {
+          e.preventDefault();
+          var container = viewport.closest('.diagram-container');
+          var s = getState(container);
+          var rect = viewport.getBoundingClientRect();
+          var cursorX = e.clientX - rect.left;
+          var cursorY = e.clientY - rect.top;
+          var delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
+          zoomAroundPoint(s, cursorX, cursorY, s.scale + delta);
+          applyTransform(container);
+        }, { passive: false });
+      });
+
+      // Click-drag pan
+      document.querySelectorAll('.diagram-viewport').forEach(function(viewport) {
+        viewport.addEventListener('mousedown', function(e) {
+          if (e.button !== 0) return;
+          var container = viewport.closest('.diagram-container');
+          var canvas = container.querySelector('.diagram-canvas');
+          var s = getState(container);
+          var startX = e.clientX - s.panX;
+          var startY = e.clientY - s.panY;
+          canvas.classList.add('dragging');
+
+          function onMove(ev) {
+            s.panX = ev.clientX - startX;
+            s.panY = ev.clientY - startY;
+            applyTransform(container);
+          }
+          function onUp() {
+            canvas.classList.remove('dragging');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+          }
+          document.addEventListener('mousemove', onMove);
+          document.addEventListener('mouseup', onUp);
+        });
+      });
+
+      // Reset zoom when switching definitions
+      document.querySelectorAll('.definition-item').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+          var type = btn.dataset.pipeline;
+          var panel = document.querySelector('.definition-panel[data-pipeline="' + type + '"]');
+          if (!panel) return;
+          var container = panel.querySelector('.diagram-container');
+          if (!container) return;
+          var s = getState(container);
+          s.scale = 1; s.panX = 0; s.panY = 0;
+          applyTransform(container);
+        });
+      });
+    })();
+  </script>
 </body>
 </html>