diff --git a/changes.d/2373.feat.md b/changes.d/2373.feat.md
new file mode 100644
index 000000000..ab733c64e
--- /dev/null
+++ b/changes.d/2373.feat.md
@@ -0,0 +1 @@
+Family inheritance is now shown in the Info view for tasks.
diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index 60bb8f1ce..0a2a86f47 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -44,164 +44,220 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- The task information -->
     <v-expansion-panels
       multiple
-      variant="accordion"
       v-model="panelExpansionModel"
+      flat
+      static
+      color="blue-grey-lighten-3"
+      bg-color="grey-lighten-4"
+      rounded="lg"
     >
-      <!-- The metadata -->
-      <v-expansion-panel class="metadata-panel">
-        <v-expansion-panel-title color="blue-grey-lighten-1">
-          Metadata
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <dl>
-            <dt>Title</dt>
-            <dd>{{ taskMetadata.title }}</dd>
-            <v-divider />
-            <dt>Description</dt>
-            <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
-            <v-divider />
-            <dt>URL</dt>
-            <dd>
-              <!--
-                  NOTE: for security reasons, always display the full URL
-                  that the link directs to
-              -->
-              <a
-                v-if="taskMetadata.URL"
-                :href="taskMetadata.URL"
-                target="_blank"
-              >
-                {{ taskMetadata.URL }}
-              </a>
-            </dd>
-            <v-divider />
-            <template v-for="(value, key) in customMetadata" :key="key">
-              <dt>{{ key }}</dt>
-              <dd><span class="markup">{{ value }}</span></dd>
+      <v-defaults-provider :defaults="{
+        VExpansionPanelTitle: {
+          class: 'text-button py-2',
+        },
+        VExpansionPanelText: {
+          class: 'mt-2',
+        },
+        VTable: {
+          density: 'compact',
+          class: 'bg-transparent',
+        },
+      }">
+        <!-- The metadata -->
+        <v-expansion-panel
+          value="metadata"
+          class="metadata-panel"
+        >
+          <v-expansion-panel-title>
+            Metadata
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <dl>
+              <dt>Title</dt>
+              <dd>{{ taskMetadata.title }}</dd>
               <v-divider />
-            </template>
-          </dl>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
-      <v-expansion-panel class="run-mode-panel">
-        <v-expansion-panel-title color="blue-grey-lighten-2">
-          Run Mode
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <v-icon>{{ runModeIcon }}</v-icon>  {{ runMode }}
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
-      <v-expansion-panel
-        v-if="xtriggers.length"
-        class="xtriggers-panel"
-      >
-        <v-expansion-panel-title color="blue-grey-lighten-1">
-          Xtriggers
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <v-table density="compact">
-            <thead>
-              <tr>
-                <th>Label</th>
-                <th>ID</th>
-                <th>Is satisfied</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="xt in xtriggers" :key="xt.id">
-                <td>{{ xt.label }}</td>
-                <td>{{ xt.id }}</td>
-                <td><v-icon>{{ xt.satisfactionIcon }}</v-icon></td>
-              </tr>
-            </tbody>
-          </v-table>
+              <dt>Description</dt>
+              <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
+              <template v-if="taskMetadata.URL">
+                <v-divider />
+                <dt>URL</dt>
+                <dd>
+                  <!--
+                      NOTE: for security reasons, always display the full URL
+                      that the link directs to
+                  -->
+                  <a
+                    :href="taskMetadata.URL"
+                    target="_blank"
+                  >
+                    {{ taskMetadata.URL }}
+                  </a>
+                </dd>
+              </template>
+              <template v-for="(value, key) in customMetadata" :key="key">
+                <v-divider />
+                <dt>{{ key }}</dt>
+                <dd><span class="markup">{{ value }}</span></dd>
+              </template>
+            </dl>
           </v-expansion-panel-text>
-      </v-expansion-panel>
-
-      <!-- The prereqs -->
-      <v-expansion-panel class="prerequisites-panel">
-        <v-expansion-panel-title color="blue-grey-lighten-2">
-          Prerequisites
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <ul>
-            <li v-for="prereq in prerequisites" :key="prereq.expression">
-              <span
-                class="prerequisite-alias condition"
-                :class="{satisfied: prereq.satisfied}"
-              >{{ prereq.expression.replace(/c/g, '') }}</span>
-              <ul>
-                <li
-                  v-for="condition in prereq.conditions"
-                  :key="condition.taskAlias"
-                >
-                  <span
-                    class="prerequisite-alias condition"
-                    :class="{satisfied: condition.satisfied}"
+        </v-expansion-panel>
+
+        <v-expansion-panel
+          value="runMode"
+          class="run-mode-panel"
+        >
+          <v-expansion-panel-title>
+            Run Mode
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <div class="d-flex align-center gap-2">
+              <v-icon :icon="runModeIcon"/>{{ runMode }}
+            </div>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <v-expansion-panel
+          v-if="inheritance?.length > 1"
+          value="inheritance"
+          data-cy="inheritance-panel"
+        >
+          <v-expansion-panel-title>
+            Inheritance
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <v-breadcrumbs :items="inheritance">
+              <template #divider>
+                <v-icon
+                  :icon="mdiChevronRight"
+                  size="small"
+                  class="mx-n1"
+                />
+              </template>
+            </v-breadcrumbs>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <v-expansion-panel
+          v-if="xtriggers.length"
+          value="xtriggers"
+          class="xtriggers-panel"
+        >
+          <v-expansion-panel-title>
+            Xtriggers
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <v-table>
+              <thead>
+                <tr>
+                  <th>Label</th>
+                  <th>ID</th>
+                  <th>Is satisfied</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="xt in xtriggers" :key="xt.id">
+                  <td>{{ xt.label }}</td>
+                  <td class="text-mono">{{ xt.id }}</td>
+                  <td><v-icon>{{ xt.satisfactionIcon }}</v-icon></td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <!-- The prereqs -->
+        <v-expansion-panel
+          value="prereqs"
+          class="prerequisites-panel"
+        >
+          <v-expansion-panel-title>
+            Prerequisites
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <ul>
+              <li v-for="prereq in prerequisites" :key="prereq.expression">
+                <span
+                  class="prerequisite-alias condition"
+                  :class="{satisfied: prereq.satisfied}"
+                >{{ prereq.expression.replace(/c/g, '') }}</span>
+                <ul>
+                  <li
+                    v-for="condition in prereq.conditions"
+                    :key="condition.taskAlias"
                   >
-                    {{ condition.exprAlias.replace(/c/, '') }}
-
-                    <span style="margin-left: 0.5em; color: rgb(0,0,0)">
-                      {{ condition.taskId }}:{{ condition.reqState }}
+                    <span
+                      class="prerequisite-alias condition"
+                      :class="{satisfied: condition.satisfied}"
+                    >
+                      {{ condition.exprAlias.replace(/c/, '') }}
+
+                      <span style="margin-left: 0.5em; color: rgb(0,0,0)">
+                        {{ condition.taskId }}:{{ condition.reqState }}
+                      </span>
                     </span>
-                  </span>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
-      <!-- The outputs -->
-      <v-expansion-panel class="outputs-panel">
-        <v-expansion-panel-title color="blue-grey-lighten-1">
-          Outputs
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <ul>
-            <li v-for="output in outputs" :key="output.label">
-              <span
-                class="condition"
-                :class="{satisfied: output.satisfied}"
-              >{{ output.label }}</span>
-            </li>
-          </ul>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
-      <!-- The completion -->
-      <v-expansion-panel class="completion-panel">
-        <v-expansion-panel-title color="blue-grey-lighten-2">
-          Completion
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <!-- TODO: We don't have an "is complete" field yet so we cannot
-            display an aggregate status-->
-          <ul>
-            <li
-              v-for="([complete, indent, line], index) in formatCompletion(completion, outputs)"
-              :key="index"
-            >
-              <span
-                class="condition"
-                :class="{satisfied: complete, blank: (complete === null)}"
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <!-- The outputs -->
+        <v-expansion-panel
+          value="outputs"
+          class="outputs-panel"
+        >
+          <v-expansion-panel-title>
+            Outputs
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <ul>
+              <li v-for="output in outputs" :key="output.label">
+                <span
+                  class="condition"
+                  :class="{satisfied: output.satisfied}"
+                >{{ output.label }}</span>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <!-- The completion -->
+        <v-expansion-panel
+          value="completion"
+          class="completion-panel"
+        >
+          <v-expansion-panel-title>
+            Completion
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <!-- TODO: We don't have an "is complete" field yet so we cannot
+              display an aggregate status-->
+            <ul>
+              <li
+                v-for="([complete, indent, line], index) in formatCompletion(completion, outputs)"
+                :key="index"
               >
-                <!-- Indent the line as required -->
-                <span :style="`margin-left: ${1 * indent}em;`"></span>
-                {{ line }}
-              </span>
-            </li>
-          </ul>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
+                <span
+                  class="condition"
+                  :class="{satisfied: complete, blank: (complete === null)}"
+                >
+                  <!-- Indent the line as required -->
+                  <span :style="`margin-left: ${1 * indent}em;`"></span>
+                  {{ line }}
+                </span>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-defaults-provider>
     </v-expansion-panels>
   </div>
 </template>
 
 <script>
+import { computed } from 'vue'
 import { useJobTheme } from '@/composables/localStorage'
 import GraphNode from '@/components/cylc/GraphNode.vue'
 import { formatCompletion } from '@/utils/outputs'
@@ -212,7 +268,8 @@ import {
   mdiPlay,
   mdiDramaMasks,
   mdiCheckboxOutline,
-  mdiCheckboxBlankOutline
+  mdiCheckboxBlankOutline,
+  mdiChevronRight
 } from '@mdi/js'
 import { cloneDeep } from 'lodash-es'
 import { formatDatetime } from '@/utils/tasks'
@@ -230,13 +287,19 @@ export default {
     },
     panelExpansion: {
       required: false,
-      default: [0],
+      default: ['metadata'],
     },
   },
 
   setup (props, { emit }) {
+    const inheritance = computed(
+      () => props.task?.node?.namespace?.slice(1) ?? []
+    )
+
     return {
+      inheritance,
       jobTheme: useJobTheme(),
+      mdiChevronRight,
     }
   },
 
@@ -364,16 +427,11 @@ export default {
 
     .metadata-panel {
       dl {
-        dt dd {
-          padding-left: 1em;
-          padding-right: 1em;
-        }
         dt {
-          font-size: 1.3em;
-          padding-top: 0.4em;
+          font-weight: bold;
         }
-        dd {
-          padding-bottom: 0.4em;
+        .v-divider {
+          margin: 0.4em 0;
         }
       }
     }
@@ -399,5 +457,10 @@ export default {
         list-style: none;
       }
     }
+
+    .v-breadcrumbs {
+      flex-wrap: wrap;
+      padding: 0;
+    }
   }
 </style>
diff --git a/src/services/mock/json/infoView.json b/src/services/mock/json/infoView.json
index f25668b68..59b50fb06 100644
--- a/src/services/mock/json/infoView.json
+++ b/src/services/mock/json/infoView.json
@@ -10,6 +10,13 @@
           "isQueued": false,
           "isRunahead": false,
 
+          "namespace": [
+            "root",
+            "BAD",
+            "failed"
+          ],
+
+
           "task": {
             "meanElapsedTime": "10",
             "meta": {
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 784b2ac56..34648663f 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -126,7 +126,8 @@
           "task": {
             "name": "checkpoint",
             "meanElapsedTime": 180
-          }
+          },
+          "namespace": ["root", "checkpoint"]
         },
         {
           "id": "~user/one//20000102T0000Z/eventually_succeeded",
@@ -146,7 +147,8 @@
           "task": {
             "meanElapsedTime": 11.5,
             "name": "eventually_succeeded"
-          }
+          },
+          "namespace": ["root", "GOOD", "SUCCEEDED", "eventually_succeeded"]
         },
         {
           "id": "~user/one//20000102T0000Z/failed",
@@ -165,7 +167,8 @@
           },
           "task": {
             "name": "failed"
-          }
+          },
+          "namespace": ["root", "BAD", "failed"]
         },
         {
           "id": "~user/one//20000102T0000Z/retrying",
@@ -184,7 +187,8 @@
           },
           "task": {
             "name": "retrying"
-          }
+          },
+          "namespace": ["root", "BAD", "retrying"]
         },
         {
           "id": "~user/one//20000102T0000Z/sleepy",
@@ -203,7 +207,8 @@
           },
           "task": {
             "name": "sleepy"
-          }
+          },
+          "namespace": ["root", "sleepy"]
         },
         {
           "id": "~user/one//20000102T0000Z/succeeded",
@@ -223,7 +228,8 @@
           "task": {
             "meanElapsedTime": 4.0,
             "name": "succeeded"
-          }
+          },
+          "namespace": ["root", "GOOD", "SUCCEEDED", "succeeded"]
         },
         {
           "id": "~user/one//20000102T0000Z/waiting",
@@ -242,7 +248,8 @@
           },
           "task": {
             "name": "waiting"
-          }
+          },
+          "namespace": ["root", "waiting"]
         }
       ],
       "jobs": [
diff --git a/src/views/Info.vue b/src/views/Info.vue
index 369642204..b9744fa7c 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -66,6 +66,7 @@ fragment UpdatedDelta on Updated {
 
 fragment TaskProxyData on TaskProxy {
   id
+  namespace
   state
   isHeld
   isQueued
@@ -217,7 +218,7 @@ export default {
 
   setup (props, { emit }) {
     const requestedTokens = useInitialOptions('requestedTokens', { props, emit })
-    const panelExpansion = useInitialOptions('panelExpansion', { props, emit }, [0])
+    const panelExpansion = useInitialOptions('panelExpansion', { props, emit }, ['metadata'])
     return {
       requestedTokens,
       panelExpansion,
diff --git a/tests/component/specs/info.cy.js b/tests/component/specs/info.cy.js
index 3ef5e063b..3fb2b4f86 100644
--- a/tests/component/specs/info.cy.js
+++ b/tests/component/specs/info.cy.js
@@ -40,6 +40,12 @@ const TASK = {
         }
       }
     },
+    namespace: [
+      'root',
+      'GRANDPA',
+      'DAD',
+      TOKENS.task,
+    ],
     prerequisites: [
       {
         satisfied: false,
@@ -147,110 +153,137 @@ const TASK = {
 }
 
 describe('Info component', () => {
-  it('displays task information', () => {
-    cy.vmount(InfoComponent, {
-      props: {
-        task: TASK,
-        class: 'job_theme--default',
-        // NOTE: expand all sections by default
-        panelExpansion: [0, 1, 2, 3, 4, 5],
-      }
+  describe('Task information', () => {
+    beforeEach(() => {
+      cy.vmount(InfoComponent, {
+        props: {
+          task: TASK,
+          class: 'job_theme--default',
+          // NOTE: expand all sections by default
+          panelExpansion: [
+            'metadata',
+            'runMode',
+            'inheritance',
+            'xtriggers',
+            'prereqs',
+            'outputs',
+            'completion',
+          ],
+        }
+      })
     })
 
-    // there should be a task icon (running)
-    cy.get('.c-graph-node .c8-task.running').should('be.visible')
-
-    // and two job icons (succeeded & failed)
-    cy.get('.c-graph-node .c-job').should('have.length', 2)
-      .get('.c-graph-node .c-job .failed').should('be.visible')
-      .get('.c-graph-node .c-job .succeeded').should('be.visible')
-
-    // the metadata panel
-    cy.get('.metadata-panel.v-expansion-panel--active').should('be.visible')
-      .contains('My Foo')
-      .get('.metadata-panel') // the description should be displayed
-      .contains(/Lorem ipsum dolor sit amet.*/)
-      .get('.metadata-panel a:first') // the URL should be an anchor
-      .should('have.attr', 'href', 'https://cylc.org')
-      .contains(/^https:\/\/cylc.org$/)
-
-    // the run mode panel:
-    cy.get('.run-mode-panel.v-expansion-panel--active').should('be.visible')
-      .contains('Live')
-
-    // the xtriggers panel
-    cy.get('.xtriggers-panel.v-expansion-panel--active').should('be.visible')
-      .get('table')
-      .get('tbody tr')
-      .children()
-      .then((selector) => {
-        expect(selector[0].innerText).to.equal('wallclock-xtrigger')
-        expect(selector[4].innerText).to.equal('my-xtrigger(foo=42)')
-        expect(selector[7].innerText).to.equal('my-xtrigger(foo=99)')
-      })
+    it('shows task icon and jobs', () => {
+      // there should be a task icon (running)
+      cy.get('.c-graph-node .c8-task.running').should('be.visible')
 
-    // the prerequisites panel
-    cy.get('.prerequisites-panel.v-expansion-panel--active').should('be.visible')
-      .find('.prerequisite-alias.condition')
-      .should('have.length', 6)
-      .then((selector) => {
-        expect(selector[0].innerText).to.equal('(0 & 1) | 2')
-        expect(selector[0]).to.not.have.class('satisfied')
+      // and two job icons (succeeded & failed)
+      cy.get('.c-graph-node .c-job').should('have.length', 2)
+        .get('.c-graph-node .c-job .failed').should('be.visible')
+        .get('.c-graph-node .c-job .succeeded').should('be.visible')
+    })
 
-        expect(selector[1].innerText).to.equal('0 a:succeeded')
-        expect(selector[1]).to.have.class('satisfied')
+    it('shows metadata', () => {
+      cy.get('.metadata-panel.v-expansion-panel--active').should('be.visible')
+        .contains('My Foo')
+        .get('.metadata-panel') // the description should be displayed
+        .contains(/Lorem ipsum dolor sit amet.*/)
+        .get('.metadata-panel a:first') // the URL should be an anchor
+        .should('have.attr', 'href', 'https://cylc.org')
+        .contains(/^https:\/\/cylc.org$/)
+    })
 
-        expect(selector[2].innerText).to.equal('1 b:custom_output')
-        expect(selector[2]).to.not.have.class('satisfied')
+    it('shows run mode and inheritance', () => {
+      cy.get('.run-mode-panel.v-expansion-panel--active').should('be.visible')
+        .contains('Live')
 
-        expect(selector[3].innerText).to.equal('2 a:expired')
-        expect(selector[3]).to.not.have.class('satisfied')
+      cy.get('[data-cy=inheritance-panel]')
+        .find('li:not([aria-hidden="true"])')
+        .then(($els) => Array.from($els, (el) => el.innerText))
+        .should('deep.equal', [
+          'GRANDPA',
+          'DAD',
+          'foo',
+        ])
+    })
 
-        expect(selector[4].innerText).to.equal('0')
-        expect(selector[4]).to.have.class('satisfied')
+    it('shows xtriggers', () => {
+      cy.get('.xtriggers-panel.v-expansion-panel--active').should('be.visible')
+        .get('table')
+        .get('tbody tr')
+        .children()
+        .then((selector) => {
+          expect(selector[0].innerText).to.equal('wallclock-xtrigger')
+          expect(selector[4].innerText).to.equal('my-xtrigger(foo=42)')
+          expect(selector[7].innerText).to.equal('my-xtrigger(foo=99)')
+        })
+    })
 
-        expect(selector[5].innerText).to.equal('0 x:succeeded')
-        expect(selector[5]).to.have.class('satisfied')
-      })
+    it('shows prerequisites', () => {
+      cy.get('.prerequisites-panel.v-expansion-panel--active').should('be.visible')
+        .find('.prerequisite-alias.condition')
+        .should('have.length', 6)
+        .then((selector) => {
+          expect(selector[0].innerText).to.equal('(0 & 1) | 2')
+          expect(selector[0]).to.not.have.class('satisfied')
 
-    // the outputs panel
-    cy.get('.outputs-panel.v-expansion-panel--active').should('be.visible')
-      .find('.condition')
-      .should('have.length', 4)
-      .then((selector) => {
-        expect(selector[0]).to.contain('started')
-        expect(selector[0].classList.toString()).to.equal('condition satisfied')
+          expect(selector[1].innerText).to.equal('0 a:succeeded')
+          expect(selector[1]).to.have.class('satisfied')
 
-        expect(selector[1]).to.contain('succeeded')
-        expect(selector[1].classList.toString()).to.equal('condition')
+          expect(selector[2].innerText).to.equal('1 b:custom_output')
+          expect(selector[2]).to.not.have.class('satisfied')
 
-        expect(selector[2]).to.contain('failed')
-        expect(selector[2].classList.toString()).to.equal('condition')
+          expect(selector[3].innerText).to.equal('2 a:expired')
+          expect(selector[3]).to.not.have.class('satisfied')
 
-        expect(selector[3]).to.contain('x')
-        expect(selector[3].classList.toString()).to.equal('condition satisfied')
-      })
+          expect(selector[4].innerText).to.equal('0')
+          expect(selector[4]).to.have.class('satisfied')
 
-    // the completion panel
-    cy.get('.completion-panel.v-expansion-panel--active').should('be.visible')
-      .find('.condition')
-      .should('have.length', 5)
-      .then((selector) => {
-        expect(selector[0]).to.contain('(')
-        expect(selector[0].classList.toString()).to.equal('condition blank')
+          expect(selector[5].innerText).to.equal('0 x:succeeded')
+          expect(selector[5]).to.have.class('satisfied')
+        })
+    })
 
-        expect(selector[1]).to.contain('succeeded')
-        expect(selector[1].classList.toString()).to.equal('condition')
+    it('shows outputs', () => {
+      cy.get('.outputs-panel.v-expansion-panel--active').should('be.visible')
+        .find('.condition')
+        .should('have.length', 4)
+        .then((selector) => {
+          expect(selector[0]).to.contain('started')
+          expect(selector[0].classList.toString()).to.equal('condition satisfied')
 
-        expect(selector[2]).to.contain('and x')
-        expect(selector[2].classList.toString()).to.equal('condition satisfied')
+          expect(selector[1]).to.contain('succeeded')
+          expect(selector[1].classList.toString()).to.equal('condition')
 
-        expect(selector[3]).to.contain(')')
-        expect(selector[3].classList.toString()).to.equal('condition blank')
+          expect(selector[2]).to.contain('failed')
+          expect(selector[2].classList.toString()).to.equal('condition')
 
-        expect(selector[4]).to.contain('or failed')
-        expect(selector[4].classList.toString()).to.equal('condition')
-      })
+          expect(selector[3]).to.contain('x')
+          expect(selector[3].classList.toString()).to.equal('condition satisfied')
+        })
+    })
+
+    it('shows completion info', () => {
+      cy.get('.completion-panel.v-expansion-panel--active').should('be.visible')
+        .find('.condition')
+        .should('have.length', 5)
+        .then((selector) => {
+          expect(selector[0]).to.contain('(')
+          expect(selector[0].classList.toString()).to.equal('condition blank')
+
+          expect(selector[1]).to.contain('succeeded')
+          expect(selector[1].classList.toString()).to.equal('condition')
+
+          expect(selector[2]).to.contain('and x')
+          expect(selector[2].classList.toString()).to.equal('condition satisfied')
+
+          expect(selector[3]).to.contain(')')
+          expect(selector[3].classList.toString()).to.equal('condition blank')
+
+          expect(selector[4]).to.contain('or failed')
+          expect(selector[4].classList.toString()).to.equal('condition')
+        })
+    })
   })
 
   it('should expand sections as intended', () => {
@@ -279,7 +312,7 @@ describe('Info component', () => {
       .get('@wrapper').then(({ wrapper }) => {
         expect(
           wrapper.emitted('update:panelExpansion')[0][0]
-        ).to.deep.equal([0, 3])
+        ).to.deep.equal(['metadata', 'prereqs'])
       })
   })
 
@@ -317,8 +350,6 @@ describe('Info component', () => {
 
   for (const mode of ['Skip', 'Simulation', 'Dummy']) {
     it('should display ' + mode + ' mode', () => {
-      // ensure the component can be mounted without errors for empty states
-      // i.e. no metadata, prerequisites, outputs or jobs
       const tokens = new Tokens('~user/workflow//1234/foo')
       const task = {
         id: tokens.id,
@@ -343,7 +374,7 @@ describe('Info component', () => {
           task,
           class: 'job_theme--default',
           // Expand just the run mode panel
-          panelExpansion: [1],
+          panelExpansion: ['runMode'],
         }
       })