fix: choose buckets

apps/web/src/routes/dashboard.ts

@@ -728,6 +728,8 @@ export const dashboard = new Elysia()
           theme:              b.theme || "auto",
           default_window:     b.default_window || "24h",
           display_mode:       b.display_mode || "expanded",
+          bar_frequency:      b.bar_frequency || "daily",
+          bar_count:          Number(b.bar_count) || 90,
           show_response_time: !!b.show_response_time,
           show_powered_by:    !!b.show_powered_by,
           index_search:       !!b.index_search,
@@ -756,6 +758,8 @@ export const dashboard = new Elysia()
         theme:              b.theme || "auto",
         default_window:     b.default_window || "24h",
         display_mode:       b.display_mode || "expanded",
+        bar_frequency:      b.bar_frequency || "daily",
+        bar_count:          Number(b.bar_count) || 90,
         show_response_time: !!b.show_response_time,
         show_powered_by:    !!b.show_powered_by,
         index_search:       !!b.index_search,

apps/web/src/views/status-page-edit.ejs

@@ -79,6 +79,26 @@
       </div>
     </div>
 
+    <div class="flex gap-4">
+      <div class="flex-1">
+        <label class="block text-sm text-gray-400 mb-1.5">Heartbeat bar granularity</label>
+        <select name="bar_frequency" class="w-full bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+          <% [['daily','One bar per day'],['hourly','One bar per hour']].forEach(function([v, label]) { %>
+            <option value="<%= v %>" <%= (p.bar_frequency || 'daily') === v ? 'selected' : '' %>><%= label %></option>
+          <% }) %>
+        </select>
+      </div>
+      <div class="flex-1">
+        <label class="block text-sm text-gray-400 mb-1.5">Number of bars</label>
+        <select name="bar_count" class="w-full bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+          <% [12, 24, 48, 7, 14, 30, 60, 90, 120, 180].forEach(function(n) { %>
+            <option value="<%= n %>" <%= Number(p.bar_count || 90) === n ? 'selected' : '' %>><%= n %></option>
+          <% }) %>
+        </select>
+      </div>
+    </div>
+    <p class="text-xs text-gray-600 -mt-3">The heartbeat bar shows the last N hours or days. The four uptime cells (24h / 7d / 30d / 90d) are independent and always present.</p>
+
     <div>
       <label class="block text-sm text-gray-400 mb-1.5">Monitors</label>
       <p class="text-xs text-gray-600 mb-2">Tick to attach. Drag to reorder. "Show as" overrides the name on this page only. "Mode" picks compact or expanded for that one monitor (or leave blank to use the page default).</p>