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

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}>
   `;
 };

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

@@ -428,3 +428,14 @@ export const ErrorWarningLineIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const FullscreenLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
+  </svg>
+`;