diff --git a/src/components/tasks/BaseTaskFilterControl.vue b/src/components/tasks/BaseTaskFilterControl.vue
new file mode 100644
index 000000000..d10bd52a5
--- /dev/null
+++ b/src/components/tasks/BaseTaskFilterControl.vue
@@ -0,0 +1,129 @@
+<template>
+  <v-menu :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-chip
+        variant="tonal"
+        pilled
+        label
+        :color="isAllSelected ? undefined : 'primary'"
+        v-bind="props"
+        class="mx-1"
+      >
+        <template #prepend>
+          <v-btn
+            class="mr-2"
+            size="20"
+            variant="plain"
+            :icon="isAllSelected ? 'mdi-filter-plus' : 'mdi-filter-remove'"
+            @click="removeFilterIfEnabled"
+          />
+        </template>
+        {{ label }}
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-chip>
+    </template>
+    <v-sheet min-height="300" max-height="80dvh">
+      <v-banner sticky density="compact" class="pa-2">
+        <v-btn
+          @click="toggleSelectAll"
+          :icon="selectAllIcon"
+          variant="plain"
+        ></v-btn>
+        <slot name="actions"></slot>
+      </v-banner>
+      <v-list
+        v-model:selected="selectedValues"
+        select-strategy="leaf"
+        density="compact"
+      >
+        <v-list-item
+          v-for="item in sortedItems"
+          :key="item.id"
+          :title="item.title"
+          :value="item.value"
+        >
+          <template #prepend="{ isSelected }">
+            <v-checkbox-btn density="compact" :model-value="isSelected" />
+          </template>
+          <template v-if="item.isPreferred" #append>
+            <v-icon icon="mdi-star" />
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-sheet>
+  </v-menu>
+</template>
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
+
+interface SelectItem {
+  id: string
+  title: string
+  value: T
+  isPreferred?: boolean
+}
+
+interface Props {
+  label: string
+  items: SelectItem[]
+  doSortItems?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  doSortItems: false,
+})
+const selectedValues = defineModel<T[]>({ required: true })
+
+const sortedItems = computed<SelectItem[]>(() => {
+  // Sort items only if selected.
+  if (!props.doSortItems) return props.items
+
+  return props.items.toSorted((a, b) => {
+    if (a.isPreferred && !b.isPreferred) {
+      // Preferred items appear at the top.
+      return -1
+    } else if (!a.isPreferred && b.isPreferred) {
+      // Preferred items appear at the top.
+      return 1
+    } else {
+      // Preferred items are sorted by title.
+      return a.title.localeCompare(b.title)
+    }
+  })
+})
+
+const allValues = computed<T[]>(() => props.items.map((item) => item.value))
+const isAllSelected = computed<boolean>(
+  () => selectedValues.value.length === props.items.length,
+)
+
+function removeFilterIfEnabled(event: MouseEvent): void {
+  // We don't need to do anything if we have no filter defined.
+  if (isAllSelected.value) return
+  // Otherwise, remove the filter and prevent propagation of the click event so
+  // we do not open the menu.
+  event.stopPropagation()
+  selectAll()
+}
+
+function selectAll(): void {
+  selectedValues.value = allValues.value
+}
+
+function toggleSelectAll(): void {
+  if (selectedValues.value.length === allValues.value.length) {
+    selectedValues.value = []
+  } else {
+    selectedValues.value = allValues.value
+  }
+}
+
+const selectAllIcon = computed(() => {
+  if (selectedValues.value.length === 0) {
+    return 'mdi-checkbox-blank-outline'
+  }
+  if (selectedValues.value.length === allValues.value.length) {
+    return 'mdi-checkbox-marked'
+  }
+  return 'mdi-minus-box' // 'mdi-checkbox-marked' // 'mdi-minus-box'
+})
+</script>
diff --git a/src/components/tasks/PeriodFilterControl.vue b/src/components/tasks/PeriodFilterControl.vue
new file mode 100644
index 000000000..1a43dd440
--- /dev/null
+++ b/src/components/tasks/PeriodFilterControl.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-select
+    v-model="numSecondsBack"
+    :items="options"
+    item-value="numSecondsBack"
+    density="compact"
+    variant="plain"
+    flat
+    hide-details
+  />
+</template>
+<script setup lang="ts">
+import { RelativePeriod } from '@/lib/period'
+import { computed } from 'vue'
+
+const period = defineModel<RelativePeriod | null>({ required: true })
+
+interface RelativePeriodOption {
+  id: string
+  title: string
+  numSecondsBack: number | null
+}
+
+const secondsPerHour = 60 * 60
+const secondsPerDay = 24 * secondsPerHour
+const options: RelativePeriodOption[] = [
+  {
+    id: '-2h',
+    title: 'Last 2 hours',
+    numSecondsBack: 2 * secondsPerHour,
+  },
+  {
+    id: '-8h',
+    title: 'Last 8 hours',
+    numSecondsBack: 8 * secondsPerHour,
+  },
+  {
+    id: '-1d',
+    title: 'Last day',
+    numSecondsBack: 1 * secondsPerDay,
+  },
+  {
+    id: '-1w',
+    title: 'Last week',
+    numSecondsBack: 7 * secondsPerDay,
+  },
+  {
+    id: 'all',
+    title: 'All',
+    numSecondsBack: null,
+  },
+] as const
+
+const numSecondsBack = computed<number | null>({
+  get: () => {
+    if (!period.value) return null
+    return -period.value?.startOffsetSeconds
+  },
+  set: (newNumSecondsBack) => {
+    if (newNumSecondsBack === null) {
+      period.value = null
+    } else {
+      period.value = {
+        startOffsetSeconds: -newNumSecondsBack,
+        endOffsetSeconds: 0,
+      }
+    }
+  },
+})
+</script>
diff --git a/src/components/tasks/TaskRunProgress.vue b/src/components/tasks/TaskRunProgress.vue
new file mode 100644
index 000000000..9ea311984
--- /dev/null
+++ b/src/components/tasks/TaskRunProgress.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-tooltip location="bottom">
+    <template #activator="{ props: activatorProps }">
+      <v-progress-linear
+        v-bind="activatorProps"
+        v-model="progress"
+        :color="color"
+        :indeterminate="isUnknownProgress"
+      />
+    </template>
+    {{ details }}
+  </v-tooltip>
+</template>
+<script setup lang="ts">
+import { createTimer, Timer } from '@/lib/timer'
+import { Duration, DurationUnit } from 'luxon'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+interface Props {
+  dispatchTimestamp: number | null
+  expectedRuntimeSeconds: number | null
+  color?: string
+  updateIntervalSeconds?: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  updateIntervalSeconds: 0.5,
+})
+
+const progress = ref(0)
+const isUnknownProgress = ref(false)
+const details = ref('')
+
+// Initialise progress, then update every few seconds; remove timer when the
+// component is unmounted.
+let timer: Timer | null = null
+onMounted(() => {
+  timer = createTimer(updateProgress, props.updateIntervalSeconds, true)
+})
+onUnmounted(() => timer?.deactivate())
+
+function updateProgress(): void {
+  if (
+    props.dispatchTimestamp === null ||
+    props.expectedRuntimeSeconds === null
+  ) {
+    // If we do not know how long to take, set progress to unknown to show
+    // progress bar as indeterminate.
+    setProgress(null)
+    return
+  }
+
+  const currentTimestamp = Date.now()
+  const currentDurationSeconds =
+    (currentTimestamp - props.dispatchTimestamp) / 1000
+  // Compute expected fraction done.
+  const fractionDone = currentDurationSeconds / props.expectedRuntimeSeconds
+
+  // If we are over 100%, set progress to null since we cannot predict our
+  // progress anymore.
+  setProgress(fractionDone <= 1 ? fractionDone * 100 : null)
+}
+
+function setProgress(newProgress: number | null): void {
+  isUnknownProgress.value = newProgress === null
+  progress.value = newProgress ?? 0
+  details.value = getProgressDetails()
+}
+
+function getProgressDetails(): string {
+  if (isUnknownProgress.value) {
+    return getRemainingTimeString()
+  }
+  const percentage = progress.value.toFixed(0)
+  const remaining = getRemainingTimeString()
+  return `${percentage}%; ${remaining}`
+}
+
+function getRemainingTimeString(): string {
+  const currentTimestamp = Date.now()
+  const currentDurationMilliseconds =
+    currentTimestamp - props.dispatchTimestamp!
+  const remainingMilliseconds =
+    props.expectedRuntimeSeconds! * 1000 - currentDurationMilliseconds
+
+  const hasOverrunExpectedTime = remainingMilliseconds < 0
+  if (hasOverrunExpectedTime) {
+    // We have overrun our expected task duration, negate the remaining time and
+    // format this as the amount of time we've overrun.
+    const remaining = formatDuration(-remainingMilliseconds)
+    return `Overran expected time by: ${remaining}`
+  } else {
+    const remaining = formatDuration(remainingMilliseconds)
+    return `expected time remaining: ${remaining}`
+  }
+}
+
+function formatDuration(durationMilliseconds: number): string {
+  // Convert to human-readable duration in hours, minutes and seconds; drop
+  // the milliseconds.
+  // FIXME: workaround for Luxon's weird behaviour of toHuman(), which leaves
+  //        units that are 0 in the final string.
+  const units: DurationUnit[] = ['seconds']
+  if (durationMilliseconds > 1000 * 60) {
+    units.push('minutes')
+  }
+  if (durationMilliseconds > 1000 * 60 * 60) {
+    units.push('hours')
+  }
+  if (durationMilliseconds > 1000 * 60 * 60 * 24) {
+    units.push('days')
+  }
+
+  const duration = Duration.fromMillis(durationMilliseconds).shiftTo(...units)
+  // Remove milliseconds.
+  const durationWithoutMilliseconds = duration.set({
+    seconds: Math.round(duration.seconds),
+  })
+  return durationWithoutMilliseconds.toHuman()
+}
+</script>
diff --git a/src/components/tasks/TaskRunSummary.vue b/src/components/tasks/TaskRunSummary.vue
new file mode 100644
index 000000000..75affc40a
--- /dev/null
+++ b/src/components/tasks/TaskRunSummary.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="d-flex flex-column">
+    <div>
+      <div class="d-flex flex-row justify-space-between">
+        <div>
+          {{ workflow.name }}
+        </div>
+        <div v-if="task.isScheduled" class="scheduled-task">Scheduled</div>
+        <div v-else>{{ task.userId }}</div>
+      </div>
+    </div>
+    <div v-if="!task.isScheduled && task.description" class="description">
+      {{ task.description }}
+    </div>
+    <div class="d-flex flex-row align-center gc-4">
+      <div
+        class="status d-flex flex-row align-center gc-1"
+        :class="statusClass"
+      >
+        <v-icon :icon="statusIcon" size="20" />
+        <span>{{ statusString }}</span>
+      </div>
+      <TaskRunProgress
+        v-if="isRunning"
+        :dispatch-timestamp="task.dispatchTimestamp"
+        :expected-runtime-seconds="workflow.expectedRuntimeSeconds"
+        color="info"
+      />
+    </div>
+    <div class="times d-flex flex-row gc-4">
+      <div>
+        <div>T0</div>
+        <div>{{ timeZeroString }}</div>
+      </div>
+      <div>
+        <div>Dispatched</div>
+        <div>{{ dispatchTimeString }}</div>
+      </div>
+      <div v-if="task.status === TaskStatus.Running">
+        <div>Expected completion</div>
+        <div>{{ expectedCompletionTimeString }}</div>
+      </div>
+      <div v-else>
+        <div>Completed</div>
+        <div>{{ completionTimeString }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  convertTaskStatusToString,
+  getTaskStatusCategory,
+  TaskRun,
+  TaskStatus,
+  TaskStatusCategory,
+} from '@/lib/taskruns'
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+import { computed } from 'vue'
+import TaskRunProgress from './TaskRunProgress.vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+
+interface Props {
+  task: TaskRun
+}
+const props = defineProps<Props>()
+
+const workflow = computed(() =>
+  availableWorkflowsStore.byId(props.task.workflowId),
+)
+
+const isRunning = computed<boolean>(
+  () => props.task.status === TaskStatus.Running,
+)
+
+const timeZeroString = computed<string>(() =>
+  formatTimestamp(props.task.timeZeroTimestamp),
+)
+const dispatchTimeString = computed<string>(() =>
+  formatTimestamp(props.task.dispatchTimestamp),
+)
+const completionTimeString = computed<string>(() =>
+  formatTimestamp(props.task.completionTimestamp),
+)
+const expectedCompletionTimeString = computed<string>(() => {
+  const expectedRunTime = workflow.value.expectedRuntimeSeconds
+  if (expectedRunTime === null || props.task.dispatchTimestamp === null) {
+    // We have no expected runtime, return a placeholder.
+    return formatTimestamp(null)
+  }
+  const expectedCompletionTimestamp =
+    props.task.dispatchTimestamp + expectedRunTime * 1000
+  return formatTimestamp(expectedCompletionTimestamp)
+})
+
+const statusString = computed<string>(() =>
+  convertTaskStatusToString(props.task.status),
+)
+const statusClass = computed<string>(() => {
+  const category = getTaskStatusCategory(props.task.status)
+  switch (category) {
+    case TaskStatusCategory.Pending:
+    case TaskStatusCategory.Running:
+      return 'pending'
+    case TaskStatusCategory.Completed:
+      return 'success'
+    case TaskStatusCategory.Failed:
+      return 'failed'
+  }
+})
+const statusIcon = computed<string>(() => {
+  const category = getTaskStatusCategory(props.task.status)
+  switch (category) {
+    case TaskStatusCategory.Pending:
+      return 'mdi-human-queue'
+    case TaskStatusCategory.Running:
+      return 'mdi-run'
+    case TaskStatusCategory.Completed:
+      return 'mdi-check'
+    case TaskStatusCategory.Failed:
+      return 'mdi-alert-circle'
+  }
+})
+
+function formatTimestamp(timestamp: number | null): string {
+  if (timestamp === null) return '—'
+
+  const date = new Date(timestamp)
+  return date.toLocaleString()
+}
+</script>
+
+<style scoped>
+.description {
+  font-size: 0.8em;
+}
+
+.times {
+  font-size: 0.8em;
+}
+
+.times > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.scheduled-task {
+  color: rgba(var(--v-theme-on-surface), 0.3);
+}
+
+.status.failed {
+  color: rgb(var(--v-theme-error));
+}
+
+.status.success {
+  color: rgb(var(--v-theme-success));
+}
+
+.status.pending {
+  color: rgb(var(--v-theme-info));
+}
+</style>
diff --git a/src/components/tasks/TaskRunsPanel.vue b/src/components/tasks/TaskRunsPanel.vue
new file mode 100644
index 000000000..6bebc9957
--- /dev/null
+++ b/src/components/tasks/TaskRunsPanel.vue
@@ -0,0 +1,164 @@
+<template>
+  <v-btn
+    icon="mdi-clipboard-text-clock"
+    :active="isPanelOpen"
+    @click="toggleTasksPanel"
+  />
+  <Teleport to="#main-side-panel" defer>
+    <div v-if="isPanelOpen" class="h-100 d-flex flex-column">
+      <v-toolbar density="compact">
+        <WorkflowFilterControl
+          v-model="selectedWorkflowIds"
+          @update:model-value="flagManuallyChanged"
+        />
+        <TaskStatusFilterControl v-model="selectedTaskStatuses" />
+        <v-spacer />
+        <PeriodFilterControl v-model="period" />
+      </v-toolbar>
+      <v-list width="500" class="flex-1-1">
+        <v-list-item v-if="sortedTasks.length === 0">
+          No tasks available
+        </v-list-item>
+        <v-list-item
+          class="task"
+          v-for="task in sortedTasks"
+          :key="task.taskId"
+        >
+          <TaskRunSummary :task="task" />
+        </v-list-item>
+      </v-list>
+      <div
+        class="flex-0-0 pa-2 d-flex flex-row justify-space-between align-center mt-2"
+      >
+        <div>Last updated: {{ lastUpdatedString }}</div>
+        <!-- Add fixed-height container around refresh button/progress
+               indicator to prevent layout shifts upon refreshing. -->
+        <div class="refresh-container">
+          <v-progress-circular
+            v-if="taskRuns.isLoading.value"
+            size="20"
+            indeterminate
+          />
+          <v-btn
+            v-else
+            density="compact"
+            variant="plain"
+            icon="mdi-refresh"
+            @click="taskRuns.fetch()"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { RelativePeriod } from '@/lib/period'
+import { TaskRun, TaskStatus } from '@/lib/taskruns'
+
+import { useTaskRuns } from '@/services/useTasksRuns'
+
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+
+import TaskStatusFilterControl from './TaskStatusFilterControl.vue'
+import TaskRunSummary from './TaskRunSummary.vue'
+import WorkflowFilterControl from './WorkflowFilterControl.vue'
+import PeriodFilterControl from './PeriodFilterControl.vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+
+const isPanelOpen = ref(false)
+
+const selectedWorkflowIds = ref<string[]>(availableWorkflowsStore.workflowIds)
+
+// Automatically select preferred workflow IDs if the user has not changed the
+// filter manually yet, otherwise, leave the filter as-is.
+let hasChangedWorkflowsFilterManually = false
+const flagManuallyChanged = () => (hasChangedWorkflowsFilterManually = true)
+watch(
+  () => availableWorkflowsStore.preferredWorkflowIds,
+  (preferredWorkflowIds) => {
+    if (hasChangedWorkflowsFilterManually) return
+    if (preferredWorkflowIds.length === 0) {
+      // If we have no preferred workflow IDs, select all.
+      selectedWorkflowIds.value = availableWorkflowsStore.workflowIds
+    } else {
+      // Otherwise, show only the preferred workflow IDs.
+      selectedWorkflowIds.value = preferredWorkflowIds
+    }
+  },
+)
+
+// The request for the available workflows may still be pending while this
+// component is created, so we may initialise the default selected workflows
+// with an empty array. To fix this, we reinitialise our selection upon changes
+// in the workflows, which occur when they have been fetched.
+watch(
+  () => availableWorkflowsStore.workflowIds,
+  (fetchedWorkflowIds) => {
+    selectedWorkflowIds.value = fetchedWorkflowIds
+  },
+  { once: true },
+)
+
+// Select all task statuses by default.
+const selectedTaskStatuses = ref<TaskStatus[]>(Object.values(TaskStatus))
+
+// Look 2 hours back by default..
+const period = ref<RelativePeriod | null>({
+  startOffsetSeconds: -2 * 60 * 60,
+  endOffsetSeconds: 0,
+})
+
+const tasksRefreshIntervalSeconds = 30
+const taskRuns = useTaskRuns(
+  tasksRefreshIntervalSeconds,
+  period,
+  selectedWorkflowIds,
+  selectedTaskStatuses,
+)
+
+const sortedTasks = computed<TaskRun[]>(() => {
+  return taskRuns.filteredTaskRuns.value.sort((a, b) => {
+    const hasDispatchTimeA = a.dispatchTimestamp !== null
+    const hasDispatchTimeB = b.dispatchTimestamp !== null
+    if (!hasDispatchTimeA && !hasDispatchTimeB) {
+      // If both tasks are pending, sort by workflowId.
+      return a.workflowId.localeCompare(b.workflowId)
+    } else if (!hasDispatchTimeA) {
+      // If A is pending and B is not, return A.
+      return -1
+    } else if (!hasDispatchTimeB) {
+      // If B is pending and A is not, return B.
+      return 1
+    } else {
+      // Otherwise, sort by timestamp.
+      return b.dispatchTimestamp! - a.dispatchTimestamp!
+    }
+  })
+})
+const lastUpdatedString = computed<string>(() => {
+  const lastUpdated = taskRuns.lastUpdatedTimestamp.value
+  if (lastUpdated === null) return '—'
+  return new Date(lastUpdated).toLocaleString()
+})
+
+function toggleTasksPanel(): void {
+  isPanelOpen.value = !isPanelOpen.value
+}
+</script>
+
+<style scoped>
+.refresh-container {
+  height: 28px;
+}
+
+.v-theme--light.task:nth-child(even) {
+  background-color: #f4f4f4;
+}
+
+.v-theme--dark.task:nth-child(even) {
+  background-color: black;
+}
+</style>
diff --git a/src/components/tasks/TaskStatusFilterControl.vue b/src/components/tasks/TaskStatusFilterControl.vue
new file mode 100644
index 000000000..cdf9ec34c
--- /dev/null
+++ b/src/components/tasks/TaskStatusFilterControl.vue
@@ -0,0 +1,92 @@
+<template>
+  <BaseTaskFilterControl
+    v-model="selectedTaskStatuses"
+    :items="taskStatusOptions"
+    label="Status"
+    @update:model-value="updateSelectedCategories"
+  >
+    <template #actions>
+      <v-btn-toggle
+        v-model="selectedCategories"
+        multiple
+        density="compact"
+        variant="outlined"
+      >
+        <v-btn
+          v-for="category in getAllTaskStatusCategories()"
+          :key="category"
+          :value="category"
+          @click="toggleStatusCategory(category)"
+        >
+          {{ getTaskStatusCategoryName(category) }}
+        </v-btn>
+      </v-btn-toggle>
+    </template>
+  </BaseTaskFilterControl>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import {
+  getAllTaskStatusCategories,
+  getCompleteTaskStatusCategories,
+  getTaskStatusesForCategory,
+  getTaskStatusCategoryName,
+  TaskStatus,
+  TaskStatusCategory,
+} from '@/lib/taskruns'
+
+import BaseTaskFilterControl from '@/components/tasks/BaseTaskFilterControl.vue'
+
+const selectedTaskStatuses = defineModel<TaskStatus[]>({ required: true })
+const selectedCategories = ref<TaskStatusCategory[]>([])
+// Initialise the group selections based on the initially selected task
+// statuses.
+updateSelectedCategories(selectedTaskStatuses.value)
+
+interface TaskStatusItem {
+  id: string
+  title: string
+  value: TaskStatus
+}
+const taskStatusOptions: TaskStatusItem[] = Object.values(TaskStatus).map(
+  (value) => {
+    // Capitalise the first letter of the value to get a human-readable title.
+    const title = value[0].toUpperCase() + value.slice(1)
+    return {
+      id: value,
+      title,
+      value,
+    }
+  },
+)
+
+// Update the selected task status groups when the user selects or deselects
+// individual statuses.
+function updateSelectedCategories(newStatuses: TaskStatus[]): void {
+  selectedCategories.value = getCompleteTaskStatusCategories(newStatuses)
+}
+
+function toggleStatusCategory(category: TaskStatusCategory): void {
+  const isCurrentlySelected = selectedCategories.value.includes(category)
+
+  // This function is triggered _after_ the model value has been updated, so if
+  // we no longer have this category in the selected category, remove the
+  // associated statuses.
+  const doRemove = !isCurrentlySelected
+
+  const categoryStatuses = getTaskStatusesForCategory(category)
+  if (doRemove) {
+    // Remove statuses for this group from the current selection.
+    selectedTaskStatuses.value = selectedTaskStatuses.value.filter(
+      (status) => !categoryStatuses.includes(status),
+    )
+  } else {
+    // Add statuses for this group to the current selection.
+    selectedTaskStatuses.value = [
+      ...selectedTaskStatuses.value,
+      ...categoryStatuses,
+    ]
+  }
+}
+</script>
diff --git a/src/components/tasks/WorkflowFilterControl.vue b/src/components/tasks/WorkflowFilterControl.vue
new file mode 100644
index 000000000..73d97d5e0
--- /dev/null
+++ b/src/components/tasks/WorkflowFilterControl.vue
@@ -0,0 +1,31 @@
+<template>
+  <BaseTasksFilterControl
+    v-model="selectedWorkflowIds"
+    :items="workflowItems"
+    label="Workflows"
+    do-sort-items
+  />
+</template>
+<script setup lang="ts">
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
+
+import BaseTasksFilterControl from '@/components/tasks/BaseTaskFilterControl.vue'
+import { computed } from 'vue'
+
+const availableWorkflowsStore = useAvailableWorkflowsStore()
+const selectedWorkflowIds = defineModel<string[]>({ required: true })
+
+const workflowItems = computed(() =>
+  availableWorkflowsStore.workflows.map((workflow) => {
+    const id = workflow.id
+    const isPreferred =
+      availableWorkflowsStore.preferredWorkflowIds.includes(id)
+    return {
+      id,
+      title: workflow.name,
+      value: workflow.id,
+      isPreferred,
+    }
+  }),
+)
+</script>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index e2e74376b..73434d2cf 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -11,6 +11,7 @@
       <div class="h-100" id="app-bar-content-center"></div>
       <template #append>
         <div id="app-bar-content-end" />
+        <TaskRunsPanel />
         <time-control-menu />
         <user-settings-menu />
         <login-component v-if="configManager.authenticationIsEnabled" />
@@ -144,9 +145,14 @@
       </template>
     </v-navigation-drawer>
     <v-main id="main">
-      <Suspense>
-        <router-view></router-view>
-      </Suspense>
+      <div class="w-100 h-100 d-flex flex-row">
+        <div class="flex-1-1">
+          <Suspense>
+            <router-view></router-view>
+          </Suspense>
+        </div>
+        <div class="flex-0-0 h-100" id="main-side-panel"></div>
+      </div>
       <div class="alerts__container" v-if="alertsStore.hasAlerts">
         <v-alert
           v-for="alert in alertsStore.alerts"
@@ -175,6 +181,7 @@ import UserSettingsMenu from '../components/user-settings/UserSettingsMenu.vue'
 import TimeControlMenu from '../components/time-control/TimeControlMenu.vue'
 import StartupDialog from '@/components/dialog/StartupDialog.vue'
 import GlobalSearchComponent from '@/components/general/GlobalSearchComponent.vue'
+import TaskRunsPanel from '@/components/tasks/TaskRunsPanel.vue'
 
 import { configManager } from '@/services/application-config'
 import { getLocalOrRemoteFileUrl } from '@/lib/fews-config'
@@ -187,6 +194,7 @@ const configStore = useConfigStore()
 const settings = useUserSettingsStore()
 const { mobile } = useDisplay()
 const alertsStore = useAlertsStore()
+
 const theme = useTheme()
 
 const drawer = ref(true)
diff --git a/src/lib/date/index.ts b/src/lib/date/index.ts
index fc19a4cb7..fc357be5a 100644
--- a/src/lib/date/index.ts
+++ b/src/lib/date/index.ts
@@ -66,3 +66,6 @@ export function convertFewsPiDateTimeToJsDate(
 export function convertJSDateToFewsPiParameter(date: Date): string {
   return toISOString(date) + 'Z'
 }
+export function convertTimestampToFewsPiParameter(timestamp: number): string {
+  return convertJSDateToFewsPiParameter(new Date(timestamp))
+}
diff --git a/src/lib/period/convert.ts b/src/lib/period/convert.ts
new file mode 100644
index 000000000..c3130b8f3
--- /dev/null
+++ b/src/lib/period/convert.ts
@@ -0,0 +1,12 @@
+import { AbsolutePeriod, RelativePeriod } from './types'
+
+export function convertRelativeToAbsolutePeriod(
+  relative: RelativePeriod,
+  reference?: Date,
+): AbsolutePeriod {
+  const referenceTimestamp = reference?.getTime() ?? Date.now()
+  return {
+    startTimestamp: referenceTimestamp + relative.startOffsetSeconds * 1000,
+    endTimestamp: referenceTimestamp + relative.endOffsetSeconds * 1000,
+  }
+}
diff --git a/src/lib/period/index.ts b/src/lib/period/index.ts
new file mode 100644
index 000000000..c9f6f047d
--- /dev/null
+++ b/src/lib/period/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/src/lib/period/types.ts b/src/lib/period/types.ts
new file mode 100644
index 000000000..336cf0656
--- /dev/null
+++ b/src/lib/period/types.ts
@@ -0,0 +1,9 @@
+export interface AbsolutePeriod {
+  startTimestamp: number
+  endTimestamp: number
+}
+
+export interface RelativePeriod {
+  startOffsetSeconds: number
+  endOffsetSeconds: number
+}
diff --git a/src/lib/taskruns/convert.ts b/src/lib/taskruns/convert.ts
new file mode 100644
index 000000000..952ca40bf
--- /dev/null
+++ b/src/lib/taskruns/convert.ts
@@ -0,0 +1,84 @@
+import { TaskRun as FewsPiTaskRun } from '@deltares/fews-pi-requests'
+
+import { TaskRun, TaskStatus } from './types'
+
+export function convertFewsPiTaskRunToTaskRun(taskRun: FewsPiTaskRun): TaskRun {
+  const timeZeroTimestamp = new Date(taskRun.time0).getTime()
+  const dispatchTimestamp = taskRun.dispatchTime
+    ? new Date(taskRun.dispatchTime).getTime()
+    : null
+  const completionTimestamp = taskRun.completionTime
+    ? new Date(taskRun.completionTime).getTime()
+    : null
+  // Set null for undefined and empty descriptions.
+  const description = taskRun.description ? taskRun.description : null
+  return {
+    taskId: taskRun.id,
+    workflowId: taskRun.workflowId,
+    // FIXME: is "user" as userId or a user name? Also, it can be null for
+    //        scheduled tasks, but this is undocumented.
+    userId: taskRun.user,
+    status: convertToTaskStatus(taskRun.status),
+    description,
+    timeZeroTimestamp,
+    dispatchTimestamp,
+    completionTimestamp,
+    isScheduled: taskRun.user === null,
+  }
+}
+
+export function convertToTaskStatus(status: string): TaskStatus {
+  switch (status) {
+    case 'invalid':
+      return TaskStatus.Invalid
+    case 'pending':
+      return TaskStatus.Pending
+    case 'terminated':
+      return TaskStatus.Terminated
+    case 'running':
+      return TaskStatus.Running
+    case 'failed':
+      return TaskStatus.Failed
+    case 'completed fully successful':
+      return TaskStatus.CompletedFullySuccessful
+    case 'completed partly successful':
+      return TaskStatus.CompletePartlySuccessful
+    case 'approved':
+      return TaskStatus.Approved
+    case 'approved partly successful':
+      return TaskStatus.ApprovedPartlySuccessful
+    case 'amalgamated':
+      return TaskStatus.Amalgamated
+    case 'partly completed':
+      return TaskStatus.PartlyCompleted
+    default:
+      throw new Error(`Invalid task status: "${status}".`)
+  }
+}
+
+export function convertTaskStatusToString(status: TaskStatus): string {
+  switch (status) {
+    case TaskStatus.Invalid:
+      return 'Invalid'
+    case TaskStatus.Pending:
+      return 'Pending'
+    case TaskStatus.Terminated:
+      return 'Terminated'
+    case TaskStatus.Running:
+      return 'Running'
+    case TaskStatus.Failed:
+      return 'Failed'
+    case TaskStatus.CompletedFullySuccessful:
+      return 'Completed fully successful'
+    case TaskStatus.CompletePartlySuccessful:
+      return 'Completed partly successful'
+    case TaskStatus.Approved:
+      return 'Approved'
+    case TaskStatus.ApprovedPartlySuccessful:
+      return 'Approved partly successful'
+    case TaskStatus.Amalgamated:
+      return 'Amalgamated'
+    case TaskStatus.PartlyCompleted:
+      return 'Partly completed'
+  }
+}
diff --git a/src/lib/taskruns/index.ts b/src/lib/taskruns/index.ts
new file mode 100644
index 000000000..b6e2ecd2f
--- /dev/null
+++ b/src/lib/taskruns/index.ts
@@ -0,0 +1,3 @@
+export * from './convert'
+export * from './status'
+export * from './types'
diff --git a/src/lib/taskruns/status.ts b/src/lib/taskruns/status.ts
new file mode 100644
index 000000000..1c9497cd3
--- /dev/null
+++ b/src/lib/taskruns/status.ts
@@ -0,0 +1,87 @@
+import { TaskStatus, TaskStatusCategory } from './types'
+
+interface TaskStatusCategoryDefinition {
+  name: string
+  category: TaskStatusCategory
+  statuses: TaskStatus[]
+}
+const STATUS_CATEGORIES: TaskStatusCategoryDefinition[] = [
+  {
+    name: 'Pending',
+    category: TaskStatusCategory.Pending,
+    statuses: [TaskStatus.Pending],
+  },
+  {
+    name: 'Running',
+    category: TaskStatusCategory.Running,
+    statuses: [TaskStatus.Running],
+  },
+  {
+    name: 'Completed',
+    category: TaskStatusCategory.Completed,
+    statuses: [
+      TaskStatus.CompletedFullySuccessful,
+      TaskStatus.CompletePartlySuccessful,
+      TaskStatus.Approved,
+      TaskStatus.ApprovedPartlySuccessful,
+      TaskStatus.Amalgamated,
+      TaskStatus.PartlyCompleted,
+    ],
+  },
+  {
+    name: 'Failed',
+    category: TaskStatusCategory.Failed,
+    statuses: [TaskStatus.Invalid, TaskStatus.Terminated, TaskStatus.Failed],
+  },
+] as const
+
+export function getAllTaskStatusCategories(): TaskStatusCategory[] {
+  return Object.values(TaskStatusCategory)
+}
+
+export function getTaskStatusCategoryName(
+  category: TaskStatusCategory,
+): string {
+  const definition = STATUS_CATEGORIES.find(
+    (current) => current.category === category,
+  )
+  if (!definition) {
+    throw new Error(`No definition for task status category "${category}".`)
+  }
+  return definition.name
+}
+
+export function getTaskStatusCategory(status: TaskStatus): TaskStatusCategory {
+  const definition = STATUS_CATEGORIES.find((current) =>
+    current.statuses.includes(status),
+  )
+  if (!definition) {
+    throw new Error(
+      `Task status "${status}" is not in any task status category.`,
+    )
+  }
+  return definition.category
+}
+
+export function getCompleteTaskStatusCategories(
+  statuses: TaskStatus[],
+): TaskStatusCategory[] {
+  const completeCategories: TaskStatusCategory[] = []
+  for (const category of STATUS_CATEGORIES) {
+    // If all statuses in this category are in the specified array, the category
+    // is defined "complete" and included.
+    if (category.statuses.every((status) => statuses.includes(status))) {
+      completeCategories.push(category.category)
+    }
+  }
+  return completeCategories
+}
+
+export function getTaskStatusesForCategory(
+  selectedCategory: TaskStatusCategory,
+): TaskStatus[] {
+  const category = STATUS_CATEGORIES.find(
+    (current) => current.category === selectedCategory,
+  )
+  return category?.statuses ?? []
+}
diff --git a/src/lib/taskruns/types.ts b/src/lib/taskruns/types.ts
new file mode 100644
index 000000000..239f1a1eb
--- /dev/null
+++ b/src/lib/taskruns/types.ts
@@ -0,0 +1,32 @@
+export enum TaskStatus {
+  Invalid = 'invalid',
+  Pending = 'pending',
+  Terminated = 'terminated',
+  Running = 'running',
+  Failed = 'failed',
+  CompletedFullySuccessful = 'completed fully successful',
+  CompletePartlySuccessful = 'completed partly successful',
+  Approved = 'approved',
+  ApprovedPartlySuccessful = 'approved partly successful',
+  Amalgamated = 'amalgamated',
+  PartlyCompleted = 'partly completed',
+}
+
+export enum TaskStatusCategory {
+  Pending = 'pending',
+  Running = 'running',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+export interface TaskRun {
+  taskId: string
+  workflowId: string
+  status: TaskStatus
+  description: string | null
+  timeZeroTimestamp: number
+  dispatchTimestamp: number | null
+  completionTimestamp: number | null
+  userId: string | null
+  isScheduled: boolean
+}
diff --git a/src/lib/timer/create.ts b/src/lib/timer/create.ts
new file mode 100644
index 000000000..0fdfa918c
--- /dev/null
+++ b/src/lib/timer/create.ts
@@ -0,0 +1,44 @@
+import { Timer } from './types'
+
+export function createTimer(
+  callback: () => void,
+  intervalSeconds: number,
+  immediate: boolean,
+): Timer {
+  // Evaluate callback immediately, if so requested.
+  if (immediate) {
+    callback()
+  }
+
+  const createInterval = () => setInterval(callback, intervalSeconds * 1000)
+  let id = createInterval()
+
+  // Intervals are paused when a browser tab/window is inactive, so we add a
+  // listener to the window focus event to check whether a refresh is overdue
+  // if the window becomes active again.
+  let lastUpdatedTimestamp: number = Date.now()
+  const onFocus = () => {
+    const now = Date.now()
+    if (now - lastUpdatedTimestamp > intervalSeconds * 1000) {
+      // Call callback and update last updated time.
+      callback()
+      lastUpdatedTimestamp = now
+      // Reset interval so it starts counting from now, otherwise we may
+      // update too often.
+      clearInterval(id)
+      id = createInterval()
+    }
+  }
+  window.addEventListener('focus', onFocus)
+
+  // Create function to deactivate the current timer. It cannot be reactivated,
+  // only by creating a new timer.
+  const deactivate = () => {
+    clearInterval(id)
+    window.removeEventListener('focus', onFocus)
+  }
+
+  return {
+    deactivate,
+  }
+}
diff --git a/src/lib/timer/index.ts b/src/lib/timer/index.ts
new file mode 100644
index 000000000..e94961485
--- /dev/null
+++ b/src/lib/timer/index.ts
@@ -0,0 +1,2 @@
+export * from './create'
+export * from './types'
diff --git a/src/lib/timer/types.ts b/src/lib/timer/types.ts
new file mode 100644
index 000000000..c891cc2cd
--- /dev/null
+++ b/src/lib/timer/types.ts
@@ -0,0 +1,3 @@
+export interface Timer {
+  deactivate: () => void
+}
diff --git a/src/services/useTasksRuns/index.ts b/src/services/useTasksRuns/index.ts
new file mode 100644
index 000000000..26d20dd5b
--- /dev/null
+++ b/src/services/useTasksRuns/index.ts
@@ -0,0 +1,126 @@
+import {
+  DocumentFormat,
+  PiWebserviceProvider,
+  TaskStatus as TaskStatusId,
+  TaskRun as FewsPiTaskRun,
+} from '@deltares/fews-pi-requests'
+import {
+  computed,
+  MaybeRefOrGetter,
+  onUnmounted,
+  ref,
+  toValue,
+  watch,
+} from 'vue'
+
+import { convertTimestampToFewsPiParameter } from '@/lib/date'
+import { RelativePeriod } from '@/lib/period'
+import { createTransformRequestFn } from '@/lib/requests/transformRequest'
+import {
+  convertFewsPiTaskRunToTaskRun,
+  TaskRun,
+  TaskStatus,
+} from '@/lib/taskruns'
+import { createTimer } from '@/lib/timer'
+
+import { configManager } from '../application-config'
+import { convertRelativeToAbsolutePeriod } from '@/lib/period/convert'
+
+export function useTaskRuns(
+  refreshIntervalSeconds: number,
+  dispatchPeriod: MaybeRefOrGetter<RelativePeriod | null>,
+  workflowIds: MaybeRefOrGetter<string[]>,
+  statuses: MaybeRefOrGetter<TaskStatus[]>,
+) {
+  const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+  const piProvider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: createTransformRequestFn(),
+  })
+
+  const isLoading = ref(false)
+  const lastUpdatedTimestamp = ref<number | null>(null)
+  const allTaskRuns = ref<TaskRun[]>([])
+  const filteredTaskRuns = computed<TaskRun[]>(filterTasks)
+
+  const timer = createTimer(
+    () => {
+      fetch().catch((error) => console.error(`Failed to fetch tasks: ${error}`))
+    },
+    refreshIntervalSeconds,
+    true,
+  )
+  onUnmounted(() => timer.deactivate())
+
+  // Fetch taskruns if a new dispatch period is selected.
+  watch(() => toValue(dispatchPeriod), fetch)
+
+  async function fetch(): Promise<void> {
+    const _dispatchPeriod = toValue(dispatchPeriod)
+    const hasPeriod = _dispatchPeriod !== null
+
+    isLoading.value = true
+    const fetchedTaskRuns = hasPeriod
+      ? await fetchTaskRunsForPeriod(_dispatchPeriod)
+      : await fetchAllTaskRuns()
+    isLoading.value = false
+
+    allTaskRuns.value = fetchedTaskRuns.map(convertFewsPiTaskRunToTaskRun)
+    lastUpdatedTimestamp.value = Date.now()
+  }
+
+  async function fetchAllTaskRuns(): Promise<FewsPiTaskRun[]> {
+    const response = await piProvider.getTaskRuns({
+      documentFormat: DocumentFormat.PI_JSON,
+    })
+    return response.taskRuns
+  }
+
+  async function fetchTaskRunsForPeriod(
+    dispatchPeriod: RelativePeriod,
+  ): Promise<FewsPiTaskRun[]> {
+    const period = convertRelativeToAbsolutePeriod(dispatchPeriod)
+    const startDispatchTime = convertTimestampToFewsPiParameter(
+      period.startTimestamp,
+    )
+    const endDispatchTime = convertTimestampToFewsPiParameter(
+      period.endTimestamp,
+    )
+    // FIXME: it is documented that tasks can only be fetched for a specific
+    //        workflowId (i.e. that that is a required parameter), but that
+    //        seems to be untrue.
+    // Fetch pending tasks separately; they are not returned when we specify
+    // a dispatch period, as they have not yet been dispatched. We always return
+    // all pending tasks.
+    const [pendingTasksResponse, tasksResponse] = await Promise.all([
+      piProvider.getTaskRuns({
+        documentFormat: DocumentFormat.PI_JSON,
+        taskRunStatusIds: TaskStatusId.P,
+      }),
+      piProvider.getTaskRuns({
+        documentFormat: DocumentFormat.PI_JSON,
+        startDispatchTime,
+        endDispatchTime,
+      }),
+    ])
+
+    return [...pendingTasksResponse.taskRuns, ...tasksResponse.taskRuns]
+  }
+
+  function filterTasks(): TaskRun[] {
+    const _workflowIds = toValue(workflowIds)
+    const _statuses = toValue(statuses)
+    return allTaskRuns.value.filter(
+      (task) =>
+        _workflowIds.includes(task.workflowId) &&
+        _statuses.includes(task.status),
+    )
+  }
+
+  return {
+    allTaskRuns,
+    filteredTaskRuns,
+    lastUpdatedTimestamp,
+    isLoading,
+    fetch,
+  }
+}
diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 48efea029..f40755932 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/src/views/TopologyDisplayView.vue
@@ -97,7 +97,7 @@ import { useWorkflowsStore } from '@/stores/workflows'
 import type { TopologyNode } from '@deltares/fews-pi-requests'
 import type { WebOcTopologyDisplayConfig } from '@deltares/fews-pi-requests'
 
-import { computed, ref, StyleValue, watch, watchEffect } from 'vue'
+import { computed, onUnmounted, ref, StyleValue, watch, watchEffect } from 'vue'
 import {
   onBeforeRouteUpdate,
   RouteLocationNormalized,
@@ -115,6 +115,7 @@ import {
   type DisplayTab,
 } from '@/lib/topology/displayTabs.js'
 import { useTopologyNodesStore } from '@/stores/topologyNodes'
+import { useAvailableWorkflowsStore } from '@/stores/availableWorkflows'
 
 interface Props {
   topologyId?: string
@@ -131,6 +132,7 @@ const props = defineProps<Props>()
 const configStore = useConfigStore()
 const settings = useUserSettingsStore()
 const workflowsStore = useWorkflowsStore()
+const availableWorkflowsStore = useAvailableWorkflowsStore()
 
 const menuType = computed(() => {
   const configured = settings.get('ui.hierarchical-menu-style')?.value as string
@@ -159,6 +161,26 @@ const activeNode = computed(() => {
   return node
 })
 
+// Set preferred workflow IDs for the running tasks menu, if this node has
+// associated workflows.
+watch(
+  activeNode,
+  (node) => {
+    const primaryWorkflowId = node?.workflowId ? [node.workflowId] : []
+    const secondaryWorkflowIds =
+      node?.secondaryWorkflows?.map(
+        (workflow) => workflow.secondaryWorkflowId,
+      ) ?? []
+    // Note: this list of workflow IDs may be empty, in which case we have no
+    //       preferred workflow.
+    const workflowIds = [...primaryWorkflowId, ...secondaryWorkflowIds]
+    availableWorkflowsStore.setPreferredWorkflowIds(workflowIds)
+  },
+  { immediate: true },
+)
+// Clear the preferred workflow IDs when we unmount.
+onUnmounted(() => availableWorkflowsStore.clearPreferredWorkflowIds())
+
 const secondaryWorkflows = computed(() => {
   if (!activeNode.value?.secondaryWorkflows) return null
   return activeNode.value.secondaryWorkflows