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

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

@@ -1,8 +1,7 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+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 { Tooltip } from "../tooltip.js";
 import { formatCost } from "./cron-helpers.js";
 
 const html = htm.bind(h);
@@ -146,6 +145,8 @@ export const CronRunsTrendCard = ({
   selectedBucketFilter = null,
   onBucketFilterChange = () => {},
 }) => {
+  const chartCanvasRef = useRef(null);
+  const chartInstanceRef = useRef(null);
   const [range, setRange] = useState(
     initialRange === kRange30d ? kRange30d : kRange7d,
   );
@@ -166,6 +167,156 @@ export const CronRunsTrendCard = ({
     );
     return matchingPoint?.key || "";
   }, [range, selectedBucketFilter, trend.points]);
+  const selectedPointIndex = useMemo(
+    () => trend.points.findIndex((point) => point.key === selectedBucketKey),
+    [selectedBucketKey, trend.points],
+  );
+
+  const chartData = useMemo(() => {
+    const dimAlpha = "0.22";
+    const fullAlpha = "0.86";
+    const isDimmed = (index) => selectedPointIndex >= 0 && selectedPointIndex !== index;
+    const labels = trend.points.map((point) => (point.showLabel ? point.label : ""));
+    return {
+      labels,
+      datasets: [
+        {
+          label: "ok",
+          data: trend.points.map((point) => Number(point.ok || 0)),
+          stack: "outcomes",
+          backgroundColor: trend.points.map((_, index) =>
+            `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: trend.points.map((_, index) =>
+            `rgba(34,255,170,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+        {
+          label: "error",
+          data: trend.points.map((point) => Number(point.error || 0)),
+          stack: "outcomes",
+          backgroundColor: trend.points.map((_, index) =>
+            `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: trend.points.map((_, index) =>
+            `rgba(255,74,138,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+        {
+          label: "skipped",
+          data: trend.points.map((point) => Number(point.skipped || 0)),
+          stack: "outcomes",
+          backgroundColor: trend.points.map((_, index) =>
+            `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+          borderColor: trend.points.map((_, index) =>
+            `rgba(255,214,64,${isDimmed(index) ? "0.35" : "1"})`),
+          borderWidth: 1,
+          borderRadius: 0,
+          borderSkipped: false,
+        },
+      ],
+    };
+  }, [selectedPointIndex, trend.points]);
+
+  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 = trend.points[index];
+      if (!selectedPoint) return null;
+      return {
+        key: selectedPoint.key,
+        label: selectedPoint.label,
+        range,
+        startMs: Number(selectedPoint.startMs || 0),
+        endMs: Number(selectedPoint.endMs || 0),
+      };
+    };
+    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) {
+            onBucketFilterChange(null);
+            return;
+          }
+          onBucketFilterChange(nextFilter);
+        },
+        scales: {
+          x: {
+            stacked: true,
+            grid: { color: "rgba(148,163,184,0.08)" },
+            ticks: {
+              color: "rgba(156,163,175,1)",
+              maxRotation: 0,
+              autoSkip: false,
+            },
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: { color: "rgba(148,163,184,0.12)" },
+            ticks: {
+              precision: 0,
+              color: "rgba(156,163,175,1)",
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            labels: {
+              color: "rgba(209,213,219,1)",
+              boxWidth: 10,
+              boxHeight: 10,
+            },
+          },
+          tooltip: {
+            callbacks: {
+              title: (items) => String(items?.[0]?.label || ""),
+              label: (context) => `${context.dataset.label}: ${Number(context.parsed.y || 0)}`,
+              footer: (items) => {
+                const index = Number(items?.[0]?.dataIndex);
+                const point = trend.points[index];
+                if (!point) return "";
+                const costLabel =
+                  point.costCount > 0 ? `~${formatCost(point.totalCost)}` : "—";
+                return `total: ${point.total}\ncost: ${costLabel}`;
+              },
+            },
+          },
+        },
+      },
+    });
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.destroy();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, [chartData, onBucketFilterChange, range, selectedBucketKey, trend.points]);
 
   return html`
     <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
@@ -177,100 +328,8 @@ export const CronRunsTrendCard = ({
           onChange=${setRange}
         />
       </div>
-      <div
-        class="cron-runs-trend-bars"
-        style=${{ "--cron-runs-trend-columns": String(trend.points.length || 1) }}
-      >
-        ${trend.points.map((point) => {
-          const isSelected = selectedBucketKey === point.key;
-          const isDimmed = !!selectedBucketKey && !isSelected;
-          const totalHeightPercent = (point.total / trend.maxTotal) * 100;
-          const okHeightPercent = point.total > 0 ? (point.ok / point.total) * 100 : 0;
-          const errorHeightPercent = point.total > 0 ? (point.error / point.total) * 100 : 0;
-          const skippedHeightPercent = point.total > 0 ? (point.skipped / point.total) * 100 : 0;
-          const tooltipText = [
-            `${point.label}`,
-            `ok: ${point.ok}`,
-            `error: ${point.error}`,
-            `skipped: ${point.skipped}`,
-            `total: ${point.total}`,
-            `cost: ${point.costCount > 0 ? `~${formatCost(point.totalCost)}` : "—"}`,
-          ].join("\n");
-          return html`
-            <${Tooltip}
-              text=${tooltipText}
-              widthClass="w-40"
-              tooltipClassName="whitespace-pre-line"
-              triggerClassName="inline-flex justify-center w-full"
-            >
-              <div
-                class=${`cron-runs-trend-col ${isSelected ? "is-selected" : ""} ${isDimmed ? "is-dimmed" : ""}`}
-                role="button"
-                tabindex="0"
-                onClick=${() => {
-                  if (isSelected) {
-                    onBucketFilterChange(null);
-                    return;
-                  }
-                  onBucketFilterChange({
-                    key: point.key,
-                    label: point.label,
-                    range,
-                    startMs: Number(point.startMs || 0),
-                    endMs: Number(point.endMs || 0),
-                  });
-                }}
-                onKeyDown=${(event) => {
-                  if (event.key !== "Enter" && event.key !== " ") return;
-                  event.preventDefault();
-                  if (isSelected) {
-                    onBucketFilterChange(null);
-                    return;
-                  }
-                  onBucketFilterChange({
-                    key: point.key,
-                    label: point.label,
-                    range,
-                    startMs: Number(point.startMs || 0),
-                    endMs: Number(point.endMs || 0),
-                  });
-                }}
-              >
-                <div class="cron-runs-trend-track">
-                  <div class="cron-runs-trend-bar" style=${{ height: `${totalHeightPercent}%` }}>
-                    <div
-                      class="cron-runs-trend-segment-skipped"
-                      style=${{ height: `${skippedHeightPercent}%` }}
-                    ></div>
-                    <div
-                      class="cron-runs-trend-segment-error"
-                      style=${{ height: `${errorHeightPercent}%` }}
-                    ></div>
-                    <div
-                      class="cron-runs-trend-segment-ok"
-                      style=${{ height: `${okHeightPercent}%` }}
-                    ></div>
-                  </div>
-                </div>
-                <span class="cron-runs-trend-label">${point.showLabel ? point.label : ""}</span>
-              </div>
-            </${Tooltip}>
-          `;
-        })}
-      </div>
-      <div class="cron-runs-trend-legend">
-        <span class="cron-runs-trend-legend-item">
-          <span class="cron-runs-trend-legend-dot is-ok"></span>
-          ok
-        </span>
-        <span class="cron-runs-trend-legend-item">
-          <span class="cron-runs-trend-legend-dot is-error"></span>
-          error
-        </span>
-        <span class="cron-runs-trend-legend-item">
-          <span class="cron-runs-trend-legend-dot is-skipped"></span>
-          skipped
-        </span>
+      <div class="h-40">
+        <canvas ref=${chartCanvasRef}></canvas>
       </div>
     </section>
   `;

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

@@ -75,9 +75,7 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
                     runHasMore=${state.runHasMore}
                     loadingMoreRuns=${state.loadingMoreRuns}
                     runStatusFilter=${state.runStatusFilter}
-                    runDeliveryFilter=${state.runDeliveryFilter}
                     onSetRunStatusFilter=${actions.setRunStatusFilter}
-                    onSetRunDeliveryFilter=${actions.setRunDeliveryFilter}
                     onLoadMoreRuns=${actions.loadMoreRuns}
                     onRunNow=${actions.runSelectedJobNow}
                     runningJob=${state.runningJob}
@@ -89,8 +87,15 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
                     promptValue=${state.promptValue}
                     savedPromptValue=${state.savedPromptValue}
                     onChangePrompt=${actions.setPromptValue}
-                    onSavePrompt=${actions.savePrompt}
-                    savingPrompt=${state.savingPrompt}
+                    onSaveChanges=${actions.saveChanges}
+                    savingChanges=${state.savingChanges}
+                    routingDraft=${state.routingDraft}
+                    onChangeRoutingDraft=${actions.setRoutingDraft}
+                    deliverySessions=${state.deliverySessions}
+                    loadingDeliverySessions=${state.loadingDeliverySessions}
+                    deliverySessionsError=${state.deliverySessionsError}
+                    destinationSessionKey=${state.destinationSessionKey}
+                    onChangeDestinationSessionKey=${actions.setDestinationSessionKey}
                   />
                 `}
         </main>

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

@@ -6,6 +6,7 @@ import {
   useState,
 } from "https://esm.sh/preact/hooks";
 import { usePolling } from "../../hooks/usePolling.js";
+import { useDestinationSessionSelection } from "../../hooks/use-destination-session-selection.js";
 import {
   fetchCronBulkRuns,
   fetchCronBulkUsage,
@@ -16,6 +17,7 @@ import {
   setCronJobEnabled,
   triggerCronJobRun,
   updateCronJobPrompt,
+  updateCronJobRouting,
 } from "../../lib/api.js";
 import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
 import { showToast } from "../toast.js";
@@ -28,6 +30,20 @@ const kListPanelWidthUiSettingKey = "cronListPanelWidthPx";
 const kRunsPageSize = 25;
 const kCalendarUsageDays = 30;
 const kCalendarPastDays = 30;
+const kRoutingDefaults = {
+  sessionTarget: "main",
+  wakeMode: "now",
+  deliveryMode: "none",
+  deliveryChannel: "",
+  deliveryTo: "",
+};
+const readRoutingDraftFromJob = (job = null) => ({
+  sessionTarget: String(job?.sessionTarget || kRoutingDefaults.sessionTarget),
+  wakeMode: String(job?.wakeMode || kRoutingDefaults.wakeMode),
+  deliveryMode: String(job?.delivery?.mode || kRoutingDefaults.deliveryMode),
+  deliveryChannel: String(job?.delivery?.channel || ""),
+  deliveryTo: String(job?.delivery?.to || ""),
+});
 
 const clampListPanelWidth = (value) =>
   Math.max(kListPanelMinWidthPx, Math.min(kListPanelMaxWidthPx, value));
@@ -38,6 +54,9 @@ const normalizeRouteJobId = (jobId = "") => {
 };
 
 export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
+  const selectedRouteKey = normalizeRouteJobId(jobId);
+  const selectedJobId =
+    selectedRouteKey === kAllCronJobsRouteKey ? "" : selectedRouteKey;
   const listPanelRef = useRef(null);
   const [listPanelWidthPx, setListPanelWidthPx] = useState(() => {
     const settings = readUiSettings();
@@ -48,7 +67,6 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
   });
   const [isResizingListPanel, setIsResizingListPanel] = useState(false);
   const [runStatusFilter, setRunStatusFilter] = useState("all");
-  const [runDeliveryFilter, setRunDeliveryFilter] = useState("all");
   const [runEntries, setRunEntries] = useState([]);
   const [runHasMore, setRunHasMore] = useState(false);
   const [runNextOffset, setRunNextOffset] = useState(0);
@@ -56,14 +74,22 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
   const [loadingMoreRuns, setLoadingMoreRuns] = useState(false);
   const [promptValue, setPromptValue] = useState("");
   const [savedPromptValue, setSavedPromptValue] = useState("");
-  const [savingPrompt, setSavingPrompt] = useState(false);
+  const [savingChanges, setSavingChanges] = useState(false);
   const [runningJob, setRunningJob] = useState(false);
   const [togglingJobEnabled, setTogglingJobEnabled] = useState(false);
+  const [routingDraft, setRoutingDraft] = useState(kRoutingDefaults);
   const [usageDays, setUsageDays] = useState(30);
-
-  const selectedRouteKey = normalizeRouteJobId(jobId);
-  const selectedJobId =
-    selectedRouteKey === kAllCronJobsRouteKey ? "" : selectedRouteKey;
+  const {
+    sessions: deliverySessions,
+    loading: loadingDeliverySessions,
+    error: deliverySessionsError,
+    destinationSessionKey,
+    setDestinationSessionKey,
+    selectedDestination,
+  } = useDestinationSessionSelection({
+    enabled: !!selectedJobId,
+    resetKey: String(selectedJobId || ""),
+  });
 
   const jobsPoll = usePolling(
     () => fetchCronJobs({ sortBy: "nextRunAtMs", sortDir: "asc" }),
@@ -82,7 +108,6 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
         limit: kRunsPageSize,
         offset: 0,
         status: runStatusFilter,
-        deliveryStatus: runDeliveryFilter,
         sortDir: "desc",
       });
     },
@@ -144,13 +169,25 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     if (!selectedJobId) {
       setPromptValue("");
       setSavedPromptValue("");
+      setRoutingDraft(kRoutingDefaults);
       return;
     }
     const prompt = String(selectedJob?.payload?.message || "");
     setPromptValue(prompt);
     setSavedPromptValue(prompt);
+    setRoutingDraft(readRoutingDraftFromJob(selectedJob));
   }, [selectedJobId, selectedJob?.payload?.message]);
 
+  useEffect(() => {
+    if (!selectedJobId) return;
+    setRoutingDraft(readRoutingDraftFromJob(selectedJob));
+  }, [
+    selectedJobId,
+    selectedJob?.sessionTarget,
+    selectedJob?.wakeMode,
+    selectedJob?.delivery?.mode,
+  ]);
+
   useEffect(() => {
     setRunEntries([]);
     setRunHasMore(false);
@@ -158,7 +195,7 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     setRunTotal(0);
     if (!selectedJobId) return;
     runsPoll.refresh();
-  }, [selectedJobId, runStatusFilter, runDeliveryFilter]);
+  }, [selectedJobId, runStatusFilter]);
 
   useEffect(() => {
     if (!selectedJobId) return;
@@ -273,7 +310,6 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
         limit: kRunsPageSize,
         offset: runNextOffset,
         status: runStatusFilter,
-        deliveryStatus: runDeliveryFilter,
         sortDir: "desc",
       });
       const nextEntries = Array.isArray(data?.runs?.entries)
@@ -290,28 +326,81 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     }
   }, [
     loadingMoreRuns,
-    runDeliveryFilter,
     runHasMore,
     runNextOffset,
     runStatusFilter,
     selectedJobId,
   ]);
 
-  const savePrompt = useCallback(async () => {
-    if (!selectedJobId || savingPrompt) return;
-    if (promptValue === savedPromptValue) return;
-    setSavingPrompt(true);
+  const saveChanges = useCallback(async () => {
+    if (!selectedJobId || !selectedJob || savingChanges) return;
+    const currentRouting = readRoutingDraftFromJob(selectedJob);
+    const nextRouting = {
+      sessionTarget: String(routingDraft?.sessionTarget || kRoutingDefaults.sessionTarget),
+      wakeMode: String(routingDraft?.wakeMode || kRoutingDefaults.wakeMode),
+      deliveryMode: String(routingDraft?.deliveryMode || kRoutingDefaults.deliveryMode),
+      deliveryChannel: String(routingDraft?.deliveryChannel || ""),
+      deliveryTo: String(routingDraft?.deliveryTo || ""),
+    };
+    const routingUnchanged =
+      nextRouting.sessionTarget === currentRouting.sessionTarget &&
+      nextRouting.wakeMode === currentRouting.wakeMode &&
+      nextRouting.deliveryMode === currentRouting.deliveryMode &&
+      nextRouting.deliveryChannel === currentRouting.deliveryChannel &&
+      nextRouting.deliveryTo === currentRouting.deliveryTo;
+    const promptUnchanged = promptValue === savedPromptValue;
+    if (routingUnchanged && promptUnchanged) return;
+    setSavingChanges(true);
     try {
-      await updateCronJobPrompt(selectedJobId, promptValue);
-      setSavedPromptValue(promptValue);
-      showToast("Cron prompt updated", "success");
+      if (!routingUnchanged) {
+        await updateCronJobRouting(selectedJobId, nextRouting);
+      }
+      if (!promptUnchanged) {
+        await updateCronJobPrompt(selectedJobId, promptValue);
+        setSavedPromptValue(promptValue);
+      }
+      showToast("Changes saved", "success");
       refreshAll();
     } catch (error) {
-      showToast(error.message || "Could not update prompt", "error");
+      showToast(error.message || "Could not save changes", "error");
     } finally {
-      setSavingPrompt(false);
+      setSavingChanges(false);
     }
-  }, [promptValue, refreshAll, savedPromptValue, savingPrompt, selectedJobId]);
+  }, [
+    promptValue,
+    refreshAll,
+    routingDraft,
+    savedPromptValue,
+    savingChanges,
+    selectedJob,
+    selectedJobId,
+  ]);
+
+  useEffect(() => {
+    if (!selectedJobId) return;
+    if (String(routingDraft?.deliveryMode || "none") !== "announce") return;
+    if (!selectedDestination?.channel && !selectedDestination?.to) return;
+    setRoutingDraft((currentValue = kRoutingDefaults) => {
+      const nextChannel = String(selectedDestination?.channel || currentValue.deliveryChannel || "");
+      const nextTo = String(selectedDestination?.to || currentValue.deliveryTo || "");
+      if (
+        nextChannel === String(currentValue.deliveryChannel || "") &&
+        nextTo === String(currentValue.deliveryTo || "")
+      ) {
+        return currentValue;
+      }
+      return {
+        ...currentValue,
+        deliveryChannel: nextChannel,
+        deliveryTo: nextTo,
+      };
+    });
+  }, [
+    routingDraft?.deliveryMode,
+    selectedDestination?.channel,
+    selectedDestination?.to,
+    selectedJobId,
+  ]);
 
   return {
     refs: {
@@ -332,7 +421,6 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
       runNextOffset,
       runTotal,
       runStatusFilter,
-      runDeliveryFilter,
       runsError: runsPoll.error,
       loadingMoreRuns,
       usage: usagePoll.data?.usage || null,
@@ -344,16 +432,20 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
       bulkRunsError: bulkRunsPoll.error,
       promptValue,
       savedPromptValue,
-      savingPrompt,
+      savingChanges,
       runningJob,
       togglingJobEnabled,
+      routingDraft,
+      deliverySessions,
+      loadingDeliverySessions,
+      deliverySessionsError,
+      destinationSessionKey,
     },
     actions: {
       setRunStatusFilter,
-      setRunDeliveryFilter,
       setUsageDays,
       setPromptValue,
-      savePrompt,
+      saveChanges,
       refreshAll,
       loadMoreRuns,
       runSelectedJobNow,
@@ -361,6 +453,8 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
       selectAllJobs,
       selectJob,
       onListResizerPointerDown,
+      setRoutingDraft,
+      setDestinationSessionKey,
     },
   };
 };

package/lib/public/js/lib/api.js

@@ -544,6 +544,31 @@ export async function updateCronJobPrompt(id, message) {
   return parseJsonOrThrow(res, "Could not update cron prompt");
 }
 
+export async function updateCronJobRouting(
+  id,
+  {
+    sessionTarget = "",
+    wakeMode = "",
+    deliveryMode = "",
+    deliveryChannel = "",
+    deliveryTo = "",
+  } = {},
+) {
+  const safeId = encodeURIComponent(String(id || ""));
+  const res = await authFetch(`/api/cron/jobs/${safeId}/routing`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      sessionTarget: String(sessionTarget || ""),
+      wakeMode: String(wakeMode || ""),
+      deliveryMode: String(deliveryMode || ""),
+      deliveryChannel: String(deliveryChannel || ""),
+      deliveryTo: String(deliveryTo || ""),
+    }),
+  });
+  return parseJsonOrThrow(res, "Could not update cron routing");
+}
+
 export async function fetchDevicePairings() {
   const res = await authFetch("/api/devices");
   return res.json();