@chrysb/alphaclaw 0.7.0-beta.0 → 0.7.0-beta.1

package/lib/public/css/cron.css

@@ -344,7 +344,6 @@
 .cron-calendar-legend-pill {
   font-size: 10px;
   line-height: 1;
-  border: 1px solid transparent;
   border-radius: 999px;
   padding: 4px 7px;
 }
@@ -353,13 +352,13 @@
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: auto;
-  background: rgba(255, 255, 255, 0.01);
+  background: var(--bg-surface);
 }
 
 .cron-calendar-grid-header,
 .cron-calendar-grid-row {
   display: grid;
-  grid-template-columns: 80px repeat(7, minmax(80px, 1fr));
+  grid-template-columns: 72px repeat(7, minmax(80px, 1fr));
 }
 
 .cron-calendar-day-header {
@@ -395,10 +394,67 @@
   z-index: 3;
 }
 
+.cron-calendar-grid-corner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cron-calendar-expand-btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cron-calendar-expand-btn:hover {
+  color: var(--text);
+  border-color: rgba(148, 163, 184, 0.5);
+}
+
 .cron-calendar-grid-wrap {
   position: relative;
 }
 
+.cron-calendar-lightbox-panel {
+  width: min(96vw, 1200px);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-sidebar);
+}
+
+.cron-calendar-lightbox-close {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cron-calendar-lightbox-close:hover {
+  color: var(--text);
+  border-color: rgba(148, 163, 184, 0.5);
+}
+
+.cron-calendar-lightbox-body {
+  min-height: 0;
+  overflow: auto;
+}
+
 .cron-calendar-grid-row .cron-calendar-hour-cell {
   box-shadow: 1px 0 0 var(--border);
 }
@@ -493,31 +549,50 @@
   box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.45);
 }
 
-.cron-calendar-compact-strip {
+.cron-calendar-compact-list {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 6px;
-  align-items: center;
 }
 
-.cron-calendar-compact-chip {
+.cron-calendar-compact-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 8px;
+  padding: 7px 9px;
+  text-align: left;
   font-size: 11px;
   line-height: 1.2;
-  border: 1px solid rgba(148, 163, 184, 0.32);
-  border-radius: 7px;
-  padding: 4px 8px;
+}
+
+.cron-calendar-compact-main {
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  max-width: 260px;
-  cursor: pointer;
+  gap: 8px;
 }
 
 .cron-calendar-compact-time {
   font-size: 10px;
   font-family: var(--font-mono, monospace);
-  opacity: 0.7;
+  opacity: 0.72;
+  white-space: nowrap;
+}
+
+.cron-calendar-compact-name {
+  color: var(--text);
+}
+
+.cron-calendar-compact-estimate {
+  font-size: 10px;
+  color: var(--text);
+  font-weight: 500;
   white-space: nowrap;
+  text-align: right;
 }
 
 .cron-runs-trend-bars {

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

@@ -6,8 +6,9 @@ import {
   useState,
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { SegmentedControl } from "../segmented-control.js";
 import { Tooltip } from "../tooltip.js";
+import { ModalShell } from "../modal-shell.js";
+import { CloseIcon, FullscreenLineIcon } from "../icons.js";
 import {
   formatCost,
   formatCronScheduleLabel,
@@ -15,7 +16,6 @@ import {
   getCronRunEstimatedCost,
   getCronRunTotalTokens,
 } from "./cron-helpers.js";
-import { readUiSettings, updateUiSettings } from "../../lib/ui-settings.js";
 import {
   classifyRepeatingJobs,
   expandJobsToRollingSlots,
@@ -70,9 +70,6 @@ const slotStateClassName = ({
 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
     >
@@ -89,14 +86,6 @@ const renderLegend = () => html`
 `;
 
 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";
@@ -304,30 +293,8 @@ export const CronCalendar = ({
   runsByJobId = {},
   onSelectJob = () => {},
 }) => {
-  const [calendarView, setCalendarView] = useState(() => {
-    const settings = readUiSettings();
-    const savedView = String(
-      settings?.[kCalendarViewUiSettingKey] || "",
-    ).trim();
-    if (savedView === kCalendarViewCalendar) return kCalendarViewCalendar;
-    if (savedView === kCalendarViewUpcoming) return kCalendarViewUpcoming;
-    return settings[kCalendarExpandedUiSettingKey] === true
-      ? kCalendarViewCalendar
-      : kCalendarViewUpcoming;
-  });
-  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 [calendarLightboxOpen, setCalendarLightboxOpen] = useState(false);
+  const [showNoisyUpcoming, setShowNoisyUpcoming] = useState(false);
 
   const [nowMs, setNowMs] = useState(() => Date.now());
   useEffect(() => {
@@ -463,10 +430,34 @@ export const CronCalendar = ({
     [jobById, runSummary7dByJobId, slotTierThresholds],
   );
 
-  const upcomingSlots = useMemo(
+  const upcomingSlotsPreview = useMemo(
     () => getUpcomingSlots({ slots: timeline.slots, nowMs, limit: 3 }),
     [timeline.slots, nowMs],
   );
+  const noisyUpcomingItems = useMemo(() => {
+    const windowEndMs = nowMs + 24 * 60 * 60 * 1000;
+    return repeatingJobs
+      .map((job) => {
+        const jobId = String(job?.id || "");
+        const nextRunAtMs = Number(job?.state?.nextRunAtMs || 0);
+        if (!jobId || !Number.isFinite(nextRunAtMs) || nextRunAtMs <= nowMs) return null;
+        if (nextRunAtMs > windowEndMs) return null;
+        return {
+          key: `noisy:${jobId}:${nextRunAtMs}`,
+          jobId,
+          jobName: String(job?.name || jobId),
+          scheduledAtMs: nextRunAtMs,
+        };
+      })
+      .filter(Boolean)
+      .sort((left, right) => left.scheduledAtMs - right.scheduledAtMs);
+  }, [repeatingJobs, nowMs]);
+  const displayedUpcomingItems = useMemo(() => {
+    if (!showNoisyUpcoming) return upcomingSlotsPreview;
+    return [...upcomingSlotsPreview, ...noisyUpcomingItems].sort(
+      (left, right) => Number(left?.scheduledAtMs || 0) - Number(right?.scheduledAtMs || 0),
+    );
+  }, [noisyUpcomingItems, showNoisyUpcoming, upcomingSlotsPreview]);
 
   const hourRows = useMemo(() => {
     const uniqueHours = new Set(timeline.slots.map((slot) => slot.hourOfDay));
@@ -485,77 +476,92 @@ export const CronCalendar = ({
     [timeline.slots],
   );
 
-  const totalUpcoming = useMemo(
-    () => timeline.slots.filter((slot) => slot.scheduledAtMs > nowMs).length,
-    [timeline.slots, nowMs],
-  );
-
   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="cron-calendar-compact-strip">
-              ${upcomingSlots.map((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,
-                  nowMs,
-                });
-                return html`
-                  <${Tooltip}
-                    text=${tooltipText}
-                    widthClass="w-72"
-                    tooltipClassName="whitespace-pre-line"
-                    triggerClassName="inline-flex max-w-full"
-                  >
-                    <div
-                      key=${slot.key}
-                      class="cron-calendar-compact-chip cron-calendar-slot-tier-unknown cron-calendar-slot-upcoming"
-                      role="button"
-                      tabindex="0"
-                      onClick=${() => onSelectJob(slot.jobId)}
-                      onKeyDown=${(event) => {
-                        if (event.key !== "Enter" && event.key !== " ") return;
-                        event.preventDefault();
-                        onSelectJob(slot.jobId);
-                      }}
-                    >
-                      <span class="cron-calendar-compact-time">${formatUpcomingTime(slot.scheduledAtMs)}</span>
-                      <span class="truncate">${slot.jobName}</span>
-                    </div>
-                  </${Tooltip}>
-                `;
-              })}
-              ${Math.max(0, totalUpcoming - upcomingSlots.length) > 0
-                ? html`
-                    <button
-                      class="text-[11px] text-gray-500 hover:text-gray-300 self-center transition-colors"
-                      onClick=${() =>
-                        onChangeCalendarView(kCalendarViewCalendar)}
+      <div class="space-y-2">
+        ${displayedUpcomingItems.length === 0
+          ? 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-list">
+                ${displayedUpcomingItems.map((slot) => {
+                  const summary7d = runSummary7dByJobId[slot.jobId] || {};
+                  const avgTokensPerRun = Number(summary7d?.avgTokensPerRun || 0);
+                  const avgCostPerRun = Number(summary7d?.avgCostPerRun || 0);
+                  const estimateLabel =
+                    avgTokensPerRun > 0 || avgCostPerRun > 0
+                      ? `Est. ${avgTokensPerRun > 0 ? `${formatTokenCount(avgTokensPerRun)} tk` : "— tk"} · ${avgCostPerRun > 0 ? formatCost(avgCostPerRun) : "—"}`
+                      : "Est. —";
+                  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,
+                    nowMs,
+                  });
+                  return html`
+                    <${Tooltip}
+                      text=${tooltipText}
+                      widthClass="w-72"
+                      tooltipClassName="whitespace-pre-line"
+                      triggerClassName="block w-full"
                     >
-                      +${Math.max(0, totalUpcoming - upcomingSlots.length)} more
-                      this week
-                    </button>
-                  `
-                : null}
-            </div>
-          `}
+                      <button
+                        key=${slot.key}
+                        type="button"
+                        class=${`cron-calendar-compact-row ${slotStateClassName({
+                          isPast: false,
+                          mappedStatus: "",
+                          tokenTier: getJobProjectedTier(slot.jobId),
+                        })}`}
+                        onClick=${() => onSelectJob(slot.jobId)}
+                      >
+                        <span class="cron-calendar-compact-main">
+                          <span class="cron-calendar-compact-time"
+                            >${formatUpcomingTime(slot.scheduledAtMs)}</span
+                          >
+                          <span class="cron-calendar-compact-name truncate"
+                            >${slot.jobName}</span
+                          >
+                        </span>
+                        <span class="cron-calendar-compact-estimate"
+                          >${estimateLabel}</span
+                        >
+                      </button>
+                    </${Tooltip}>
+                  `;
+                })}
+              </div>
+            `}
+        <div class="flex items-center justify-between mt-2">
+          ${
+            noisyUpcomingItems.length > 0
+              ? html`
+                  <button
+                    type="button"
+                    class="ac-btn-ghost text-xs px-2.5 py-1 rounded-lg"
+                    onClick=${() => setShowNoisyUpcoming((value) => !value)}
+                  >
+                    ${
+                      showNoisyUpcoming
+                        ? "Show fewer"
+                        : `+${noisyUpcomingItems.length} noisy runs`
+                    }
+                  </button>
+                `
+              : html`<span></span>`
+          }
+          <${renderLegend} />
+        </div>
+      </div>
     `;
   };
 
   const renderFullGrid = () => html`
     <div class="space-y-3">
-      <div class="flex justify-end">
-        <${renderLegend} />
-      </div>
-
       ${hourRows.length === 0
         ? html`<div class="text-sm text-gray-500">
             No scheduled jobs in this rolling window.
@@ -563,7 +569,17 @@ export const CronCalendar = ({
         : html`
             <div class="cron-calendar-grid-wrap">
               <div class="cron-calendar-grid-header">
-                <div class="cron-calendar-hour-cell"></div>
+                <div class="cron-calendar-hour-cell cron-calendar-grid-corner">
+                  <button
+                    type="button"
+                    class="cron-calendar-expand-btn"
+                    title="Expand calendar"
+                    aria-label="Expand calendar"
+                    onClick=${() => setCalendarLightboxOpen(true)}
+                  >
+                    <${FullscreenLineIcon} className="w-3.5 h-3.5" />
+                  </button>
+                </div>
                 ${timeline.days.map(
                   (day) => html`
                     <div
@@ -725,15 +741,41 @@ export const CronCalendar = ({
 
   return html`
     <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
-      <div class="flex items-center gap-2">
-        <${SegmentedControl}
-          options=${kCalendarViewOptions}
-          value=${calendarView}
-          onChange=${onChangeCalendarView}
-        />
+      <div class="flex items-center justify-between gap-2">
+        <h3 class="card-label card-label-bright">Up next</h3>
+        <button
+          type="button"
+          class="ac-btn-secondary text-xs px-3 py-1.5 rounded-lg"
+          onClick=${() => setCalendarLightboxOpen(true)}
+        >
+          Open calendar
+        </button>
       </div>
 
-      ${isCalendarView ? renderFullGrid() : renderCompactStrip()}
+      ${renderCompactStrip()}
     </section>
+    <${ModalShell}
+      visible=${calendarLightboxOpen}
+      onClose=${() => setCalendarLightboxOpen(false)}
+      panelClassName="cron-calendar-lightbox-panel"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <h3 class="card-label cron-calendar-title">Calendar</h3>
+        <button
+          type="button"
+          class="cron-calendar-lightbox-close"
+          onClick=${() => setCalendarLightboxOpen(false)}
+          aria-label="Close expanded calendar"
+        >
+          <${CloseIcon} className="w-4 h-4" />
+        </button>
+      </div>
+      <div class="flex items-center justify-center">
+        <${renderLegend} />
+      </div>
+      <div class="cron-calendar-lightbox-body">
+        ${renderFullGrid()}
+      </div>
+    </${ModalShell}>
   `;
 };

package/lib/public/js/components/icons.js

@@ -428,3 +428,14 @@ export const ErrorWarningLineIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const FullscreenLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
+  </svg>
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.7.0-beta.0",
+  "version": "0.7.0-beta.1",
   "publishConfig": {
     "access": "public"
   },