Build detail: show build step metadata label

readthedocsext/theme/templates/builds/build_detail.html

@@ -232,6 +232,13 @@
         <table class="ko hidden ui small very basic compact inverted selectable command unstackable table"
                data-bind="css: { hidden: !commands(), 'single line': !is_wrapped() }, foreach: commands">
           <tbody>
+            <tr class="top aligned section"
+                data-bind="visible: (is_visible() || $parent.show_debug()) && $parent.is_step_start($data)">
+              <td colspan="2">
+                <a class="ui mini basic inverted label"
+                   data-bind="text: build_step_label"></a>
+              </td>
+            </tr>
             <tr class="top aligned command"
                 data-bind="visible: is_visible() || $parent.show_debug()">
               <td class="collapsing">

src/js/build/detail.js

@@ -13,6 +13,54 @@ dayjs.extend(RelativeTime);
 dayjs.extend(Duration);
 dayjs.extend(LocalizedFormat);
 
+const BUILD_STEP_LABELS = {
+  checkout: "Checkout",
+  system_dependencies: "System dependencies",
+  create_environment: "Create environment",
+  install: "Install",
+  build: "Build",
+  upload: "Upload",
+};
+
+function get_build_step_key(build_step) {
+  if (!build_step) {
+    return null;
+  }
+
+  const normalized = String(build_step);
+  if (normalized.includes("checkout")) {
+    return "checkout";
+  }
+  if (normalized.includes("system_dependencies")) {
+    return "system_dependencies";
+  }
+  if (normalized.includes("create_environment")) {
+    return "create_environment";
+  }
+  if (normalized.includes("install")) {
+    return "install";
+  }
+  if (normalized.includes("build")) {
+    return "build";
+  }
+  if (normalized.includes("upload")) {
+    return "upload";
+  }
+
+  return normalized;
+}
+
+function get_build_step_label(build_step) {
+  const build_step_key = get_build_step_key(build_step);
+  if (!build_step_key) {
+    return null;
+  }
+  if (BUILD_STEP_LABELS[build_step_key]) {
+    return BUILD_STEP_LABELS[build_step_key];
+  }
+  return String(build_step_key).replace(/_/g, " ");
+}
+
 /** Build command output subview, represented in :class:`BuildCommand` as an
  * array of output lines.
  *
@@ -88,6 +136,17 @@ class BuildCommand {
     });
     /** @computed {Boolean} This command is a debug class command */
     this.is_debug = ko.observable(is_debug);
+    /** @observable {string|null} Build step/job metadata for this command */
+    this.build_step = ko.observable(
+      build_command.job ||
+        build_command.build_job ||
+        build_command.step ||
+        null,
+    );
+    /** @computed {string|null} Build step metadata display label */
+    this.build_step_label = ko.computed(() => {
+      return get_build_step_label(this.build_step());
+    });
     /** @computed {Boolean} Hide debug commands until debug mode is enabled */
     this.is_visible = ko.computed(
       () => {
@@ -514,11 +573,48 @@ export class BuildDetailView {
       command_found.exit_code(command.exit_code || 0);
       command_found.run_time(command.run_time);
       command_found.end_time(command.end_time);
+      command_found.build_step(
+        command.job ||
+          command.build_job ||
+          command.step ||
+          command_found.build_step(),
+      );
     } else {
       this.commands.push(new BuildCommand(command));
     }
   }
 
+  /**
+   * Is this command the first visible command of a build step section?
+   *
+   * @param {BuildCommand} command - Command to evaluate
+   * @returns {Boolean}
+   */
+  is_step_start(command) {
+    const show_debug = this.show_debug();
+    let previous_step = null;
+
+    for (const command_search of this.commands()) {
+      if (!show_debug && !command_search.is_visible()) {
+        continue;
+      }
+
+      const step = get_build_step_key(command_search.build_step());
+      if (command_search === command) {
+        if (!step) {
+          return false;
+        }
+        return previous_step !== step;
+      }
+
+      if (step) {
+        previous_step = step;
+      }
+    }
+
+    return false;
+  }
+
   /**
    * Set the selected line and focus on the new selected element
    *