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

package/lib/public/css/cron.css

@@ -210,6 +210,9 @@
   flex-direction: column;
   gap: 12px;
   min-height: 100%;
+  width: min(100%, 1024px);
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .cron-prompt-editor-shell {
@@ -222,6 +225,11 @@
   background: rgba(255, 255, 255, 0.01);
 }
 
+.cron-prompt-editor-shell .file-viewer-editor-line-num-col {
+  width: 44px;
+  padding: 16px 8px 112px 0;
+}
+
 .cron-calendar-repeating-strip {
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -284,7 +292,7 @@
 .cron-calendar-grid-header,
 .cron-calendar-grid-row {
   display: grid;
-  grid-template-columns: 88px repeat(7, minmax(130px, 1fr));
+  grid-template-columns: 80px repeat(7, minmax(80px, 1fr));
 }
 
 .cron-calendar-day-header {

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

@@ -11,13 +11,13 @@ import {
   kLargeFileSimpleEditorLineThreshold,
 } from "../file-viewer/constants.js";
 import { highlightEditorLines } from "../../lib/syntax-highlighters/index.js";
-import { formatDurationCompactMs, formatLocaleDateTimeWithTodayTime } from "../../lib/format.js";
 import {
   formatCronScheduleLabel,
   formatNextRunRelativeMs,
   formatTokenCount,
 } from "./cron-helpers.js";
 import { CronJobUsage } from "./cron-job-usage.js";
+import { CronRunHistoryPanel } from "./cron-run-history-panel.js";
 import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
 
 const html = htm.bind(h);
@@ -41,8 +41,7 @@ const PromptEditor = ({
   promptValue = "",
   savedPromptValue = "",
   onChangePrompt = () => {},
-  onSavePrompt = () => {},
-  savingPrompt = false,
+  onSaveChanges = () => {},
 }) => {
   const promptEditorShellRef = useRef(null);
   const editorTextareaRef = useRef(null);
@@ -84,7 +83,7 @@ const PromptEditor = ({
   const handleEditorKeyDown = (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
       event.preventDefault();
-      onSavePrompt();
+      onSaveChanges();
     }
     if (event.key === "Tab") {
       event.preventDefault();
@@ -133,17 +132,6 @@ const PromptEditor = ({
           Prompt
           ${isDirty ? html`<span class="file-viewer-dirty-dot"></span>` : null}
         </h3>
-        <div class="flex items-center gap-2">
-          <${ActionButton}
-            onClick=${onSavePrompt}
-            disabled=${!isDirty}
-            loading=${savingPrompt}
-            tone="primary"
-            size="sm"
-            idleLabel="Save"
-            loadingLabel="Saving..."
-          />
-        </div>
       </div>
       <div
         class="cron-prompt-editor-shell"
@@ -173,15 +161,6 @@ const PromptEditor = ({
   `;
 };
 
-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 kMetaCardClassName = "ac-surface-inset rounded-lg p-2.5 space-y-1.5";
 const kRunStatusFilterOptions = [
   { label: "all", value: "all" },
@@ -189,11 +168,15 @@ const kRunStatusFilterOptions = [
   { label: "error", value: "error" },
   { label: "skipped", value: "skipped" },
 ];
-const kRunDeliveryFilterOptions = [
-  { label: "all", value: "all" },
-  { label: "delivered", value: "delivered" },
-  { label: "not-delivered", value: "not-delivered" },
+const kSessionTargetOptions = [
+  { label: "main", value: "main" },
+  { label: "isolated", value: "isolated" },
+];
+const kWakeModeOptions = [
+  { label: "now", value: "now" },
+  { label: "next-heartbeat", value: "next-heartbeat" },
 ];
+const kDeliveryNoneValue = "__none__";
 const isSameCalendarDay = (leftDate, rightDate) =>
   leftDate.getFullYear() === rightDate.getFullYear() &&
   leftDate.getMonth() === rightDate.getMonth() &&
@@ -231,9 +214,7 @@ export const CronJobDetail = ({
   runHasMore = false,
   loadingMoreRuns = false,
   runStatusFilter = "all",
-  runDeliveryFilter = "all",
   onSetRunStatusFilter = () => {},
-  onSetRunDeliveryFilter = () => {},
   onLoadMoreRuns = () => {},
   onRunNow = () => {},
   runningJob = false,
@@ -245,8 +226,15 @@ export const CronJobDetail = ({
   promptValue = "",
   savedPromptValue = "",
   onChangePrompt = () => {},
-  onSavePrompt = () => {},
-  savingPrompt = false,
+  onSaveChanges = () => {},
+  savingChanges = false,
+  routingDraft = null,
+  onChangeRoutingDraft = () => {},
+  deliverySessions = [],
+  loadingDeliverySessions = false,
+  deliverySessionsError = "",
+  destinationSessionKey = "",
+  onChangeDestinationSessionKey = () => {},
 }) => {
   if (!job) {
     return html`
@@ -256,6 +244,50 @@ export const CronJobDetail = ({
     `;
   }
 
+  const sessionTarget = String(
+    routingDraft?.sessionTarget || job?.sessionTarget || "main",
+  );
+  const wakeMode = String(routingDraft?.wakeMode || job?.wakeMode || "now");
+  const deliveryMode = String(
+    routingDraft?.deliveryMode || job?.delivery?.mode || "none",
+  );
+  const currentSessionTarget = String(job?.sessionTarget || "main");
+  const currentWakeMode = String(job?.wakeMode || "now");
+  const currentDeliveryMode = String(job?.delivery?.mode || "none");
+  const deliverySessionOptions = useMemo(() => {
+    const seenLabels = new Set();
+    const deduped = [];
+    const selectedKey = String(destinationSessionKey || "").trim();
+    let selectedPresent = false;
+    (Array.isArray(deliverySessions) ? deliverySessions : []).forEach((sessionRow) => {
+      const key = String(sessionRow?.key || "").trim();
+      if (!key) return;
+      if (key === selectedKey) selectedPresent = true;
+      const label = String(sessionRow?.label || sessionRow?.key || "Session").trim();
+      const dedupeKey = label.toLowerCase();
+      if (seenLabels.has(dedupeKey)) return;
+      seenLabels.add(dedupeKey);
+      deduped.push(sessionRow);
+    });
+    if (!selectedPresent && selectedKey) {
+      const selectedRow = (Array.isArray(deliverySessions) ? deliverySessions : []).find(
+        (sessionRow) => String(sessionRow?.key || "").trim() === selectedKey,
+      );
+      if (selectedRow) deduped.unshift(selectedRow);
+    }
+    return deduped;
+  }, [deliverySessions, destinationSessionKey]);
+  const deliverySelectValue =
+    deliveryMode === "announce" && String(destinationSessionKey || "").trim()
+      ? String(destinationSessionKey || "")
+      : kDeliveryNoneValue;
+  const isRoutingDirty =
+    sessionTarget !== currentSessionTarget ||
+    wakeMode !== currentWakeMode ||
+    deliveryMode !== currentDeliveryMode;
+  const isPromptDirty = promptValue !== savedPromptValue;
+  const hasUnsavedChanges = isRoutingDirty || isPromptDirty;
+
   return html`
     <div class="cron-detail-scroll">
       <div class="cron-detail-content">
@@ -265,22 +297,15 @@ export const CronJobDetail = ({
               <h2 class="font-semibold text-base text-gray-100">${job.name || job.id}</h2>
               <div class="text-xs text-gray-500 mt-1">ID: <code>${job.id}</code></div>
             </div>
-            <div class="flex items-center gap-2">
-              <${ToggleSwitch}
-                checked=${job.enabled !== false}
-                disabled=${togglingJobEnabled}
-                onChange=${onToggleEnabled}
-                label=${job.enabled === false ? "Disabled" : "Enabled"}
-              />
-              <${ActionButton}
-                onClick=${onRunNow}
-                loading=${runningJob}
-                tone="secondary"
-                size="sm"
-                idleLabel="Run Now"
-                loadingLabel="Running..."
-              />
-            </div>
+            <${ActionButton}
+              onClick=${onSaveChanges}
+              loading=${savingChanges}
+              disabled=${!hasUnsavedChanges}
+              tone="primary"
+              size="sm"
+              idleLabel="Save changes"
+              loadingLabel="Saving..."
+            />
           </div>
           <div class="grid grid-cols-2 gap-2 text-xs">
             <div class=${kMetaCardClassName}>
@@ -304,32 +329,100 @@ export const CronJobDetail = ({
           <div class="grid grid-cols-3 gap-2 text-xs">
             <div class=${kMetaCardClassName}>
               <div class="text-gray-500">Session target</div>
-              <div class="text-gray-300 font-mono">${job.sessionTarget || "main"}</div>
+              <div class="pt-1">
+                <${SegmentedControl}
+                  options=${kSessionTargetOptions}
+                  value=${sessionTarget}
+                  onChange=${(value) =>
+                    onChangeRoutingDraft((currentValue = {}) => ({
+                      ...currentValue,
+                      sessionTarget: String(value || "main"),
+                    }))}
+                />
+              </div>
             </div>
             <div class=${kMetaCardClassName}>
               <div class="text-gray-500">Wake mode</div>
-              <div class="text-gray-300 font-mono">${job.wakeMode || "now"}</div>
+              <div class="pt-1">
+                <${SegmentedControl}
+                  options=${kWakeModeOptions}
+                  value=${wakeMode}
+                  onChange=${(value) =>
+                    onChangeRoutingDraft((currentValue = {}) => ({
+                      ...currentValue,
+                      wakeMode: String(value || "now"),
+                    }))}
+                />
+              </div>
             </div>
             <div class=${kMetaCardClassName}>
               <div class="text-gray-500">Delivery</div>
-              <div class="text-gray-300 font-mono">
-                ${String(job?.delivery?.mode || "none")}
-                ${job?.delivery?.channel
-                  ? html`- ${job.delivery.channel}${job?.delivery?.to
-                      ? `:${job.delivery.to}`
-                      : ""}`
-                  : ""}
+              <div class="pt-1">
+                <select
+                  value=${deliverySelectValue}
+                  onInput=${(event) => {
+                    const nextValue = String(event.currentTarget?.value || "");
+                    if (!nextValue || nextValue === kDeliveryNoneValue) {
+                      onChangeRoutingDraft((currentValue = {}) => ({
+                        ...currentValue,
+                        deliveryMode: "none",
+                        deliveryChannel: "",
+                        deliveryTo: "",
+                      }));
+                      onChangeDestinationSessionKey("");
+                      return;
+                    }
+                    onChangeDestinationSessionKey(nextValue);
+                    onChangeRoutingDraft((currentValue = {}) => ({
+                      ...currentValue,
+                      deliveryMode: "announce",
+                    }));
+                  }}
+                  disabled=${savingChanges}
+                  class="w-full bg-black/30 border border-border rounded-lg px-2 py-1.5 text-[11px] text-gray-200 focus:border-gray-500"
+                >
+                  <option value=${kDeliveryNoneValue}>None</option>
+                  ${deliverySessionOptions.map(
+                    (sessionRow) => html`
+                      <option value=${String(sessionRow?.key || "")}>
+                        ${String(sessionRow?.label || sessionRow?.key || "Session")}
+                      </option>
+                    `,
+                  )}
+                </select>
               </div>
+              ${loadingDeliverySessions
+                ? html`<div class="text-[11px] text-gray-500 pt-1">Loading delivery sessions...</div>`
+                : null}
+              ${deliverySessionsError
+                ? html`<div class="text-[11px] text-red-400 pt-1">${deliverySessionsError}</div>`
+                : null}
             </div>
           </div>
+          <div class="flex items-center justify-between gap-3">
+            <${ToggleSwitch}
+              checked=${job.enabled !== false}
+              disabled=${togglingJobEnabled || savingChanges}
+              onChange=${onToggleEnabled}
+              label=${job.enabled === false ? "Disabled" : "Enabled"}
+            />
+            <${ActionButton}
+              onClick=${onRunNow}
+              loading=${runningJob}
+              disabled=${hasUnsavedChanges || savingChanges}
+              tone="secondary"
+              size="sm"
+              idleLabel="Run now"
+              loadingLabel="Running..."
+            />
+          </div>
         </section>
 
         <${PromptEditor}
           promptValue=${promptValue}
           savedPromptValue=${savedPromptValue}
           onChangePrompt=${onChangePrompt}
-          onSavePrompt=${onSavePrompt}
-          savingPrompt=${savingPrompt}
+          onSaveChanges=${onSaveChanges}
         />
 
         <${CronJobUsage}
@@ -338,73 +431,14 @@ export const CronJobDetail = ({
           onSetUsageDays=${onSetUsageDays}
         />
 
-        <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">Run history</h3>
-            <div class="text-xs text-gray-500">${formatTokenCount(runTotal)} entries</div>
-          </div>
-          <div class="flex items-center gap-2">
-            <${SegmentedControl}
-              options=${kRunStatusFilterOptions}
-              value=${runStatusFilter}
-              onChange=${onSetRunStatusFilter}
-            />
-            <${SegmentedControl}
-              options=${kRunDeliveryFilterOptions}
-              value=${runDeliveryFilter}
-              onChange=${onSetRunDeliveryFilter}
-            />
-          </div>
-
-          ${runEntries.length === 0
-            ? html`<div class="text-sm text-gray-500">No runs found.</div>`
-            : html`
-                <div class="ac-history-list">
-                  ${runEntries.map(
-                    (entry) => html`
-                      <details key=${`${entry.ts}:${entry.sessionKey || ""}`} 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">
-                                ${formatLocaleDateTimeWithTodayTime(entry.ts, {
-                                  fallback: "—",
-                                  valueIsEpochMs: true,
-                                })}
-                              </span>
-                            </span>
-                            <span class="inline-flex items-center gap-3 shrink-0 text-xs">
-                              <span class=${runStatusClassName(entry.status)}>${entry.status || "unknown"}</span>
-                              <span class="text-gray-400">${formatDurationCompactMs(entry.durationMs)}</span>
-                              <span class="text-gray-400">
-                                ${formatTokenCount(entry?.usage?.total_tokens || 0)} tk
-                              </span>
-                              <span class="text-gray-500">${runDeliveryLabel(entry)}</span>
-                            </span>
-                          </div>
-                        </summary>
-                        <div class="ac-history-body space-y-2 text-xs">
-                          ${entry.summary
-                            ? html`<div><span class="text-gray-500">Summary:</span> ${entry.summary}</div>`
-                            : null}
-                          ${entry.error
-                            ? html`<div class="text-red-300"><span class="text-gray-500">Error:</span> ${entry.error}</div>`
-                            : null}
-                          <div class="text-gray-500">
-                            Model: <span class="text-gray-300 font-mono">${entry.model || "—"}</span>
-                            ${entry.sessionKey
-                              ? html` | Session:
-                                  <span class="text-gray-300 font-mono">${entry.sessionKey}</span>`
-                              : null}
-                          </div>
-                        </div>
-                      </details>
-                    `,
-                  )}
-                </div>
-              `}
-          ${runHasMore
+        <${CronRunHistoryPanel}
+          entryCountLabel=${`${formatTokenCount(runTotal)} entries`}
+          primaryFilterOptions=${kRunStatusFilterOptions}
+          primaryFilterValue=${runStatusFilter}
+          onChangePrimaryFilter=${onSetRunStatusFilter}
+          rows=${runEntries}
+          variant="detail"
+          footer=${runHasMore
             ? html`
                 <div class="pt-2">
                   <${ActionButton}
@@ -418,7 +452,7 @@ export const CronJobDetail = ({
                 </div>
               `
             : null}
-        </section>
+        />
       </div>
     </div>
   `;

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

@@ -1,8 +1,13 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { formatCost, formatTokenCount } from "./cron-helpers.js";
+import { SegmentedControl } from "../segmented-control.js";
 
 const html = htm.bind(h);
+const kUsageRangeOptions = [
+  { label: "7d", value: 7 },
+  { label: "30d", value: 30 },
+];
 
 const resolveDominantModel = (usage = null) => {
   const list = Array.isArray(usage?.modelBreakdown) ? usage.modelBreakdown : [];
@@ -25,23 +30,11 @@ export const CronJobUsage = ({ usage = null, usageDays = 30, onSetUsageDays = ()
     <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>
-        <div class="flex items-center gap-1">
-          ${[7, 30].map(
-            (days) => html`
-              <button
-                type="button"
-                class=${`text-xs px-2 py-1 rounded border ${
-                  usageDays === days
-                    ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                    : "border-border text-gray-400 hover:text-gray-200"
-                }`}
-                onclick=${() => onSetUsageDays(days)}
-              >
-                ${days}d
-              </button>
-            `,
-          )}
-        </div>
+        <${SegmentedControl}
+          options=${kUsageRangeOptions}
+          value=${usageDays}
+          onChange=${onSetUsageDays}
+        />
       </div>
       <div class="grid grid-cols-2 gap-2 text-xs">
         <div class="ac-surface-inset rounded-lg p-2">
@@ -62,7 +55,7 @@ export const CronJobUsage = ({ usage = null, usageDays = 30, onSetUsageDays = ()
         </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>