diff --git a/docs.openc3.com/docs/tools/cmd-tlm-server.md b/docs.openc3.com/docs/tools/cmd-tlm-server.md
index 3dcea62c13..ed46735ce2 100644
--- a/docs.openc3.com/docs/tools/cmd-tlm-server.md
+++ b/docs.openc3.com/docs/tools/cmd-tlm-server.md
@@ -73,6 +73,12 @@ The Data Flows tab displays all the Interface data flows through the system.
 
 ![Data Flows](/img/cmd_tlm_server/data_flows.png)
 
+Click an Interface or Router node to see its processing metrics below the properties and raw data. Click a Target Processing node on the left to see metrics for that target's services, including decommutation, logging, and database ingestion. Each service instance is listed separately so a slow instance is visible. The same metrics are available in the connection maps opened from the Interfaces and Routers tabs.
+
+Nodes show an amber or red outline and a **Falling behind** indicator when a reported queue delay reaches the same thresholds that trigger the server's falling behind notifications: 5 seconds (amber) or 30 seconds (red) by default, set by `OPENC3_LAG_WARN_SECONDS` and `OPENC3_LAG_CRITICAL_SECONDS`. If you change these, set them on both the openc3-operator and openc3-cosmos-cmd-tlm-api containers so the notifications and the indicators agree. Nodes are also flagged when a processing duration reaches 1 second (amber) or 5 seconds (red), or buffered input reaches 1 MiB (amber) or 10 MiB (red). Click the indicator to see the affected metric and service. These thresholds are diagnostic indicators; normal buffering and processing times depend on your configuration and traffic.
+
+Metrics refresh approximately every 5 seconds. Reports older than 30 seconds are marked **Stale metrics**, and request failures show **Metrics unavailable**. Services with no delay or buffer samples show **No delay samples**. Measurements describe the last processed data, so idle services retain their last measurement; they do not measure the current age of unprocessed data. Counters are cumulative and reset when a service restarts. Use the pause button in either details dialog to freeze the displayed values for inspection.
+
 You can disconnect the interface from the COSMOS Processing by clicking and deleting the lines connecting the Processing to the Interface. This will leave the interface "connected" but no commands are sent out or telemetry processed. Removing the lines from the Interface to the Target will effectively "unmap" the interface and restart it. This may require re-installing the plugin to restore the interface.
 
 From the Details dialog you can also view details about the individual Protocols applied to the Interface. In the EXAMPLE_INT Interface, when you click on the Length protocol you can see the details of the protocol.
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/package.json
index bddb69f955..daa3a09206 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "test": "node --test tests/*.test.js",
     "serve": "vite build --watch --mode dev-server",
     "build": "vite build",
     "lint": "eslint src",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/CosmosNode.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/CosmosNode.vue
index 59650918e6..5d07a73c23 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/CosmosNode.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/CosmosNode.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="cosmos-node">
+  <div class="cosmos-node" :class="`flow-node--${health.state}`">
     <!-- Input handles on the left -->
     <Handle
       id="cosmos__cmd"
@@ -35,35 +35,47 @@
     <v-icon color="#10b981">mdi-rocket-launch</v-icon>
     <div class="node-label">{{ data.label }}</div>
     <div class="node-label">Processing</div>
+    <FlowHealthIndicator
+      :health="health"
+      :name="data.label"
+      @details="$emit('details')"
+    />
   </div>
 </template>
 
 <script>
 import { Handle } from '@vue-flow/core'
+import FlowHealthIndicator from './FlowHealthIndicator.vue'
+import { flowHealth } from './flowMetrics'
 
 export default {
-  name: 'TargetNode',
+  name: 'CosmosNode',
   components: {
     Handle,
+    FlowHealthIndicator,
   },
   props: {
+    health: { type: Object, default: () => flowHealth() },
     data: {
       type: Object,
       required: true,
     },
   },
+  emits: ['details'],
 }
 </script>
 
 <style scoped>
 .cosmos-node {
+  position: relative;
+  cursor: pointer;
   background: #ffffff;
   border: 2px solid #10b981;
   border-radius: 8px;
   padding: 10px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  height: 200px;
+  height: 212px;
   width: 200px;
 }
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/DetailsTable.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/DetailsTable.vue
index 41945c0638..fdf2e9b9b3 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/DetailsTable.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/DetailsTable.vue
@@ -31,34 +31,38 @@
       </v-btn>
     </v-card-title>
     <v-card-text class="overflow-y-auto flex-grow-1 pa-0">
-      <div class="details-table">
-        <v-row>
-          <v-col cols="4">
-            <v-data-table
-              v-if="shownDetails"
-              :headers="headers"
-              :items="detailsItems"
-              :items-per-page="-1"
-              hide-default-footer
-              density="compact"
-              class="details-table"
-            >
-              <template #item.value="{ item }">
-                <span class="text-wrap">{{ item.value }}</span>
-              </template>
-            </v-data-table>
-            <div v-else class="d-flex justify-center align-center pa-4">
-              <v-progress-circular indeterminate color="primary" />
-            </div>
-          </v-col>
-          <v-col cols="8">
-            <div>{{ upperData.label }}: {{ upperData.time }}</div>
-            <raw-buffer v-model="upperData.data" />
-            <div>{{ lowerData.label }}: {{ lowerData.time }}</div>
-            <raw-buffer v-model="lowerData.data" />
-          </v-col>
-        </v-row>
+      <div class="details-table d-flex">
+        <div class="details-properties">
+          <v-data-table
+            v-if="shownDetails"
+            :headers="headers"
+            :items="detailsItems"
+            :items-per-page="-1"
+            hide-default-footer
+            density="compact"
+            class="details-table"
+          >
+            <template #item.value="{ item }">
+              <span class="text-wrap">{{ item.value }}</span>
+            </template>
+          </v-data-table>
+          <div v-else class="d-flex justify-center align-center pa-4">
+            <v-progress-circular indeterminate color="primary" />
+          </div>
+        </div>
+        <div class="details-raw pa-3">
+          <div>{{ upperData.label }}: {{ upperData.time }}</div>
+          <raw-buffer v-model="upperData.data" />
+          <div>{{ lowerData.label }}: {{ lowerData.time }}</div>
+          <raw-buffer v-model="lowerData.data" />
+        </div>
       </div>
+      <FlowMetricsPanel
+        v-if="
+          health && readProtocolIndex === null && writeProtocolIndex === null
+        "
+        :health="paused ? pausedHealth : health"
+      />
     </v-card-text>
   </v-card>
 </template>
@@ -66,14 +70,20 @@
 <script>
 import Updater from '../Updater'
 import RawBuffer from '../RawBuffer.vue'
+import FlowMetricsPanel from './FlowMetricsPanel.vue'
 
 export default {
   name: 'DetailsTable',
   components: {
     RawBuffer,
+    FlowMetricsPanel,
   },
   mixins: [Updater],
   props: {
+    health: {
+      type: Object,
+      default: null,
+    },
     mode: {
       type: String,
       default: 'Interface',
@@ -100,6 +110,7 @@ export default {
         { title: 'Value', key: 'value', width: '70%' },
       ],
       paused: false,
+      pausedHealth: null,
       updatedDetails: null,
     }
   },
@@ -199,6 +210,7 @@ export default {
   },
   methods: {
     pause: function () {
+      this.pausedHealth = this.health
       this.paused = !this.paused
     },
     closeClick: function () {
@@ -242,4 +254,15 @@ export default {
   overflow-x: hidden;
   overflow-y: hidden;
 }
+/* Properties take whatever width the raw data leaves */
+.details-properties {
+  flex: 1 1 0;
+  min-width: 250px;
+}
+/* RawBuffer picks 16 bytes per line when its textarea is over 770px wide,
+   so hold the raw data at that width rather than stretching it */
+.details-raw {
+  flex: 0 1 820px;
+  min-width: 0;
+}
 </style>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowHealthIndicator.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowHealthIndicator.vue
new file mode 100644
index 0000000000..ba698e5a5c
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowHealthIndicator.vue
@@ -0,0 +1,61 @@
+<!-- Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md. -->
+
+<template>
+  <button
+    type="button"
+    class="flow-health nodrag nopan"
+    :class="`flow-health--${health.state}`"
+    :title="`${health.label}. Click for processing metrics.`"
+    :aria-label="`${name}: ${health.label}. View processing metrics`"
+    data-test="flow-health"
+    @click.stop="$emit('details')"
+  >
+    <v-icon size="14" :color="health.state === 'ok' ? 'success' : undefined">
+      {{ health.icon }}
+    </v-icon>
+    {{ health.state === 'ok' ? 'View metrics' : health.label }}
+    <v-icon size="14">mdi-chevron-right</v-icon>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  health: { type: Object, required: true },
+  name: { type: String, required: true },
+})
+defineEmits(['details'])
+</script>
+
+<style scoped>
+.flow-health {
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+  color: #374151;
+  background: #f3f4f6;
+}
+.flow-health--warning,
+.flow-health--stale,
+.flow-health--unavailable {
+  background: #fff3cd;
+  color: #713f12;
+}
+.flow-health--critical {
+  background: #fee2e2;
+  color: #991b1b;
+}
+.flow-health:focus-visible {
+  outline: 2px solid #1d85e1;
+  outline-offset: 2px;
+}
+</style>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowMetricsPanel.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowMetricsPanel.vue
new file mode 100644
index 0000000000..e3f52f6dbf
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/FlowMetricsPanel.vue
@@ -0,0 +1,89 @@
+<!-- Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md. -->
+
+<template>
+  <section class="pa-4" data-test="flow-metrics">
+    <div class="d-flex align-center flex-wrap ga-2 mb-3">
+      <h3 class="text-subtitle-1">Processing metrics</h3>
+      <v-chip :color="health.color" :prepend-icon="health.icon" size="small">
+        {{ health.label }}
+      </v-chip>
+    </div>
+    <v-alert
+      v-if="health.state === 'unavailable'"
+      type="warning"
+      variant="tonal"
+      density="compact"
+      class="mb-3"
+    >
+      Unable to refresh metrics. Any values below are from the last successful
+      request. Retrying automatically.
+    </v-alert>
+    <p class="text-body-2 mb-3">
+      Latest reported measurements; services publish about every 5 seconds.
+      Queue delay warnings start at {{ health.lag.warning }} s (red at
+      {{ health.lag.critical }} s), matching the server's falling behind
+      notifications. Duration warnings start at {{ durationWarning }} s (red at
+      {{ durationCritical }} s). Buffered input warnings start at 1 MiB (red at
+      10 MiB). Reports older than {{ staleSeconds }} seconds are stale. Idle
+      services retain their last measurement. Totals reset on restart.
+    </p>
+    <v-data-table
+      :headers="headers"
+      :items="health.rows"
+      :items-per-page="-1"
+      item-value="id"
+      density="compact"
+      hide-default-footer
+      no-data-text="No metrics reported yet for this node."
+    >
+      <template #item.service="{ item }">
+        <span class="text-break">{{ item.service }}</span>
+      </template>
+      <template #item.label="{ item }">
+        <span :title="`${item.metric}: ${item.help}`">{{ item.label }}</span>
+      </template>
+      <template #item.value="{ item }">
+        <span class="metric-value">{{ item.value }}</span>
+      </template>
+      <template #item.status="{ item }">
+        <v-chip
+          :color="health.state === 'unavailable' ? 'warning' : item.color"
+          size="small"
+          variant="tonal"
+        >
+          {{ health.state === 'unavailable' ? 'Unavailable' : item.status }}
+        </v-chip>
+      </template>
+      <template #item.age="{ item }">
+        {{ item.age === null ? 'Unknown' : `${Math.floor(item.age)} s ago` }}
+      </template>
+    </v-data-table>
+  </section>
+</template>
+
+<script setup>
+import {
+  DURATION_WARNING_SECONDS,
+  DURATION_CRITICAL_SECONDS,
+  STALE_SECONDS,
+} from './flowMetrics'
+
+defineProps({ health: { type: Object, required: true } })
+const durationWarning = DURATION_WARNING_SECONDS
+const durationCritical = DURATION_CRITICAL_SECONDS
+const staleSeconds = STALE_SECONDS
+const headers = [
+  { title: 'Service', key: 'service' },
+  { title: 'Metric', key: 'label' },
+  { title: 'Value', key: 'value', sortable: false },
+  { title: 'Status', key: 'status' },
+  { title: 'Report age', key: 'age' },
+]
+</script>
+
+<style scoped>
+.metric-value {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceFlowChart.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceFlowChart.vue
index b52258555b..aafc4a3a4a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceFlowChart.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceFlowChart.vue
@@ -17,6 +17,8 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { Background } from '@vue-flow/background'
 import DetailsTable from './DetailsTable.vue'
+import TargetProcessingDetails from './TargetProcessingDetails.vue'
+import { useFlowMetrics } from './useFlowMetrics'
 import InterfaceNode from './InterfaceNode.vue'
 import RouterNode from './RouterNode.vue'
 import CosmosNode from './CosmosNode.vue'
@@ -44,9 +46,10 @@ const dialog = inject('dialog')
 const api = new OpenC3Api()
 
 const props = defineProps({
-  interfaceDetails: { type: Array, default: () => [] },
-  routerDetails: { type: Array, default: () => [] },
+  interfaceDetails: { type: Object, default: () => ({}) },
+  routerDetails: { type: Object, default: () => ({}) },
 })
+const nodeHealth = useFlowMetrics(api)
 const nodes = ref([])
 const edges = ref([])
 
@@ -430,6 +433,7 @@ const PROTOCOL_CHROME = 40 // Icon, padding and border of a protocol node
 const PROTOCOL_MIN_WIDTH = 60
 const PROTOCOL_WRITE_Y = 98 // Upper row
 const PROTOCOL_READ_Y = 148 // Lower row
+const NODE_HEIGHT = 212 // Leave space between the lower row and metrics button
 
 // Position a row of protocols, returning the label, width, relative x position
 // and original protocol index of each. Nodes are laid out in the direction the
@@ -514,9 +518,14 @@ const selectedMode = ref(null)
 const selectedDetails = ref(null)
 const selectedWriteProtocolIndex = ref(null)
 const selectedReadProtocolIndex = ref(null)
+const processingDialog = ref(false)
+const selectedTarget = ref('')
 
 function onNodeClick(event) {
-  if (event.node.type === 'interface') {
+  if (event.node.type === 'cosmos') {
+    selectedTarget.value = event.node.data.label
+    processingDialog.value = true
+  } else if (event.node.type === 'interface') {
     selectedMode.value = 'Interface'
     selectedDetails.value = props.interfaceDetails[event.node.data.label]
     selectedWriteProtocolIndex.value = null
@@ -775,7 +784,7 @@ function updateFlowChart() {
     let x, y
     // Single target: place to the right
     x = 0
-    y = index * (200 + 50)
+    y = index * (NODE_HEIGHT + 50)
 
     // Create cosmos node
     const cosmosNode = {
@@ -799,7 +808,7 @@ function updateFlowChart() {
     if (protocols.width > maxInterfaceOrRouterWidth) {
       maxInterfaceOrRouterWidth = protocols.width
     }
-    const interfaceHeight = 200 // Fixed height for two protocol rows
+    const interfaceHeight = NODE_HEIGHT
 
     // Create interface node (center) with dynamic size
     const interfaceNode = {
@@ -826,7 +835,7 @@ function updateFlowChart() {
     if (protocols.width > maxInterfaceOrRouterWidth) {
       maxInterfaceOrRouterWidth = protocols.width
     }
-    const routerHeight = 200 // Fixed height for two protocol rows
+    const routerHeight = NODE_HEIGHT
 
     // Create router node (center) with dynamic size
     const routerNode = {
@@ -851,7 +860,7 @@ function updateFlowChart() {
     let x, y
     // Single target: place to the right
     x = 200 + 200 + maxInterfaceOrRouterWidth + 200
-    y = index * (200 + 50)
+    y = index * (NODE_HEIGHT + 50)
 
     // Create target node
     const targetNode = {
@@ -950,11 +959,19 @@ watch(
       </Controls>
 
       <template #node-interface="{ data }">
-        <InterfaceNode :data="data" />
+        <InterfaceNode
+          :data="data"
+          :health="nodeHealth('interface', data.label)"
+          @details="onNodeClick({ node: { type: 'interface', data } })"
+        />
       </template>
 
       <template #node-router="{ data }">
-        <RouterNode :data="data" />
+        <RouterNode
+          :data="data"
+          :health="nodeHealth('router', data.label)"
+          @details="onNodeClick({ node: { type: 'router', data } })"
+        />
       </template>
 
       <template #node-target="{ data }">
@@ -962,7 +979,15 @@ watch(
       </template>
 
       <template #node-cosmos="cosmosNodeProps">
-        <CosmosNode v-bind="cosmosNodeProps" />
+        <CosmosNode
+          v-bind="cosmosNodeProps"
+          :health="nodeHealth('target', cosmosNodeProps.data.label)"
+          @details="
+            onNodeClick({
+              node: { type: 'cosmos', data: cosmosNodeProps.data },
+            })
+          "
+        />
       </template>
 
       <template #node-write-protocol="{ data }">
@@ -982,13 +1007,23 @@ watch(
     <!-- Details Dialog -->
     <v-dialog v-model="detailsDialog" max-width="80vw" max-height="80vh">
       <DetailsTable
+        v-if="detailsDialog && selectedDetails"
         :mode="selectedMode"
         :details="selectedDetails"
+        :health="nodeHealth(selectedMode.toLowerCase(), selectedDetails.name)"
         :read-protocol-index="selectedReadProtocolIndex"
         :write-protocol-index="selectedWriteProtocolIndex"
         @close="detailsDialog = false"
       />
     </v-dialog>
+    <v-dialog v-model="processingDialog" max-width="1100" max-height="80vh">
+      <TargetProcessingDetails
+        v-if="processingDialog"
+        :name="selectedTarget"
+        :health="nodeHealth('target', selectedTarget)"
+        @close="processingDialog = false"
+      />
+    </v-dialog>
   </div>
 </template>
 
@@ -1030,6 +1065,18 @@ watch(
   background-color: rgb(23, 38, 53);
 }
 
+.interface-flow-chart .flow-node--warning,
+.interface-flow-chart .flow-node--stale,
+.interface-flow-chart .flow-node--unavailable {
+  border-color: #b45309;
+  box-shadow: 0 0 0 2px #fbbf24;
+}
+
+.interface-flow-chart .flow-node--critical {
+  border-color: #b91c1c;
+  box-shadow: 0 0 0 2px #f87171;
+}
+
 .vue-flow__edges path {
   stroke-width: 2;
 }
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceNode.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceNode.vue
index 79933d206d..9a2dd7eae5 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceNode.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/InterfaceNode.vue
@@ -12,10 +12,19 @@
 -->
 
 <template>
-  <div class="interface-node" :style="interfaceStyle">
+  <div
+    class="interface-node"
+    :class="`flow-node--${health.state}`"
+    :style="interfaceStyle"
+  >
     <v-icon color="#1d85e1">mdi-swap-horizontal-bold</v-icon>
     <div class="node-label">{{ data.label }}</div>
     <div class="node-label">Interface</div>
+    <FlowHealthIndicator
+      :health="health"
+      :name="data.label"
+      @details="$emit('details')"
+    />
     <!-- Output handles on the right -->
     <!-- Input handles on the left -->
     <Handle
@@ -67,18 +76,23 @@
 
 <script>
 import { Handle } from '@vue-flow/core'
+import FlowHealthIndicator from './FlowHealthIndicator.vue'
+import { flowHealth } from './flowMetrics'
 
 export default {
   name: 'InterfaceNode',
   components: {
     Handle,
+    FlowHealthIndicator,
   },
   props: {
+    health: { type: Object, default: () => flowHealth() },
     data: {
       type: Object,
       required: true,
     },
   },
+  emits: ['details'],
   data() {
     return {}
   },
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/RouterNode.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/RouterNode.vue
index 45942095b2..7d853cee5e 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/RouterNode.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/RouterNode.vue
@@ -12,10 +12,19 @@
 -->
 
 <template>
-  <div class="router-node" :style="routerStyle">
+  <div
+    class="router-node"
+    :class="`flow-node--${health.state}`"
+    :style="routerStyle"
+  >
     <v-icon color="#ba1de1">mdi-call-split</v-icon>
     <div class="node-label">{{ data.label }}</div>
     <div class="node-label">Router</div>
+    <FlowHealthIndicator
+      :health="health"
+      :name="data.label"
+      @details="$emit('details')"
+    />
     <!-- Output handles on the right -->
     <!-- Input handles on the left -->
     <Handle
@@ -67,18 +76,23 @@
 
 <script>
 import { Handle } from '@vue-flow/core'
+import FlowHealthIndicator from './FlowHealthIndicator.vue'
+import { flowHealth } from './flowMetrics'
 
 export default {
   name: 'RouterNode',
   components: {
     Handle,
+    FlowHealthIndicator,
   },
   props: {
+    health: { type: Object, default: () => flowHealth() },
     data: {
       type: Object,
       required: true,
     },
   },
+  emits: ['details'],
   data() {
     return {}
   },
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetNode.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetNode.vue
index 8d82ef41f6..f9d24ab2de 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetNode.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetNode.vue
@@ -67,7 +67,7 @@ export default {
   padding: 10px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  height: 200px;
+  height: 212px;
   width: 200px;
 }
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetProcessingDetails.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetProcessingDetails.vue
new file mode 100644
index 0000000000..0230c91a98
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/TargetProcessingDetails.vue
@@ -0,0 +1,48 @@
+<!-- Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md. -->
+
+<template>
+  <v-card
+    max-height="80vh"
+    class="d-flex flex-column"
+    data-test="target-processing-details"
+  >
+    <v-card-title class="d-flex align-center flex-shrink-0">
+      Target Processing: {{ name }}
+      <v-btn
+        :icon="paused ? 'mdi-play' : 'mdi-pause'"
+        :aria-label="paused ? 'Resume metrics' : 'Pause metrics'"
+        variant="text"
+        data-test="pause"
+        @click="togglePause"
+      />
+      <v-spacer />
+      <v-btn
+        icon="mdi-close"
+        aria-label="Close"
+        variant="text"
+        data-test="close"
+        @click="$emit('close')"
+      />
+    </v-card-title>
+    <v-card-text class="overflow-y-auto pa-0">
+      <FlowMetricsPanel :health="paused ? snapshot : health" />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import FlowMetricsPanel from './FlowMetricsPanel.vue'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  health: { type: Object, required: true },
+})
+defineEmits(['close'])
+const paused = ref(false)
+const snapshot = ref(null)
+function togglePause() {
+  snapshot.value = props.health
+  paused.value = !paused.value
+}
+</script>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/flowMetrics.js b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/flowMetrics.js
new file mode 100644
index 0000000000..7c91b64f2a
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/flowMetrics.js
@@ -0,0 +1,235 @@
+/*
+ * Copyright 2026 OpenC3, Inc.
+ * All Rights Reserved.
+ * See LICENSE.md for more details.
+ */
+
+// Metrics are published every five seconds. Allow several missed reports
+// before treating a service's last measurements as stale.
+export const STALE_SECONDS = 30
+// Queue delay thresholds come from the server (TopicLagMonitor) so the
+// indicators match its falling behind notifications. These are its defaults.
+export const DEFAULT_LAG_THRESHOLDS = Object.freeze({
+  warning: 5,
+  critical: 30,
+})
+export const DURATION_WARNING_SECONDS = 1
+export const DURATION_CRITICAL_SECONDS = 5
+export const BUFFER_WARNING_BYTES = 1024 * 1024
+export const BUFFER_CRITICAL_BYTES = 10 * 1024 * 1024
+
+const STATES = {
+  ok: {
+    label: 'Within thresholds',
+    color: 'success',
+    icon: 'mdi-check-circle',
+  },
+  warning: { label: 'Falling behind', color: 'warning', icon: 'mdi-alert' },
+  critical: {
+    label: 'Falling behind',
+    color: 'error',
+    icon: 'mdi-alert-circle',
+  },
+  stale: {
+    label: 'Stale metrics',
+    color: 'warning',
+    icon: 'mdi-clock-alert-outline',
+  },
+  unknown: {
+    label: 'No delay samples',
+    color: 'grey',
+    icon: 'mdi-help-circle-outline',
+  },
+  unavailable: {
+    label: 'Metrics unavailable',
+    color: 'warning',
+    icon: 'mdi-alert-outline',
+  },
+}
+
+const METRIC_LABELS = {
+  interface_topic_delta_seconds: 'Command queue delay',
+  router_topic_delta_seconds: 'Telemetry queue delay',
+  decom_topic_delta_seconds: 'Decommutation queue delay',
+  log_topic_delta_seconds: 'Logging queue delay',
+  text_log_topic_delta_seconds: 'Text logging queue delay',
+  tsdb_ingest_topic_delta_seconds: 'Database ingestion queue delay',
+  decom_duration_seconds: 'Decommutation duration',
+  tsdb_ingest_duration_seconds: 'Database ingestion duration',
+  tsdb_flush_duration_seconds: 'Database flush duration',
+  interface_read_queue_bytes: 'Buffered input',
+  router_read_queue_bytes: 'Buffered input',
+  interface_cmd_total: 'Commands sent',
+  interface_tlm_total: 'Telemetry packets received',
+  interface_directive_total: 'Interface directives processed',
+  router_cmd_total: 'Commands received',
+  router_tlm_total: 'Telemetry packets sent',
+  router_directive_total: 'Router directives processed',
+  decom_total: 'Packets decommutated',
+  decom_error_total: 'Decommutation errors',
+  log_total: 'Packets logged',
+  log_error_total: 'Logging errors',
+  text_log_total: 'Text messages logged',
+  text_log_error_total: 'Text logging errors',
+  text_error_total: 'Text logging errors',
+  tsdb_ingest_total: 'Packets ingested',
+  tsdb_ingest_error_total: 'Database ingestion errors',
+  limits_response_total: 'Limits responses processed',
+  limits_response_error_total: 'Limits response errors',
+}
+
+function numeric(value) {
+  if (
+    !['number', 'bigint', 'string'].includes(typeof value) ||
+    (typeof value === 'string' && value.trim() === '')
+  ) {
+    return null
+  }
+  const number = Number(value)
+  return Number.isFinite(number) && number >= 0 ? number : null
+}
+
+export function formatMetric(value, unit) {
+  const number = numeric(value)
+  if (number === null) return 'Not reported'
+  if (unit === 'seconds') {
+    return number > 0 && number < 0.001
+      ? '< 0.001 s'
+      : `${number.toLocaleString(undefined, { maximumFractionDigits: 3 })} s`
+  }
+  if (unit === 'bytes') {
+    if (number >= 1024 * 1024)
+      return `${(number / (1024 * 1024)).toFixed(2)} MiB`
+    if (number >= 1024) return `${(number / 1024).toFixed(2)} KiB`
+    return `${number.toLocaleString()} B`
+  }
+  // Preserve large counters parsed by OpenC3Api as BigInts.
+  return typeof value === 'bigint'
+    ? value.toLocaleString()
+    : number.toLocaleString()
+}
+
+// A warning <= 0 means the server has notifications disabled; keep showing
+// delays against the defaults rather than never flagging them.
+export function lagThresholds(thresholds) {
+  const warning = numeric(thresholds?.warning)
+  const critical = numeric(thresholds?.critical)
+  if (!warning || critical === null || critical < warning) {
+    return DEFAULT_LAG_THRESHOLDS
+  }
+  return { warning, critical }
+}
+
+function thresholdsFor(metric, lag) {
+  if (metric.endsWith('_read_queue_bytes')) {
+    return [BUFFER_WARNING_BYTES, BUFFER_CRITICAL_BYTES]
+  }
+  if (metric.endsWith('_topic_delta_seconds')) {
+    return [lag.warning, lag.critical]
+  }
+  return [DURATION_WARNING_SECONDS, DURATION_CRITICAL_SECONDS]
+}
+
+function metricRow(service, metric, data, age, lag) {
+  const value = numeric(data?.value)
+  const isDelay = metric.endsWith('_topic_delta_seconds')
+  const isDuration = metric.endsWith('_duration_seconds')
+  const isBuffer = metric.endsWith('_read_queue_bytes')
+  const monitored = isDelay || isDuration || isBuffer
+  if (!monitored && !metric.endsWith('_total')) return null
+
+  let state = monitored ? 'ok' : 'info'
+  if (value === null || age === null) state = 'unknown'
+  else if (age > STALE_SECONDS) state = 'stale'
+  else if (monitored) {
+    const [warning, critical] = thresholdsFor(metric, lag)
+    if (value >= critical) state = 'critical'
+    else if (value >= warning) state = 'warning'
+  }
+  let unit = null
+  if (isBuffer) unit = 'bytes'
+  else if (isDelay || isDuration) unit = 'seconds'
+  const label = METRIC_LABELS[metric] || metric.replaceAll('_', ' ')
+  return {
+    id: `${service}:${metric}`,
+    service,
+    metric,
+    label,
+    help:
+      data?.help ||
+      (metric.endsWith('_total')
+        ? 'Cumulative count for this service; resets when the service restarts.'
+        : label),
+    value: formatMetric(data?.value, unit),
+    state,
+    monitored,
+    age,
+    status: state === 'info' ? 'Total' : STATES[state].label,
+    color: state === 'info' ? 'grey' : STATES[state].color,
+  }
+}
+
+export function flowHealth(
+  rows = [],
+  unavailable = false,
+  lag = DEFAULT_LAG_THRESHOLDS,
+) {
+  let state = 'unknown'
+  if (unavailable) state = 'unavailable'
+  else if (rows.some((row) => row.state === 'critical')) state = 'critical'
+  else if (rows.some((row) => row.state === 'warning')) state = 'warning'
+  else if (rows.some((row) => row.state === 'stale')) state = 'stale'
+  else if (
+    !rows.some((row) => row.monitored && row.state === 'unknown') &&
+    rows.some((row) => row.monitored && row.state === 'ok')
+  )
+    state = 'ok'
+  return { state, ...STATES[state], rows, lag }
+}
+
+// Services TargetModel deploys per target, optionally numbered (DECOM1, TSDB2).
+// Scope level services such as SCOPEMULTI or TRIGGER_GROUP use the same
+// SCOPE__TYPE__NAME form but their NAME is not a target.
+const TARGET_SERVICE = /^(MULTI|DECOM|COMMANDLOG|PACKETLOG|TSDB|CLEANUP)\d*$/
+
+// Match complete names, not substrings (INST must never include INST2).
+// A target can have multiple service instances such as DECOM, DECOM1, TSDB2.
+export function buildFlowMetrics(
+  response,
+  unavailable = false,
+  now = Date.now(),
+) {
+  const lag = lagThresholds(response?.lag_thresholds)
+  const result = { interface: {}, router: {}, target: {}, lag }
+  for (const [service, report] of Object.entries(response?.services || {})) {
+    const [, type, ...nameParts] = service.split('__')
+    const name = nameParts.join('__')
+    if (!name || !type) continue
+    let kind
+    if (type === 'INTERFACE') kind = 'interface'
+    else if (type === 'ROUTER') kind = 'router'
+    else if (TARGET_SERVICE.test(type)) kind = 'target'
+    else continue
+    const timestamp = numeric(report?.updated_at)
+    const age =
+      timestamp === null ? null : Math.max(0, (now - timestamp / 1e6) / 1000)
+    const rows = Object.entries(report?.values || {})
+      .map(([metric, data]) => metricRow(service, metric, data, age, lag))
+      .filter(Boolean)
+    if (!rows.length) continue
+    result[kind][name] ||= []
+    result[kind][name].push(...rows)
+  }
+  for (const group of [result.interface, result.router, result.target]) {
+    for (const [name, rows] of Object.entries(group)) {
+      rows.sort(
+        (a, b) =>
+          a.service.localeCompare(b.service) ||
+          Number(b.monitored) - Number(a.monitored) ||
+          a.metric.localeCompare(b.metric),
+      )
+      group[name] = flowHealth(rows, unavailable, lag)
+    }
+  }
+  return result
+}
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/useFlowMetrics.js b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/useFlowMetrics.js
new file mode 100644
index 0000000000..54ddd321c1
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfaceComponents/useFlowMetrics.js
@@ -0,0 +1,48 @@
+/* Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md. */
+
+import { onMounted, onBeforeUnmount, shallowRef } from 'vue'
+import { buildFlowMetrics, flowHealth } from './flowMetrics'
+
+// Services publish metrics about every five seconds
+const REFRESH_MS = 5000
+
+export function useFlowMetrics(api) {
+  // Rebuilt only when a request finishes, so nodes re-render at most once per
+  // refresh. Ages and staleness are as of that request.
+  const flows = shallowRef(buildFlowMetrics(null))
+  // Shared by every node without metrics so its prop only changes per refresh
+  const noMetrics = shallowRef(flowHealth())
+  let metrics = null
+  let active = false
+  let timer
+  let pending = false
+
+  async function update() {
+    if (pending) return
+    pending = true
+    let failed = false
+    try {
+      metrics = await api.get_metrics(true)
+    } catch (error) {
+      failed = true
+      console.error(error)
+    } finally {
+      pending = false
+    }
+    if (!active) return
+    flows.value = buildFlowMetrics(metrics, failed)
+    noMetrics.value = flowHealth([], failed, flows.value.lag)
+  }
+
+  onMounted(() => {
+    active = true
+    void update()
+    timer = setInterval(update, REFRESH_MS)
+  })
+  onBeforeUnmount(() => {
+    active = false
+    clearInterval(timer)
+  })
+
+  return (kind, name) => flows.value[kind][name] || noMetrics.value
+}
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
index c7ed754975..e828ff6b93 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/InterfacesTab.vue
@@ -102,7 +102,10 @@
         <v-btn icon="mdi-close" variant="text" @click="detailsDialog = false" />
       </v-card-title>
       <v-card-text class="flex-grow-1 pa-4">
-        <InterfaceFlowChart :interface-details="interfaceDetails" />
+        <InterfaceFlowChart
+          v-if="detailsDialog"
+          :interface-details="interfaceDetails"
+        />
       </v-card-text>
     </v-card>
   </v-overlay>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
index 2cd7d1dce9..645b770b2d 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RoutersTab.vue
@@ -86,7 +86,10 @@
         <v-btn icon="mdi-close" variant="text" @click="detailsDialog = false" />
       </v-card-title>
       <v-card-text class="flex-grow-1 pa-4">
-        <InterfaceFlowChart :router-details="routerDetails" />
+        <InterfaceFlowChart
+          v-if="detailsDialog"
+          :router-details="routerDetails"
+        />
       </v-card-text>
     </v-card>
   </v-overlay>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/tests/flowMetrics.test.js b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/tests/flowMetrics.test.js
new file mode 100644
index 0000000000..e7f6669102
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/tests/flowMetrics.test.js
@@ -0,0 +1,245 @@
+/* Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md. */
+
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import {
+  buildFlowMetrics,
+  flowHealth,
+  formatMetric,
+  lagThresholds,
+} from '../src/tools/CmdTlmServer/InterfaceComponents/flowMetrics.js'
+
+const now = 1_800_000_000_000
+// Wraps service reports in the get_metrics(detailed) response shape
+function build(services, unavailable = false, time = now, lag = undefined) {
+  return buildFlowMetrics({ lag_thresholds: lag, services }, unavailable, time)
+}
+
+function report(values, age = 0) {
+  return {
+    updated_at: BigInt(now - age * 1000) * 1_000_000n,
+    values: Object.fromEntries(
+      Object.entries(values).map(([key, value]) => [key, { value }]),
+    ),
+  }
+}
+
+test('isolates interfaces, routers, and exact target names, including service instances', () => {
+  const metrics = build(
+    {
+      DEFAULT__INTERFACE__INST: report({ interface_topic_delta_seconds: 0.01 }),
+      DEFAULT__ROUTER__INST: report({ router_topic_delta_seconds: 6 }),
+      DEFAULT__DECOM__INST: report({ decom_topic_delta_seconds: 0.1 }),
+      DEFAULT__DECOM1__INST: report({ decom_topic_delta_seconds: 31 }),
+      DEFAULT__TSDB2__INST: report({ tsdb_ingest_topic_delta_seconds: 0.2 }),
+      DEFAULT__DECOM__INST2: report({ decom_topic_delta_seconds: 0.1 }),
+    },
+    false,
+    now,
+  )
+  assert.equal(metrics.interface.INST.state, 'ok')
+  assert.equal(metrics.router.INST.state, 'warning')
+  assert.equal(metrics.target.INST.state, 'critical')
+  assert.equal(metrics.target.INST.rows.length, 3)
+  assert.equal(metrics.target.INST2.state, 'ok')
+})
+
+test('scope level services are not mistaken for targets', () => {
+  const metrics = build(
+    {
+      DEFAULT__SCOPEMULTI__DEFAULT: report({ decom_topic_delta_seconds: 9 }),
+      DEFAULT__TRIGGER_GROUP__DEFAULT: report({ decom_total: 1 }),
+      DEFAULT__USER__INST: report({ decom_topic_delta_seconds: 9 }),
+      DEFAULT__PACKETLOG__INST: report({ log_topic_delta_seconds: 0 }),
+      DEFAULT__COMMANDLOG3__INST: report({ log_topic_delta_seconds: 0 }),
+    },
+    false,
+    now,
+  )
+  assert.deepEqual(Object.keys(metrics.target), ['INST'])
+  assert.equal(metrics.target.INST.state, 'ok')
+  assert.equal(metrics.target.INST.rows.length, 2)
+})
+
+test('flags queue delays, durations, and buffered input at documented thresholds', () => {
+  for (const [metric, warning, critical] of [
+    ['decom_topic_delta_seconds', 5, 30],
+    ['tsdb_ingest_duration_seconds', 1, 5],
+    ['interface_read_queue_bytes', 1024 * 1024, 10 * 1024 * 1024],
+  ]) {
+    for (const [value, state] of [
+      [0, 'ok'],
+      [warning, 'warning'],
+      [critical, 'critical'],
+    ]) {
+      const metrics = build(
+        { DEFAULT__DECOM__INST: report({ [metric]: value }) },
+        false,
+        now,
+      )
+      assert.equal(metrics.target.INST.state, state, `${metric}: ${value}`)
+    }
+  }
+})
+
+test('stale reports cannot report healthy or an old backlog as current', () => {
+  for (const delay of [0, 50]) {
+    const metrics = build(
+      {
+        DEFAULT__DECOM__INST: report({ decom_topic_delta_seconds: delay }, 31),
+      },
+      false,
+      now,
+    )
+    assert.equal(metrics.target.INST.state, 'stale')
+    assert.equal(metrics.target.INST.rows[0].age, 31)
+  }
+})
+
+test('a fresh healthy service does not hide a stale service for the same target', () => {
+  const metrics = build(
+    {
+      DEFAULT__DECOM__INST: report({ decom_topic_delta_seconds: 0 }),
+      DEFAULT__TSDB__INST: report({ tsdb_ingest_topic_delta_seconds: 0 }, 60),
+    },
+    false,
+    now,
+  )
+  assert.equal(metrics.target.INST.state, 'stale')
+})
+
+test('missing and invalid samples are unknown, never healthy zeroes', () => {
+  assert.equal(flowHealth().state, 'unknown')
+  for (const value of [
+    null,
+    undefined,
+    '',
+    ' ',
+    NaN,
+    Infinity,
+    -1,
+    'bad',
+    true,
+  ]) {
+    const metrics = build(
+      { DEFAULT__DECOM__INST: report({ decom_topic_delta_seconds: value }) },
+      false,
+      now,
+    )
+    assert.equal(metrics.target.INST.state, 'unknown')
+    assert.equal(metrics.target.INST.rows[0].value, 'Not reported')
+  }
+  const metrics = build(
+    {
+      DEFAULT__DECOM__INST: {
+        values: { decom_topic_delta_seconds: { value: 0 } },
+      },
+    },
+    false,
+    now,
+  )
+  assert.equal(metrics.target.INST.state, 'unknown')
+})
+
+test('API failure overrides cached health and recovery clears the warning', () => {
+  const data = {
+    DEFAULT__DECOM__INST: report({ decom_topic_delta_seconds: 0.1 }),
+  }
+  assert.equal(build(data, true, now).target.INST.state, 'unavailable')
+  assert.equal(build(data, false, now).target.INST.state, 'ok')
+  assert.equal(flowHealth([], true).state, 'unavailable')
+})
+
+test('cumulative error totals are displayed without claiming a current backlog', () => {
+  const metrics = build(
+    {
+      DEFAULT__DECOM__INST: report({
+        decom_error_total: 20,
+        decom_total: 1000,
+      }),
+    },
+    false,
+    now,
+  )
+  assert.equal(metrics.target.INST.state, 'unknown')
+  assert.ok(metrics.target.INST.rows.every((row) => row.status === 'Total'))
+})
+
+test('warnings clear on recovery and reset counters do not imply a backlog', () => {
+  const old = build(
+    {
+      DEFAULT__DECOM__INST: report({
+        decom_topic_delta_seconds: 31,
+        decom_total: 100,
+      }),
+    },
+    false,
+    now,
+  )
+  const current = build(
+    {
+      DEFAULT__DECOM__INST: report({
+        decom_topic_delta_seconds: 0,
+        decom_total: 0,
+      }),
+    },
+    false,
+    now,
+  )
+  assert.equal(old.target.INST.state, 'critical')
+  assert.equal(current.target.INST.state, 'ok')
+})
+
+test('formats units and preserves large counters', () => {
+  assert.equal(formatMetric(0.0001, 'seconds'), '< 0.001 s')
+  assert.equal(formatMetric(1048576, 'bytes'), '1.00 MiB')
+  assert.equal(
+    formatMetric(9007199254740993n),
+    9007199254740993n.toLocaleString(),
+  )
+  assert.deepEqual(build(null, false, now), {
+    interface: {},
+    router: {},
+    target: {},
+    lag: { warning: 5, critical: 30 },
+  })
+})
+
+test('queue delays use the server lag thresholds, other metrics keep their own', () => {
+  const metrics = build(
+    {
+      DEFAULT__DECOM__INST: report({
+        decom_topic_delta_seconds: 2,
+        decom_duration_seconds: 0.5,
+      }),
+      DEFAULT__TSDB__INST: report({ tsdb_ingest_topic_delta_seconds: 12 }),
+    },
+    false,
+    now,
+    { warning: 2, critical: 12 },
+  )
+  const states = Object.fromEntries(
+    metrics.target.INST.rows.map((row) => [row.metric, row.state]),
+  )
+  assert.equal(states.decom_topic_delta_seconds, 'warning')
+  assert.equal(states.tsdb_ingest_topic_delta_seconds, 'critical')
+  assert.equal(states.decom_duration_seconds, 'ok')
+  assert.deepEqual(metrics.target.INST.lag, { warning: 2, critical: 12 })
+})
+
+test('missing, disabled, or inconsistent lag thresholds fall back to the defaults', () => {
+  for (const thresholds of [
+    undefined,
+    {},
+    { warning: 0, critical: 30 },
+    { warning: -1, critical: 30 },
+    { warning: 10, critical: 5 },
+    { warning: 'bad', critical: 30 },
+  ]) {
+    assert.deepEqual(lagThresholds(thresholds), { warning: 5, critical: 30 })
+  }
+  assert.deepEqual(lagThresholds({ warning: '2.5', critical: 10 }), {
+    warning: 2.5,
+    critical: 10,
+  })
+})
diff --git a/openc3-cosmos-init/plugins/packages/openc3-js-common/src/services/openc3Api.js b/openc3-cosmos-init/plugins/packages/openc3-js-common/src/services/openc3Api.js
index 1481c51564..b49db5a1b3 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-js-common/src/services/openc3Api.js
+++ b/openc3-cosmos-init/plugins/packages/openc3-js-common/src/services/openc3Api.js
@@ -952,8 +952,8 @@ export default class OpenC3Api {
     return this.set_setting(name, data)
   }
 
-  get_metrics() {
-    return this.exec('get_metrics', [])
+  get_metrics(detailed = false) {
+    return this.exec('get_metrics', [], { detailed })
   }
 
   // Opens a new browser tab with the given URL
diff --git a/openc3/lib/openc3/api/metrics_api.rb b/openc3/lib/openc3/api/metrics_api.rb
index 4590d34bcd..f195b53616 100644
--- a/openc3/lib/openc3/api/metrics_api.rb
+++ b/openc3/lib/openc3/api/metrics_api.rb
@@ -14,6 +14,7 @@
 require 'openc3/models/metric_model'
 require 'openc3/utilities/authentication'
 require 'openc3/utilities/store'
+require 'openc3/utilities/topic_lag_monitor'
 
 module OpenC3
   module Api
@@ -53,8 +54,12 @@ module Api
     SUM_METRICS['tsdb_ingest_total'] = 0
     SUM_METRICS['tsdb_ingest_error_total'] = 0
 
-    def get_metrics(manual: false, scope: $openc3_scope, token: $openc3_token)
+    # Metrics shown per service in Data Flows
+    FLOW_METRIC_SUFFIXES = %w(_topic_delta_seconds _duration_seconds _read_queue_bytes _total).freeze
+
+    def get_metrics(detailed: false, manual: false, scope: $openc3_scope, token: $openc3_token)
       authorize(permission: 'system', manual: manual, scope: scope, token: token)
+      return _flow_metrics(scope) if detailed
 
       sum_metrics = SUM_METRICS.dup
       duration_metrics = DURATION_METRICS.dup
@@ -93,5 +98,25 @@ def get_metrics(manual: false, scope: $openc3_scope, token: $openc3_token)
 
       return result
     end
+
+    # Per service metrics for Data Flows. Reads only what each microservice
+    # reported itself so updated_at shows when that service last published;
+    # the operator's process metrics would otherwise keep it fresh while the
+    # process is alive. Sends just the values Data Flows displays, plus the
+    # lag thresholds so its indicators match the falling behind notifications.
+    def _flow_metrics(scope)
+      services = {}
+      MetricModel.all_self_reported(scope: scope).each do |name, entry|
+        next unless entry and entry['values']
+        values = {}
+        entry['values'].each do |metric_name, data|
+          next unless data.is_a?(Hash) and metric_name.end_with?(*FLOW_METRIC_SUFFIXES)
+          values[metric_name] = { 'value' => data['value'] }
+        end
+        next if values.empty?
+        services[name] = { 'updated_at' => entry['updated_at'], 'values' => values }
+      end
+      { 'lag_thresholds' => TopicLagMonitor.thresholds, 'services' => services }
+    end
   end
 end
diff --git a/openc3/lib/openc3/models/metric_model.rb b/openc3/lib/openc3/models/metric_model.rb
index 08984d8dbb..58ec6bc433 100644
--- a/openc3/lib/openc3/models/metric_model.rb
+++ b/openc3/lib/openc3/models/metric_model.rb
@@ -74,6 +74,14 @@ def self.all(scope:)
       result
     end
 
+    # Only the metrics each microservice reported about itself, without the
+    # operator's process metrics. Their updated_at is when the microservice
+    # last published, which the merged rows from all can't tell you because
+    # the operator keeps refreshing them while the process is alive.
+    def self.all_self_reported(scope:)
+      _db_sharded_all("#{scope}#{PRIMARY_KEY}", scope: scope)
+    end
+
     # Combine a microservice's self reported metrics with the process metrics
     # the operator reported for it. The microservice's own values win on a key
     # collision - a process that can measure itself knows better than the
diff --git a/openc3/lib/openc3/utilities/topic_lag_monitor.rb b/openc3/lib/openc3/utilities/topic_lag_monitor.rb
index 78d8c88658..39c3363fdf 100644
--- a/openc3/lib/openc3/utilities/topic_lag_monitor.rb
+++ b/openc3/lib/openc3/utilities/topic_lag_monitor.rb
@@ -41,14 +41,33 @@ class TopicLagMonitor
 
     attr_reader :state
 
+    # Lag in seconds that triggers the warning and critical notifications.
+    # A warning <= 0 disables notifications. Also used by Data Flows so its
+    # indicators match the notifications.
+    def self.thresholds
+      {
+        'warning' => env_float('OPENC3_LAG_WARN_SECONDS', 5.0),
+        'critical' => env_float('OPENC3_LAG_CRITICAL_SECONDS', 30.0),
+      }
+    end
+
+    def self.env_float(name, default)
+      value = ENV.fetch(name, '').strip
+      return default if value.empty?
+      Float(value)
+    rescue ArgumentError
+      default
+    end
+
     def initialize(name:, logger:, metric: nil)
       @name = name
       @logger = logger
       @metric = metric
-      @warn_seconds = env_float('OPENC3_LAG_WARN_SECONDS', 5.0)
-      @critical_seconds = env_float('OPENC3_LAG_CRITICAL_SECONDS', 30.0)
-      @clear_seconds = env_float('OPENC3_LAG_CLEAR_SECONDS', 10.0)
-      @renotify_seconds = env_float('OPENC3_LAG_RENOTIFY_SECONDS', 300.0)
+      thresholds = self.class.thresholds
+      @warn_seconds = thresholds['warning']
+      @critical_seconds = thresholds['critical']
+      @clear_seconds = self.class.env_float('OPENC3_LAG_CLEAR_SECONDS', 10.0)
+      @renotify_seconds = self.class.env_float('OPENC3_LAG_RENOTIFY_SECONDS', 300.0)
       @state = OK
       @max_lag = 0.0
       @max_lag_topic = nil
@@ -170,13 +189,5 @@ def notify_lag(topic, lag, now)
     def id_ms(id)
       id.to_s.split('-')[0].to_i
     end
-
-    def env_float(name, default)
-      value = ENV.fetch(name, '').strip
-      return default if value.empty?
-      Float(value)
-    rescue ArgumentError
-      default
-    end
   end
 end
diff --git a/openc3/spec/api/metrics_api_spec.rb b/openc3/spec/api/metrics_api_spec.rb
new file mode 100644
index 0000000000..d6ced4e8d7
--- /dev/null
+++ b/openc3/spec/api/metrics_api_spec.rb
@@ -0,0 +1,106 @@
+# encoding: ascii-8bit
+# Copyright 2026 OpenC3, Inc. All Rights Reserved. See LICENSE.md.
+
+require 'spec_helper'
+require 'openc3/api/metrics_api'
+
+module OpenC3
+  describe Api do
+    let(:api) { Class.new { include Api }.new }
+    let(:metrics) do
+      {
+        'TEST__DECOM__INST' => {
+          'updated_at' => 1_800_000_000_000_000_000,
+          'values' => {
+            'decom_topic_delta_seconds' => { 'value' => 2.0, 'type' => 'gauge', 'help' => 'Delta time' },
+            'decom_total' => { 'value' => 10, 'type' => 'counter' }
+          }
+        },
+        'TEST__DECOM1__INST' => {
+          'values' => {
+            'decom_topic_delta_seconds' => { 'value' => 5.0, 'type' => 'gauge' },
+            'decom_total' => { 'value' => 20, 'type' => 'counter' }
+          }
+        }
+      }
+    end
+
+    before do
+      allow(api).to receive(:authorize)
+      allow(MetricModel).to receive(:all).with(scope: 'TEST').and_return(metrics)
+      allow(MetricModel).to receive(:all_self_reported).with(scope: 'TEST').and_return(metrics)
+    end
+
+    it 'preserves aggregate metrics by default' do
+      allow(MetricModel).to receive(:redis_metrics).and_return({})
+      result = api.get_metrics(scope: 'TEST')
+      expect(result['decom_total']).to eq(30)
+      expect(result['decom_topic_delta_seconds']).to eq(5.0)
+      expect(result).not_to have_key('TEST__DECOM__INST')
+    end
+
+    it 'returns scoped service flow metrics with timestamps when detailed' do
+      expect(api).to receive(:authorize).with(permission: 'system', manual: true, scope: 'TEST', token: 'test-token')
+      expect(MetricModel).not_to receive(:redis_metrics)
+      expect(MetricModel).not_to receive(:all)
+      expect(api.get_metrics(detailed: true, manual: true, scope: 'TEST', token: 'test-token')['services']).to eq(
+        {
+          'TEST__DECOM__INST' => {
+            'updated_at' => 1_800_000_000_000_000_000,
+            'values' => { 'decom_topic_delta_seconds' => { 'value' => 2.0 }, 'decom_total' => { 'value' => 10 } }
+          },
+          'TEST__DECOM1__INST' => {
+            'updated_at' => nil,
+            'values' => { 'decom_topic_delta_seconds' => { 'value' => 5.0 }, 'decom_total' => { 'value' => 20 } }
+          }
+        }
+      )
+    end
+
+    it 'drops metrics Data Flows does not display and services with none left' do
+      allow(MetricModel).to receive(:all_self_reported).with(scope: 'TEST').and_return(
+        {
+          'TEST__INTERFACE__INST_INT' => {
+            'updated_at' => 1,
+            'values' => {
+              'interface_read_queue_bytes' => { 'value' => 1024, 'help' => 'Bytes' },
+              'interface_tlm_total' => { 'value' => 3 },
+              'resident_memory_bytes' => { 'value' => 1000 }
+            }
+          },
+          'TEST__SCOPEMULTI__TEST' => { 'updated_at' => 1, 'values' => { 'some_gauge' => { 'value' => 1 } } },
+          'TEST__EMPTY__X' => { 'updated_at' => 1 }
+        }
+      )
+      expect(api.get_metrics(detailed: true, scope: 'TEST')['services']).to eq(
+        {
+          'TEST__INTERFACE__INST_INT' => {
+            'updated_at' => 1,
+            'values' => {
+              'interface_read_queue_bytes' => { 'value' => 1024 },
+              'interface_tlm_total' => { 'value' => 3 }
+            }
+          }
+        }
+      )
+    end
+
+    it 'authorizes before reading detailed metrics' do
+      allow(api).to receive(:authorize).and_raise('Unauthorized')
+      expect(MetricModel).not_to receive(:all)
+      expect(MetricModel).not_to receive(:all_self_reported)
+      expect { api.get_metrics(detailed: true, scope: 'TEST') }.to raise_error('Unauthorized')
+    end
+
+    it 'returns no services when no detailed metrics have been reported' do
+      allow(MetricModel).to receive(:all_self_reported).with(scope: 'TEST').and_return({})
+      expect(api.get_metrics(detailed: true, scope: 'TEST')['services']).to eq({})
+    end
+
+    it 'returns the lag notification thresholds when detailed' do
+      expect(api.get_metrics(detailed: true, scope: 'TEST')['lag_thresholds']).to eq({ 'warning' => 5.0, 'critical' => 30.0 })
+      stub_const('ENV', ENV.to_h.merge('OPENC3_LAG_WARN_SECONDS' => '2', 'OPENC3_LAG_CRITICAL_SECONDS' => '12.5'))
+      expect(api.get_metrics(detailed: true, scope: 'TEST')['lag_thresholds']).to eq({ 'warning' => 2.0, 'critical' => 12.5 })
+    end
+  end
+end
diff --git a/openc3/spec/models/metric_model_spec.rb b/openc3/spec/models/metric_model_spec.rb
index 49c223be73..87e85d0faa 100644
--- a/openc3/spec/models/metric_model_spec.rb
+++ b/openc3/spec/models/metric_model_spec.rb
@@ -90,6 +90,24 @@ module OpenC3
         expect(MetricModel.get(name: 'foo', scope: 'scope')['values']['num_threads']['value']).to eql(9)
       end
 
+      it "all_self_reported keeps the microservice's own updated_at" do
+        MetricModel.set({ 'name' => 'foo', 'values' => { 'decom_total' => { 'value' => 42 } } },
+                        scope: 'scope', queued: false)
+        self_updated_at = MetricModel.all(scope: 'scope')['foo']['updated_at']
+        sleep(0.01)
+        # The operator keeps reporting while the microservice has gone quiet
+        MetricModel.set_process({ 'name' => 'foo', 'values' => { 'average_cpu_utilization' => { 'value' => 0.25 } } },
+                                scope: 'scope', queued: false)
+        MetricModel.set_process({ 'name' => 'DEFAULT__USER__CFDP', 'values' => { 'average_cpu_utilization' => { 'value' => 0.1 } } },
+                                scope: 'scope', queued: false)
+
+        expect(MetricModel.all(scope: 'scope')['foo']['updated_at']).to be > self_updated_at
+        reported = MetricModel.all_self_reported(scope: 'scope')
+        expect(reported['foo']['updated_at']).to eql(self_updated_at)
+        expect(reported['foo']['values']).not_to have_key('average_cpu_utilization')
+        expect(reported).not_to have_key('DEFAULT__USER__CFDP')
+      end
+
       it "destroys both rows" do
         MetricModel.set({ 'name' => 'foo', 'values' => { 'decom_total' => { 'value' => 42 } } },
                         scope: 'scope', queued: false)
diff --git a/playwright/tests/cmd-tlm-server/data-flows.p.spec.ts b/playwright/tests/cmd-tlm-server/data-flows.p.spec.ts
new file mode 100644
index 0000000000..89bffaa32a
--- /dev/null
+++ b/playwright/tests/cmd-tlm-server/data-flows.p.spec.ts
@@ -0,0 +1,72 @@
+/*
+# Copyright 2026 OpenC3, Inc.
+# All Rights Reserved.
+#
+# 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 LICENSE.md for more details.
+#
+# This file may also be used under the terms of a commercial license
+# if purchased from OpenC3, Inc.
+*/
+
+import { test, expect } from './../fixture'
+
+test.use({
+  toolPath: '/tools/cmdtlmserver/interfaces',
+  toolName: 'CmdTlmServer',
+})
+
+// utils is requested because that fixture navigates to the tool
+test.beforeEach(async ({ page, utils }) => {
+  await page.getByRole('tab', { name: 'Data Flows' }).click()
+  await expect(page).toHaveURL(/\/tools\/cmdtlmserver\/data-flows/)
+})
+
+test('views the metrics for target processing', async ({ page }) => {
+  // The health indicator on the INST2 Processing node opens its metrics
+  await page
+    .getByRole('button', { name: /^INST2: .*View processing metrics/ })
+    .click()
+  const dialog = page.locator('[data-test=target-processing-details]')
+  await expect(dialog).toContainText('Target Processing: INST2')
+  const metrics = dialog.locator('[data-test=flow-metrics]')
+  await expect(metrics).toContainText('Processing metrics')
+  // Metrics are published every 5 seconds so allow time for the first report
+  const decom = metrics.locator('tr', { hasText: 'DEFAULT__DECOM__INST2' })
+  await expect(decom.filter({ hasText: 'Packets decommutated' })).toBeVisible({
+    timeout: 15000,
+  })
+  await expect(
+    decom.filter({ hasText: 'Decommutation queue delay' }),
+  ).toBeVisible()
+  // Services are matched on the complete target name so INST isn't included
+  await expect(metrics.getByRole('cell', { name: /__INST$/ })).toHaveCount(0)
+
+  await dialog.locator('[data-test=close]').click()
+  await expect(dialog).not.toBeVisible()
+})
+
+test('views the metrics for an interface', async ({ page }) => {
+  // The health indicator on the INST2_INT Interface node opens its details
+  await page
+    .getByRole('button', { name: /^INST2_INT: .*View processing metrics/ })
+    .click()
+  const dialog = page.locator('.v-dialog', {
+    hasText: 'Interface Properties: INST2_INT',
+  })
+  await expect(dialog).toBeVisible()
+  const metrics = dialog.locator('[data-test=flow-metrics]')
+  await expect(metrics).toContainText('Processing metrics')
+  const service = metrics.locator('tr', {
+    hasText: 'DEFAULT__INTERFACE__INST2_INT',
+  })
+  await expect(
+    service.filter({ hasText: 'Telemetry packets received' }),
+  ).toBeVisible({ timeout: 15000 })
+  await expect(service.filter({ hasText: 'Buffered input' })).toBeVisible()
+
+  await dialog.locator('[data-test=close]').click()
+  await expect(dialog).not.toBeVisible()
+})