@chrysb/alphaclaw 0.6.2-beta.6 → 0.7.0-beta.0

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

@@ -8,8 +8,13 @@ import {
 import htm from "https://esm.sh/htm";
 import { SegmentedControl } from "../segmented-control.js";
 import { Tooltip } from "../tooltip.js";
-import { formatCost, formatTokenCount } from "./cron-helpers.js";
-import { formatCronScheduleLabel } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatCronScheduleLabel,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 import { readUiSettings, updateUiSettings } from "../../lib/ui-settings.js";
 import {
   classifyRepeatingJobs,
@@ -104,40 +109,6 @@ const formatUpcomingTime = (timestampMs) => {
   });
 };
 
-const getRunTotalTokens = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    usage?.total_tokens,
-    usage?.totalTokens,
-    entry?.total_tokens,
-    entry?.totalTokens,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return 0;
-};
-
-const getRunEstimatedCost = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    entry?.estimatedCost,
-    entry?.estimated_cost,
-    usage?.estimatedCost,
-    usage?.estimated_cost,
-    usage?.totalCost,
-    usage?.total_cost,
-    usage?.costUsd,
-    usage?.cost,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return null;
-};
-
 const buildRunSummaryByJobId = ({
   runsByJobId = {},
   nowMs = Date.now(),
@@ -158,11 +129,11 @@ const buildRunSummaryByJobId = ({
       });
       const runCount = recentEntries.length;
       const totalTokens = recentEntries.reduce(
-        (sum, entry) => sum + Number(getRunTotalTokens(entry) || 0),
+        (sum, entry) => sum + Number(getCronRunTotalTokens(entry) || 0),
         0,
       );
       const totalCost = recentEntries.reduce((sum, entry) => {
-        const cost = getRunEstimatedCost(entry);
+        const cost = getCronRunEstimatedCost(entry);
         return sum + Number(cost == null ? 0 : cost);
       }, 0);
       accumulator[String(jobId || "")] = {
@@ -274,8 +245,8 @@ const buildJobTooltipText = ({
   const runCount7d = Number(runSummary7d?.runCount || 0);
   const avgTokensPerRun7d = Number(runSummary7d?.avgTokensPerRun || 0);
   const avgCostPerRun7d = Number(runSummary7d?.avgCostPerRun || 0);
-  const slotRunTokens = getRunTotalTokens(slotRun || {});
-  const slotRunCost = getRunEstimatedCost(slotRun || {});
+  const slotRunTokens = getCronRunTotalTokens(slotRun || {});
+  const slotRunCost = getCronRunEstimatedCost(slotRun || {});
   const slotRunStatus = String(slotRun?.status || "")
     .trim()
     .toLowerCase();
@@ -428,7 +399,7 @@ export const CronCalendar = ({
       if (!job || job.enabled === false) return;
       const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;
       if (isPastSlot) {
-        const slotRunTokens = getRunTotalTokens(runBySlotKey[slot.key] || {});
+        const slotRunTokens = getCronRunTotalTokens(runBySlotKey[slot.key] || {});
         if (slotRunTokens > 0) values.push(slotRunTokens);
         return;
       }
@@ -460,7 +431,7 @@ export const CronCalendar = ({
       const enabled = job?.enabled !== false;
       const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;
       if (isPastSlot) {
-        const slotRunTokens = getRunTotalTokens(
+        const slotRunTokens = getCronRunTotalTokens(
           runBySlotKey[String(slot?.key || "")] || {},
         );
         return classifyTokenTier({

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

@@ -276,6 +276,54 @@ export const getCronJobHealthClassName = (health = "") => {
 
 export const formatTokenCount = (value) => formatInteger(Number(value || 0));
 export const formatCost = (value) => formatUsd(Number(value || 0));
+export const getCronRunTotalTokens = (entry = {}) => {
+  const usage = entry?.usage || {};
+  const componentCandidates = [
+    usage?.input_tokens,
+    usage?.inputTokens,
+    usage?.output_tokens,
+    usage?.outputTokens,
+    usage?.cache_read_tokens,
+    usage?.cacheReadTokens,
+    usage?.cache_write_tokens,
+    usage?.cacheWriteTokens,
+  ];
+  const componentTotal = componentCandidates.reduce((sum, candidate) => {
+    const numericValue = Number(candidate);
+    if (!Number.isFinite(numericValue) || numericValue < 0) return sum;
+    return sum + numericValue;
+  }, 0);
+  if (componentTotal > 0) return componentTotal;
+  const totalCandidates = [
+    usage?.total_tokens,
+    usage?.totalTokens,
+    entry?.total_tokens,
+    entry?.totalTokens,
+  ];
+  for (const candidate of totalCandidates) {
+    const numericValue = Number(candidate);
+    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
+  }
+  return 0;
+};
+export const getCronRunEstimatedCost = (entry = {}) => {
+  const usage = entry?.usage || {};
+  const candidates = [
+    entry?.estimatedCost,
+    entry?.estimated_cost,
+    usage?.estimatedCost,
+    usage?.estimated_cost,
+    usage?.totalCost,
+    usage?.total_cost,
+    usage?.costUsd,
+    usage?.cost,
+  ];
+  for (const candidate of candidates) {
+    const numericValue = Number(candidate);
+    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
+  }
+  return null;
+};
 const hasHeartbeatOnlySummary = (job = {}) => {
   const state = job?.state || {};
   try {

package/lib/public/js/components/cron-tab/cron-insights-panel.js

@@ -3,7 +3,12 @@ import { useMemo, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { SegmentedControl } from "../segmented-control.js";
 import { Badge } from "../badge.js";
-import { formatCost, formatTokenCount } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 
 const html = htm.bind(h);
 
@@ -35,40 +40,6 @@ const formatRunCountLabel = (count = 0) => {
   return `${countLabel} ${safeCount === 1 ? "run" : "runs"}`;
 };
 
-const getRunTotalTokens = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    usage?.total_tokens,
-    usage?.totalTokens,
-    entry?.total_tokens,
-    entry?.totalTokens,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return 0;
-};
-
-const getRunEstimatedCost = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    entry?.estimatedCost,
-    entry?.estimated_cost,
-    usage?.estimatedCost,
-    usage?.estimated_cost,
-    usage?.totalCost,
-    usage?.total_cost,
-    usage?.costUsd,
-    usage?.cost,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return null;
-};
-
 const readDeliveryMode = (job = null) =>
   String(job?.delivery?.mode || job?.deliveryMode || "none")
     .trim()
@@ -137,10 +108,8 @@ const buildInsightMetrics = ({
         return;
       }
       metricsByJobId[jobId].runCount += 1;
-      metricsByJobId[jobId].totalTokens += Number(
-        getRunTotalTokens(entry) || 0,
-      );
-      const estimatedCost = getRunEstimatedCost(entry);
+      metricsByJobId[jobId].totalTokens += Number(getCronRunTotalTokens(entry) || 0);
+      const estimatedCost = getCronRunEstimatedCost(entry);
       if (estimatedCost != null) {
         metricsByJobId[jobId].hasCostData = true;
         metricsByJobId[jobId].totalCost += Number(estimatedCost || 0);

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

@@ -5,7 +5,12 @@ import {
   formatDurationCompactMs,
   formatLocaleDateTimeWithTodayTime,
 } from "../../lib/format.js";
-import { formatCost, formatTokenCount } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 
 const html = htm.bind(h);
 const runStatusClassName = (status = "") => {
@@ -19,10 +24,6 @@ const runStatusClassName = (status = "") => {
 };
 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: "—",
@@ -100,10 +101,8 @@ const renderEntryRow = ({
   const runOutputTokens = Number(
     runUsage?.output_tokens ?? runUsage?.outputTokens ?? 0,
   );
-  const runTokens = Number(
-    runUsage?.total_tokens ?? runUsage?.totalTokens ?? 0,
-  );
-  const runEstimatedCost = getRunEstimatedCost(runEntry);
+  const runTokens = getCronRunTotalTokens(runEntry);
+  const runEstimatedCost = getCronRunEstimatedCost(runEntry);
   const runTitle = String(runEntry?.jobName || "").trim();
   const hasRunTitle = runTitle.length > 0;
   const isDetail = variant === "detail";

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

@@ -2,7 +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 { SegmentedControl } from "../segmented-control.js";
-import { formatCost } from "./cron-helpers.js";
+import { formatCost, getCronRunEstimatedCost } from "./cron-helpers.js";
 
 const html = htm.bind(h);
 
@@ -64,25 +64,6 @@ const getBucketConfig = (range = kRange7d) => {
   };
 };
 
-const getEstimatedCostForEntry = (entry = {}) => {
-  const usage = entry?.usage || {};
-  const candidates = [
-    entry?.estimatedCost,
-    entry?.estimated_cost,
-    usage?.estimatedCost,
-    usage?.estimated_cost,
-    usage?.totalCost,
-    usage?.total_cost,
-    usage?.costUsd,
-    usage?.cost,
-  ];
-  for (const candidate of candidates) {
-    const numericValue = Number(candidate);
-    if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;
-  }
-  return null;
-};
-
 const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRange7d } = {}) => {
   const config = getBucketConfig(range);
   const safeNowMs = Number.isFinite(Number(nowMs)) ? Number(nowMs) : Date.now();
@@ -129,7 +110,7 @@ const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRan
       if (!Number.isFinite(Number(bucketIndex))) return;
       if (bucketIndex < 0 || bucketIndex >= config.bucketCount) return;
       points[bucketIndex][status] += 1;
-      const estimatedCost = getEstimatedCostForEntry(entry);
+      const estimatedCost = getCronRunEstimatedCost(entry);
       if (estimatedCost != null) {
         points[bucketIndex].totalCost += estimatedCost;
         points[bucketIndex].costCount += 1;
@@ -305,6 +286,7 @@ export const CronRunsTrendCard = ({
         },
         plugins: {
           legend: {
+            position: "bottom",
             labels: {
               color: "rgba(209,213,219,1)",
               boxWidth: 10,
@@ -339,7 +321,7 @@ export const CronRunsTrendCard = ({
   return html`
     <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 cron-calendar-title">Run Outcome Trend</h3>
+        <h3 class="card-label cron-calendar-title">Run Outcomes</h3>
         <${SegmentedControl}
           options=${kRanges}
           value=${range}

package/lib/public/js/components/envars.js

@@ -1,11 +1,18 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars, saveEnvVars } from "../lib/api.js";
 import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
 import { ActionButton } from "./action-button.js";
+import { PopActions } from "./pop-actions.js";
+import { PaneShell } from "./pane-shell.js";
 import {
   Brain2LineIcon,
   ChatVoiceLineIcon,
@@ -44,7 +51,11 @@ const kFeatureIconByName = {
     label: "Speech to text",
   },
 };
-const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+const normalizeEnvVarKey = (raw) =>
+  raw
+    .trim()
+    .toUpperCase()
+    .replace(/[^A-Z0-9_]/g, "_");
 const kManagedChannelTokenPattern =
   /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN)(?:_[A-Z0-9_]+)?$/;
 const stripSurroundingQuotes = (raw) => {
@@ -59,7 +70,11 @@ const stripSurroundingQuotes = (raw) => {
   return value;
 };
 const isManagedChannelTokenKey = (key = "") =>
-  kManagedChannelTokenPattern.test(String(key || "").trim().toUpperCase());
+  kManagedChannelTokenPattern.test(
+    String(key || "")
+      .trim()
+      .toUpperCase(),
+  );
 const getVarsSignature = (items) =>
   JSON.stringify(
     (items || [])
@@ -85,19 +100,119 @@ const sortCustomVarsAlphabetically = (items) => {
 };
 
 const kHintByKey = {
-  ANTHROPIC_API_KEY: html`from <a href="https://console.anthropic.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.anthropic.com</a>`,
-  ANTHROPIC_TOKEN: html`from <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
-  OPENAI_API_KEY: html`from <a href="https://platform.openai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">platform.openai.com</a>`,
-  GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">aistudio.google.com</a>`,
-  ELEVENLABS_API_KEY: html`from <a href="https://elevenlabs.io" target="_blank" class="hover:underline" style="color: var(--accent-link)">elevenlabs.io</a> · <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also supported`,
-  GITHUB_WORKSPACE_REPO: html`use <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or <code class="text-xs bg-black/30 px-1 rounded">https://github.com/owner/repo</code>`,
-  TELEGRAM_BOT_TOKEN: html`from <a href="https://t.me/BotFather" target="_blank" class="hover:underline" style="color: var(--accent-link)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
-  DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: var(--accent-link)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
-  MISTRAL_API_KEY: html`from <a href="https://console.mistral.ai" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.mistral.ai</a>`,
-  VOYAGE_API_KEY: html`from <a href="https://dash.voyageai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">dash.voyageai.com</a>`,
-  GROQ_API_KEY: html`from <a href="https://console.groq.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.groq.com</a>`,
-  DEEPGRAM_API_KEY: html`from <a href="https://console.deepgram.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.deepgram.com</a>`,
-  BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: var(--accent-link)">brave.com/search/api</a> — free tier available`,
+  ANTHROPIC_API_KEY: html`from${" "}
+    <a
+      href="https://console.anthropic.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.anthropic.com</a
+    >`,
+  ANTHROPIC_TOKEN: html`from
+    <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
+  OPENAI_API_KEY: html`from${" "}
+    <a
+      href="https://platform.openai.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >platform.openai.com</a
+    >`,
+  GEMINI_API_KEY: html`from${" "}
+    <a
+      href="https://aistudio.google.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >aistudio.google.com</a
+    >`,
+  ELEVENLABS_API_KEY: html`from${" "}
+    <a
+      href="https://elevenlabs.io"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >elevenlabs.io</a
+    >${" "} · ${" "}
+    <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also
+    supported`,
+  GITHUB_WORKSPACE_REPO: html`use
+    <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or
+    <code class="text-xs bg-black/30 px-1 rounded"
+      >https://github.com/owner/repo</code
+    >`,
+  TELEGRAM_BOT_TOKEN: html`from${" "}
+    <a
+      href="https://t.me/BotFather"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >@BotFather</a
+    >
+    ·
+    <a
+      href="https://docs.openclaw.ai/channels/telegram"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >full guide</a
+    >`,
+  DISCORD_BOT_TOKEN: html`from${" "}
+    <a
+      href="https://discord.com/developers/applications"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >developer portal</a
+    >
+    ·
+    <a
+      href="https://docs.openclaw.ai/channels/discord"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >full guide</a
+    >`,
+  MISTRAL_API_KEY: html`from${" "}
+    <a
+      href="https://console.mistral.ai"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.mistral.ai</a
+    >`,
+  VOYAGE_API_KEY: html`from${" "}
+    <a
+      href="https://dash.voyageai.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >dash.voyageai.com</a
+    >`,
+  GROQ_API_KEY: html`from${" "}
+    <a
+      href="https://console.groq.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.groq.com</a
+    >`,
+  DEEPGRAM_API_KEY: html`from${" "}
+    <a
+      href="https://console.deepgram.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.deepgram.com</a
+    >`,
+  BRAVE_API_KEY: html`from${" "}
+    <a
+      href="https://brave.com/search/api/"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >brave.com/search/api</a
+    >${" "} — free tier available`,
 };
 
 const getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || "";
@@ -157,7 +272,8 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
           ? html`
               <div class="flex items-center gap-2 mt-1 pl-3.5">
                 ${featureIcons.map(
-                  (feature) => html`<${FeatureIcon} key=${feature} feature=${feature} />`,
+                  (feature) =>
+                    html`<${FeatureIcon} key=${feature} feature=${feature} />`,
                 )}
               </div>
             `
@@ -183,9 +299,7 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
               </button>`
             : null}
         </div>
-        ${hint
-          ? html`<p class="text-xs text-gray-600 mt-1">${hint}</p>`
-          : null}
+        ${hint ? html`<p class="text-xs text-gray-600 mt-1">${hint}</p>` : null}
       </div>
     </div>
   `;
@@ -230,7 +344,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
   const handleDelete = (key) => {
     setVars((prev) => prev.filter((v) => v.key !== key));
-    setPendingCustomKeys((prev) => prev.filter((pendingKey) => pendingKey !== key));
+    setPendingCustomKeys((prev) =>
+      prev.filter((pendingKey) => pendingKey !== key),
+    );
   };
 
   const handleSave = async () => {
@@ -348,7 +464,10 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
         );
       }
       if (added) {
-        showToast(`Added ${added} variable${added !== 1 ? "s" : ""}`, "success");
+        showToast(
+          `Added ${added} variable${added !== 1 ? "s" : ""}`,
+          "success",
+        );
       }
       return;
     }
@@ -410,7 +529,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const nonPending = grouped.custom
       .filter((item) => !pending.has(item.key))
       .sort((a, b) => String(a?.key || "").localeCompare(String(b?.key || "")));
-    const pendingAtBottom = grouped.custom.filter((item) => pending.has(item.key));
+    const pendingAtBottom = grouped.custom.filter((item) =>
+      pending.has(item.key),
+    );
     grouped.custom = [...nonPending, ...pendingAtBottom];
   }
   const aiSplit = splitAiVars(grouped.ai || []);
@@ -454,7 +575,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
               `
             : null}
           ${expanded
-            ? html`<div class="divide-y divide-border border-t border-border">${renderEnvRows(hidden)}</div>`
+            ? html`<div class="divide-y divide-border border-t border-border">
+                ${renderEnvRows(hidden)}
+              </div>`
             : null}
         </div>
       `;
@@ -470,33 +593,52 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   };
 
   return html`
-    <div class="space-y-4">
-      <${PageHeader}
-        title="Envars"
-        actions=${html`
-          <${ActionButton}
-            onClick=${handleSave}
-            disabled=${!dirty || saving}
-            loading=${saving}
-            tone="primary"
-            size="sm"
-            idleLabel="Save changes"
-            loadingLabel="Saving..."
-            className="transition-all"
-          />
-        `}
-      />
-
+    <${PaneShell}
+      header=${html`
+        <${PageHeader}
+          title="Envars"
+          actions=${html`
+            <${PopActions} visible=${dirty}>
+              <${ActionButton}
+                onClick=${load}
+                disabled=${saving}
+                tone="secondary"
+                size="sm"
+                idleLabel="Cancel"
+                className="text-xs"
+              />
+              <${ActionButton}
+                onClick=${handleSave}
+                disabled=${saving}
+                loading=${saving}
+                loadingMode="inline"
+                tone="primary"
+                size="sm"
+                idleLabel="Save changes"
+                loadingLabel="Saving…"
+                className="text-xs"
+              />
+            </${PopActions}>
+          `}
+        />
+      `}
+    >
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
         .map((g) => renderGroupCard(g))}
 
-      <div class="bg-surface border border-border rounded-xl overflow-hidden">
+      <div
+        class="bg-surface border border-border rounded-xl overflow-hidden"
+      >
         <div class="flex items-center justify-between px-4 pt-3 pb-2">
           <h3 class="card-label text-xs">Add Variable</h3>
-          <span class="text-xs" style="color: var(--text-dim)">Paste KEY=VALUE or multiple lines</span>
+          <span class="text-xs" style="color: var(--text-dim)"
+            >Paste KEY=VALUE or multiple lines</span
+          >
         </div>
-        <div class="flex items-start gap-4 px-4 py-3 border-t border-border">
+        <div
+          class="flex items-start gap-4 px-4 py-3 border-t border-border"
+        >
           <div class="shrink-0" style="width: 200px">
             <input
               type="text"
@@ -527,7 +669,6 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
           </div>
         </div>
       </div>
-
-    </div>
+    </${PaneShell}>
   `;
 };