@chrysb/alphaclaw 0.6.2-beta.5 → 0.7.0-beta.0

package/lib/public/js/components/cron-tab/cron-calendar.js

@@ -1,10 +1,20 @@
 import { h } from "https://esm.sh/preact";
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { ActionButton } from "../action-button.js";
+import { SegmentedControl } from "../segmented-control.js";
 import { Tooltip } from "../tooltip.js";
-import { formatCost, formatTokenCount } from "./cron-helpers.js";
-import { formatCronScheduleLabel } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatCronScheduleLabel,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 import { readUiSettings, updateUiSettings } from "../../lib/ui-settings.js";
 import {
   classifyRepeatingJobs,
@@ -24,7 +34,8 @@ const formatHourLabel = (hourOfDay) => {
   });
 };
 
-const buildCellKey = (dayKey, hourOfDay) => `${String(dayKey || "")}:${hourOfDay}`;
+const buildCellKey = (dayKey, hourOfDay) =>
+  `${String(dayKey || "")}:${hourOfDay}`;
 const toLocalDayKey = (valueMs) => {
   const dateValue = new Date(valueMs);
   const year = dateValue.getFullYear();
@@ -49,101 +60,107 @@ const slotStateClassName = ({
   const tierClassName = tierClassNameByKey[tokenTier] || tierClassNameByKey.low;
   if (!isPast) return `${tierClassName} cron-calendar-slot-upcoming`;
   if (mappedStatus === "ok") return `${tierClassName} cron-calendar-slot-ok`;
-  if (mappedStatus === "error") return `${tierClassName} cron-calendar-slot-error`;
-  if (mappedStatus === "skipped") return `${tierClassName} cron-calendar-slot-skipped`;
+  if (mappedStatus === "error")
+    return `${tierClassName} cron-calendar-slot-error`;
+  if (mappedStatus === "skipped")
+    return `${tierClassName} cron-calendar-slot-skipped`;
   return `${tierClassName} cron-calendar-slot-past`;
 };
 
 const renderLegend = () => html`
   <div class="cron-calendar-legend">
     <span class="cron-calendar-legend-label">Token intensity</span>
-    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-unknown">No usage</span>
-    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-low">Low</span>
-    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-medium">Medium</span>
-    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-high">High</span>
-    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-very-high">Very high</span>
+    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-unknown"
+      >No usage</span
+    >
+    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-low"
+      >Low</span
+    >
+    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-medium"
+      >Medium</span
+    >
+    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-high"
+      >High</span
+    >
+    <span class="cron-calendar-legend-pill cron-calendar-slot-tier-very-high"
+      >Very high</span
+    >
   </div>
 `;
 
 const kNowRefreshMs = 60 * 1000;
 const kCalendarExpandedUiSettingKey = "cronCalendarExpanded";
+const kCalendarViewUiSettingKey = "cronCalendarView";
+const kCalendarViewUpcoming = "upcoming";
+const kCalendarViewCalendar = "calendar";
+const kCalendarViewOptions = [
+  { label: "Up next", value: kCalendarViewUpcoming },
+  { label: "Calendar", value: kCalendarViewCalendar },
+];
 const kRunWindow7dMs = 7 * 24 * 60 * 60 * 1000;
 const kSlotRunToleranceMs = 45 * 60 * 1000;
 const kUnknownTier = "unknown";
 
 const formatUpcomingTime = (timestampMs) => {
   const dateValue = new Date(timestampMs);
-  return dateValue.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-};
-
-const getRunTotalTokens = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    usage?.total_tokens,
-    usage?.totalTokens,
-    entry?.total_tokens,
-    entry?.totalTokens,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return 0;
-};
-
-const getRunEstimatedCost = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    entry?.estimatedCost,
-    entry?.estimated_cost,
-    usage?.estimatedCost,
-    usage?.estimated_cost,
-    usage?.totalCost,
-    usage?.total_cost,
-    usage?.costUsd,
-    usage?.cost,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return null;
+  return dateValue.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
 };
 
-const buildRunSummaryByJobId = ({ runsByJobId = {}, nowMs = Date.now() } = {}) => {
+const buildRunSummaryByJobId = ({
+  runsByJobId = {},
+  nowMs = Date.now(),
+} = {}) => {
   const cutoffMs = Number(nowMs || Date.now()) - kRunWindow7dMs;
-  return Object.entries(runsByJobId || {}).reduce((accumulator, [jobId, runResult]) => {
-    const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];
-    const recentEntries = entries.filter((entry) => {
-      const timestampMs = Number(entry?.ts || 0);
-      return Number.isFinite(timestampMs) && timestampMs >= cutoffMs && timestampMs <= nowMs;
-    });
-    const runCount = recentEntries.length;
-    const totalTokens = recentEntries.reduce(
-      (sum, entry) => sum + Number(getRunTotalTokens(entry) || 0),
-      0,
-    );
-    const totalCost = recentEntries.reduce((sum, entry) => {
-      const cost = getRunEstimatedCost(entry);
-      return sum + Number(cost == null ? 0 : cost);
-    }, 0);
-    accumulator[String(jobId || "")] = {
-      runCount,
-      totalTokens,
-      totalCost,
-      avgTokensPerRun: runCount > 0 ? Math.round(totalTokens / runCount) : 0,
-      avgCostPerRun: runCount > 0 ? totalCost / runCount : 0,
-    };
-    return accumulator;
-  }, {});
+  return Object.entries(runsByJobId || {}).reduce(
+    (accumulator, [jobId, runResult]) => {
+      const entries = Array.isArray(runResult?.entries)
+        ? runResult.entries
+        : [];
+      const recentEntries = entries.filter((entry) => {
+        const timestampMs = Number(entry?.ts || 0);
+        return (
+          Number.isFinite(timestampMs) &&
+          timestampMs >= cutoffMs &&
+          timestampMs <= nowMs
+        );
+      });
+      const runCount = recentEntries.length;
+      const totalTokens = recentEntries.reduce(
+        (sum, entry) => sum + Number(getCronRunTotalTokens(entry) || 0),
+        0,
+      );
+      const totalCost = recentEntries.reduce((sum, entry) => {
+        const cost = getCronRunEstimatedCost(entry);
+        return sum + Number(cost == null ? 0 : cost);
+      }, 0);
+      accumulator[String(jobId || "")] = {
+        runCount,
+        totalTokens,
+        totalCost,
+        avgTokensPerRun: runCount > 0 ? Math.round(totalTokens / runCount) : 0,
+        avgCostPerRun: runCount > 0 ? totalCost / runCount : 0,
+      };
+      return accumulator;
+    },
+    {},
+  );
 };
 
-const mapRunsToSlots = ({ slots = [], runsByJobId = {}, nowMs = Date.now() } = {}) => {
+const mapRunsToSlots = ({
+  slots = [],
+  runsByJobId = {},
+  nowMs = Date.now(),
+} = {}) => {
   const runsBySlotKey = {};
   const consumedRunTimestampsByJobId = {};
   const runEntriesByJobId = Object.entries(runsByJobId || {}).reduce(
     (accumulator, [jobId, runResult]) => {
-      const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];
+      const entries = Array.isArray(runResult?.entries)
+        ? runResult.entries
+        : [];
       const normalizedEntries = entries
         .map((entry) => ({ ...entry, ts: Number(entry?.ts || 0) }))
         .filter((entry) => Number.isFinite(entry.ts) && entry.ts > 0)
@@ -205,14 +222,14 @@ const classifyTokenTier = ({
 } = {}) => {
   if (!enabled) return "disabled";
   const safeValue = Number(tokenValue || 0);
-  if (!Number.isFinite(safeValue) || safeValue <= 0 || !thresholds) return kUnknownTier;
+  if (!Number.isFinite(safeValue) || safeValue <= 0 || !thresholds)
+    return kUnknownTier;
   if (safeValue <= thresholds.q1) return "low";
   if (safeValue <= thresholds.q2) return "medium";
   if (safeValue <= thresholds.p90) return "high";
   return "very-high";
 };
 
-
 const buildJobTooltipText = ({
   jobName = "",
   job = null,
@@ -223,18 +240,25 @@ const buildJobTooltipText = ({
   scheduledStatus = "",
   nowMs = Date.now(),
 } = {}) => {
-  const isPastSlot = Number(scheduledAtMs || 0) > 0 && Number(scheduledAtMs || 0) <= nowMs;
+  const isPastSlot =
+    Number(scheduledAtMs || 0) > 0 && Number(scheduledAtMs || 0) <= nowMs;
   const runCount7d = Number(runSummary7d?.runCount || 0);
   const avgTokensPerRun7d = Number(runSummary7d?.avgTokensPerRun || 0);
   const avgCostPerRun7d = Number(runSummary7d?.avgCostPerRun || 0);
-  const slotRunTokens = getRunTotalTokens(slotRun || {});
-  const slotRunCost = getRunEstimatedCost(slotRun || {});
-  const slotRunStatus = String(slotRun?.status || "").trim().toLowerCase();
+  const slotRunTokens = getCronRunTotalTokens(slotRun || {});
+  const slotRunCost = getCronRunEstimatedCost(slotRun || {});
+  const slotRunStatus = String(slotRun?.status || "")
+    .trim()
+    .toLowerCase();
 
   const lines = [String(jobName || "Job")];
   if (isPastSlot) {
-    lines.push(`Run tokens: ${slotRun ? formatTokenCount(slotRunTokens) : "—"}`);
-    lines.push(`Run cost: ${slotRunCost == null ? "—" : formatCost(slotRunCost)}`);
+    lines.push(
+      `Run tokens: ${slotRun ? formatTokenCount(slotRunTokens) : "—"}`,
+    );
+    lines.push(
+      `Run cost: ${slotRunCost == null ? "—" : formatCost(slotRunCost)}`,
+    );
     lines.push(`Run status: ${slotRunStatus || scheduledStatus || "unknown"}`);
     if (slotRun?.ts) {
       lines.push(
@@ -248,7 +272,9 @@ const buildJobTooltipText = ({
     lines.push(
       `Avg cost/run (last 7d): ${runCount7d > 0 ? formatCost(avgCostPerRun7d) : "—"}`,
     );
-    lines.push(`Runs (last 7d): ${runCount7d > 0 ? formatTokenCount(runCount7d) : "none"}`);
+    lines.push(
+      `Runs (last 7d): ${runCount7d > 0 ? formatTokenCount(runCount7d) : "none"}`,
+    );
   }
 
   if (!isPastSlot && latestRun?.status) {
@@ -259,12 +285,15 @@ const buildJobTooltipText = ({
     lines.push("Latest run: none");
   }
   if (Number(job?.state?.runningAtMs || 0) > 0) {
-    lines.push(`Current run: active (${new Date(Number(job.state.runningAtMs)).toLocaleString()})`);
+    lines.push(
+      `Current run: active (${new Date(Number(job.state.runningAtMs)).toLocaleString()})`,
+    );
   }
 
   if (scheduledAtMs > 0) {
     const slotLabel = new Date(scheduledAtMs).toLocaleString();
-    const slotState = scheduledStatus || (scheduledAtMs <= Date.now() ? "past" : "upcoming");
+    const slotState =
+      scheduledStatus || (scheduledAtMs <= Date.now() ? "past" : "upcoming");
     lines.push(`Slot: ${slotState} (${slotLabel})`);
   }
   return lines.join("\n");
@@ -275,16 +304,29 @@ export const CronCalendar = ({
   runsByJobId = {},
   onSelectJob = () => {},
 }) => {
-  const [expanded, setExpanded] = useState(() => {
+  const [calendarView, setCalendarView] = useState(() => {
     const settings = readUiSettings();
-    return settings[kCalendarExpandedUiSettingKey] === true;
+    const savedView = String(
+      settings?.[kCalendarViewUiSettingKey] || "",
+    ).trim();
+    if (savedView === kCalendarViewCalendar) return kCalendarViewCalendar;
+    if (savedView === kCalendarViewUpcoming) return kCalendarViewUpcoming;
+    return settings[kCalendarExpandedUiSettingKey] === true
+      ? kCalendarViewCalendar
+      : kCalendarViewUpcoming;
   });
-  const toggleExpanded = useCallback(() => {
-    setExpanded((previous) => {
-      const next = !previous;
-      updateUiSettings((settings) => ({ ...settings, [kCalendarExpandedUiSettingKey]: next }));
-      return next;
-    });
+  const isCalendarView = calendarView === kCalendarViewCalendar;
+  const onChangeCalendarView = useCallback((nextValue) => {
+    const nextView =
+      nextValue === kCalendarViewCalendar
+        ? kCalendarViewCalendar
+        : kCalendarViewUpcoming;
+    setCalendarView(nextView);
+    updateUiSettings((settings) => ({
+      ...settings,
+      [kCalendarViewUiSettingKey]: nextView,
+      [kCalendarExpandedUiSettingKey]: nextView === kCalendarViewCalendar,
+    }));
   }, []);
 
   const [nowMs, setNowMs] = useState(() => Date.now());
@@ -306,7 +348,12 @@ export const CronCalendar = ({
     [scheduledJobs, nowMs],
   );
   const statusBySlotKey = useMemo(
-    () => mapRunStatusesToSlots({ slots: timeline.slots, bulkRunsByJobId: runsByJobId, nowMs }),
+    () =>
+      mapRunStatusesToSlots({
+        slots: timeline.slots,
+        bulkRunsByJobId: runsByJobId,
+        nowMs,
+      }),
     [timeline.slots, runsByJobId, nowMs],
   );
   const jobById = useMemo(
@@ -320,14 +367,21 @@ export const CronCalendar = ({
   );
   const latestRunByJobId = useMemo(
     () =>
-      Object.entries(runsByJobId || {}).reduce((accumulator, [jobId, runResult]) => {
-        const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];
-        const latest = entries
-          .filter((entry) => Number(entry?.ts || 0) > 0)
-          .sort((left, right) => Number(right?.ts || 0) - Number(left?.ts || 0))[0];
-        accumulator[jobId] = latest || null;
-        return accumulator;
-      }, {}),
+      Object.entries(runsByJobId || {}).reduce(
+        (accumulator, [jobId, runResult]) => {
+          const entries = Array.isArray(runResult?.entries)
+            ? runResult.entries
+            : [];
+          const latest = entries
+            .filter((entry) => Number(entry?.ts || 0) > 0)
+            .sort(
+              (left, right) => Number(right?.ts || 0) - Number(left?.ts || 0),
+            )[0];
+          accumulator[jobId] = latest || null;
+          return accumulator;
+        },
+        {},
+      ),
     [runsByJobId],
   );
   const runSummary7dByJobId = useMemo(
@@ -345,51 +399,72 @@ export const CronCalendar = ({
       if (!job || job.enabled === false) return;
       const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;
       if (isPastSlot) {
-        const slotRunTokens = getRunTotalTokens(runBySlotKey[slot.key] || {});
+        const slotRunTokens = getCronRunTotalTokens(runBySlotKey[slot.key] || {});
         if (slotRunTokens > 0) values.push(slotRunTokens);
         return;
       }
-      const projectedAvgTokens = Number(runSummary7dByJobId[slot.jobId]?.avgTokensPerRun || 0);
+      const projectedAvgTokens = Number(
+        runSummary7dByJobId[slot.jobId]?.avgTokensPerRun || 0,
+      );
       if (projectedAvgTokens > 0) values.push(projectedAvgTokens);
     });
     repeatingJobs.forEach((job) => {
       const jobId = String(job?.id || "");
-      const projectedAvgTokens = Number(runSummary7dByJobId[jobId]?.avgTokensPerRun || 0);
+      const projectedAvgTokens = Number(
+        runSummary7dByJobId[jobId]?.avgTokensPerRun || 0,
+      );
       if (projectedAvgTokens > 0) values.push(projectedAvgTokens);
     });
     return buildTierThresholds(values);
-  }, [jobById, nowMs, repeatingJobs, runBySlotKey, runSummary7dByJobId, timeline.slots]);
-  const getSlotTokenTier = useCallback((slot = null) => {
-    const jobId = String(slot?.jobId || "");
-    const job = jobById[jobId] || null;
-    const enabled = job?.enabled !== false;
-    const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;
-    if (isPastSlot) {
-      const slotRunTokens = getRunTotalTokens(runBySlotKey[String(slot?.key || "")] || {});
+  }, [
+    jobById,
+    nowMs,
+    repeatingJobs,
+    runBySlotKey,
+    runSummary7dByJobId,
+    timeline.slots,
+  ]);
+  const getSlotTokenTier = useCallback(
+    (slot = null) => {
+      const jobId = String(slot?.jobId || "");
+      const job = jobById[jobId] || null;
+      const enabled = job?.enabled !== false;
+      const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;
+      if (isPastSlot) {
+        const slotRunTokens = getCronRunTotalTokens(
+          runBySlotKey[String(slot?.key || "")] || {},
+        );
+        return classifyTokenTier({
+          enabled,
+          tokenValue: slotRunTokens,
+          thresholds: slotTierThresholds,
+        });
+      }
+      const projectedAvgTokens = Number(
+        runSummary7dByJobId[jobId]?.avgTokensPerRun || 0,
+      );
       return classifyTokenTier({
         enabled,
-        tokenValue: slotRunTokens,
+        tokenValue: projectedAvgTokens,
         thresholds: slotTierThresholds,
       });
-    }
-    const projectedAvgTokens = Number(runSummary7dByJobId[jobId]?.avgTokensPerRun || 0);
-    return classifyTokenTier({
-      enabled,
-      tokenValue: projectedAvgTokens,
-      thresholds: slotTierThresholds,
-    });
-  }, [jobById, nowMs, runBySlotKey, runSummary7dByJobId, slotTierThresholds]);
-  const getJobProjectedTier = useCallback((jobId = "") => {
-    const job = jobById[jobId] || null;
-    return classifyTokenTier({
-      enabled: job?.enabled !== false,
-      tokenValue: Number(runSummary7dByJobId[jobId]?.avgTokensPerRun || 0),
-      thresholds: slotTierThresholds,
-    });
-  }, [jobById, runSummary7dByJobId, slotTierThresholds]);
+    },
+    [jobById, nowMs, runBySlotKey, runSummary7dByJobId, slotTierThresholds],
+  );
+  const getJobProjectedTier = useCallback(
+    (jobId = "") => {
+      const job = jobById[jobId] || null;
+      return classifyTokenTier({
+        enabled: job?.enabled !== false,
+        tokenValue: Number(runSummary7dByJobId[jobId]?.avgTokensPerRun || 0),
+        thresholds: slotTierThresholds,
+      });
+    },
+    [jobById, runSummary7dByJobId, slotTierThresholds],
+  );
 
   const upcomingSlots = useMemo(
-    () => getUpcomingSlots({ slots: timeline.slots, nowMs }),
+    () => getUpcomingSlots({ slots: timeline.slots, nowMs, limit: 3 }),
     [timeline.slots, nowMs],
   );
 
@@ -418,7 +493,9 @@ export const CronCalendar = ({
   const renderCompactStrip = () => {
     return html`
       ${upcomingSlots.length === 0
-        ? html`<div class="text-xs text-gray-500 py-1">No upcoming jobs in the next 24 hours.</div>`
+        ? html`<div class="text-xs text-gray-500 py-1">
+            No upcoming jobs in the next 24 hours.
+          </div>`
         : html`
             <div class="cron-calendar-compact-strip">
               ${upcomingSlots.map((slot) => {
@@ -460,8 +537,12 @@ export const CronCalendar = ({
                 ? html`
                     <button
                       class="text-[11px] text-gray-500 hover:text-gray-300 self-center transition-colors"
-                      onClick=${toggleExpanded}
-                    >+${Math.max(0, totalUpcoming - upcomingSlots.length)} more this week</button>
+                      onClick=${() =>
+                        onChangeCalendarView(kCalendarViewCalendar)}
+                    >
+                      +${Math.max(0, totalUpcoming - upcomingSlots.length)} more
+                      this week
+                    </button>
                   `
                 : null}
             </div>
@@ -476,7 +557,9 @@ export const CronCalendar = ({
       </div>
 
       ${hourRows.length === 0
-        ? html`<div class="text-sm text-gray-500">No scheduled jobs in this rolling window.</div>`
+        ? html`<div class="text-sm text-gray-500">
+            No scheduled jobs in this rolling window.
+          </div>`
         : html`
             <div class="cron-calendar-grid-wrap">
               <div class="cron-calendar-grid-header">
@@ -493,34 +576,41 @@ export const CronCalendar = ({
                 )}
               </div>
               <div class="cron-calendar-grid-body">
-                ${hourRows.map((hourOfDay) => html`
-                  <div key=${hourOfDay} class="cron-calendar-grid-row">
-                    <div class="cron-calendar-hour-cell">${formatHourLabel(hourOfDay)}</div>
-                    ${timeline.days.map((day) => {
-                      const cellKey = buildCellKey(day.dayKey, hourOfDay);
-                      const cellSlots = slotsByCellKey[cellKey] || [];
-                      const visibleSlots = cellSlots.slice(0, 3);
-                      const overflowCount = Math.max(0, cellSlots.length - visibleSlots.length);
-                      return html`
-                        <div
-                          key=${cellKey}
-                          class=${`cron-calendar-grid-cell ${day.dayKey === todayDayKey ? "is-today" : ""}`}
-                        >
-                          ${visibleSlots.map((slot) => {
-                            const status = statusBySlotKey[slot.key] || "";
-                            const isPast = slot.scheduledAtMs <= nowMs;
-                            const tokenTier = getSlotTokenTier(slot);
-                            const tooltipText = buildJobTooltipText({
-                              jobName: slot.jobName,
-                              job: jobById[slot.jobId] || null,
-                              runSummary7d: runSummary7dByJobId[slot.jobId] || {},
-                              slotRun: runBySlotKey[slot.key] || null,
-                              latestRun: latestRunByJobId[slot.jobId],
-                              scheduledAtMs: slot.scheduledAtMs,
-                              scheduledStatus: status,
-                              nowMs,
-                            });
-                            return html`
+                ${hourRows.map(
+                  (hourOfDay) => html`
+                    <div key=${hourOfDay} class="cron-calendar-grid-row">
+                      <div class="cron-calendar-hour-cell">
+                        ${formatHourLabel(hourOfDay)}
+                      </div>
+                      ${timeline.days.map((day) => {
+                        const cellKey = buildCellKey(day.dayKey, hourOfDay);
+                        const cellSlots = slotsByCellKey[cellKey] || [];
+                        const visibleSlots = cellSlots.slice(0, 3);
+                        const overflowCount = Math.max(
+                          0,
+                          cellSlots.length - visibleSlots.length,
+                        );
+                        return html`
+                          <div
+                            key=${cellKey}
+                            class=${`cron-calendar-grid-cell ${day.dayKey === todayDayKey ? "is-today" : ""}`}
+                          >
+                            ${visibleSlots.map((slot) => {
+                              const status = statusBySlotKey[slot.key] || "";
+                              const isPast = slot.scheduledAtMs <= nowMs;
+                              const tokenTier = getSlotTokenTier(slot);
+                              const tooltipText = buildJobTooltipText({
+                                jobName: slot.jobName,
+                                job: jobById[slot.jobId] || null,
+                                runSummary7d:
+                                  runSummary7dByJobId[slot.jobId] || {},
+                                slotRun: runBySlotKey[slot.key] || null,
+                                latestRun: latestRunByJobId[slot.jobId],
+                                scheduledAtMs: slot.scheduledAtMs,
+                                scheduledStatus: status,
+                                nowMs,
+                              });
+                              return html`
                               <${Tooltip}
                                 text=${tooltipText}
                                 widthClass="w-72"
@@ -529,16 +619,22 @@ export const CronCalendar = ({
                               >
                                 <div
                                   key=${slot.key}
-                                  class=${`cron-calendar-slot-chip ${slotStateClassName({
-                                    isPast,
-                                    mappedStatus: status,
-                                    tokenTier,
-                                  })}`}
+                                  class=${`cron-calendar-slot-chip ${slotStateClassName(
+                                    {
+                                      isPast,
+                                      mappedStatus: status,
+                                      tokenTier,
+                                    },
+                                  )}`}
                                   role="button"
                                   tabindex="0"
                                   onClick=${() => onSelectJob(slot.jobId)}
                                   onKeyDown=${(event) => {
-                                    if (event.key !== "Enter" && event.key !== " ") return;
+                                    if (
+                                      event.key !== "Enter" &&
+                                      event.key !== " "
+                                    )
+                                      return;
                                     event.preventDefault();
                                     onSelectJob(slot.jobId);
                                   }}
@@ -547,19 +643,21 @@ export const CronCalendar = ({
                                 </div>
                               </${Tooltip}>
                             `;
-                          })}
-                          ${overflowCount > 0
-                            ? html`<div class="cron-calendar-slot-overflow">+${overflowCount} more</div>`
-                            : null}
-                        </div>
-                      `;
-                    })}
-                  </div>
-                `)}
+                            })}
+                            ${overflowCount > 0
+                              ? html`<div class="cron-calendar-slot-overflow">
+                                  +${overflowCount} more
+                                </div>`
+                              : null}
+                          </div>
+                        `;
+                      })}
+                    </div>
+                  `,
+                )}
               </div>
             </div>
           `}
-
       ${repeatingJobs.length > 0
         ? html`
             <div class="cron-calendar-repeating-strip">
@@ -586,16 +684,19 @@ export const CronCalendar = ({
                       triggerClassName="inline-flex max-w-full"
                     >
                       <div
-                        class=${`cron-calendar-repeating-pill ${slotStateClassName({
-                          isPast: false,
-                          mappedStatus: "",
-                          tokenTier: getJobProjectedTier(jobId),
-                        })}`}
+                        class=${`cron-calendar-repeating-pill ${slotStateClassName(
+                          {
+                            isPast: false,
+                            mappedStatus: "",
+                            tokenTier: getJobProjectedTier(jobId),
+                          },
+                        )}`}
                         role="button"
                         tabindex="0"
                         onClick=${() => onSelectJob(jobId)}
                         onKeyDown=${(event) => {
-                          if (event.key !== "Enter" && event.key !== " ") return;
+                          if (event.key !== "Enter" && event.key !== " ")
+                            return;
                           event.preventDefault();
                           onSelectJob(jobId);
                         }}
@@ -605,9 +706,11 @@ export const CronCalendar = ({
                           ${formatCronScheduleLabel(job.schedule, {
                             includeTimeZoneWhenDifferent: true,
                           })}
-                          ${avgTokensPerRun > 0
-                            ? ` | avg ${formatTokenCount(avgTokensPerRun)} tk`
-                            : ""}
+                          ${
+                            avgTokensPerRun > 0
+                              ? ` | avg ${formatTokenCount(avgTokensPerRun)} tk`
+                              : ""
+                          }
                         </span>
                       </div>
                     </${Tooltip}>
@@ -622,24 +725,15 @@ export const CronCalendar = ({
 
   return html`
     <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
-      <div class="flex items-center justify-between gap-2">
-        <div class="flex items-center gap-2">
-          <h3 class="card-label cron-calendar-title">
-            ${expanded ? "Rolling 7-Day Schedule" : "Upcoming (next 24h)"}
-          </h3>
-          ${!expanded && repeatingJobs.length > 0
-            ? html`<span class="text-[11px] text-gray-500">+ ${repeatingJobs.length} repeating</span>`
-            : null}
-        </div>
-        <${ActionButton}
-          onClick=${toggleExpanded}
-          tone="neutral"
-          size="sm"
-          idleLabel=${expanded ? "Collapse" : "Show full week"}
+      <div class="flex items-center gap-2">
+        <${SegmentedControl}
+          options=${kCalendarViewOptions}
+          value=${calendarView}
+          onChange=${onChangeCalendarView}
         />
       </div>
 
-      ${expanded ? renderFullGrid() : renderCompactStrip()}
+      ${isCalendarView ? renderFullGrid() : renderCompactStrip()}
     </section>
   `;
 };