@chrysb/alphaclaw 0.4.3 → 0.4.5

package/lib/public/js/components/file-tree.js

@@ -13,6 +13,7 @@ import {
   createBrowseFile,
   createBrowseFolder,
   moveBrowsePath,
+  downloadBrowseFile,
 } from "../lib/api.js";
 import {
   kDraftIndexChangedEventName,
@@ -40,6 +41,7 @@ import {
   FileAddLineIcon,
   FolderAddLineIcon,
   DeleteBinLineIcon,
+  DownloadLineIcon,
 } from "./icons.js";
 import { LoadingSpinner } from "./loading-spinner.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
@@ -224,6 +226,7 @@ const TreeContextMenu = ({
   isLocked,
   onNewFile,
   onNewFolder,
+  onDownload,
   onDelete,
   onClose,
 }) => {
@@ -252,6 +255,7 @@ const TreeContextMenu = ({
   const isRoot = targetType === "root";
   const contextFolder = isFolder ? targetPath : "";
   const canCreate = !isLocked && (isFolder || isRoot);
+  const canDownload = isFile && targetPath;
   const canDelete = !isLocked && (isFolder || isFile) && targetPath;
 
   return html`
@@ -278,18 +282,33 @@ const TreeContextMenu = ({
             </button>
           `
         : null}
-      ${canDelete
+      ${canDownload || canDelete
         ? html`
             ${canCreate
               ? html`<div class="tree-context-menu-sep"></div>`
               : null}
-            <button
-              class="tree-context-menu-item"
-              onclick=${() => { onDelete(targetPath); onClose(); }}
-            >
-              <${DeleteBinLineIcon} className="tree-context-menu-icon" />
-              <span>Delete</span>
-            </button>
+            ${canDownload
+              ? html`
+                  <button
+                    class="tree-context-menu-item"
+                    onclick=${() => { onDownload(targetPath); onClose(); }}
+                  >
+                    <${DownloadLineIcon} className="tree-context-menu-icon" />
+                    <span>Download</span>
+                  </button>
+                `
+              : null}
+            ${canDelete
+              ? html`
+                  <button
+                    class="tree-context-menu-item"
+                    onclick=${() => { onDelete(targetPath); onClose(); }}
+                  >
+                    <${DeleteBinLineIcon} className="tree-context-menu-icon" />
+                    <span>Delete</span>
+                  </button>
+                `
+              : null}
           `
         : null}
       ${isLocked
@@ -942,6 +961,15 @@ export const FileTree = ({
     setContextMenu(null);
   };
 
+  const requestDownload = async (targetPath) => {
+    try {
+      await downloadBrowseFile(targetPath);
+      showToast("Download started", "success");
+    } catch (downloadError) {
+      showToast(downloadError.message || "Could not download file", "error");
+    }
+  };
+
   const handleDragDrop = async (action, sourcePath, targetFolder) => {
     if (action === "start") {
       setDragSourcePath(sourcePath);
@@ -1208,6 +1236,7 @@ export const FileTree = ({
               isLocked=${!!contextMenu.isLocked}
               onNewFile=${(folder) => requestCreate(folder, "file")}
               onNewFolder=${(folder) => requestCreate(folder, "folder")}
+              onDownload=${requestDownload}
               onDelete=${requestDelete}
               onClose=${closeContextMenu}
             />

package/lib/public/js/components/gateway.js

@@ -1,10 +1,7 @@
 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 {
-  fetchOpenclawVersion,
-  updateOpenclaw,
-} from "../lib/api.js";
+import { fetchOpenclawVersion, updateOpenclaw } from "../lib/api.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
 import { showToast } from "./toast.js";
@@ -38,7 +35,8 @@ const VersionRow = ({
   const [hasUpdate, setHasUpdate] = useState(false);
   const [error, setError] = useState("");
   const [hasViewedChangelog, setHasViewedChangelog] = useState(false);
-  const [confirmWithoutChangelogOpen, setConfirmWithoutChangelogOpen] = useState(false);
+  const [confirmWithoutChangelogOpen, setConfirmWithoutChangelogOpen] =
+    useState(false);
   const simulateUpdate = (() => {
     try {
       const params = new URLSearchParams(window.location.search);
@@ -124,7 +122,9 @@ const VersionRow = ({
     setChecking(true);
     setError("");
     try {
-      const data = isUpdateAction ? await applyUpdate() : await fetchVersion(true);
+      const data = isUpdateAction
+        ? await applyUpdate()
+        : await fetchVersion(true);
       setVersion(data.currentVersion || version);
       setLatestVersion(data.latestVersion || null);
       setHasUpdate(!!data.hasUpdate);
@@ -158,10 +158,14 @@ const VersionRow = ({
     } catch (err) {
       setError(
         err.message ||
-          (isUpdateAction ? `Could not update ${label}` : "Could not check updates"),
+          (isUpdateAction
+            ? `Could not update ${label}`
+            : "Could not check updates"),
       );
       showToast(
-        isUpdateAction ? `Could not update ${label}` : "Could not check updates",
+        isUpdateAction
+          ? `Could not update ${label}`
+          : "Could not check updates",
         "error",
       );
       await onActionComplete({
@@ -201,7 +205,8 @@ const VersionRow = ({
             ? `${version}`
             : "..."}
         </p>
-        ${error && effectiveHasUpdate &&
+        ${error &&
+        effectiveHasUpdate &&
         html`<div
           class="mt-1 text-xs text-red-300 bg-red-900/30 border border-red-800 rounded-lg px-2 py-1"
         >
@@ -209,7 +214,9 @@ const VersionRow = ({
         </div>`}
       </div>
       <div class="flex items-center gap-3 shrink-0">
-        ${effectiveHasUpdate && effectiveLatestVersion && html`
+        ${effectiveHasUpdate &&
+        effectiveLatestVersion &&
+        html`
           <a
             href=${changelogUrl}
             target="_blank"
@@ -228,7 +235,9 @@ const VersionRow = ({
                 idleLabel=${isUpdateActionActive
                   ? updateIdleLabel
                   : "Check updates"}
-                loadingLabel=${isUpdateActionActive ? "Updating..." : "Checking..."}
+                loadingLabel=${isUpdateActionActive
+                  ? "Updating..."
+                  : "Checking..."}
                 className="hidden md:inline-flex"
               />
             `
@@ -240,12 +249,15 @@ const VersionRow = ({
                 idleLabel=${isUpdateActionActive
                   ? updateIdleLabel
                   : "Check updates"}
-                loadingLabel=${isUpdateActionActive ? "Updating..." : "Checking..."}
+                loadingLabel=${isUpdateActionActive
+                  ? "Updating..."
+                  : "Checking..."}
               />
             `}
       </div>
     </div>
-    ${showMobileUpdateRow && html`
+    ${showMobileUpdateRow &&
+    html`
       <div class="mt-2 md:hidden flex items-center gap-2">
         <a
           href=${changelogUrl}
@@ -296,24 +308,25 @@ export const Gateway = ({
   const dotClass = isRunning
     ? "ac-status-dot ac-status-dot--healthy"
     : "w-2 h-2 rounded-full bg-yellow-500 animate-pulse";
-  const watchdogHealth = watchdogStatus?.lifecycle === "crash_loop"
-    ? "crash_loop"
-    : watchdogStatus?.health;
-  const watchdogDotClass = watchdogHealth === "healthy"
-    ? "ac-status-dot ac-status-dot--healthy ac-status-dot--healthy-offset"
-    : watchdogHealth === "degraded"
-      ? "bg-yellow-500"
-      : watchdogHealth === "unhealthy" || watchdogHealth === "crash_loop"
-        ? "bg-red-500"
-        : "bg-gray-500";
-  const watchdogLabel = watchdogHealth === "unknown"
-    ? "initializing"
-    : watchdogHealth || "unknown";
+  const watchdogHealth =
+    watchdogStatus?.lifecycle === "crash_loop"
+      ? "crash_loop"
+      : watchdogStatus?.health;
+  const watchdogDotClass =
+    watchdogHealth === "healthy"
+      ? "ac-status-dot ac-status-dot--healthy ac-status-dot--healthy-offset"
+      : watchdogHealth === "degraded"
+        ? "bg-yellow-500"
+        : watchdogHealth === "unhealthy" || watchdogHealth === "crash_loop"
+          ? "bg-red-500"
+          : "bg-gray-500";
+  const watchdogLabel =
+    watchdogHealth === "unknown" ? "initializing" : watchdogHealth || "unknown";
   const isRepairInProgress = repairing || !!watchdogStatus?.operationInProgress;
+  const showInspectButton = watchdogHealth === "degraded" && !!onOpenWatchdog;
   const showRepairButton =
     isRepairInProgress ||
     watchdogStatus?.lifecycle === "crash_loop" ||
-    watchdogStatus?.health === "degraded" ||
     watchdogStatus?.health === "unhealthy" ||
     watchdogStatus?.health === "crashed";
   const liveUptimeMs = useMemo(() => {
@@ -339,7 +352,9 @@ export const Gateway = ({
         <div class="min-w-0 flex items-center gap-2 text-sm">
           <span class=${dotClass}></span>
           <span class="font-semibold">Gateway:</span>
-          <span class="text-gray-400">${restarting ? "restarting..." : status || "checking..."}</span>
+          <span class="text-gray-400"
+            >${restarting ? "restarting..." : status || "checking..."}</span
+          >
         </div>
         <div class="flex items-center gap-3 shrink-0">
           ${!restarting && isRunning
@@ -367,18 +382,22 @@ export const Gateway = ({
                 onclick=${onOpenWatchdog}
                 title="Open Watchdog tab"
               >
-                <span class=${watchdogDotClass.startsWith("ac-status-dot")
-                  ? watchdogDotClass
-                  : `w-2 h-2 rounded-full ${watchdogDotClass}`}></span>
+                <span
+                  class=${watchdogDotClass.startsWith("ac-status-dot")
+                    ? watchdogDotClass
+                    : `w-2 h-2 rounded-full ${watchdogDotClass}`}
+                ></span>
                 <span class="font-semibold">Watchdog:</span>
                 <span class="text-gray-400">${watchdogLabel}</span>
               </button>
             `
           : html`
               <div class="inline-flex items-center gap-2 text-sm">
-                <span class=${watchdogDotClass.startsWith("ac-status-dot")
-                  ? watchdogDotClass
-                  : `w-2 h-2 rounded-full ${watchdogDotClass}`}></span>
+                <span
+                  class=${watchdogDotClass.startsWith("ac-status-dot")
+                    ? watchdogDotClass
+                    : `w-2 h-2 rounded-full ${watchdogDotClass}`}
+                ></span>
                 <span class="font-semibold">Watchdog:</span>
                 <span class="text-gray-400">${watchdogLabel}</span>
               </div>
@@ -386,24 +405,37 @@ export const Gateway = ({
         ${onRepair
           ? html`
               <div class="shrink-0 w-32 flex justify-end">
-                ${showRepairButton
+                ${showInspectButton
                   ? html`
                       <${UpdateActionButton}
-                        onClick=${onRepair}
-                        loading=${isRepairInProgress}
-                        warning=${true}
-                        idleLabel="Repair"
-                        loadingLabel="Repairing..."
+                        onClick=${onOpenWatchdog}
+                        warning=${false}
+                        idleLabel="Inspect"
+                        loadingLabel="Inspect"
                         className="w-full justify-center"
                       />
                     `
-                  : html`<span class="inline-flex h-7 w-full" aria-hidden="true"></span>`}
+                  : showRepairButton
+                    ? html`
+                        <${UpdateActionButton}
+                          onClick=${onRepair}
+                          loading=${isRepairInProgress}
+                          warning=${true}
+                          idleLabel="Repair"
+                          loadingLabel="Repairing..."
+                          className="w-full justify-center"
+                        />
+                      `
+                    : html`<span
+                        class="inline-flex h-7 w-full"
+                        aria-hidden="true"
+                      ></span>`}
               </div>
             `
           : null}
       </div>
     </div>
-    <div class="mt-3 pt-3 border-t border-border">
+    <div class="mt-3">
       <${VersionRow}
         label="OpenClaw"
         currentVersion=${openclawVersion}

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

@@ -288,6 +288,19 @@ export const FolderAddLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const DownloadLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"
+    />
+  </svg>
+`;
+
 export const RestartLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/usage-tab/overview-section.js

@@ -26,40 +26,78 @@ const SummaryCard = ({ title, tokens, cost }) => html`
 `;
 
 const AgentCostDistribution = ({ summary }) => {
-  const agents = Array.isArray(summary?.costByAgent?.agents) ? summary.costByAgent.agents : [];
-  const [selectedAgent, setSelectedAgent] = useState(() => String(agents[0]?.agent || ""));
+  const agents = Array.isArray(summary?.costByAgent?.agents)
+    ? summary.costByAgent.agents
+    : [];
+  const missingPricingModels = Array.from(
+    new Set(
+      (summary?.daily || [])
+        .flatMap((dayRow) => dayRow?.models || [])
+        .filter(
+          (modelRow) =>
+            !modelRow?.pricingFound && Number(modelRow?.totalTokens || 0) > 0,
+        )
+        .map(
+          (modelRow) =>
+            String(modelRow?.model || "unknown").trim() || "unknown",
+        ),
+    ),
+  ).sort((leftValue, rightValue) => leftValue.localeCompare(rightValue));
+  const missingPricingPreview = missingPricingModels.slice(0, 3).join(", ");
+  const hasMoreMissingPricingModels = missingPricingModels.length > 3;
+  const missingPricingLabel = missingPricingModels.length
+    ? hasMoreMissingPricingModels
+      ? `${missingPricingPreview}, +${missingPricingModels.length - 3} more`
+      : missingPricingPreview
+    : "";
+  const [selectedAgent, setSelectedAgent] = useState(() =>
+    String(agents[0]?.agent || ""),
+  );
   useEffect(() => {
     if (agents.length === 0) {
       if (selectedAgent) setSelectedAgent("");
       return;
     }
-    const hasSelectedAgent = agents.some((row) => String(row.agent || "") === selectedAgent);
+    const hasSelectedAgent = agents.some(
+      (row) => String(row.agent || "") === selectedAgent,
+    );
     if (!hasSelectedAgent) setSelectedAgent(String(agents[0]?.agent || ""));
   }, [agents, selectedAgent]);
   const selectedAgentRow =
-    agents.find((row) => String(row.agent || "") === selectedAgent) || agents[0] || null;
+    agents.find((row) => String(row.agent || "") === selectedAgent) ||
+    agents[0] ||
+    null;
 
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
       ${agents.length === 0
         ? html`
-            <div class="flex flex-wrap items-start sm:items-center justify-between gap-3 mb-3">
-              <h2 class="card-label text-xs">Cost breakdown</h2>
+            <div
+              class="flex flex-wrap items-start sm:items-center justify-between gap-3 mb-3"
+            >
+              <h2 class="card-label text-xs">Estimated cost breakdown</h2>
             </div>
-            <p class="text-xs text-gray-500">No agent usage recorded for this range.</p>
+            <p class="text-xs text-gray-500">
+              No agent usage recorded for this range.
+            </p>
           `
         : html`
             <div class="space-y-3">
-              <div class="flex flex-wrap items-start sm:items-center justify-between gap-3">
-                <h2 class="card-label text-xs">Cost breakdown</h2>
-                <div class="inline-flex flex-wrap items-center gap-3 text-xs text-gray-500">
-                  <span class="text-gray-300">${formatUsd(selectedAgentRow?.totalCost)}</span>
-                  <span>${formatInteger(selectedAgentRow?.totalTokens)} tok</span>
-                  <label class="inline-flex items-center gap-2 text-xs text-gray-500">
+              <div
+                class="flex flex-wrap items-start sm:items-center justify-between gap-3"
+              >
+                <h2 class="card-label text-xs">Estimated cost breakdown</h2>
+                <div
+                  class="inline-flex flex-wrap items-center gap-3 text-xs text-gray-500"
+                >
+                  <label
+                    class="inline-flex items-center gap-2 text-xs text-gray-500"
+                  >
                     <select
                       class="bg-black/30 border border-border rounded-lg text-xs px-2.5 py-1.5 text-gray-200 focus:border-gray-500"
                       value=${String(selectedAgentRow?.agent || "")}
-                      onChange=${(e) => setSelectedAgent(String(e.currentTarget?.value || ""))}
+                      onChange=${(e) =>
+                        setSelectedAgent(String(e.currentTarget?.value || ""))}
                     >
                       ${agents.map(
                         (agentRow) => html`
@@ -74,17 +112,29 @@ const AgentCostDistribution = ({ summary }) => {
               </div>
               <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                 ${kUsageSourceOrder.map((sourceName) => {
-                  const sourceRow = (selectedAgentRow?.sourceBreakdown || []).find(
-                    (row) => String(row.source || "") === sourceName,
-                  ) || { source: sourceName, totalCost: 0, totalTokens: 0, turnCount: 0 };
+                  const sourceRow = (
+                    selectedAgentRow?.sourceBreakdown || []
+                  ).find((row) => String(row.source || "") === sourceName) || {
+                    source: sourceName,
+                    totalCost: 0,
+                    totalTokens: 0,
+                    turnCount: 0,
+                  };
                   return html`
                     <div class="ac-surface-inset px-2.5 py-2">
-                      <p class="text-[11px] text-gray-500">${renderSourceLabel(sourceRow.source)}</p>
-                      <p class="text-xs text-gray-300 mt-0.5">${formatUsd(sourceRow.totalCost)}</p>
+                      <p class="text-[11px] text-gray-500">
+                        ${renderSourceLabel(sourceRow.source)}
+                      </p>
+                      <p class="text-xs text-gray-300 mt-0.5">
+                        ${formatUsd(sourceRow.totalCost)}
+                      </p>
                       <p class="text-[11px] text-gray-500 mt-0.5">
-                        ${formatInteger(sourceRow.totalTokens)} tok
-                        ·
-                        ${formatCountLabel(sourceRow.turnCount, "turn", "turns")}
+                        ${formatInteger(sourceRow.totalTokens)} tok ·
+                        ${formatCountLabel(
+                          sourceRow.turnCount,
+                          "turn",
+                          "turns",
+                        )}
                       </p>
                     </div>
                   `;
@@ -92,6 +142,19 @@ const AgentCostDistribution = ({ summary }) => {
               </div>
             </div>
           `}
+      ${missingPricingModels.length
+        ? html`
+            <div class="mt-3">
+              <p class="text-[11px] text-gray-500">
+                <span>
+                  . Missing model pricing for ${missingPricingModels.length}
+                  ${missingPricingModels.length === 1 ? "model" : "models"}:
+                  ${missingPricingLabel}.
+                </span>
+              </p>
+            </div>
+          `
+        : null}
     </div>
   `;
 };
@@ -107,7 +170,11 @@ export const OverviewSection = ({
 }) => html`
   <div class="space-y-4">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-      <${SummaryCard} title="Today" tokens=${periodSummary.today.tokens} cost=${periodSummary.today.cost} />
+      <${SummaryCard}
+        title="Today"
+        tokens=${periodSummary.today.tokens}
+        cost=${periodSummary.today.cost}
+      />
       <${SummaryCard}
         title="Last 7 days"
         tokens=${periodSummary.week.tokens}
@@ -120,11 +187,18 @@ export const OverviewSection = ({
       />
     </div>
     <div class="bg-surface border border-border rounded-xl p-4">
-      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
-        <h2 class="card-label text-xs">Daily ${metric === "tokens" ? "tokens" : "cost"} by model</h2>
+      <div
+        class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3"
+      >
+        <h2 class="card-label text-xs">
+          Daily ${metric === "tokens" ? "tokens" : "cost"} by model
+        </h2>
         <div class="flex items-center gap-2">
           <${SegmentedControl}
-            options=${kRangeOptions.map((option) => ({ label: option.label, value: option.value }))}
+            options=${kRangeOptions.map((option) => ({
+              label: option.label,
+              value: option.value,
+            }))}
             value=${days}
             onChange=${onDaysChange}
           />

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

@@ -576,6 +576,37 @@ export const deleteBrowseFile = async (filePath) => {
   return parseJsonOrThrow(res, 'Could not delete file');
 };
 
+export const downloadBrowseFile = async (filePath) => {
+  const params = new URLSearchParams({ path: String(filePath || "") });
+  const res = await authFetch(`/api/browse/download?${params.toString()}`);
+  if (!res.ok) {
+    const errorText = await res.text();
+    throw new Error(errorText || "Could not download file");
+  }
+  const fileBlob = await res.blob();
+  const urlApi = window?.URL || URL;
+  if (!urlApi?.createObjectURL || !urlApi?.revokeObjectURL) {
+    throw new Error("Download is not supported in this browser");
+  }
+  const downloadUrl = urlApi.createObjectURL(fileBlob);
+  const fileName =
+    String(filePath || "")
+      .split("/")
+      .filter(Boolean)
+      .pop() || "download";
+  try {
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+    document.body?.appendChild(downloadLink);
+    downloadLink.click();
+    downloadLink.remove();
+  } finally {
+    urlApi.revokeObjectURL(downloadUrl);
+  }
+  return { ok: true };
+};
+
 export const restoreBrowseFile = async (filePath) => {
   const res = await authFetch('/api/browse/restore', {
     method: 'POST',