@chrysb/alphaclaw 0.7.0 → 0.7.2-beta.0

package/lib/public/css/cron.css

@@ -400,23 +400,6 @@
   justify-content: center;
 }
 
-.cron-calendar-expand-btn {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-dim);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.cron-calendar-expand-btn:hover {
-  color: var(--text);
-  border-color: rgba(148, 163, 184, 0.5);
-}
-
 .cron-calendar-grid-wrap {
   position: relative;
 }
@@ -464,6 +447,7 @@
   border-left: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding: 5px;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -473,6 +457,29 @@
   background: rgba(99, 235, 255, 0.04);
 }
 
+.cron-calendar-now-indicator {
+  position: absolute;
+  left: 5px;
+  right: 5px;
+  height: 2px;
+  border-radius: 999px;
+  background: rgba(248, 113, 113, 0.95);
+  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18), 0 0 8px rgba(239, 68, 68, 0.55);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.cron-calendar-now-indicator-dot {
+  position: absolute;
+  left: -3px;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(248, 113, 113, 0.98);
+  transform: translateY(-50%);
+}
+
 .cron-calendar-slot-chip {
   font-size: 11px;
   line-height: 1.2;
@@ -485,6 +492,8 @@
   width: 100%;
   max-width: 100%;
   overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
 
 .cron-calendar-slot-overflow {

package/lib/public/css/explorer.css

@@ -1158,6 +1158,18 @@
   background: rgba(255, 255, 255, 0.04);
 }
 
+.release-notes-preview {
+  padding: 8px 12px 24px 14px;
+}
+
+.release-notes-preview > :first-child {
+  margin-top: 0;
+}
+
+.release-notes-preview > :last-child {
+  margin-bottom: 0;
+}
+
 .file-viewer-editor-highlight-line-content .hl-comment {
   color: var(--comment);
   font-style: italic;

package/lib/public/css/theme.css

@@ -685,3 +685,17 @@ textarea:focus {
   resize: vertical;
 }
 
+.watchdog-terminal-host {
+  position: relative;
+}
+
+.watchdog-terminal-host .xterm {
+  height: 100%;
+  letter-spacing: 0;
+  font-kerning: none;
+}
+
+.watchdog-terminal-host .xterm-viewport {
+  overflow-y: auto !important;
+}
+

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

@@ -8,7 +8,7 @@ import {
 import htm from "https://esm.sh/htm";
 import { Tooltip } from "../tooltip.js";
 import { ModalShell } from "../modal-shell.js";
-import { CloseIcon, FullscreenLineIcon } from "../icons.js";
+import { CloseIcon } from "../icons.js";
 import {
   formatCost,
   formatCronScheduleLabel,
@@ -306,6 +306,9 @@ export const CronCalendar = ({
     };
   }, []);
   const todayDayKey = toLocalDayKey(nowMs);
+  const nowDateValue = useMemo(() => new Date(nowMs), [nowMs]);
+  const currentHourOfDay = nowDateValue.getHours();
+  const currentMinuteProgress = nowDateValue.getMinutes() / 60;
   const { repeatingJobs, scheduledJobs } = useMemo(
     () => classifyRepeatingJobs(jobs),
     [jobs],
@@ -569,17 +572,7 @@ export const CronCalendar = ({
         : html`
             <div class="cron-calendar-grid-wrap">
               <div class="cron-calendar-grid-header">
-                <div class="cron-calendar-hour-cell cron-calendar-grid-corner">
-                  <button
-                    type="button"
-                    class="cron-calendar-expand-btn"
-                    title="Expand calendar"
-                    aria-label="Expand calendar"
-                    onClick=${() => setCalendarLightboxOpen(true)}
-                  >
-                    <${FullscreenLineIcon} className="w-3.5 h-3.5" />
-                  </button>
-                </div>
+                <div class="cron-calendar-hour-cell cron-calendar-grid-corner"></div>
                 ${timeline.days.map(
                   (day) => html`
                     <div
@@ -611,6 +604,18 @@ export const CronCalendar = ({
                             key=${cellKey}
                             class=${`cron-calendar-grid-cell ${day.dayKey === todayDayKey ? "is-today" : ""}`}
                           >
+                            ${day.dayKey === todayDayKey &&
+                            hourOfDay === currentHourOfDay
+                              ? html`
+                                  <div
+                                    class="cron-calendar-now-indicator"
+                                    style=${`top: ${Math.max(0, Math.min(100, currentMinuteProgress * 100))}%;`}
+                                    aria-hidden="true"
+                                  >
+                                    <span class="cron-calendar-now-indicator-dot"></span>
+                                  </div>
+                                `
+                              : null}
                             ${visibleSlots.map((slot) => {
                               const status = statusBySlotKey[slot.key] || "";
                               const isPast = slot.scheduledAtMs <= nowMs;

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

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { 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 {
   formatCronScheduleLabel,
@@ -202,7 +202,16 @@ export const CronJobList = ({
   onSelectAllJobs = () => {},
   onSelectJob = () => {},
 }) => {
+  const searchInputRef = useRef(null);
   const [searchQuery, setSearchQuery] = useState("");
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, []);
   const normalizedQuery = String(searchQuery || "").trim().toLowerCase();
   const filteredJobs = useMemo(() => {
     if (!normalizedQuery) return jobs;
@@ -236,6 +245,7 @@ export const CronJobList = ({
     <div class="cron-list-panel-inner">
       <div class="cron-list-sticky-search">
         <input
+          ref=${searchInputRef}
           type="text"
           value=${searchQuery}
           placeholder="Search cron jobs..."

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

@@ -16,7 +16,7 @@ import { ErrorWarningLineIcon } from "../icons.js";
 const html = htm.bind(h);
 const kRecentRunFetchLimit = 100;
 const kRecentRunRowsLimit = 20;
-const kRecentRunCollapseThreshold = 5;
+const kRecentRunCollapseThreshold = 2;
 const kTrendRange24h = "24h";
 const kTrendRange7d = "7d";
 const kTrendRange30d = "30d";
@@ -107,6 +107,7 @@ const buildCollapsedRunRows = (recentRuns = []) => {
         newestTs: Number(streak[0]?.ts || 0),
         oldestTs: Number(streak[streak.length - 1]?.ts || 0),
         statusCounts,
+        entries: streak,
       });
       index = streakEnd;
       continue;

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

@@ -41,6 +41,52 @@ const formatRowTimestamp = (timestampMs, variant = "overview") =>
   variant === "detail"
     ? formatDetailTimestamp(timestampMs)
     : formatOverviewTimestamp(timestampMs);
+const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
+  const runStatus = String(runEntry?.status || "unknown");
+  const runTokens = getCronRunTotalTokens(runEntry);
+  const runEstimatedCost = getCronRunEstimatedCost(runEntry);
+  const runTitle = String(runEntry?.jobName || "").trim();
+  const hasRunTitle = runTitle.length > 0;
+  const isDetail = variant === "detail";
+  return html`
+    <div class="ac-history-summary-row">
+      <span class="inline-flex items-center gap-2 min-w-0">
+        ${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>
+  `;
+};
 const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
   const statusSummary = Object.entries(row.statusCounts || {})
     .map(([status, count]) => `${status}: ${count}`)
@@ -68,6 +114,20 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
           (${timeRangeLabel})
         </div>
         <div class="text-gray-500">Statuses: ${statusSummary}</div>
+        ${Array.isArray(row?.entries) && row.entries.length > 0
+          ? html`
+              <div class="ac-surface-inset rounded-lg px-2.5 py-1">
+                ${row.entries.map((runEntry, entryIndex) => html`
+                  <div
+                    key=${`collapsed-entry:${rowIndex}:${entryIndex}:${runEntry?.ts || 0}`}
+                    class=${entryIndex > 0 ? "border-t border-border py-1.5" : "py-1.5"}
+                  >
+                    ${renderEntrySummaryRow({ runEntry, variant: "overview" })}
+                  </div>
+                `)}
+              </div>
+            `
+          : null}
         ${row?.jobId
           ? html`
               <div>
@@ -94,7 +154,6 @@ const renderEntryRow = ({
 }) => {
   const runEntry = row?.entry || row || {};
   const runUsage = runEntry?.usage || {};
-  const runStatus = String(runEntry?.status || "unknown");
   const runInputTokens = Number(
     runUsage?.input_tokens ?? runUsage?.inputTokens ?? 0,
   );
@@ -103,60 +162,17 @@ const renderEntryRow = ({
   );
   const runTokens = getCronRunTotalTokens(runEntry);
   const runEstimatedCost = getCronRunEstimatedCost(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 class="inline-flex items-center gap-2 min-w-0 w-full">
+          <span class="ac-history-toggle shrink-0" aria-hidden="true">▸</span>
+          <div class="min-w-0 flex-1">
+            ${renderEntrySummaryRow({ runEntry, variant })}
+          </div>
         </div>
       </summary>
       <div class="ac-history-body space-y-2 text-xs">

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

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
+import { AlarmLineIcon } from "../icons.js";
 import { PageHeader } from "../page-header.js";
 import { CronJobList } from "./cron-job-list.js";
 import { CronJobDetail } from "./cron-job-detail.js";
@@ -144,8 +145,21 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
           <main class="cron-detail-panel">
             ${noJobs
               ? html`
-                  <div class="h-full flex items-center justify-center text-sm text-gray-500">
-                    No cron jobs configured. Cron jobs are managed via the OpenClaw CLI.
+                  <div
+                    class="bg-surface border border-border rounded-xl px-6 py-10 min-h-[26rem] flex flex-col items-center justify-center text-center"
+                  >
+                    <div class="max-w-md w-full flex flex-col items-center gap-4">
+                      <${AlarmLineIcon} className="h-12 w-12 text-cyan-400" />
+                      <div class="space-y-2">
+                        <h2 class="font-semibold text-lg text-gray-100">
+                          No cron jobs yet
+                        </h2>
+                        <p class="text-xs text-gray-400 leading-5">
+                          Cron jobs are managed via the OpenClaw CLI. Once jobs are
+                          configured, schedules and run history will appear here.
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 `
               : isAllJobsSelected

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

@@ -429,6 +429,17 @@ export const ErrorWarningLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const AlarmLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M12.0001 22.0001C7.02956 22.0001 3.00012 17.9707 3.00012 13.0001C3.00012 8.02956 7.02956 4.00012 12.0001 4.00012C16.9707 4.00012 21.0001 8.02956 21.0001 13.0001C21.0001 17.9707 16.9707 22.0001 12.0001 22.0001ZM12.0001 20.0001C15.8661 20.0001 19.0001 16.8661 19.0001 13.0001C19.0001 9.13412 15.8661 6.00012 12.0001 6.00012C8.13412 6.00012 5.00012 9.13412 5.00012 13.0001C5.00012 16.8661 8.13412 20.0001 12.0001 20.0001ZM13.0001 13.0001H16.0001V15.0001H11.0001V8.00012H13.0001V13.0001ZM1.74707 6.2826L5.2826 2.74707L6.69682 4.16128L3.16128 7.69682L1.74707 6.2826ZM18.7176 2.74707L22.2532 6.2826L20.839 7.69682L17.3034 4.16128L18.7176 2.74707Z" />
+  </svg>
+`;
+
 export const FullscreenLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

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

@@ -1,6 +1,6 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
-import { WatchdogTab } from "../watchdog-tab.js";
+import { WatchdogTab } from "../watchdog-tab/index.js";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/sidebar.js

@@ -6,6 +6,7 @@ import { FileTree } from "./file-tree.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
+import { UpdateModal } from "./update-modal.js";
 import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
 
 const html = htm.bind(h);
@@ -62,6 +63,7 @@ export const AppSidebar = ({
     readStoredBrowseBottomPanelHeight,
   );
   const [isResizingBrowsePanels, setIsResizingBrowsePanels] = useState(false);
+  const [updateModalOpen, setUpdateModalOpen] = useState(false);
 
   useEffect(() => {
     const settings = readUiSettings();
@@ -237,10 +239,10 @@ export const AppSidebar = ({
         `,
       )}
       <div class="sidebar-footer">
-        ${acHasUpdate && acLatest && selectedNavId === "general"
+        ${acHasUpdate && acLatest
           ? html`
               <${UpdateActionButton}
-                onClick=${onAcUpdate}
+                onClick=${() => setUpdateModalOpen(true)}
                 loading=${acUpdating}
                 warning=${true}
                 idleLabel=${`Update to v${acLatest}`}
@@ -292,6 +294,16 @@ export const AppSidebar = ({
         </div>
       </div>
     </div>
+    <${UpdateModal}
+      visible=${updateModalOpen}
+      onClose=${() => {
+        if (acUpdating) return;
+        setUpdateModalOpen(false);
+      }}
+      version=${acLatest}
+      onUpdate=${onAcUpdate}
+      updating=${acUpdating}
+    />
   </div>
 `;
 };

package/lib/public/js/components/update-modal.js

@@ -0,0 +1,173 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { marked } from "https://esm.sh/marked";
+import { fetchAlphaclawReleaseNotes } from "../lib/api.js";
+import { ModalShell } from "./modal-shell.js";
+import { ActionButton } from "./action-button.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { CloseIcon } from "./icons.js";
+
+const html = htm.bind(h);
+
+const getReleaseTagFromVersion = (version) => {
+  const rawVersion = String(version || "").trim();
+  if (!rawVersion) return "";
+  return rawVersion.startsWith("v") ? rawVersion : `v${rawVersion}`;
+};
+
+const formatPublishedAt = (value) => {
+  const dateMs = Date.parse(String(value || ""));
+  if (!Number.isFinite(dateMs)) return "";
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(new Date(dateMs));
+  } catch {
+    return "";
+  }
+};
+
+const getReleaseUrl = (tag) =>
+  tag
+    ? `https://github.com/chrysb/alphaclaw/releases/tag/${encodeURIComponent(tag)}`
+    : "https://github.com/chrysb/alphaclaw/releases";
+
+export const UpdateModal = ({
+  visible = false,
+  onClose = () => {},
+  version = "",
+  onUpdate = () => {},
+  updating = false,
+}) => {
+  const requestedTag = useMemo(() => getReleaseTagFromVersion(version), [version]);
+  const [loadingNotes, setLoadingNotes] = useState(false);
+  const [notesError, setNotesError] = useState("");
+  const [notesData, setNotesData] = useState(null);
+
+  useEffect(() => {
+    if (!visible) return;
+    let isActive = true;
+    const loadNotes = async () => {
+      setLoadingNotes(true);
+      setNotesError("");
+      try {
+        const data = await fetchAlphaclawReleaseNotes(requestedTag);
+        if (!isActive) return;
+        if (!data?.ok) {
+          setNotesError(data?.error || "Could not load release notes");
+          setNotesData(null);
+          return;
+        }
+        setNotesData(data);
+      } catch (err) {
+        if (!isActive) return;
+        setNotesError(err?.message || "Could not load release notes");
+        setNotesData(null);
+      } finally {
+        if (!isActive) return;
+        setLoadingNotes(false);
+      }
+    };
+    loadNotes();
+    return () => {
+      isActive = false;
+    };
+  }, [visible, requestedTag]);
+
+  const effectiveTag = String(notesData?.tag || requestedTag || "").trim();
+  const effectiveReleaseUrl =
+    String(notesData?.htmlUrl || "").trim() || getReleaseUrl(effectiveTag);
+  const updateLabel = effectiveTag ? `Update to ${effectiveTag}` : "Update now";
+  const publishedAtLabel = formatPublishedAt(notesData?.publishedAt);
+  const releaseBody = String(notesData?.body || "").trim();
+  const releasePreviewHtml = useMemo(
+    () =>
+      marked.parse(releaseBody, {
+        gfm: true,
+        breaks: true,
+      }),
+    [releaseBody],
+  );
+
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${onClose}
+      panelClassName="relative bg-modal border border-border rounded-xl p-5 w-full max-w-3xl max-h-[92vh] overflow-hidden flex flex-col gap-4"
+    >
+      <button
+        type="button"
+        onclick=${onClose}
+        class="absolute top-5 right-5 h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
+        aria-label="Close modal"
+      >
+        <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+      </button>
+      <div class="space-y-1 pr-10">
+        <h3 class="text-sm font-semibold">AlphaClaw release notes</h3>
+        ${publishedAtLabel
+          ? html`<p class="text-xs text-gray-500">Published ${publishedAtLabel}</p>`
+          : null}
+      </div>
+      <div class="ac-surface-inset border border-border rounded-lg p-2 overflow-auto min-h-[220px] max-h-[66vh]">
+        ${loadingNotes
+          ? html`
+              <div class="min-h-[200px] flex items-center justify-center text-gray-400">
+                <span class="inline-flex items-center gap-2 text-sm">
+                  <${LoadingSpinner} className="h-4 w-4" />
+                  Loading release notes...
+                </span>
+              </div>
+            `
+          : notesError
+            ? html`
+                <div class="space-y-2">
+                  <p class="text-sm text-red-300">${notesError}</p>
+                  <a
+                    class="ac-tip-link text-xs"
+                    href=${effectiveReleaseUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    >View release on GitHub</a
+                  >
+                </div>
+              `
+            : releaseBody
+              ? html`<div
+                  class="file-viewer-preview release-notes-preview"
+                  dangerouslySetInnerHTML=${{ __html: releasePreviewHtml }}
+                ></div>`
+              : html`
+                  <div class="space-y-2">
+                    <p class="text-sm text-gray-300">No release notes were published for this tag.</p>
+                    <a
+                      class="ac-tip-link text-xs"
+                      href=${effectiveReleaseUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      >Open release on GitHub</a
+                    >
+                  </div>
+                `}
+      </div>
+      <div class="flex items-center justify-end gap-2 pt-1">
+        <${ActionButton}
+          onClick=${onClose}
+          tone="ghost"
+          idleLabel="Later"
+          disabled=${updating}
+        />
+        <${ActionButton}
+          onClick=${onUpdate}
+          tone="warning"
+          idleLabel=${updateLabel}
+          loadingLabel="Updating..."
+          loading=${updating}
+          disabled=${loadingNotes}
+        />
+      </div>
+    </${ModalShell}>
+  `;
+};