@chrysb/alphaclaw 0.6.0 → 0.6.2-beta.0

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

@@ -0,0 +1,366 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact/hooks";
+import { usePolling } from "../../hooks/usePolling.js";
+import {
+  fetchCronBulkRuns,
+  fetchCronBulkUsage,
+  fetchCronJobRuns,
+  fetchCronJobs,
+  fetchCronJobUsage,
+  fetchCronStatus,
+  setCronJobEnabled,
+  triggerCronJobRun,
+  updateCronJobPrompt,
+} from "../../lib/api.js";
+import { readUiSettings, writeUiSettings } from "../../lib/ui-settings.js";
+import { showToast } from "../toast.js";
+import { kAllCronJobsRouteKey } from "./cron-helpers.js";
+
+const kDefaultListPanelWidthPx = 372;
+const kListPanelMinWidthPx = 220;
+const kListPanelMaxWidthPx = 480;
+const kListPanelWidthUiSettingKey = "cronListPanelWidthPx";
+const kRunsPageSize = 25;
+const kCalendarUsageDays = 30;
+const kCalendarPastDays = 30;
+
+const clampListPanelWidth = (value) =>
+  Math.max(kListPanelMinWidthPx, Math.min(kListPanelMaxWidthPx, value));
+
+const normalizeRouteJobId = (jobId = "") => {
+  const normalized = String(jobId || "").trim();
+  return normalized || kAllCronJobsRouteKey;
+};
+
+export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
+  const listPanelRef = useRef(null);
+  const [listPanelWidthPx, setListPanelWidthPx] = useState(() => {
+    const settings = readUiSettings();
+    if (!Number.isFinite(settings?.[kListPanelWidthUiSettingKey])) {
+      return kDefaultListPanelWidthPx;
+    }
+    return clampListPanelWidth(settings[kListPanelWidthUiSettingKey]);
+  });
+  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);
+  const [runTotal, setRunTotal] = useState(0);
+  const [loadingMoreRuns, setLoadingMoreRuns] = useState(false);
+  const [promptValue, setPromptValue] = useState("");
+  const [savedPromptValue, setSavedPromptValue] = useState("");
+  const [savingPrompt, setSavingPrompt] = useState(false);
+  const [runningJob, setRunningJob] = useState(false);
+  const [togglingJobEnabled, setTogglingJobEnabled] = useState(false);
+  const [usageDays, setUsageDays] = useState(30);
+
+  const selectedRouteKey = normalizeRouteJobId(jobId);
+  const selectedJobId =
+    selectedRouteKey === kAllCronJobsRouteKey ? "" : selectedRouteKey;
+
+  const jobsPoll = usePolling(
+    () => fetchCronJobs({ sortBy: "nextRunAtMs", sortDir: "asc" }),
+    15000,
+  );
+  const statusPoll = usePolling(fetchCronStatus, 30000);
+  const runsPoll = usePolling(
+    () => {
+      if (!selectedJobId) {
+        return Promise.resolve({
+          ok: true,
+          runs: { entries: [], hasMore: false, nextOffset: 0 },
+        });
+      }
+      return fetchCronJobRuns(selectedJobId, {
+        limit: kRunsPageSize,
+        offset: 0,
+        status: runStatusFilter,
+        deliveryStatus: runDeliveryFilter,
+        sortDir: "desc",
+      });
+    },
+    10000,
+    { enabled: !!selectedJobId },
+  );
+  const usagePoll = usePolling(
+    () => {
+      if (!selectedJobId) return Promise.resolve({ ok: true, usage: null });
+      return fetchCronJobUsage(selectedJobId, { days: usageDays });
+    },
+    60000,
+    { enabled: !!selectedJobId },
+  );
+  const bulkUsagePoll = usePolling(
+    () => fetchCronBulkUsage({ days: kCalendarUsageDays }),
+    60000,
+    { enabled: !selectedJobId },
+  );
+  const bulkRunsPoll = usePolling(
+    () =>
+      fetchCronBulkRuns({
+        sinceMs: Date.now() - kCalendarPastDays * 24 * 60 * 60 * 1000,
+        limitPerJob: 1200,
+      }),
+    30000,
+    { enabled: !selectedJobId },
+  );
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings[kListPanelWidthUiSettingKey] = listPanelWidthPx;
+    writeUiSettings(settings);
+  }, [listPanelWidthPx]);
+
+  useEffect(() => {
+    if (!runsPoll.data?.runs) return;
+    setRunEntries(
+      Array.isArray(runsPoll.data.runs.entries)
+        ? runsPoll.data.runs.entries
+        : [],
+    );
+    setRunHasMore(!!runsPoll.data.runs.hasMore);
+    setRunNextOffset(Number(runsPoll.data.runs.nextOffset || 0));
+    setRunTotal(Number(runsPoll.data.runs.total || 0));
+  }, [runsPoll.data]);
+
+  const jobs = useMemo(
+    () => (Array.isArray(jobsPoll.data?.jobs) ? jobsPoll.data.jobs : []),
+    [jobsPoll.data],
+  );
+
+  const selectedJob = useMemo(
+    () => jobs.find((job) => String(job?.id || "") === selectedJobId) || null,
+    [jobs, selectedJobId],
+  );
+
+  useEffect(() => {
+    if (!selectedJobId) {
+      setPromptValue("");
+      setSavedPromptValue("");
+      return;
+    }
+    const prompt = String(selectedJob?.payload?.message || "");
+    setPromptValue(prompt);
+    setSavedPromptValue(prompt);
+  }, [selectedJobId, selectedJob?.payload?.message]);
+
+  useEffect(() => {
+    setRunEntries([]);
+    setRunHasMore(false);
+    setRunNextOffset(0);
+    setRunTotal(0);
+    if (!selectedJobId) return;
+    runsPoll.refresh();
+  }, [selectedJobId, runStatusFilter, runDeliveryFilter]);
+
+  useEffect(() => {
+    if (!selectedJobId) return;
+    usagePoll.refresh();
+  }, [selectedJobId, usageDays]);
+
+  const resizeListPanelWithClientX = useCallback((clientX) => {
+    const listPanelElement = listPanelRef.current;
+    if (!listPanelElement) return;
+    const parentBounds =
+      listPanelElement.parentElement?.getBoundingClientRect();
+    if (!parentBounds) return;
+    const nextWidth = clampListPanelWidth(
+      Math.round(clientX - parentBounds.left),
+    );
+    setListPanelWidthPx(nextWidth);
+  }, []);
+
+  const onListResizerPointerDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsResizingListPanel(true);
+      resizeListPanelWithClientX(event.clientX);
+    },
+    [resizeListPanelWithClientX],
+  );
+
+  useEffect(() => {
+    if (!isResizingListPanel) return () => {};
+    const onPointerMove = (event) => resizeListPanelWithClientX(event.clientX);
+    const onPointerUp = () => setIsResizingListPanel(false);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    const previousUserSelect = document.body.style.userSelect;
+    const previousCursor = document.body.style.cursor;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      document.body.style.userSelect = previousUserSelect;
+      document.body.style.cursor = previousCursor;
+    };
+  }, [isResizingListPanel, resizeListPanelWithClientX]);
+
+  const selectAllJobs = useCallback(() => {
+    onSetLocation("/cron");
+  }, [onSetLocation]);
+
+  const selectJob = useCallback(
+    (nextJobId) => {
+      onSetLocation(`/cron/${encodeURIComponent(String(nextJobId || ""))}`);
+    },
+    [onSetLocation],
+  );
+
+  const refreshAll = useCallback(() => {
+    jobsPoll.refresh();
+    statusPoll.refresh();
+    runsPoll.refresh();
+    usagePoll.refresh();
+    bulkUsagePoll.refresh();
+    bulkRunsPoll.refresh();
+  }, [
+    bulkRunsPoll.refresh,
+    bulkUsagePoll.refresh,
+    jobsPoll.refresh,
+    runsPoll.refresh,
+    statusPoll.refresh,
+    usagePoll.refresh,
+  ]);
+
+  const runSelectedJobNow = useCallback(async () => {
+    if (!selectedJobId || runningJob) return;
+    setRunningJob(true);
+    try {
+      await triggerCronJobRun(selectedJobId);
+      showToast("Cron run triggered", "success");
+      refreshAll();
+    } catch (error) {
+      showToast(error.message || "Could not run cron job", "error");
+    } finally {
+      setRunningJob(false);
+    }
+  }, [refreshAll, runningJob, selectedJobId]);
+
+  const setSelectedJobEnabled = useCallback(
+    async (enabled) => {
+      if (!selectedJobId || togglingJobEnabled) return;
+      setTogglingJobEnabled(true);
+      try {
+        await setCronJobEnabled(selectedJobId, enabled);
+        showToast(
+          enabled ? "Cron job enabled" : "Cron job disabled",
+          "success",
+        );
+        refreshAll();
+      } catch (error) {
+        showToast(error.message || "Could not update cron job", "error");
+      } finally {
+        setTogglingJobEnabled(false);
+      }
+    },
+    [refreshAll, selectedJobId, togglingJobEnabled],
+  );
+
+  const loadMoreRuns = useCallback(async () => {
+    if (!selectedJobId || !runHasMore || loadingMoreRuns) return;
+    setLoadingMoreRuns(true);
+    try {
+      const data = await fetchCronJobRuns(selectedJobId, {
+        limit: kRunsPageSize,
+        offset: runNextOffset,
+        status: runStatusFilter,
+        deliveryStatus: runDeliveryFilter,
+        sortDir: "desc",
+      });
+      const nextEntries = Array.isArray(data?.runs?.entries)
+        ? data.runs.entries
+        : [];
+      setRunEntries((currentValue) => [...currentValue, ...nextEntries]);
+      setRunHasMore(!!data?.runs?.hasMore);
+      setRunNextOffset(Number(data?.runs?.nextOffset || 0));
+      setRunTotal(Number(data?.runs?.total || 0));
+    } catch (error) {
+      showToast(error.message || "Could not load more runs", "error");
+    } finally {
+      setLoadingMoreRuns(false);
+    }
+  }, [
+    loadingMoreRuns,
+    runDeliveryFilter,
+    runHasMore,
+    runNextOffset,
+    runStatusFilter,
+    selectedJobId,
+  ]);
+
+  const savePrompt = useCallback(async () => {
+    if (!selectedJobId || savingPrompt) return;
+    if (promptValue === savedPromptValue) return;
+    setSavingPrompt(true);
+    try {
+      await updateCronJobPrompt(selectedJobId, promptValue);
+      setSavedPromptValue(promptValue);
+      showToast("Cron prompt updated", "success");
+      refreshAll();
+    } catch (error) {
+      showToast(error.message || "Could not update prompt", "error");
+    } finally {
+      setSavingPrompt(false);
+    }
+  }, [promptValue, refreshAll, savedPromptValue, savingPrompt, selectedJobId]);
+
+  return {
+    refs: {
+      listPanelRef,
+    },
+    state: {
+      jobs,
+      jobsError: jobsPoll.error,
+      status: statusPoll.data?.status || null,
+      statusError: statusPoll.error,
+      selectedRouteKey,
+      selectedJobId,
+      selectedJob,
+      listPanelWidthPx,
+      isResizingListPanel,
+      runEntries,
+      runHasMore,
+      runNextOffset,
+      runTotal,
+      runStatusFilter,
+      runDeliveryFilter,
+      runsError: runsPoll.error,
+      loadingMoreRuns,
+      usage: usagePoll.data?.usage || null,
+      usageError: usagePoll.error,
+      usageDays,
+      bulkUsageByJobId: bulkUsagePoll.data?.usage?.byJobId || {},
+      bulkUsageError: bulkUsagePoll.error,
+      bulkRunsByJobId: bulkRunsPoll.data?.runs?.byJobId || {},
+      bulkRunsError: bulkRunsPoll.error,
+      promptValue,
+      savedPromptValue,
+      savingPrompt,
+      runningJob,
+      togglingJobEnabled,
+    },
+    actions: {
+      setRunStatusFilter,
+      setRunDeliveryFilter,
+      setUsageDays,
+      setPromptValue,
+      savePrompt,
+      refreshAll,
+      loadMoreRuns,
+      runSelectedJobNow,
+      setSelectedJobEnabled,
+      selectAllJobs,
+      selectJob,
+      onListResizerPointerDown,
+    },
+  };
+};

package/lib/public/js/components/doctor/summary-cards.js

@@ -1,24 +1,18 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { SummaryStatCard } from "../summary-stat-card.js";
 import { buildDoctorPriorityCounts } from "./helpers.js";
 
 const html = htm.bind(h);
 
-const SummaryCard = ({ title = "", value = 0, toneClassName = "" }) => html`
-  <div class="bg-surface border border-border rounded-xl p-4">
-    <h3 class="card-label text-xs">${title}</h3>
-    <div class=${`text-lg font-semibold mt-1 ${toneClassName}`}>${value}</div>
-  </div>
-`;
-
 export const DoctorSummaryCards = ({ cards = [] }) => {
   const counts = buildDoctorPriorityCounts(cards);
   return html`
     <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
-      <${SummaryCard} title="Open Findings" value=${cards.length} />
-      <${SummaryCard} title="P0" value=${counts.P0} toneClassName="text-red-400" />
-      <${SummaryCard} title="P1" value=${counts.P1} toneClassName="text-yellow-400" />
-      <${SummaryCard} title="P2" value=${counts.P2} toneClassName="text-gray-300" />
+      <${SummaryStatCard} title="Open Findings" value=${cards.length} />
+      <${SummaryStatCard} title="P0" value=${counts.P0} toneClassName="text-red-400" />
+      <${SummaryStatCard} title="P1" value=${counts.P1} toneClassName="text-yellow-400" />
+      <${SummaryStatCard} title="P2" value=${counts.P2} toneClassName="text-gray-300" />
     </div>
   `;
 };

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -47,14 +47,14 @@ const copyText = async (value) => {
   }
 };
 
-const kStepTitles = [
+const kSetupStepTitles = [
   "Install + Authenticate gcloud",
   "Enable APIs",
   "Create Topic + IAM",
   "Create Push Subscription",
   "Build with your Agent",
 ];
-const kTotalSteps = kStepTitles.length;
+const kTutorialStepTitles = kSetupStepTitles.slice(0, 3);
 const kNoSessionSelectedValue = kNoDestinationSessionValue;
 
 const renderCommandBlock = (command = "", onCopy = () => {}) => html`
@@ -136,6 +136,8 @@ export const GmailSetupWizard = ({
     String(clientConfig?.projectId || "").trim() ||
     "<project-id>";
   const hasExistingWebhookSetup = Boolean(clientConfig?.webhookExists);
+  const stepTitles = hasExistingWebhookSetup ? kTutorialStepTitles : kSetupStepTitles;
+  const totalSteps = stepTitles.length;
   const client =
     String(account?.client || clientConfig?.client || "default").trim() ||
     "default";
@@ -172,7 +174,7 @@ export const GmailSetupWizard = ({
         destination: selectedDestination,
       });
       setWatchEnabled(true);
-      setStep((prev) => Math.min(prev + 1, kTotalSteps - 1));
+      setStep((prev) => Math.min(prev + 1, totalSteps - 1));
     } catch (err) {
       setLocalError(err.message || "Could not finish setup");
     }
@@ -196,7 +198,7 @@ export const GmailSetupWizard = ({
       }
       return;
     }
-    setStep((prev) => Math.min(prev + 1, kTotalSteps - 1));
+    setStep((prev) => Math.min(prev + 1, totalSteps - 1));
   };
 
   const handleSendToAgent = async () => {
@@ -240,7 +242,7 @@ export const GmailSetupWizard = ({
       </button>
       <div class="text-xs text-gray-500">Gmail Pub / Sub Setup</div>
       <div class="flex items-center gap-1">
-        ${kStepTitles.map(
+        ${stepTitles.map(
           (title, idx) => html`
             <div
               class=${`h-1 flex-1 rounded-full transition-colors ${idx <= step ? "bg-accent" : "bg-border"}`}
@@ -251,7 +253,7 @@ export const GmailSetupWizard = ({
         )}
       </div>
       <${PageHeader}
-        title=${`Step ${step + 1} of ${kTotalSteps}: ${kStepTitles[step]}`}
+        title=${`Step ${step + 1} of ${totalSteps}: ${stepTitles[step]}`}
         actions=${null}
       />
       ${localError ? html`<div class="text-xs text-red-400">${localError}</div>` : null}
@@ -341,7 +343,7 @@ export const GmailSetupWizard = ({
           : null
       }
       ${
-        !needsProjectId && step === 3
+        !hasExistingWebhookSetup && !needsProjectId && step === 3
           ? html`
               ${renderCommandBlock(commands?.createSubscription || "", () =>
                 handleCopy(commands?.createSubscription || ""),
@@ -376,7 +378,7 @@ export const GmailSetupWizard = ({
           : null
       }
       ${
-        step === 4
+        !hasExistingWebhookSetup && step === 4
           ? html`
               <div
                 class="rounded-lg border border-border bg-black/20 p-3 space-y-3"
@@ -469,7 +471,18 @@ export const GmailSetupWizard = ({
               />`
         }
         ${
-          step < kTotalSteps - 2
+          !hasExistingWebhookSetup && step === totalSteps - 2
+            ? html`<${ActionButton}
+                onClick=${handleFinish}
+                disabled=${false}
+                loading=${saving}
+                idleLabel="Enable watch"
+                loadingLabel="Enabling..."
+                tone="primary"
+                size="md"
+                className="w-full justify-center"
+              />`
+            : step < totalSteps - 1
             ? html`<${ActionButton}
                 onClick=${handleNext}
                 disabled=${saving || (needsProjectId && !canAdvance)}
@@ -478,27 +491,14 @@ export const GmailSetupWizard = ({
                 size="md"
                 className="w-full justify-center"
               />`
-            : step === kTotalSteps - 2
-              ? html`<${ActionButton}
-                  onClick=${hasExistingWebhookSetup ? handleNext : handleFinish}
-                  disabled=${false}
-                  loading=${saving}
-                  idleLabel=${hasExistingWebhookSetup ? "Next" : "Enable watch"}
-                  loadingLabel=${hasExistingWebhookSetup
-                    ? "Loading..."
-                    : "Enabling..."}
-                  tone="primary"
-                  size="md"
-                  className="w-full justify-center"
-                />`
-              : html`<${ActionButton}
-                  onClick=${onClose}
-                  disabled=${saving || sendingToAgent}
-                  idleLabel="Done"
-                  tone="secondary"
-                  size="md"
-                  className="w-full justify-center"
-                />`
+            : html`<${ActionButton}
+                onClick=${onClose}
+                disabled=${saving || sendingToAgent}
+                idleLabel="Done"
+                tone="secondary"
+                size="md"
+                className="w-full justify-center"
+              />`
         }
       </div>
     </${ModalShell}>

package/lib/public/js/components/google/index.js

@@ -373,7 +373,7 @@ export const Google = ({
     if (!account) return;
     const client = String(account.client || "default").trim() || "default";
     const clientConfig = clientConfigByClient.get(client);
-    if (!clientConfig?.configured) {
+    if (!clientConfig?.configured || !clientConfig?.webhookExists) {
       openGmailSetupWizard(accountId);
       return;
     }

package/lib/public/js/components/icons.js

@@ -415,3 +415,16 @@ export const RestartLineIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const ErrorWarningLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"
+    />
+  </svg>
+`;

package/lib/public/js/components/pill-tabs.js

@@ -0,0 +1,33 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const kPillBaseClassName =
+  "inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium transition-colors";
+const kPillActiveClassName =
+  "border-cyan-500/40 bg-cyan-500/10 text-cyan-200 shadow-[0_0_0_1px_rgba(34,211,238,0.08)]";
+const kPillInactiveClassName =
+  "border-border bg-black/20 text-gray-500 hover:border-gray-500 hover:text-gray-300";
+
+export const PillTabs = ({
+  tabs = [],
+  activeTab = "",
+  onSelectTab = () => {},
+  className = "flex items-center gap-2",
+} = {}) => html`
+  <div class=${className}>
+    ${tabs.map(
+      (tab) => html`
+        <button
+          key=${String(tab?.value || "")}
+          type="button"
+          class=${`${kPillBaseClassName} ${activeTab === tab?.value ? kPillActiveClassName : kPillInactiveClassName}`}
+          onclick=${() => onSelectTab(tab?.value)}
+        >
+          ${String(tab?.label || tab?.value || "")}
+        </button>
+      `,
+    )}
+  </div>
+`;

package/lib/public/js/components/pop-actions.js

@@ -0,0 +1,58 @@
+import { h } from "https://esm.sh/preact";
+import { useState, useEffect, useRef } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const kEnterDurationMs = 260;
+const kExitDurationMs = 200;
+
+/**
+ * Wrapper that pop-animates children in/out based on `visible`.
+ * Use for header save/cancel actions or any contextual action group.
+ *
+ * @param {boolean}  props.visible   Whether the actions should be shown.
+ * @param {string}   [props.className] Extra classes on the container.
+ * @param {preact.ComponentChildren} props.children
+ */
+export const PopActions = ({ visible = false, className = "", children }) => {
+  const [phase, setPhase] = useState(visible ? "visible" : "hidden");
+  const enterTimerRef = useRef(null);
+  const exitTimerRef = useRef(null);
+
+  useEffect(() => {
+    clearTimeout(enterTimerRef.current);
+    clearTimeout(exitTimerRef.current);
+    if (visible) {
+      if (phase !== "visible") {
+        setPhase("entering");
+        enterTimerRef.current = setTimeout(
+          () => setPhase("visible"),
+          kEnterDurationMs,
+        );
+      }
+    } else if (phase !== "hidden") {
+      setPhase("exiting");
+      exitTimerRef.current = setTimeout(() => setPhase("hidden"), kExitDurationMs);
+    }
+    return () => {
+      clearTimeout(enterTimerRef.current);
+      clearTimeout(exitTimerRef.current);
+    };
+  }, [visible, phase]);
+
+  const phaseClass =
+    phase === "entering"
+      ? "ac-pop-actions-in"
+      : phase === "exiting"
+        ? "ac-pop-actions-out"
+        : phase === "visible"
+          ? "ac-pop-actions-visible"
+        : "ac-pop-actions-hidden";
+
+  return html`
+    <div class=${`ac-pop-actions ${phaseClass} ${className}`.trim()}>
+      ${children}
+    </div>
+  `;
+};

package/lib/public/js/components/routes/agents-route.js

@@ -10,7 +10,9 @@ export const AgentsRoute = ({
   saving = false,
   agentsActions = {},
   selectedAgentId = "",
+  activeTab = "overview",
   onSelectAgent = () => {},
+  onSelectTab = () => {},
   onNavigateToBrowseFile = () => {},
   onSetLocation = () => {},
 }) => html`
@@ -20,7 +22,9 @@ export const AgentsRoute = ({
     saving=${saving}
     agentsActions=${agentsActions}
     selectedAgentId=${selectedAgentId}
+    activeTab=${activeTab}
     onSelectAgent=${onSelectAgent}
+    onSelectTab=${onSelectTab}
     onNavigateToBrowseFile=${onNavigateToBrowseFile}
     onSetLocation=${onSetLocation}
   />

package/lib/public/js/components/routes/cron-route.js

@@ -0,0 +1,9 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { CronTab } from "../cron-tab/index.js";
+
+const html = htm.bind(h);
+
+export const CronRoute = ({ jobId = "", onSetLocation = () => {} }) => html`
+  <${CronTab} jobId=${jobId} onSetLocation=${onSetLocation} />
+`;

package/lib/public/js/components/routes/index.js

@@ -1,5 +1,6 @@
 export { AgentsRoute } from "./agents-route.js";
 export { BrowseRoute } from "./browse-route.js";
+export { CronRoute } from "./cron-route.js";
 export { DoctorRoute } from "./doctor-route.js";
 export { EnvarsRoute } from "./envars-route.js";
 export { GeneralRoute } from "./general-route.js";