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

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

@@ -3,13 +3,13 @@ import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   buildCronOptimizationWarnings,
-  formatRelativeMs,
   formatTokenCount,
   getNextScheduledRunAcrossJobs,
 } from "./cron-helpers.js";
 import { CronCalendar } from "./cron-calendar.js";
 import { CronRunsTrendCard } from "./cron-runs-trend-card.js";
 import { CronRunHistoryPanel } from "./cron-run-history-panel.js";
+import { CronInsightsPanel } from "./cron-insights-panel.js";
 import { SummaryStatCard } from "../summary-stat-card.js";
 import { ErrorWarningLineIcon } from "../icons.js";
 
@@ -17,6 +17,7 @@ const html = htm.bind(h);
 const kRecentRunFetchLimit = 100;
 const kRecentRunRowsLimit = 20;
 const kRecentRunCollapseThreshold = 5;
+const kTrendRange24h = "24h";
 const kTrendRange7d = "7d";
 const kTrendRange30d = "30d";
 const kTrendQueryStartKey = "trendStart";
@@ -136,16 +137,21 @@ const readTrendFilterFromHash = () => {
   const { params } = getHashRouteParts();
   const startMs = Number(params.get(kTrendQueryStartKey) || 0);
   const endMs = Number(params.get(kTrendQueryEndKey) || 0);
-  const range = String(params.get(kTrendQueryRangeKey) || kTrendRange7d);
+  const range = String(params.get(kTrendQueryRangeKey) || kTrendRange24h);
   const label = String(params.get(kTrendQueryLabelKey) || "");
-  const hasValidRange = range === kTrendRange7d || range === kTrendRange30d;
-  if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) {
+  const hasValidRange =
+    range === kTrendRange24h || range === kTrendRange7d || range === kTrendRange30d;
+  if (
+    !Number.isFinite(startMs) ||
+    !Number.isFinite(endMs) ||
+    endMs <= startMs
+  ) {
     return null;
   }
   return {
     startMs,
     endMs,
-    range: hasValidRange ? range : kTrendRange7d,
+    range: hasValidRange ? range : kTrendRange24h,
     label: label || "selected period",
   };
 };
@@ -162,14 +168,17 @@ const writeTrendFilterToHash = (filterValue = null) => {
     params.set(kTrendQueryEndKey, String(Number(filterValue.endMs || 0)));
     params.set(
       kTrendQueryRangeKey,
-      filterValue.range === kTrendRange30d ? kTrendRange30d : kTrendRange7d,
+      filterValue.range === kTrendRange30d
+        ? kTrendRange30d
+        : filterValue.range === kTrendRange7d
+          ? kTrendRange7d
+          : kTrendRange24h,
     );
     params.set(kTrendQueryLabelKey, String(filterValue.label || ""));
   }
   const nextQuery = params.toString();
   const nextHash = nextQuery ? `#${pathPart}?${nextQuery}` : `#${pathPart}`;
-  const nextUrl =
-    `${window.location.pathname}${window.location.search}${nextHash}`;
+  const nextUrl = `${window.location.pathname}${window.location.search}${nextHash}`;
   window.history.replaceState(window.history.state, "", nextUrl);
 };
 
@@ -195,12 +204,20 @@ export const CronOverview = ({
     if (!selectedTrendBucketFilter) return recentRuns;
     const startMs = Number(selectedTrendBucketFilter?.startMs || 0);
     const endMs = Number(selectedTrendBucketFilter?.endMs || 0);
-    if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) {
+    if (
+      !Number.isFinite(startMs) ||
+      !Number.isFinite(endMs) ||
+      endMs <= startMs
+    ) {
       return recentRuns;
     }
     return recentRuns.filter((entry) => {
       const timestampMs = Number(entry?.ts || 0);
-      return Number.isFinite(timestampMs) && timestampMs >= startMs && timestampMs < endMs;
+      return (
+        Number.isFinite(timestampMs) &&
+        timestampMs >= startMs &&
+        timestampMs < endMs
+      );
     });
   }, [recentRuns, selectedTrendBucketFilter]);
   const filteredRecentRuns = useMemo(
@@ -218,9 +235,12 @@ export const CronOverview = ({
     () => buildCollapsedRunRows(filteredRecentRuns),
     [filteredRecentRuns],
   );
-  const initialTrendRange = selectedTrendBucketFilter?.range === kTrendRange30d
-    ? kTrendRange30d
-    : kTrendRange7d;
+  const initialTrendRange =
+    selectedTrendBucketFilter?.range === kTrendRange30d
+      ? kTrendRange30d
+      : selectedTrendBucketFilter?.range === kTrendRange7d
+        ? kTrendRange7d
+        : kTrendRange24h;
   useEffect(() => {
     writeTrendFilterToHash(selectedTrendBucketFilter);
   }, [selectedTrendBucketFilter]);
@@ -228,7 +248,7 @@ export const CronOverview = ({
   return html`
     <div class="cron-detail-scroll">
       <div class="cron-detail-content">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
           <${SummaryStatCard}
             title="Total jobs"
             value=${jobs.length}
@@ -244,11 +264,6 @@ export const CronOverview = ({
             value=${disabledCount}
             monospace=${true}
           />
-          <${SummaryStatCard}
-            title="Next scheduled run"
-            value=${nextRunMs ? formatRelativeMs(nextRunMs) : "—"}
-            valueClassName="text-sm font-medium text-gray-200 leading-snug"
-          />
         </div>
 
         <section class="bg-surface border border-border rounded-xl px-4 py-3">
@@ -320,6 +335,12 @@ export const CronOverview = ({
           onBucketFilterChange=${setSelectedTrendBucketFilter}
         />
 
+        <${CronInsightsPanel}
+          jobs=${jobs}
+          bulkRunsByJobId=${bulkRunsByJobId}
+          onSelectJob=${onSelectJob}
+        />
+
         <${CronRunHistoryPanel}
           entryCountLabel=${`${formatTokenCount(filteredRecentRuns.length)} entries`}
           primaryFilterOptions=${kRunStatusFilterOptions}

package/lib/public/js/components/cron-tab/cron-prompt-editor.js

@@ -0,0 +1,173 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { EditorSurface } from "../file-viewer/editor-surface.js";
+import { countTextLines, shouldUseSimpleEditorMode } from "../file-viewer/utils.js";
+import {
+  kLargeFileSimpleEditorCharThreshold,
+  kLargeFileSimpleEditorLineThreshold,
+} from "../file-viewer/constants.js";
+import { useEditorLineNumberSync } from "../file-viewer/use-editor-line-number-sync.js";
+import { highlightEditorLines } from "../../lib/syntax-highlighters/index.js";
+import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
+
+const html = htm.bind(h);
+const kCronPromptEditorHeightUiSettingKey = "cronPromptEditorHeightPx";
+const kCronPromptEditorDefaultHeightPx = 280;
+const kCronPromptEditorMinHeightPx = 180;
+
+const clampPromptEditorHeight = (value) => {
+  const parsed = Number(value);
+  const normalized = Number.isFinite(parsed)
+    ? Math.round(parsed)
+    : kCronPromptEditorDefaultHeightPx;
+  return Math.max(kCronPromptEditorMinHeightPx, normalized);
+};
+
+const readCssHeightPx = (element) => {
+  if (!element) return 0;
+  const computedHeight = Number.parseFloat(
+    window.getComputedStyle(element).height || "0",
+  );
+  return Number.isFinite(computedHeight) ? computedHeight : 0;
+};
+
+export const CronPromptEditor = ({
+  promptValue = "",
+  savedPromptValue = "",
+  onChangePrompt = () => {},
+  onSaveChanges = () => {},
+}) => {
+  const promptEditorShellRef = useRef(null);
+  const editorTextareaRef = useRef(null);
+  const editorLineNumbersRef = useRef(null);
+  const editorLineNumberRowRefs = useRef([]);
+  const editorHighlightRef = useRef(null);
+  const editorHighlightLineRefs = useRef([]);
+  const [promptEditorHeightPx, setPromptEditorHeightPx] = useState(() => {
+    const settings = readUiSettings();
+    return clampPromptEditorHeight(
+      settings?.[kCronPromptEditorHeightUiSettingKey],
+    );
+  });
+
+  const lineCount = countTextLines(promptValue);
+  const shouldUseHighlightedEditor = !shouldUseSimpleEditorMode({
+    contentLength: promptValue.length,
+    lineCount,
+    charThreshold: kLargeFileSimpleEditorCharThreshold,
+    lineThreshold: kLargeFileSimpleEditorLineThreshold,
+  });
+  const highlightedEditorLines = useMemo(
+    () =>
+      shouldUseHighlightedEditor
+        ? highlightEditorLines(promptValue, "markdown")
+        : [],
+    [promptValue, shouldUseHighlightedEditor],
+  );
+  const editorLineCount = Math.max(
+    lineCount,
+    Array.isArray(highlightedEditorLines) ? highlightedEditorLines.length : 0,
+  );
+  const editorLineNumbers = useMemo(
+    () => Array.from({ length: editorLineCount }, (_, index) => index + 1),
+    [editorLineCount],
+  );
+  const isDirty = promptValue !== savedPromptValue;
+
+  useEditorLineNumberSync({
+    enabled: shouldUseHighlightedEditor,
+    syncKey: `${promptValue.length}:${highlightedEditorLines.length}`,
+    editorLineNumberRowRefs,
+    editorHighlightLineRefs,
+  });
+
+  const handleEditorScroll = (event) => {
+    const scrollTop = event.currentTarget.scrollTop;
+    if (editorLineNumbersRef.current)
+      editorLineNumbersRef.current.scrollTop = scrollTop;
+    if (editorHighlightRef.current) {
+      editorHighlightRef.current.scrollTop = scrollTop;
+    }
+  };
+
+  const handleEditorKeyDown = (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+      event.preventDefault();
+      onSaveChanges();
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      const textarea = editorTextareaRef.current;
+      if (!textarea) return;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const nextValue = `${promptValue.slice(0, start)}  ${promptValue.slice(end)}`;
+      onChangePrompt(nextValue);
+      window.requestAnimationFrame(() => {
+        textarea.selectionStart = start + 2;
+        textarea.selectionEnd = start + 2;
+      });
+    }
+  };
+
+  useEffect(() => {
+    const shellElement = promptEditorShellRef.current;
+    if (!shellElement || typeof ResizeObserver === "undefined") return () => {};
+
+    let saveTimer = null;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries?.[0];
+      const nextHeight = clampPromptEditorHeight(readCssHeightPx(entry?.target));
+      setPromptEditorHeightPx((currentValue) =>
+        Math.abs(currentValue - nextHeight) >= 1 ? nextHeight : currentValue,
+      );
+      if (saveTimer) window.clearTimeout(saveTimer);
+      saveTimer = window.setTimeout(() => {
+        const settings = readUiSettings();
+        settings[kCronPromptEditorHeightUiSettingKey] = nextHeight;
+        writeUiSettings(settings);
+      }, 120);
+    });
+    observer.observe(shellElement);
+    return () => {
+      observer.disconnect();
+      if (saveTimer) window.clearTimeout(saveTimer);
+    };
+  }, []);
+
+  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">
+        <h3 class="card-label inline-flex items-center gap-1.5">
+          Prompt
+          ${isDirty ? html`<span class="file-viewer-dirty-dot"></span>` : null}
+        </h3>
+      </div>
+      <div
+        class="cron-prompt-editor-shell"
+        ref=${promptEditorShellRef}
+        style=${{ height: `${promptEditorHeightPx}px` }}
+      >
+        <${EditorSurface}
+          editorShellClassName="file-viewer-editor-shell"
+          editorLineNumbers=${editorLineNumbers}
+          editorLineNumbersRef=${editorLineNumbersRef}
+          editorLineNumberRowRefs=${editorLineNumberRowRefs}
+          shouldUseHighlightedEditor=${shouldUseHighlightedEditor}
+          highlightedEditorLines=${highlightedEditorLines}
+          editorHighlightRef=${editorHighlightRef}
+          editorHighlightLineRefs=${editorHighlightLineRefs}
+          editorTextareaRef=${editorTextareaRef}
+          renderContent=${promptValue}
+          handleContentInput=${(event) => onChangePrompt(event.target.value)}
+          handleEditorKeyDown=${handleEditorKeyDown}
+          handleEditorScroll=${handleEditorScroll}
+          handleEditorSelectionChange=${() => {}}
+          isEditBlocked=${false}
+          isPreviewOnly=${false}
+        />
+      </div>
+    </section>
+  `;
+};

package/lib/public/js/components/cron-tab/cron-run-history-panel.js

@@ -5,7 +5,12 @@ import {
   formatDurationCompactMs,
   formatLocaleDateTimeWithTodayTime,
 } from "../../lib/format.js";
-import { formatCost, formatTokenCount } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 
 const html = htm.bind(h);
 const runStatusClassName = (status = "") => {
@@ -17,16 +22,16 @@ const runStatusClassName = (status = "") => {
   if (normalized === "skipped") return "text-yellow-300";
   return "text-gray-400";
 };
-const runDeliveryLabel = (run) => String(run?.deliveryStatus || "not-requested");
-const getRunEstimatedCost = (runEntry = {}) => {
-  const parsed = Number(runEntry?.estimatedCost);
-  return Number.isFinite(parsed) ? parsed : null;
-};
+const runDeliveryLabel = (run) =>
+  String(run?.deliveryStatus || "not-requested");
 const formatOverviewTimestamp = (timestampMs) =>
   formatLocaleDateTimeWithTodayTime(timestampMs, {
     fallback: "—",
     valueIsEpochMs: true,
-  }).replace(/\s([AP])M\b/g, (_, marker) => `${String(marker || "").toLowerCase()}m`);
+  }).replace(
+    /\s([AP])M\b/g,
+    (_, marker) => `${String(marker || "").toLowerCase()}m`,
+  );
 const formatDetailTimestamp = (timestampMs) =>
   formatLocaleDateTimeWithTodayTime(timestampMs, {
     fallback: "—",
@@ -36,11 +41,7 @@ const formatRowTimestamp = (timestampMs, variant = "overview") =>
   variant === "detail"
     ? formatDetailTimestamp(timestampMs)
     : formatOverviewTimestamp(timestampMs);
-const renderCollapsedGroupRow = ({
-  row,
-  rowIndex,
-  onSelectJob = () => {},
-}) => {
+const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
   const statusSummary = Object.entries(row.statusCounts || {})
     .map(([status, count]) => `${status}: ${count}`)
     .join(" • ");
@@ -52,17 +53,10 @@ const renderCollapsedGroupRow = ({
     >
       <summary class="ac-history-summary">
         <div class="ac-history-summary-row">
-          <span
-            class="inline-flex items-center gap-2 min-w-0"
-          >
-            <span
-              class="ac-history-toggle shrink-0"
-              aria-hidden="true"
-              >▸</span
-            >
+          <span class="inline-flex items-center gap-2 min-w-0">
+            <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
             <span class="truncate text-xs text-gray-300">
-              ${row.jobName} -
-              ${formatTokenCount(row.count)} runs -
+              ${row.jobName} - ${formatTokenCount(row.count)} runs -
               ${timeRangeLabel}
             </span>
           </span>
@@ -70,12 +64,10 @@ const renderCollapsedGroupRow = ({
       </summary>
       <div class="ac-history-body space-y-2 text-xs">
         <div class="text-gray-500">
-          ${formatTokenCount(row.count)} consecutive runs
-          collapsed (${timeRangeLabel})
-        </div>
-        <div class="text-gray-500">
-          Statuses: ${statusSummary}
+          ${formatTokenCount(row.count)} consecutive runs collapsed
+          (${timeRangeLabel})
         </div>
+        <div class="text-gray-500">Statuses: ${statusSummary}</div>
         ${row?.jobId
           ? html`
               <div>
@@ -103,10 +95,14 @@ const renderEntryRow = ({
   const runEntry = row?.entry || row || {};
   const runUsage = runEntry?.usage || {};
   const runStatus = String(runEntry?.status || "unknown");
-  const runInputTokens = Number(runUsage?.input_tokens ?? runUsage?.inputTokens ?? 0);
-  const runOutputTokens = Number(runUsage?.output_tokens ?? runUsage?.outputTokens ?? 0);
-  const runTokens = Number(runUsage?.total_tokens ?? runUsage?.totalTokens ?? 0);
-  const runEstimatedCost = getRunEstimatedCost(runEntry);
+  const runInputTokens = Number(
+    runUsage?.input_tokens ?? runUsage?.inputTokens ?? 0,
+  );
+  const runOutputTokens = Number(
+    runUsage?.output_tokens ?? runUsage?.outputTokens ?? 0,
+  );
+  const runTokens = getCronRunTotalTokens(runEntry);
+  const runEstimatedCost = getCronRunEstimatedCost(runEntry);
   const runTitle = String(runEntry?.jobName || "").trim();
   const hasRunTitle = runTitle.length > 0;
   const isDetail = variant === "detail";
@@ -117,14 +113,8 @@ const renderEntryRow = ({
     >
       <summary class="ac-history-summary">
         <div class="ac-history-summary-row">
-          <span
-            class="inline-flex items-center gap-2 min-w-0"
-          >
-            <span
-              class="ac-history-toggle shrink-0"
-              aria-hidden="true"
-              >▸</span
-            >
+          <span class="inline-flex items-center gap-2 min-w-0">
+            <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
             ${isDetail
               ? html`
                   <span class="truncate text-xs text-gray-300">
@@ -134,7 +124,9 @@ const renderEntryRow = ({
               : hasRunTitle
                 ? html`
                     <span class="inline-flex items-center gap-2 min-w-0">
-                      <span class="truncate text-xs text-gray-300">${runTitle}</span>
+                      <span class="truncate text-xs text-gray-300"
+                        >${runTitle}</span
+                      >
                       <span class="text-xs text-gray-500 shrink-0">
                         ${formatRowTimestamp(runEntry.ts, variant)}
                       </span>
@@ -147,17 +139,21 @@ const renderEntryRow = ({
                     </span>
                   `}
           </span>
-          <span
-            class="inline-flex items-center gap-3 shrink-0 text-xs"
-          >
+          <span class="inline-flex items-center gap-3 shrink-0 text-xs">
             <span class=${runStatusClassName(runStatus)}>${runStatus}</span>
-            <span class="text-gray-400">${formatDurationCompactMs(runEntry.durationMs)}</span>
+            <span class="text-gray-400"
+              >${formatDurationCompactMs(runEntry.durationMs)}</span
+            >
             <span class="text-gray-400">${formatTokenCount(runTokens)} tk</span>
             ${isDetail
-              ? html`<span class="text-gray-500">${runDeliveryLabel(runEntry)}</span>`
+              ? html`<span class="text-gray-500"
+                  >${runDeliveryLabel(runEntry)}</span
+                >`
               : html`
                   <span class="text-gray-500"
-                    >${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}</span
+                    >${runEstimatedCost == null
+                      ? "—"
+                      : `~${formatCost(runEstimatedCost)}`}</span
                   >
                 `}
           </span>
@@ -165,36 +161,50 @@ const renderEntryRow = ({
       </summary>
       <div class="ac-history-body space-y-2 text-xs">
         ${runEntry.summary
-          ? html`<div><span class="text-gray-500">Summary:</span> ${runEntry.summary}</div>`
+          ? html`<div>
+              <span class="text-gray-500">Summary:</span> ${runEntry.summary}
+            </div>`
           : null}
         ${runEntry.error
-          ? html`<div class="text-red-300"><span class="text-gray-500">Error:</span> ${runEntry.error}</div>`
+          ? html`<div class="text-red-300">
+              <span class="text-gray-500">Error:</span> ${runEntry.error}
+            </div>`
           : null}
         <div class="ac-surface-inset rounded-lg p-2.5 space-y-1.5">
           <div class="text-gray-500">
-            Model: 
-            <span class="text-gray-300 font-mono">${runEntry.model || "—"}</span>
+            Model:
+            <span class="text-gray-300 font-mono"
+              >${runEntry.model || "—"}</span
+            >
           </div>
           <div class="text-gray-500">
-            Session: 
-            <span class="text-gray-300 font-mono">${runEntry.sessionKey || "—"}</span>
+            Session:
+            <span class="text-gray-300 font-mono"
+              >${runEntry.sessionKey || "—"}</span
+            >
           </div>
           <div class="text-gray-500">
-            Tokens in: 
-            <span class="text-gray-300">${formatTokenCount(runInputTokens)}</span>
+            Tokens in:
+            <span class="text-gray-300"
+              >${formatTokenCount(runInputTokens)}</span
+            >
           </div>
           <div class="text-gray-500">
-            Tokens out: 
-            <span class="text-gray-300">${formatTokenCount(runOutputTokens)}</span>
+            Tokens out:
+            <span class="text-gray-300"
+              >${formatTokenCount(runOutputTokens)}</span
+            >
           </div>
           <div class="text-gray-500">
-            Total tokens: 
+            Total tokens:
             <span class="text-gray-300">${formatTokenCount(runTokens)}</span>
           </div>
           <div class="text-gray-500">
-            Total cost: 
+            Total cost:
             <span class="text-gray-300">
-              ${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}
+              ${runEstimatedCost == null
+                ? "—"
+                : `~${formatCost(runEstimatedCost)}`}
             </span>
           </div>
         </div>
@@ -236,7 +246,7 @@ export const CronRunHistoryPanel = ({
   <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
     <div class="flex items-start justify-between gap-3">
       <div class="inline-flex items-center gap-3">
-        <h3 class="card-label card-label-bright">Run history</h3>
+        <h3 class="card-label card-label-bright">Recent runs</h3>
         <div class="text-xs text-gray-500">${entryCountLabel}</div>
       </div>
       <div class="shrink-0 inline-flex items-center gap-2">
@@ -245,7 +255,8 @@ export const CronRunHistoryPanel = ({
           value=${primaryFilterValue}
           onChange=${onChangePrimaryFilter}
         />
-        ${Array.isArray(secondaryFilterOptions) && secondaryFilterOptions.length > 0
+        ${Array.isArray(secondaryFilterOptions) &&
+        secondaryFilterOptions.length > 0
           ? html`
               <${SegmentedControl}
                 options=${secondaryFilterOptions}
@@ -288,7 +299,8 @@ export const CronRunHistoryPanel = ({
                     variant,
                     onSelectJob,
                     showOpenJobButton,
-                  }))}
+                  }),
+            )}
           </div>
         `}
     ${footer}

package/lib/public/js/components/cron-tab/cron-runs-trend-card.js

@@ -2,14 +2,16 @@ import { h } from "https://esm.sh/preact";
 import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { SegmentedControl } from "../segmented-control.js";
-import { formatCost } from "./cron-helpers.js";
+import { formatCost, getCronRunEstimatedCost } from "./cron-helpers.js";
 
 const html = htm.bind(h);
 
+const kRange24h = "24h";
 const kRange7d = "7d";
 const kRange30d = "30d";
 
 const kRanges = [
+  { label: "24h", value: kRange24h },
   { label: "7d", value: kRange7d },
   { label: "30d", value: kRange30d },
 ];
@@ -27,6 +29,18 @@ const addLocalDaysMs = (valueMs, dayCount = 0) => {
 };
 
 const getBucketConfig = (range = kRange7d) => {
+  if (range === kRange24h) {
+    return {
+      bucketCount: 24,
+      bucketMs: 60 * 60 * 1000,
+      formatLabel: (valueMs) =>
+        new Date(valueMs).toLocaleTimeString([], {
+          hour: "numeric",
+        }),
+      showLabel: (_, index, total) => index % 3 === 0 || index === total - 1,
+      alignToLocalDay: false,
+    };
+  }
   if (range === kRange30d) {
     return {
       bucketCount: 30,
@@ -50,25 +64,6 @@ const getBucketConfig = (range = kRange7d) => {
   };
 };
 
-const getEstimatedCostForEntry = (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;
-};
-
 const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRange7d } = {}) => {
   const config = getBucketConfig(range);
   const safeNowMs = Number.isFinite(Number(nowMs)) ? Number(nowMs) : Date.now();
@@ -115,7 +110,7 @@ const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRan
       if (!Number.isFinite(Number(bucketIndex))) return;
       if (bucketIndex < 0 || bucketIndex >= config.bucketCount) return;
       points[bucketIndex][status] += 1;
-      const estimatedCost = getEstimatedCostForEntry(entry);
+      const estimatedCost = getCronRunEstimatedCost(entry);
       if (estimatedCost != null) {
         points[bucketIndex].totalCost += estimatedCost;
         points[bucketIndex].costCount += 1;
@@ -141,14 +136,18 @@ const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRan
 
 export const CronRunsTrendCard = ({
   bulkRunsByJobId = {},
-  initialRange = kRange7d,
+  initialRange = kRange24h,
   selectedBucketFilter = null,
   onBucketFilterChange = () => {},
 }) => {
   const chartCanvasRef = useRef(null);
   const chartInstanceRef = useRef(null);
   const [range, setRange] = useState(
-    initialRange === kRange30d ? kRange30d : kRange7d,
+    initialRange === kRange30d
+      ? kRange30d
+      : initialRange === kRange7d
+        ? kRange7d
+        : kRange24h,
   );
   const trend = useMemo(
     () => buildTrendData({ bulkRunsByJobId, nowMs: Date.now(), range }),
@@ -287,6 +286,7 @@ export const CronRunsTrendCard = ({
         },
         plugins: {
           legend: {
+            position: "bottom",
             labels: {
               color: "rgba(209,213,219,1)",
               boxWidth: 10,
@@ -321,7 +321,7 @@ export const CronRunsTrendCard = ({
   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">
-        <h3 class="card-label cron-calendar-title">Run Outcome Trend</h3>
+        <h3 class="card-label cron-calendar-title">Run Outcomes</h3>
         <${SegmentedControl}
           options=${kRanges}
           value=${range}