diff --git a/webui/src/web-components/sketch-charts.ts b/webui/src/web-components/sketch-charts.ts
index 8cf2606..df10afc 100644
--- a/webui/src/web-components/sketch-charts.ts
+++ b/webui/src/web-components/sketch-charts.ts
@@ -76,6 +76,9 @@
     this.chartData = [];
   }
 
+  @state()
+  private dollarsPerHour: number | null = null;
+
   private calculateCumulativeCostData(
     messages: AgentMessage[],
   ): { timestamp: Date; cost: number }[] {
@@ -98,6 +101,23 @@
       }
     }
 
+    // Calculate dollars per hour if we have at least two data points
+    if (data.length >= 2) {
+      const startTime = data[0].timestamp;
+      const endTime = data[data.length - 1].timestamp;
+      const totalHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);
+      const totalCost = data[data.length - 1].cost;
+      
+      // Only calculate if we have a valid time span
+      if (totalHours > 0) {
+        this.dollarsPerHour = totalCost / totalHours;
+      } else {
+        this.dollarsPerHour = null;
+      }
+    } else {
+      this.dollarsPerHour = null;
+    }
+
     return data;
   }
 
@@ -418,7 +438,7 @@
     return html`
       <div class="chart-container" id="chartContainer">
         <div class="chart-section">
-          <h3>Dollar Usage Over Time</h3>
+          <h3>Dollar Usage Over Time${this.dollarsPerHour !== null ? html` (Avg: $${this.dollarsPerHour.toFixed(2)}/hr)` : ''}</h3>
           <div class="chart-content">
             ${this.chartData.length > 0
               ? html`<vega-embed .spec=${costSpec}></vega-embed>`