@chrysb/alphaclaw 0.7.2-beta.1 → 0.7.2-beta.3

package/lib/public/css/theme.css

@@ -73,12 +73,23 @@ body::before {
   gap: 8px;
 }
 
+.ac-history-list.ac-history-list-tight {
+  gap: 0;
+}
+
 .ac-history-item {
   border: 1px solid var(--panel-border-contrast);
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.12);
 }
 
+.ac-history-item.ac-history-item-flat {
+  border: 0;
+  border-bottom: 1px solid var(--panel-border-contrast);
+  border-radius: 0;
+  background: transparent;
+}
+
 .snippet-collapse-fade {
   background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 70%);
 }
@@ -113,7 +124,7 @@ body::before {
   transition: transform 0.15s ease, color 0.15s ease;
 }
 
-.ac-history-item[open] .ac-history-toggle {
+.ac-history-item[open] > .ac-history-summary .ac-history-toggle {
   transform: rotate(90deg);
   color: #d1d5db;
 }

package/lib/public/js/app.js

@@ -21,6 +21,7 @@ import {
   EnvarsRoute,
   GeneralRoute,
   ModelsRoute,
+  NodesRoute,
   RouteRedirect,
   TelegramRoute,
   UsageRoute,
@@ -79,6 +80,7 @@ const App = () => {
   const isCronRoute = location.startsWith("/cron");
   const isEnvarsRoute = location.startsWith("/envars");
   const isModelsRoute = location.startsWith("/models");
+  const isNodesRoute = location.startsWith("/nodes");
   const selectedAgentId = (() => {
     const match = location.match(/^\/agents\/([^/]+)/);
     return match ? decodeURIComponent(match[1]) : "";
@@ -304,13 +306,19 @@ const App = () => {
         >
           <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
         </div>
+        <div
+          class="app-content-pane"
+          style=${{ display: isNodesRoute ? "block" : "none" }}
+        >
+          <${NodesRoute} onRestartRequired=${controllerActions.setRestartRequired} />
+        </div>
         <div
           class="app-content-pane"
           onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute || isEnvarsRoute || isModelsRoute ? "none" : "block" }}
+          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute || isEnvarsRoute || isModelsRoute || isNodesRoute ? "none" : "block" }}
         >
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute && !isEnvarsRoute && !isModelsRoute
+            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute && !isEnvarsRoute && !isModelsRoute && !isNodesRoute
               ? html`
                   <${Switch}>
                     <${Route} path="/general">

package/lib/public/js/components/cron-tab/cron-job-detail.js

@@ -4,6 +4,7 @@ import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { formatTokenCount } from "./cron-helpers.js";
 import { CronJobUsage } from "./cron-job-usage.js";
+import { CronJobTrendsPanel } from "./cron-job-trends-panel.js";
 import { CronRunHistoryPanel } from "./cron-run-history-panel.js";
 import { CronPromptEditor } from "./cron-prompt-editor.js";
 import { CronJobSettingsCard } from "./cron-job-settings-card.js";
@@ -19,6 +20,7 @@ const kRunStatusFilterOptions = [
 export const CronJobDetail = ({
   job = null,
   runEntries = [],
+  filteredRunEntries = [],
   runTotal = 0,
   runHasMore = false,
   loadingMoreRuns = false,
@@ -30,8 +32,13 @@ export const CronJobDetail = ({
   onToggleEnabled = () => {},
   togglingJobEnabled = false,
   usage = null,
+  jobTrends = null,
+  jobTrendRange = "7d",
+  selectedJobTrendBucketFilter = null,
   usageDays = 30,
   onSetUsageDays = () => {},
+  onSetJobTrendRange = () => {},
+  onSetSelectedJobTrendBucketFilter = () => {},
   promptValue = "",
   savedPromptValue = "",
   onChangePrompt = () => {},
@@ -105,13 +112,22 @@ export const CronJobDetail = ({
           usageDays=${usageDays}
           onSetUsageDays=${onSetUsageDays}
         />
+        <${CronJobTrendsPanel}
+          trends=${jobTrends}
+          range=${jobTrendRange}
+          onChangeRange=${onSetJobTrendRange}
+          selectedBucketFilter=${selectedJobTrendBucketFilter}
+          onChangeSelectedBucketFilter=${onSetSelectedJobTrendBucketFilter}
+        />
 
         <${CronRunHistoryPanel}
-          entryCountLabel=${`${formatTokenCount(runTotal)} entries`}
+          entryCountLabel=${`${formatTokenCount(selectedJobTrendBucketFilter ? filteredRunEntries.length : runTotal)} entries`}
           primaryFilterOptions=${kRunStatusFilterOptions}
           primaryFilterValue=${runStatusFilter}
           onChangePrimaryFilter=${onSetRunStatusFilter}
-          rows=${runEntries}
+          activeFilterLabel=${selectedJobTrendBucketFilter?.label || ""}
+          onClearActiveFilter=${() => onSetSelectedJobTrendBucketFilter(null)}
+          rows=${selectedJobTrendBucketFilter ? filteredRunEntries : runEntries}
           variant="detail"
           footer=${runHasMore
             ? html`

package/lib/public/js/components/cron-tab/cron-job-list.js

@@ -55,6 +55,35 @@ const parseCronWeekdayField = (field = "") => {
   if (weekdays.length === 0) return null;
   return Math.min(...weekdays);
 };
+const parseCronWeekdayValues = (field = "") => {
+  const raw = String(field || "").trim().toLowerCase();
+  if (!raw || raw === "*") return [];
+  const segments = raw.split(",").map((segment) => segment.trim()).filter(Boolean);
+  const weekdays = new Set();
+  segments.forEach((segment) => {
+    const rangeMatch = segment.match(/^(\d{1,2})-(\d{1,2})$/);
+    if (rangeMatch) {
+      const start = normalizeCronWeekday(parseCronNumeric(rangeMatch[1]));
+      const end = normalizeCronWeekday(parseCronNumeric(rangeMatch[2]));
+      if (start == null || end == null) return;
+      if (start <= end) {
+        for (let value = start; value <= end; value += 1) weekdays.add(value);
+      } else {
+        for (let value = start; value <= 6; value += 1) weekdays.add(value);
+        for (let value = 0; value <= end; value += 1) weekdays.add(value);
+      }
+      return;
+    }
+    const single = normalizeCronWeekday(parseCronNumeric(segment));
+    if (single != null) weekdays.add(single);
+  });
+  return [...weekdays].sort((left, right) => left - right);
+};
+const isWeekdaysOnlyField = (field = "") => {
+  const weekdayValues = parseCronWeekdayValues(field);
+  if (weekdayValues.length !== 5) return false;
+  return weekdayValues.join(",") === "1,2,3,4,5";
+};
 
 const parseCronMinuteOfDay = ({ minuteField = "", hourField = "" }) => {
   const minute = parseCronNumeric(minuteField);
@@ -113,6 +142,19 @@ const getInternalSortMeta = (job = {}, groupKey = "other") => {
         secondary: nameKey,
       };
     }
+    if (
+      cronFields &&
+      cronFields.dayOfMonthField === "*" &&
+      cronFields.monthField === "*" &&
+      isWeekdaysOnlyField(cronFields.dayOfWeekField) &&
+      minuteOfDay != null
+    ) {
+      return {
+        groupRank: 2,
+        primary: minuteOfDay,
+        secondary: nameKey,
+      };
+    }
   }
   if (groupKey === "weekly" && cronFields) {
     const weekday = parseCronWeekdayField(cronFields.dayOfWeekField);
@@ -187,6 +229,7 @@ const getScheduleGroupKey = (schedule = {}) => {
       monthField === "*" &&
       dayOfWeekField !== "*"
     ) {
+      if (isWeekdaysOnlyField(dayOfWeekField)) return "daily";
       return "weekly";
     }
     if (dayOfMonthField !== "*" && monthField === "*") {

package/lib/public/js/components/cron-tab/cron-job-trends-panel.js

@@ -0,0 +1,319 @@
+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 { formatCost, formatTokenCount } from "./cron-helpers.js";
+import { formatChartBucketLabel, formatDurationCompactMs } from "../../lib/format.js";
+import { SegmentedControl } from "../segmented-control.js";
+
+const html = htm.bind(h);
+const kMetricOutcomes = "outcomes";
+const kMetricTokens = "tokens";
+const kMetricDuration = "duration";
+const kMetricCost = "cost";
+const kRange24h = "24h";
+const kRange7d = "7d";
+const kRange30d = "30d";
+const kRangeOptions = [
+  { label: "24h", value: kRange24h },
+  { label: "7d", value: kRange7d },
+  { label: "30d", value: kRange30d },
+];
+const kMetricOptions = [
+  { label: "outcomes", value: kMetricOutcomes },
+  { label: "tokens", value: kMetricTokens },
+  { label: "duration", value: kMetricDuration },
+  { label: "cost", value: kMetricCost },
+];
+const buildChartData = ({
+  trends = null,
+  metric = kMetricOutcomes,
+  selectedBucketKey = "",
+} = {}) => {
+  const points = Array.isArray(trends?.points) ? trends.points : [];
+  const range = String(trends?.range || kRange7d);
+  const labels = points.map((point) =>
+    formatChartBucketLabel(point.startMs, {
+      range,
+      valueType: "epoch-ms",
+    }));
+  const dimAlpha = "0.22";
+  const fullAlpha = "0.86";
+  const isDimmed = (index) =>
+    selectedBucketKey && String(points[index]?.key || "") !== selectedBucketKey;
+  if (metric === kMetricOutcomes) {
+    return {
+      labels,
+      datasets: [
+        {
+          label: "ok",
+          data: points.map((point) => Number(point?.ok || 0)),
+          stack: "outcomes",
+          backgroundColor: points.map((_, index) =>
+            `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: points.map((_, index) =>
+            `rgba(34,255,170,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+        {
+          label: "error",
+          data: points.map((point) => Number(point?.error || 0)),
+          stack: "outcomes",
+          backgroundColor: points.map((_, index) =>
+            `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: points.map((_, index) =>
+            `rgba(255,74,138,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+        {
+          label: "skipped",
+          data: points.map((point) => Number(point?.skipped || 0)),
+          stack: "outcomes",
+          backgroundColor: points.map((_, index) =>
+            `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: points.map((_, index) =>
+            `rgba(255,214,64,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+      ],
+    };
+  }
+  const valueByPoint = points.map((point) => {
+    if (metric === kMetricTokens) return Number(point?.totalTokens || 0);
+    if (metric === kMetricCost) return Number(point?.totalCost || 0);
+    return Number(point?.avgDurationMs || 0);
+  });
+  return {
+    labels,
+    datasets: [
+      {
+        label:
+          metric === kMetricTokens
+            ? "tokens"
+            : metric === kMetricCost
+              ? "cost"
+              : "avg duration",
+        data: valueByPoint,
+        backgroundColor: points.map((_, index) =>
+          metric === kMetricTokens
+            ? `rgba(34,211,238,${isDimmed(index) ? dimAlpha : "0.72"})`
+            : metric === kMetricCost
+              ? `rgba(167,139,250,${isDimmed(index) ? dimAlpha : "0.72"})`
+              : `rgba(148,163,184,${isDimmed(index) ? dimAlpha : "0.72"})`),
+        borderColor: points.map((_, index) =>
+          metric === kMetricTokens
+            ? `rgba(34,211,238,${isDimmed(index) ? "0.35" : "1"})`
+            : metric === kMetricCost
+              ? `rgba(167,139,250,${isDimmed(index) ? "0.35" : "1"})`
+              : `rgba(148,163,184,${isDimmed(index) ? "0.35" : "1"})`),
+        borderWidth: 1,
+        borderRadius: 0,
+        borderSkipped: false,
+      },
+    ],
+  };
+};
+
+export const CronJobTrendsPanel = ({
+  trends = null,
+  range = kRange7d,
+  onChangeRange = () => {},
+  selectedBucketFilter = null,
+  onChangeSelectedBucketFilter = () => {},
+}) => {
+  const chartCanvasRef = useRef(null);
+  const chartInstanceRef = useRef(null);
+  const [metric, setMetric] = useState(kMetricOutcomes);
+  const points = useMemo(
+    () =>
+      Array.isArray(trends?.points)
+        ? trends.points.map((point, index) => ({
+          ...point,
+          key: String(point?.key || `point:${index}:${point?.startMs || 0}`),
+        }))
+        : [],
+    [trends?.points],
+  );
+  const selectedBucketKey = useMemo(() => {
+    if (!selectedBucketFilter) return "";
+    const matchingPoint = points.find(
+      (point) =>
+        Number(point.startMs) === Number(selectedBucketFilter.startMs) &&
+        Number(point.endMs) === Number(selectedBucketFilter.endMs),
+    );
+    return matchingPoint?.key || "";
+  }, [points, selectedBucketFilter]);
+  const hasData = useMemo(
+    () =>
+      points.some(
+        (point) =>
+          Number(point?.totalRuns || 0) > 0 ||
+          Number(point?.totalTokens || 0) > 0 ||
+          Number(point?.totalCost || 0) > 0 ||
+          Number(point?.avgDurationMs || 0) > 0,
+      ),
+    [points],
+  );
+  const chartData = useMemo(
+    () => buildChartData({ trends: { ...trends, points }, metric, selectedBucketKey }),
+    [metric, points, selectedBucketKey, trends],
+  );
+  useEffect(() => {
+    const canvas = chartCanvasRef.current;
+    const Chart = window.Chart;
+    if (!canvas || !Chart) return;
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.destroy();
+      chartInstanceRef.current = null;
+    }
+    const getBucketFilter = (index) => {
+      const selectedPoint = points[index];
+      if (!selectedPoint) return null;
+      return {
+        key: selectedPoint.key,
+        label: formatChartBucketLabel(selectedPoint.startMs, {
+          range,
+          valueType: "epoch-ms",
+        }),
+        startMs: Number(selectedPoint.startMs || 0),
+        endMs: Number(selectedPoint.endMs || 0),
+        range,
+      };
+    };
+    chartInstanceRef.current = new Chart(canvas, {
+      type: "bar",
+      data: chartData,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: "index", intersect: false },
+        animation: false,
+        onHover: (event, elements) => {
+          const target = event?.native?.target;
+          if (!target || !target.style) return;
+          target.style.cursor = Array.isArray(elements) && elements.length > 0
+            ? "pointer"
+            : "default";
+        },
+        onClick: (_event, elements) => {
+          const index = Number(elements?.[0]?.index);
+          if (!Number.isFinite(index)) return;
+          const nextFilter = getBucketFilter(index);
+          if (!nextFilter) return;
+          if (nextFilter.key === selectedBucketKey) {
+            onChangeSelectedBucketFilter(null);
+            return;
+          }
+          onChangeSelectedBucketFilter(nextFilter);
+        },
+        scales: {
+          x: {
+            stacked: metric === kMetricOutcomes,
+            grid: { color: "rgba(148,163,184,0.08)" },
+            ticks: {
+              color: "rgba(156,163,175,1)",
+              maxRotation: 0,
+              autoSkip: true,
+            },
+          },
+          y: {
+            stacked: metric === kMetricOutcomes,
+            beginAtZero: true,
+            grid: { color: "rgba(148,163,184,0.12)" },
+            ticks: {
+              precision: metric === kMetricCost ? undefined : 0,
+              color: "rgba(156,163,175,1)",
+              callback: (value) => {
+                const numericValue = Number(value || 0);
+                if (metric === kMetricCost) return formatCost(numericValue);
+                if (metric === kMetricDuration) {
+                  return numericValue > 0 ? formatDurationCompactMs(numericValue) : "0";
+                }
+                return formatTokenCount(numericValue);
+              },
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            position: "bottom",
+            labels: {
+              color: "rgba(209,213,219,1)",
+              boxWidth: 10,
+              boxHeight: 10,
+            },
+          },
+          tooltip: {
+            callbacks: {
+              title: (items) => String(items?.[0]?.label || ""),
+              label: (context) => {
+                const value = Number(context.parsed.y || 0);
+                if (metric === kMetricCost) {
+                  return `${context.dataset.label}: ${formatCost(value)}`;
+                }
+                if (metric === kMetricDuration) {
+                  return `${context.dataset.label}: ${value > 0 ? formatDurationCompactMs(value) : "—"}`;
+                }
+                return `${context.dataset.label}: ${formatTokenCount(value)}`;
+              },
+              footer: (items) => {
+                const index = Number(items?.[0]?.dataIndex);
+                const point = points[index];
+                if (!point) return "";
+                const runsLabel = `runs: ${formatTokenCount(point.totalRuns || 0)}`;
+                const tokensLabel = `tokens: ${formatTokenCount(point.totalTokens || 0)}`;
+                const costLabel = `cost: ${formatCost(point.totalCost || 0)}`;
+                return `${runsLabel}\n${tokensLabel}\n${costLabel}`;
+              },
+            },
+          },
+        },
+      },
+    });
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.destroy();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, [
+    chartData,
+    metric,
+    onChangeSelectedBucketFilter,
+    points,
+    range,
+    selectedBucketKey,
+    trends?.bucket,
+  ]);
+  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 card-label-bright">Trends</h3>
+        <div class="flex items-center gap-2">
+          <${SegmentedControl}
+            options=${kMetricOptions}
+            value=${metric}
+            onChange=${setMetric}
+          />
+          <${SegmentedControl}
+            options=${kRangeOptions}
+            value=${range}
+            onChange=${onChangeRange}
+          />
+        </div>
+      </div>
+      ${hasData
+        ? html`
+            <div class="h-44">
+              <canvas ref=${chartCanvasRef}></canvas>
+            </div>
+          `
+        : html`<div class="text-xs text-gray-500">No run data in this window yet.</div>`}
+    </section>
+  `;
+};

package/lib/public/js/components/cron-tab/cron-job-usage.js

@@ -1,6 +1,7 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { formatCost, formatTokenCount } from "./cron-helpers.js";
+import { formatDurationCompactMs } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
 
 const html = htm.bind(h);
@@ -25,37 +26,50 @@ export const CronJobUsage = ({ usage = null, usageDays = 30, onSetUsageDays = ()
   const totals = usage?.totals || {};
   const totalRuns = Number(totals?.runCount || 0);
   const totalTokens = Number(totals?.totalTokens || 0);
+  const totalCost = Number(totals?.totalCost || 0);
+  const averageDurationMs = Number(totals?.avgDurationMs || 0);
   const averageTokensPerRun = totalRuns > 0 ? Math.round(totalTokens / totalRuns) : 0;
+  const averageCostPerRun = totalRuns > 0 ? totalCost / totalRuns : 0;
   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">Usage</h3>
+        <h3 class="card-label card-label-bright">Usage</h3>
         <${SegmentedControl}
           options=${kUsageRangeOptions}
           value=${usageDays}
           onChange=${onSetUsageDays}
         />
       </div>
-      <div class="grid grid-cols-2 gap-2 text-xs">
+      <div class="grid grid-cols-3 gap-2 text-xs">
+        <div class="ac-surface-inset rounded-lg p-2">
+          <div class="text-gray-500">Total runs</div>
+          <div class="text-gray-200 font-mono">${formatTokenCount(totalRuns)}</div>
+        </div>
         <div class="ac-surface-inset rounded-lg p-2">
           <div class="text-gray-500">Total tokens</div>
-          <div class="text-gray-200 font-mono">${formatTokenCount(totals.totalTokens)}</div>
+          <div class="text-gray-200 font-mono">${formatTokenCount(totalTokens)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Estimated cost</div>
-          <div class="text-gray-200 font-mono">${formatCost(totals.totalCost)}</div>
+          <div class="text-gray-500">Total cost</div>
+          <div class="text-gray-200 font-mono">${formatCost(totalCost)}</div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
-          <div class="text-gray-500">Runs</div>
-          <div class="text-gray-200 font-mono">${formatTokenCount(totals.runCount)}</div>
+          <div class="text-gray-500">Avg run time</div>
+          <div class="text-gray-200 font-mono">
+            ${averageDurationMs > 0 ? formatDurationCompactMs(averageDurationMs) : "—"}
+          </div>
         </div>
         <div class="ac-surface-inset rounded-lg p-2">
           <div class="text-gray-500">Avg tokens/run</div>
           <div class="text-gray-200 font-mono">${formatTokenCount(averageTokensPerRun)}</div>
         </div>
+        <div class="ac-surface-inset rounded-lg p-2">
+          <div class="text-gray-500">Avg cost/run</div>
+          <div class="text-gray-200 font-mono">${formatCost(averageCostPerRun)}</div>
+        </div>
       </div>
       <div class="text-xs text-gray-500">
-        Dominant model: 
+        Dominant model:${" "}
         <span class="text-gray-300 font-mono">${resolveDominantModel(usage)}</span>
       </div>
     </section>

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

@@ -56,7 +56,7 @@ const formatWarningsAttentionText = (warnings = []) => {
   return `${parts.join(" and ")} may need your attention`;
 };
 
-const flattenRecentRuns = ({ bulkRunsByJobId = {}, jobs = [] } = {}) => {
+const flattenRecentRuns = ({ bulkRunsByJobId = {}, jobs = [], limit = 0 } = {}) => {
   const jobNameById = jobs.reduce((accumulator, job) => {
     const jobId = String(job?.id || "");
     if (!jobId) return accumulator;
@@ -76,7 +76,7 @@ const flattenRecentRuns = ({ bulkRunsByJobId = {}, jobs = [] } = {}) => {
     })
     .filter((entry) => Number(entry?.ts || 0) > 0)
     .sort((left, right) => Number(right?.ts || 0) - Number(left?.ts || 0))
-    .slice(0, kRecentRunFetchLimit);
+    .slice(0, Number(limit || 0) > 0 ? Number(limit || 0) : undefined);
 };
 
 const buildCollapsedRunRows = (recentRuns = []) => {
@@ -197,12 +197,16 @@ export const CronOverview = ({
   const disabledCount = jobs.length - enabledCount;
   const nextRunMs = getNextScheduledRunAcrossJobs(jobs);
   const warnings = buildCronOptimizationWarnings(jobs, bulkRunsByJobId);
-  const recentRuns = useMemo(
+  const allRecentRuns = useMemo(
     () => flattenRecentRuns({ bulkRunsByJobId, jobs }),
     [bulkRunsByJobId, jobs],
   );
+  const recentRunsForDisplay = useMemo(
+    () => allRecentRuns.slice(0, kRecentRunFetchLimit),
+    [allRecentRuns],
+  );
   const timeFilteredRecentRuns = useMemo(() => {
-    if (!selectedTrendBucketFilter) return recentRuns;
+    if (!selectedTrendBucketFilter) return recentRunsForDisplay;
     const startMs = Number(selectedTrendBucketFilter?.startMs || 0);
     const endMs = Number(selectedTrendBucketFilter?.endMs || 0);
     if (
@@ -210,9 +214,9 @@ export const CronOverview = ({
       !Number.isFinite(endMs) ||
       endMs <= startMs
     ) {
-      return recentRuns;
+      return recentRunsForDisplay;
     }
-    return recentRuns.filter((entry) => {
+    return allRecentRuns.filter((entry) => {
       const timestampMs = Number(entry?.ts || 0);
       return (
         Number.isFinite(timestampMs) &&
@@ -220,7 +224,7 @@ export const CronOverview = ({
         timestampMs < endMs
       );
     });
-  }, [recentRuns, selectedTrendBucketFilter]);
+  }, [allRecentRuns, recentRunsForDisplay, selectedTrendBucketFilter]);
   const filteredRecentRuns = useMemo(
     () =>
       timeFilteredRecentRuns.filter((entry) =>
@@ -329,6 +333,12 @@ export const CronOverview = ({
           onSelectJob=${onSelectJob}
         />
 
+        <${CronInsightsPanel}
+          jobs=${jobs}
+          bulkRunsByJobId=${bulkRunsByJobId}
+          onSelectJob=${onSelectJob}
+        />
+
         <${CronRunsTrendCard}
           bulkRunsByJobId=${bulkRunsByJobId}
           initialRange=${initialTrendRange}
@@ -336,12 +346,6 @@ 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

@@ -139,7 +139,7 @@ export const CronPromptEditor = ({
   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">
+        <h3 class="card-label card-label-bright inline-flex items-center gap-1.5">
           Prompt
           ${isDirty ? html`<span class="file-viewer-dirty-dot"></span>` : null}
         </h3>