@chrysb/alphaclaw 0.6.2-beta.2 → 0.6.2-beta.4

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

@@ -3,20 +3,15 @@ import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   buildCronOptimizationWarnings,
-  formatCost,
   formatRelativeMs,
   formatTokenCount,
   getNextScheduledRunAcrossJobs,
 } from "./cron-helpers.js";
 import { CronCalendar } from "./cron-calendar.js";
 import { CronRunsTrendCard } from "./cron-runs-trend-card.js";
-import { SegmentedControl } from "../segmented-control.js";
+import { CronRunHistoryPanel } from "./cron-run-history-panel.js";
 import { SummaryStatCard } from "../summary-stat-card.js";
 import { ErrorWarningLineIcon } from "../icons.js";
-import {
-  formatDurationCompactMs,
-  formatLocaleDateTimeWithTodayTime,
-} from "../../lib/format.js";
 
 const html = htm.bind(h);
 const kRecentRunFetchLimit = 100;
@@ -60,48 +55,6 @@ const formatWarningsAttentionText = (warnings = []) => {
   return `${parts.join(" and ")} may need your attention`;
 };
 
-const runStatusClassName = (status = "") => {
-  const normalized = String(status || "")
-    .trim()
-    .toLowerCase();
-  if (normalized === "ok") return "text-green-300";
-  if (normalized === "error") return "text-red-300";
-  if (normalized === "skipped") return "text-yellow-300";
-  return "text-gray-400";
-};
-
-const formatRecentRunTimestamp = (timestampMs) =>
-  formatLocaleDateTimeWithTodayTime(timestampMs, {
-    fallback: "—",
-    valueIsEpochMs: true,
-  }).replace(
-    /\s([AP])M\b/g,
-    (_, marker) => `${String(marker || "").toLowerCase()}m`,
-  );
-
-const getRunEstimatedCost = (runEntry = {}) => {
-  const usage = runEntry?.usage || {};
-  const candidates = [
-    usage?.estimatedCost,
-    usage?.estimated_cost,
-    usage?.totalCost,
-    usage?.total_cost,
-    usage?.costUsd,
-    usage?.cost,
-    runEntry?.estimatedCost,
-    runEntry?.estimated_cost,
-    runEntry?.totalCost,
-    runEntry?.total_cost,
-    runEntry?.costUsd,
-    runEntry?.cost,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return null;
-};
-
 const flattenRecentRuns = ({ bulkRunsByJobId = {}, jobs = [] } = {}) => {
   const jobNameById = jobs.reduce((accumulator, job) => {
     const jobId = String(job?.id || "");
@@ -233,7 +186,7 @@ export const CronOverview = ({
   const enabledCount = jobs.filter((job) => job.enabled !== false).length;
   const disabledCount = jobs.length - enabledCount;
   const nextRunMs = getNextScheduledRunAcrossJobs(jobs);
-  const warnings = buildCronOptimizationWarnings(jobs);
+  const warnings = buildCronOptimizationWarnings(jobs, bulkRunsByJobId);
   const recentRuns = useMemo(
     () => flattenRecentRuns({ bulkRunsByJobId, jobs }),
     [bulkRunsByJobId, jobs],
@@ -367,232 +320,18 @@ export const CronOverview = ({
           onBucketFilterChange=${setSelectedTrendBucketFilter}
         />
 
-        <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>
-              <div class="text-xs text-gray-500">
-                ${formatTokenCount(filteredRecentRuns.length)} entries
-              </div>
-            </div>
-            <div class="shrink-0">
-              <${SegmentedControl}
-                options=${kRunStatusFilterOptions}
-                value=${recentRunStatusFilter}
-                onChange=${setRecentRunStatusFilter}
-              />
-            </div>
-          </div>
-          ${selectedTrendBucketFilter
-            ? html`
-                <div class="flex items-center">
-                  <span class="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-2 py-1 rounded-full border border-border text-gray-300 bg-black/20">
-                    Filtered to ${selectedTrendBucketFilter.label}
-                    <button
-                      type="button"
-                      class="text-gray-500 hover:text-gray-200 leading-none"
-                      onclick=${() => setSelectedTrendBucketFilter(null)}
-                      aria-label="Clear trend filter"
-                    >
-                      ×
-                    </button>
-                  </span>
-                </div>
-              `
-            : null}
-          ${recentRunRows.length === 0
-            ? html`<div class="text-sm text-gray-500">No runs found.</div>`
-            : html`
-                <div class="ac-history-list">
-                  ${recentRunRows.map((row, rowIndex) => {
-                    if (row.type === "collapsed-group") {
-                      const statusSummary = Object.entries(
-                        row.statusCounts || {},
-                      )
-                        .map(([status, count]) => `${status}: ${count}`)
-                        .join(" • ");
-                      const timeRangeLabel = `[${formatRecentRunTimestamp(row.oldestTs)} - ${formatRecentRunTimestamp(row.newestTs)}]`;
-                      return html`
-                        <details
-                          key=${`collapsed:${rowIndex}:${row.jobId}`}
-                          class="ac-history-item"
-                        >
-                          <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="truncate text-xs text-gray-300">
-                                  ${row.jobName} -
-                                  ${formatTokenCount(row.count)} runs -
-                                  ${timeRangeLabel}
-                                </span>
-                              </span>
-                            </div>
-                          </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}
-                            </div>
-                            <div>
-                              <button
-                                type="button"
-                                class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
-                                onclick=${() => onSelectJob(row.jobId)}
-                              >
-                                Open ${row.jobName}
-                              </button>
-                            </div>
-                          </div>
-                        </details>
-                      `;
-                    }
-                    const runEntry = row.entry || {};
-                    const runStatus = String(runEntry?.status || "unknown");
-                    const runUsage = runEntry?.usage || {};
-                    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 runTitle = String(runEntry?.jobName || "").trim();
-                    const hasRunTitle = runTitle.length > 0;
-                    return html`
-                      <details
-                        key=${`entry:${rowIndex}:${runEntry.ts}:${runEntry.jobId || ""}`}
-                        class="ac-history-item"
-                      >
-                        <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
-                              >
-                              ${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="text-xs text-gray-500 shrink-0">
-                                        ${formatRecentRunTimestamp(runEntry.ts)}
-                                      </span>
-                                    </span>
-                                  `
-                                : html`
-                                    <span class="truncate text-xs text-gray-300">
-                                      ${runEntry.jobId} -
-                                      ${formatRecentRunTimestamp(runEntry.ts)}
-                                    </span>
-                                  `}
-                            </span>
-                            <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"
-                                >${formatTokenCount(runTokens)} tk</span
-                              >
-                              <span class="text-gray-500"
-                                >${runEstimatedCost == null
-                                  ? "—"
-                                  : `~${formatCost(runEstimatedCost)}`}</span
-                              >
-                            </span>
-                          </div>
-                        </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>`
-                            : null}
-                          ${runEntry.error
-                            ? 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
-                              >
-                              ${runEntry.sessionKey
-                                ? html` | Session:
-                                    <span class="text-gray-300 font-mono"
-                                      >${runEntry.sessionKey}</span
-                                    >`
-                                : null}
-                            </div>
-                            <div class="text-gray-500">
-                              Usage:
-                              <span class="text-gray-300"
-                                >${formatTokenCount(runInputTokens)} in</span
-                              >
-                              <span class="text-gray-600">•</span>
-                              <span class="text-gray-300"
-                                >${formatTokenCount(runOutputTokens)} out</span
-                              >
-                              <span class="text-gray-600">•</span>
-                              <span class="text-gray-300"
-                                >${formatTokenCount(runTokens)} tk</span
-                              >
-                              <span class="text-gray-600">•</span>
-                              <span class="text-gray-300"
-                                >${runEstimatedCost == null
-                                  ? "—"
-                                  : `~${formatCost(runEstimatedCost)}`}</span
-                              >
-                            </div>
-                          </div>
-                          <div>
-                            <button
-                              type="button"
-                              class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
-                              onclick=${() => onSelectJob(runEntry.jobId)}
-                            >
-                              Open ${runEntry.jobName || runEntry.jobId}
-                            </button>
-                          </div>
-                        </div>
-                      </details>
-                    `;
-                  })}
-                </div>
-              `}
-        </section>
+        <${CronRunHistoryPanel}
+          entryCountLabel=${`${formatTokenCount(filteredRecentRuns.length)} entries`}
+          primaryFilterOptions=${kRunStatusFilterOptions}
+          primaryFilterValue=${recentRunStatusFilter}
+          onChangePrimaryFilter=${setRecentRunStatusFilter}
+          activeFilterLabel=${selectedTrendBucketFilter?.label || ""}
+          onClearActiveFilter=${() => setSelectedTrendBucketFilter(null)}
+          rows=${recentRunRows}
+          variant="overview"
+          onSelectJob=${onSelectJob}
+          showOpenJobButton=${true}
+        />
       </div>
     </div>
   `;

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

@@ -0,0 +1,296 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { SegmentedControl } from "../segmented-control.js";
+import {
+  formatDurationCompactMs,
+  formatLocaleDateTimeWithTodayTime,
+} from "../../lib/format.js";
+import { formatCost, formatTokenCount } from "./cron-helpers.js";
+
+const html = htm.bind(h);
+const runStatusClassName = (status = "") => {
+  const normalized = String(status || "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "ok") return "text-green-300";
+  if (normalized === "error") return "text-red-300";
+  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 formatOverviewTimestamp = (timestampMs) =>
+  formatLocaleDateTimeWithTodayTime(timestampMs, {
+    fallback: "—",
+    valueIsEpochMs: true,
+  }).replace(/\s([AP])M\b/g, (_, marker) => `${String(marker || "").toLowerCase()}m`);
+const formatDetailTimestamp = (timestampMs) =>
+  formatLocaleDateTimeWithTodayTime(timestampMs, {
+    fallback: "—",
+    valueIsEpochMs: true,
+  });
+const formatRowTimestamp = (timestampMs, variant = "overview") =>
+  variant === "detail"
+    ? formatDetailTimestamp(timestampMs)
+    : formatOverviewTimestamp(timestampMs);
+const renderCollapsedGroupRow = ({
+  row,
+  rowIndex,
+  onSelectJob = () => {},
+}) => {
+  const statusSummary = Object.entries(row.statusCounts || {})
+    .map(([status, count]) => `${status}: ${count}`)
+    .join(" • ");
+  const timeRangeLabel = `[${formatOverviewTimestamp(row.oldestTs)} - ${formatOverviewTimestamp(row.newestTs)}]`;
+  return html`
+    <details
+      key=${`collapsed:${rowIndex}:${row.jobId}`}
+      class="ac-history-item"
+    >
+      <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="truncate text-xs text-gray-300">
+              ${row.jobName} -
+              ${formatTokenCount(row.count)} runs -
+              ${timeRangeLabel}
+            </span>
+          </span>
+        </div>
+      </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}
+        </div>
+        ${row?.jobId
+          ? html`
+              <div>
+                <button
+                  type="button"
+                  class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
+                  onclick=${() => onSelectJob(row.jobId)}
+                >
+                  Open ${row.jobName || row.jobId}
+                </button>
+              </div>
+            `
+          : null}
+      </div>
+    </details>
+  `;
+};
+const renderEntryRow = ({
+  row,
+  rowIndex,
+  variant = "overview",
+  onSelectJob = () => {},
+  showOpenJobButton = false,
+}) => {
+  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 runTitle = String(runEntry?.jobName || "").trim();
+  const hasRunTitle = runTitle.length > 0;
+  const isDetail = variant === "detail";
+  return html`
+    <details
+      key=${`entry:${rowIndex}:${runEntry.ts}:${runEntry.jobId || ""}`}
+      class="ac-history-item"
+    >
+      <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
+            >
+            ${isDetail
+              ? html`
+                  <span class="truncate text-xs text-gray-300">
+                    ${formatRowTimestamp(runEntry.ts, variant)}
+                  </span>
+                `
+              : 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="text-xs text-gray-500 shrink-0">
+                        ${formatRowTimestamp(runEntry.ts, variant)}
+                      </span>
+                    </span>
+                  `
+                : html`
+                    <span class="truncate text-xs text-gray-300">
+                      ${runEntry.jobId} -
+                      ${formatRowTimestamp(runEntry.ts, variant)}
+                    </span>
+                  `}
+          </span>
+          <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">${formatTokenCount(runTokens)} tk</span>
+            ${isDetail
+              ? html`<span class="text-gray-500">${runDeliveryLabel(runEntry)}</span>`
+              : html`
+                  <span class="text-gray-500"
+                    >${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}</span
+                  >
+                `}
+          </span>
+        </div>
+      </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>`
+          : null}
+        ${runEntry.error
+          ? 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>
+          </div>
+          <div class="text-gray-500">
+            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>
+          </div>
+          <div class="text-gray-500">
+            Tokens out: 
+            <span class="text-gray-300">${formatTokenCount(runOutputTokens)}</span>
+          </div>
+          <div class="text-gray-500">
+            Total tokens: 
+            <span class="text-gray-300">${formatTokenCount(runTokens)}</span>
+          </div>
+          <div class="text-gray-500">
+            Total cost: 
+            <span class="text-gray-300">
+              ${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}
+            </span>
+          </div>
+        </div>
+        ${showOpenJobButton && runEntry?.jobId
+          ? html`
+              <div>
+                <button
+                  type="button"
+                  class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
+                  onclick=${() => onSelectJob(runEntry.jobId)}
+                >
+                  Open ${runEntry.jobName || runEntry.jobId}
+                </button>
+              </div>
+            `
+          : null}
+      </div>
+    </details>
+  `;
+};
+
+export const CronRunHistoryPanel = ({
+  entryCountLabel = "",
+  primaryFilterOptions = [],
+  primaryFilterValue = "all",
+  onChangePrimaryFilter = () => {},
+  secondaryFilterOptions = [],
+  secondaryFilterValue = "all",
+  onChangeSecondaryFilter = () => {},
+  activeFilterLabel = "",
+  onClearActiveFilter = () => {},
+  rows = [],
+  emptyText = "No runs found.",
+  variant = "overview",
+  onSelectJob = () => {},
+  showOpenJobButton = false,
+  footer = null,
+}) => html`
+  <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>
+        <div class="text-xs text-gray-500">${entryCountLabel}</div>
+      </div>
+      <div class="shrink-0 inline-flex items-center gap-2">
+        <${SegmentedControl}
+          options=${primaryFilterOptions}
+          value=${primaryFilterValue}
+          onChange=${onChangePrimaryFilter}
+        />
+        ${Array.isArray(secondaryFilterOptions) && secondaryFilterOptions.length > 0
+          ? html`
+              <${SegmentedControl}
+                options=${secondaryFilterOptions}
+                value=${secondaryFilterValue}
+                onChange=${onChangeSecondaryFilter}
+              />
+            `
+          : null}
+      </div>
+    </div>
+    ${activeFilterLabel
+      ? html`
+          <div class="flex items-center">
+            <span
+              class="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-2 py-1 rounded-full border border-border text-gray-300 bg-black/20"
+            >
+              Filtered to ${activeFilterLabel}
+              <button
+                type="button"
+                class="text-gray-500 hover:text-gray-200 leading-none"
+                onclick=${onClearActiveFilter}
+                aria-label="Clear trend filter"
+              >
+                ×
+              </button>
+            </span>
+          </div>
+        `
+      : null}
+    ${rows.length === 0
+      ? html`<div class="text-sm text-gray-500">${emptyText}</div>`
+      : html`
+          <div class="ac-history-list">
+            ${rows.map((row, rowIndex) =>
+              row?.type === "collapsed-group"
+                ? renderCollapsedGroupRow({ row, rowIndex, onSelectJob })
+                : renderEntryRow({
+                    row,
+                    rowIndex,
+                    variant,
+                    onSelectJob,
+                    showOpenJobButton,
+                  }))}
+          </div>
+        `}
+    ${footer}
+  </section>
+`;