diff --git a/changes.d/1886.feat.md b/changes.d/1886.feat.md
new file mode 100644
index 000000000..9f20cc650
--- /dev/null
+++ b/changes.d/1886.feat.md
@@ -0,0 +1 @@
+Added an info view to display task information including metadata, prerequisites and outputs.
diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
new file mode 100644
index 000000000..3bd79dc37
--- /dev/null
+++ b/cypress/component/info.cy.js
@@ -0,0 +1,282 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import InfoComponent from '@/components/cylc/Info.vue'
+import { Tokens } from '@/utils/uid'
+
+const DESCRIPTION = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+`
+const TOKENS = new Tokens('~user/workflow//1234/foo')
+const TASK = {
+  id: TOKENS.id,
+  name: TOKENS.task,
+  tokens: TOKENS,
+  node: {
+    state: 'running',
+    task: {
+      meta: {
+        title: 'My Foo',
+        description: DESCRIPTION,
+        URL: 'https://cylc.org',
+        customMeta: {
+          answer: '42',
+          question: 'mutually exclusive',
+        }
+      }
+    },
+    prerequisites: [
+      {
+        satisfied: false,
+        expression: '(c0 & c1) | c2',
+        conditions: [
+          {
+            taskId: 'a',
+            message: 'succeeded',
+            reqState: 'succeeded',
+            exprAlias: 'c0',
+            satisfied: true,
+          },
+          {
+            taskId: 'b',
+            message: 'custom message',
+            reqState: 'custom_output',
+            exprAlias: 'c1',
+            satisfied: false,
+          },
+          {
+            taskId: 'a',
+            message: 'expired',
+            reqState: 'expired',
+            exprAlias: 'c2',
+            satisfied: false,
+          },
+        ],
+      },
+      {
+        satisfied: true,
+        expression: 'c0',
+        conditions: [
+          {
+            taskId: 'x',
+            message: 'succeeded',
+            reqState: 'succeeded',
+            exprAlias: 'c0',
+            satisfied: true,
+          },
+        ],
+      },
+    ],
+    outputs: [
+      {
+        label: 'started',
+        message: 'started',
+        satisfied: true,
+      },
+      {
+        label: 'succeeded',
+        message: 'succeeded',
+        satisfied: false,
+      },
+      {
+        label: 'failed',
+        message: 'failed',
+        satisfied: false,
+      },
+      {
+        label: 'x',
+        message: 'xxx',
+        satisfied: true,
+      }
+    ],
+    runtime: {
+      completion: '(succeeded and x) or failed'
+    }
+  },
+  children: [
+    {
+      id: TOKENS.clone({ job: '01' }).id,
+      tokens: TOKENS.clone({ job: '01' }),
+      name: '01',
+      node: {
+        state: 'failed'
+      }
+    },
+    {
+      id: TOKENS.clone({ job: '02' }).id,
+      tokens: TOKENS.clone({ job: '02' }),
+      name: '02',
+      node: {
+        state: 'succeeded'
+      }
+    },
+  ],
+}
+
+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],
+      }
+    })
+
+    // 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 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')
+
+        expect(selector[1].innerText).to.equal('0 a:succeeded')
+        expect(selector[1]).to.have.class('satisfied')
+
+        expect(selector[2].innerText).to.equal('1 b:custom_output')
+        expect(selector[2]).to.not.have.class('satisfied')
+
+        expect(selector[3].innerText).to.equal('2 a:expired')
+        expect(selector[3]).to.not.have.class('satisfied')
+
+        expect(selector[4].innerText).to.equal('0')
+        expect(selector[4]).to.have.class('satisfied')
+
+        expect(selector[5].innerText).to.equal('0 x:succeeded')
+        expect(selector[5]).to.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]).to.contain('succeeded')
+        expect(selector[1].classList.toString()).to.equal('condition')
+
+        expect(selector[2]).to.contain('failed')
+        expect(selector[2].classList.toString()).to.equal('condition')
+
+        expect(selector[3]).to.contain('x')
+        expect(selector[3].classList.toString()).to.equal('condition 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[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', () => {
+    const spy = cy.spy()
+    cy.vmount(InfoComponent, {
+      props: {
+        task: TASK,
+        class: 'job_theme--default'
+      },
+      listeners: {
+        'update:panelExpansion': spy,
+      }
+    }).as('wrapper')
+
+    // ONLY the metadata panel should be expanded by default
+    cy.get('.v-expansion-panel--active')
+      .should('have.length', 1)
+      .should('have.class', 'metadata-panel')
+
+    // the update:panelExpansion event should be emitted when a panel is
+    // expanded/collapsed
+    cy.get('.prerequisites-panel')
+      .find('button')
+      .should('be.visible')
+      .click({ force: true })
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted('update:panelExpansion')[0][0]
+        ).to.deep.equal([0, 1])
+      })
+  })
+
+  it('should work for a task with no data', () => {
+    // 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,
+      name: tokens.task,
+      tokens,
+      node: {
+        task: {
+          meta: {
+            customMeta: {}
+          }
+        },
+        prerequisites: [],
+        outputs: [],
+      },
+      children: [],
+    }
+
+    cy.vmount(InfoComponent, {
+      props: {
+        task,
+        class: 'job_theme--default',
+        // NOTE: expand all sections by default
+        panelExpansion: [0, 1, 2],
+      }
+    })
+  })
+})
diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
new file mode 100644
index 000000000..04581ec43
--- /dev/null
+++ b/src/components/cylc/Info.vue
@@ -0,0 +1,315 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="c-info">
+    <!-- The task summary
+
+    * The "-40" comes from the GraphNode offset, see the GraphNode compoent.
+    * The height is "200" + "40".
+    * The "99999" is the maximum component width (because we don't know
+      how wide it will be until we render it).
+    * The "overflow-x: hidden" prevents this 99999 width from causing
+      horizontal scrolling.
+    * The "8em" is the height that this SVG will be scaled to fill.
+    -->
+    <div style="overflow-x: hidden;">
+      <svg
+        preserveAspectRatio="xMinYMin"
+        viewBox="-40 -40 99999 200"
+        height="6em"
+      >
+        <GraphNode
+          :task="task"
+          :jobs="task.children"
+          :jobTheme="jobTheme"
+        />
+      </svg>
+    </div>
+
+    <!-- The task information -->
+    <v-expansion-panels
+      multiple
+      variant="accordion"
+      v-model="panelExpansionModel"
+    >
+      <!-- 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-divider />
+            </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}"
+                  >
+                    {{ condition.exprAlias.replace(/c/, '') }}
+
+                    <span style="margin-left: 0.5em; color: rgb(0,0,0)">
+                      {{ condition.taskId }}:{{ condition.reqState }}
+                    </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)}"
+              >
+                <!-- 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-expansion-panels>
+  </div>
+</template>
+
+<script>
+import { useJobTheme } from '@/composables/localStorage'
+import GraphNode from '@/components/cylc/GraphNode.vue'
+import { formatCompletion } from '@/utils/outputs'
+
+export default {
+  name: 'InfoComponent',
+
+  components: {
+    GraphNode,
+  },
+
+  props: {
+    task: {
+      required: true,
+    },
+    panelExpansion: {
+      required: false,
+      default: [0],
+    },
+  },
+
+  setup (props, { emit }) {
+    return {
+      jobTheme: useJobTheme(),
+    }
+  },
+
+  computed: {
+    panelExpansionModel: {
+      get () {
+        return this.panelExpansion
+      },
+      set (value) {
+        this.$emit('update:panelExpansion', value)
+      },
+    },
+
+    taskMetadata () {
+      // Default task metadata sections (title, description, URL)
+      return this.task?.node?.task?.meta || {}
+    },
+
+    customMetadata () {
+      // Used-defined task metadata sections
+      return this.task?.node?.task?.meta.userDefined || {}
+    },
+
+    prerequisites () {
+      // Task prerequsite information.
+      return this.task?.node?.prerequisites || {}
+    },
+
+    outputs () {
+      // Task output information.
+      return this.task?.node?.outputs || {}
+    },
+
+    completion () {
+      // Task output completion expression stuff.
+      return this.task?.node?.runtime.completion
+    }
+
+  },
+
+  methods: {
+    formatCompletion,
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+  .c-info {
+    padding: 0.5em;
+
+    // for user-defined text where whitespace should be preserved
+    .markup {
+      white-space: pre-wrap;
+    }
+
+    // change the appearance of satisfied/unsatisfied conditions
+    .condition {
+      opacity: 0.6;
+    }
+    .condition.satisfied, .condition.blank {
+      opacity: 1;
+    }
+
+    // prefixes a tick or cross before the entry
+    .condition:before {
+      display: inline-block;
+      content: '\25CB'; /* empty circle */
+      width: 1.5em;
+      color: rgb(0, 0, 0);
+    }
+    .condition.satisfied:before {
+      content: '\25CF'; /* filled circle */
+    }
+    .condition.blank:before {
+      content: ''; /* blank */
+    }
+
+    // for prerequsite task "aliases" (used in conditional expressions)
+    .prerequisite-alias {
+      font-style: italic;
+      color: rgb(100, 100, 255);
+    }
+
+    .metadata-panel {
+      dl {
+        dt dd {
+          padding-left: 1em;
+          padding-right: 1em;
+        }
+        dt {
+          font-size: 1.3em;
+          padding-top: 0.4em;
+        }
+        dd {
+          padding-bottom: 0.4em;
+        }
+      }
+    }
+
+    .prerequisites-panel {
+      li {
+        list-style: none;
+      }
+
+      ul li ul {
+        margin-left: 2em;
+      }
+    }
+
+    .outputs-panel {
+      li {
+        list-style: none;
+      }
+    }
+
+    .completion-panel {
+      li {
+        list-style: none;
+      }
+    }
+  }
+</style>
diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index a75a8e065..a3e532ce9 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/src/components/cylc/commandMenu/Menu.vue
@@ -224,7 +224,7 @@ export default {
 
   methods: {
     isEditable (mutation, authorised) {
-      return mutation.name !== 'log' && !this.isDisabled(mutation, authorised)
+      return mutation.name !== 'log' && mutation.name !== 'info' && !this.isDisabled(mutation, authorised)
     },
     isDisabled (mutation, authorised) {
       if (!authorised) {
@@ -271,6 +271,23 @@ export default {
             }
           )
         })
+      } else if (mutation.name === 'info') {
+        this.$router.push({
+          name: 'Workspace',
+          params: {
+            workflowName: this.node.tokens.workflow
+          }
+        }).then(() => {
+          eventBus.emit(
+            'add-view',
+            {
+              name: 'Info',
+              initialOptions: {
+                requestedTokens: this.node.tokens || undefined
+              }
+            }
+          )
+        })
       } else {
         mutate(
           mutation,
diff --git a/src/services/mock/json/index.cjs b/src/services/mock/json/index.cjs
index 522885114..8f6a3f766 100644
--- a/src/services/mock/json/index.cjs
+++ b/src/services/mock/json/index.cjs
@@ -24,6 +24,7 @@ const { LogData } = require('./logData.cjs')
 const { LogFiles } = require('./logFiles.cjs')
 const analysisQuery = require('./analysisQuery.json')
 const ganttQuery = require('./ganttQuery.json')
+const InfoViewSubscription = require('./infoView.json')
 
 const workflows = [workflowOne, ...workflowsMulti]
 const analysisTaskQuery = analysisQuery.taskQuery
@@ -43,5 +44,6 @@ module.exports = {
   analysisTaskQuery,
   analysisJobQuery,
   analysisQuery,
-  ganttQuery
+  ganttQuery,
+  InfoViewSubscription
 }
diff --git a/src/services/mock/json/infoView.json b/src/services/mock/json/infoView.json
new file mode 100644
index 000000000..05b7d1bfa
--- /dev/null
+++ b/src/services/mock/json/infoView.json
@@ -0,0 +1,85 @@
+{
+  "deltas": {
+    "id": "~user/one",
+    "added": {
+      "taskProxies": [
+        {
+          "id": "~user/one//20000102T0000Z/failed",
+          "state": "failed",
+          "isHeld": false,
+          "isQueued": false,
+          "isRunahead": false,
+
+          "task": {
+            "meanElapsedTime": "10",
+            "meta": {
+              "title": "Failed Task",
+              "description": "A task that always fails!",
+              "URL": "https://cylc.org",
+              "userDefined": {
+                "my custom field": "My custom value!"
+              }
+            }
+          },
+
+          "jobs": [
+            {
+              "id": "~user/one//20000102T0000Z/failed/01",
+              "jobId": "1234",
+              "startedTime": "0",
+              "state": "failed"
+            }
+          ],
+
+          "prerequisites": [
+            {
+              "satisfied": true,
+              "expression": "c0 & c1",
+              "conditions": [
+                {
+                  "taskId": "20000102T0000Z/succeeded",
+                  "reqState": "succeeded",
+                  "exprAlias": "c0",
+                  "satisfied": true
+                },
+                {
+                  "taskId": "20000102T0000Z/eventually_succeeded",
+                  "reqState": "succeeded",
+                  "exprAlias": "c1",
+                  "satisfied": true
+                }
+              ]
+            }
+          ],
+
+          "outputs": [
+            {
+              "label": "submitted",
+              "satisfied": true
+            },
+            {
+              "label": "started",
+              "satisfied": true
+            },
+            {
+              "label": "succeeded",
+              "satisfied": false
+            },
+            {
+              "label": "failed",
+              "satisfied": true
+            },
+            {
+              "label": "expired",
+              "satisfied": false
+            }
+          ],
+
+          "runtime": {
+            "completion": "succeeded"
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/src/utils/aotf.js b/src/utils/aotf.js
index e864b2b95..ccf42a6ab 100644
--- a/src/utils/aotf.js
+++ b/src/utils/aotf.js
@@ -35,7 +35,7 @@ import {
   mdiDelete,
   mdiEmail,
   mdiFileDocumentOutline,
-  mdiVectorPolylineEdit,
+  mdiInformationOutline,
   mdiMinusCircleOutline,
   mdiPause,
   mdiPauseCircleOutline,
@@ -44,7 +44,8 @@ import {
   mdiPlaylistEdit,
   mdiRefreshCircle,
   mdiReload,
-  mdiStop
+  mdiStop,
+  mdiVectorPolylineEdit,
 } from '@mdi/js'
 
 import { Alert } from '@/model/Alert.model'
@@ -128,6 +129,7 @@ export function getMutationIcon (name) {
     case 'clean': return mdiDelete
     case 'editRuntime': return mdiPlaylistEdit
     case 'hold': return mdiPauseCircleOutline // to distinguish from pause
+    case 'info': return mdiInformationOutline
     case 'kill': return mdiCloseCircle
     case 'log': return mdiFileDocumentOutline
     case 'message': return mdiEmail
@@ -188,6 +190,7 @@ export const primaryMutations = {
     'trigger',
     'kill',
     'log',
+    'info',
     'set'
   ]
 }
@@ -314,6 +317,13 @@ export const dummyMutations = [
     _requiresInfo: false,
     _validStates: WorkflowStateNames,
   },
+  {
+    name: 'info',
+    description: 'View task information.',
+    args: [],
+    _appliesTo: [cylcObjects.Namespace],
+    _requiresInfo: false
+  },
 ]
 
 /**
@@ -323,7 +333,7 @@ export const dummyMutations = [
  */
 const dummyMutationsPermissionsMap = Object.freeze({
   broadcast: Object.freeze(['editRuntime']),
-  read: Object.freeze(['log'])
+  read: Object.freeze(['log', 'info'])
 })
 
 /**
diff --git a/src/utils/outputs.js b/src/utils/outputs.js
new file mode 100644
index 000000000..deb0b1173
--- /dev/null
+++ b/src/utils/outputs.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** Functionality relating to task output formatting. **/
+
+/** Format a completion expression for display.
+ *
+ * @param {str} completion - The task's completion expression.
+ * @param {Array} outputs - The task's outputs as obtained from GraphQL as an
+ * array of objects with "label" and "satisfied" attributes.
+ *
+ * @returns {Array} - [isSatisfied, indentLevel, text]
+ **/
+
+export function formatCompletion (completion, outputs) {
+  // the array to return
+  const lines = []
+  // indent level of the expression
+  let indent = 0
+  // text yet to be added to the return result
+  let buffer = ''
+
+  // break the completion expression down into parts and iterate over them
+  for (let part of completion.split(/(and|or|\(|\))/)) {
+    part = part.trim()
+
+    if (!part) {
+      continue
+    }
+
+    if (part === '(') {
+      // open bracket
+      lines.push([null, indent, `${buffer}(`])
+      buffer = ''
+      indent = indent + 1
+    } else if (part === ')') {
+      // close bracket
+      indent = indent - 1
+      lines.push([null, indent, `${buffer})`])
+      buffer = ''
+    } else if (part === 'and' || part === 'or') {
+      // local operator
+      buffer = `${part} `
+    } else {
+      // Cylc output -> look it up in the outputs Array
+      for (const output of outputs) {
+        if (output.label === part) {
+          lines.push([output.satisfied, indent, `${buffer}${part}`])
+          break
+        }
+      }
+      buffer = ''
+    }
+  }
+
+  return lines
+}
diff --git a/src/views/Info.vue b/src/views/Info.vue
new file mode 100644
index 000000000..3b60bfa5e
--- /dev/null
+++ b/src/views/Info.vue
@@ -0,0 +1,255 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <InfoComponent
+    v-if="taskNode.id"
+    :task="taskNode"
+    :panelExpansion="panelExpansion"
+    @update:panelExpansion="updatePanelExpansion"
+  />
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { getPageTitle } from '@/router/index'
+import graphqlMixin from '@/mixins/graphql'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import SubscriptionQuery from '@/model/SubscriptionQuery.model'
+import DeltasCallback from '@/services/callbacks'
+import {
+  initialOptions,
+  useInitialOptions
+} from '@/utils/initialOptions'
+import { Tokens } from '@/utils/uid'
+
+import InfoComponent from '@/components/cylc/Info.vue'
+
+// NOTE: This query is run outside of the central data store
+const QUERY = gql`
+subscription InfoViewSubscription ($workflowId: ID, $taskID: ID) {
+  deltas(workflows: [$workflowId]) {
+    added {
+      ...AddedDelta
+    }
+    updated (stripNull: true) {
+      ...UpdatedDelta
+    }
+  }
+}
+
+fragment AddedDelta on Added {
+  taskProxies(ids: [$taskID]) {
+    ...TaskProxyData
+  }
+}
+
+fragment UpdatedDelta on Updated {
+  taskProxies(ids: [$taskID]) {
+    ...TaskProxyData
+  }
+}
+
+fragment TaskProxyData on TaskProxy {
+  id
+  state
+  isHeld
+  isQueued
+  isRunahead
+
+  task {
+    ...TaskDefinitionData
+  }
+
+  jobs {
+    ...JobData
+  }
+
+  prerequisites {
+    satisfied
+    expression
+    conditions {
+      taskId
+      reqState
+      exprAlias
+      satisfied
+    }
+  }
+
+  outputs {
+    label
+    satisfied
+  }
+
+  runtime {
+    completion
+  }
+}
+
+fragment TaskDefinitionData on Task {
+  meanElapsedTime
+
+  meta {
+    title
+    description
+    URL
+    userDefined
+  }
+}
+
+fragment JobData on Job {
+  id
+  jobId
+  startedTime
+  state
+}
+`
+
+function taskObjToNode (task) {
+  const tokens = new Tokens(task.id)
+  return {
+    id: task.id,
+    tokens,
+    name: tokens.task,
+    node: task,
+    type: 'task',
+    children: [],
+  }
+}
+
+function jobObjToNode (job) {
+  const tokens = new Tokens(job.id)
+  return {
+    id: job.id,
+    name: tokens.job,
+    tokens,
+    node: job,
+    type: 'job',
+  }
+}
+
+function rebuildTaskChildren (taskNode, taskData) {
+  taskNode.children = []
+  for (const job of taskData.jobs) {
+    taskNode.children.push(jobObjToNode(job))
+  }
+}
+
+/** Callback for assembling the log file from the subscription */
+class InfoCallback extends DeltasCallback {
+  /**
+   * @param {Results} results
+   */
+  constructor (task, taskNode) {
+    super()
+    this.task = task
+    this.taskNode = taskNode
+  }
+
+  onAdded (added, store, errors) {
+    // store the task info
+    Object.assign(this.task, added.taskProxies[0])
+
+    // construct a dummy "node" like to make it look like a node in the
+    // central data store
+    Object.assign(this.taskNode, taskObjToNode(this.task))
+    rebuildTaskChildren(this.taskNode, this.task)
+  }
+
+  onUpdated (updated, store, errors) {
+    if (updated?.taskProxies) {
+      Object.assign(this.task, updated.taskProxies[0])
+    }
+
+    rebuildTaskChildren(this.taskNode, this.task)
+  }
+
+  onPruned (pruned) {
+  }
+}
+
+export default {
+  name: 'InfoView',
+
+  mixins: [
+    graphqlMixin,
+    subscriptionComponentMixin
+  ],
+
+  components: {
+    InfoComponent,
+  },
+
+  head () {
+    return {
+      // This sets the page title.
+      title: getPageTitle('App.workflow', { name: this.workflowName })
+    }
+  },
+
+  props: {
+    initialOptions,
+  },
+
+  setup (props, { emit }) {
+    const requestedTokens = useInitialOptions('requestedTokens', { props, emit })
+    const panelExpansion = useInitialOptions('panelExpansion', { props, emit }, [0])
+    return {
+      requestedTokens,
+      panelExpansion,
+    }
+  },
+
+  data () {
+    return {
+      // This is the task we will request metadata for.
+      // when you change these values, the old query will be automatically canceled
+      // and re-issued with the new values
+      requestedCycle: undefined,
+      requestedTask: undefined,
+
+      // The task formatted as a data-store node
+      task: {},
+      taskNode: {},
+    }
+  },
+
+  computed: {
+    // This registers the query with the WorkflowService, once registered, the
+    // WorkflowService promises to make the data defined by the query available
+    // in the store and to keep it up to date.
+    query () {
+      return new SubscriptionQuery(
+        QUERY,
+        { ...this.variables, taskID: this.requestedTokens?.relativeID },
+        `info-query-${this._uid}`,
+        [
+          new InfoCallback(this.task, this.taskNode)
+        ],
+        /* isDelta */ true,
+        /* isGlobalCallback */ false
+      )
+    },
+  },
+
+  methods: {
+    updatePanelExpansion (value) {
+      this.panelExpansion = value
+    }
+  }
+}
+</script>
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index 3d34de22d..c21f896ea 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -195,7 +195,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
                 <v-select
                   v-model="defaultView"
-                  :items="Array.from($options.allViews.keys())"
+                  :items="defaultViews"
                   :prepend-inner-icon="$options.allViews.get(defaultView).icon"
                   data-cy="select-default-view"
                   :menu-props="{ 'data-cy': 'select-default-view-menu' }"
@@ -247,6 +247,16 @@ export default {
 
   computed: {
     ...mapState('user', ['user']),
+
+    defaultViews () {
+      const views = Array.from(this.$options.allViews.keys())
+
+      // filter out the "Info" view as this cannot presently be opened on the
+      // workflow itself, only jobs inside of the workflow
+      // https://github.com/cylc/cylc-ui/issues/1898 will resolve this
+      views.pop('Info')
+      return views
+    }
   },
 
   methods: {
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 2e6a60d96..b2ce3d0c0 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-cy="workspace-view">
     <Toolbar
-      :views="allViews"
+      :views="workspaceViews"
       :workflow-name="workflowName"
     />
     <div
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { ref } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { allViews } from '@/views/views.js'
+import { allViews, workspaceViews } from '@/views/views.js'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
@@ -69,6 +69,7 @@ export default {
 
     return {
       allViews,
+      workspaceViews,
       lumino,
     }
   },
diff --git a/src/views/views.js b/src/views/views.js
index a3f815652..13455c528 100644
--- a/src/views/views.js
+++ b/src/views/views.js
@@ -25,6 +25,7 @@ import {
   mdiTable,
   mdiTree,
   mdiChartGantt,
+  mdiInformationOutline,
 } from '@mdi/js'
 
 // Use dynamic async components for lazy loading:
@@ -35,6 +36,7 @@ const LogView = defineAsyncComponent(() => import('@/views/Log.vue'))
 const AnalysisView = defineAsyncComponent(() => import('@/views/Analysis.vue'))
 const GanttView = defineAsyncComponent(() => import('@/views/Gantt.vue'))
 const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue'))
+const InfoView = defineAsyncComponent(() => import('@/views/Info.vue'))
 
 /**
  * @typedef {Object} CylcView
@@ -44,6 +46,20 @@ const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue
 
 export const TREE = 'Tree'
 
+/**
+ * A map of the views that can be opened in a workspace directly.
+ *
+ * Note, some views may require additional context to open.
+ */
+export const workspaceViews = new Map([
+  [TREE, { component: TreeView, icon: mdiFileTree }],
+  ['Table', { component: TableView, icon: mdiTable }],
+  ['Graph', { component: GraphView, icon: mdiGraph }],
+  ['Log', { component: LogView, icon: mdiFileDocumentMultipleOutline }],
+  ['Analysis', { component: AnalysisView, icon: mdiChartLine }],
+  ['Gantt', { component: GanttView, icon: mdiChartGantt }],
+])
+
 /**
  * A map of Vue views or components.
  *
@@ -56,16 +72,14 @@ export const TREE = 'Tree'
  * @type {Map<string, CylcView>}
  */
 export const allViews = new Map([
-  [TREE, { component: TreeView, icon: mdiFileTree }],
-  ['Table', { component: TableView, icon: mdiTable }],
-  ['Graph', { component: GraphView, icon: mdiGraph }],
-  ['Log', { component: LogView, icon: mdiFileDocumentMultipleOutline }],
-  ['Analysis', { component: AnalysisView, icon: mdiChartLine }],
-  ['Gantt', { component: GanttView, icon: mdiChartGantt }]
+  ...workspaceViews,
+  ['Info', { component: InfoView, icon: mdiInformationOutline }],
 ])
+
 // Development views that we don't want in production:
 if (import.meta.env.MODE !== 'production') {
   allViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
+  workspaceViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
 }
 
 export const useDefaultView = () => {
diff --git a/tests/e2e/specs/info.cy.js b/tests/e2e/specs/info.cy.js
new file mode 100644
index 000000000..e5a6204e5
--- /dev/null
+++ b/tests/e2e/specs/info.cy.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+describe('Info View', () => {
+  it('works', () => {
+    // test opening the "Info View" from a task in the "Tree View"
+    cy.visit('/#/workspace/one')
+      // click on task
+      .get('.node-data-task [data-c-interactive]:first')
+      .click({ force: true })
+
+      // from the menu select the "Info" psudo-mutation
+      .get('.v-list-item')
+      .contains('Info')
+      .click({ force: true })
+
+      // the info view should open
+      .get('.c-info').should('be.visible')
+
+      // the metadata panel should be expanded by default
+      .find('.v-expansion-panel--active')
+      .should('have.length', 1)
+      .should('have.class', 'metadata-panel')
+
+      // other panels should expand when clicked
+      .get('.c-info .v-expansion-panel:nth-child(2)')
+      .find('button')
+      .click({ force: true })
+      .get('.v-expansion-panel--active')
+      .should('have.length', 2)
+  })
+})