@chrysb/alphaclaw 0.4.2 → 0.4.4

package/lib/public/js/components/action-button.js

@@ -31,6 +31,11 @@ const kSizeClassBySize = {
   md: "h-9 text-sm font-medium leading-none px-4 rounded-xl",
   lg: "h-10 text-sm font-medium leading-none px-5 rounded-lg",
 };
+const kIconOnlySizeClassBySize = {
+  sm: "h-7 w-7 p-0 rounded-lg",
+  md: "h-9 w-9 p-0 rounded-xl",
+  lg: "h-10 w-10 p-0 rounded-lg",
+};
 
 export const ActionButton = ({
   onClick,
@@ -45,11 +50,16 @@ export const ActionButton = ({
   className = "",
   idleIcon = null,
   idleIconClassName = "h-3 w-3",
+  iconOnly = false,
+  title = "",
+  ariaLabel = "",
 }) => {
   const isDisabled = disabled || loading;
   const isInteractive = !isDisabled;
   const toneClass = getToneClass(tone, isInteractive);
-  const sizeClass = kSizeClassBySize[size] || kSizeClassBySize.sm;
+  const sizeClass = iconOnly
+    ? kIconOnlySizeClassBySize[size] || kIconOnlySizeClassBySize.sm
+    : kSizeClassBySize[size] || kSizeClassBySize.sm;
   const loadingClass = loading
     ? `cursor-not-allowed ${
         tone === "warning"
@@ -60,7 +70,9 @@ export const ActionButton = ({
   const spinnerSizeClass = size === "md" || size === "lg" ? "h-4 w-4" : "h-3 w-3";
   const isInlineLoading = loadingMode === "inline";
   const IdleIcon = idleIcon;
-  const idleContent = IdleIcon
+  const idleContent = iconOnly && IdleIcon
+    ? html`<${IdleIcon} className=${idleIconClassName} />`
+    : IdleIcon
     ? html`
         <span class="inline-flex items-center gap-1.5 leading-none">
           <${IdleIcon} className=${idleIconClassName} />
@@ -75,6 +87,8 @@ export const ActionButton = ({
       type=${type}
       onclick=${onClick}
       disabled=${isDisabled}
+      title=${title}
+      aria-label=${ariaLabel || null}
       class="inline-flex items-center justify-center transition-colors whitespace-nowrap ${sizeClass} ${toneClass} ${loadingClass} ${className}"
     >
       ${isInlineLoading

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

@@ -17,6 +17,17 @@ const kGroupLabels = {
 
 const kGroupOrder = ["github", "channels", "tools", "custom"];
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+const stripSurroundingQuotes = (raw) => {
+  const value = String(raw || "").trim();
+  if (value.length < 2) return value;
+  const startsWithDouble = value.startsWith('"');
+  const endsWithDouble = value.endsWith('"');
+  if (startsWithDouble && endsWithDouble) return value.slice(1, -1);
+  const startsWithSingle = value.startsWith("'");
+  const endsWithSingle = value.endsWith("'");
+  if (startsWithSingle && endsWithSingle) return value.slice(1, -1);
+  return value;
+};
 const getVarsSignature = (items) =>
   JSON.stringify(
     (items || [])
@@ -27,6 +38,20 @@ const getVarsSignature = (items) =>
       .sort((a, b) => a.key.localeCompare(b.key)),
   );
 
+const sortCustomVarsAlphabetically = (items) => {
+  const list = Array.isArray(items) ? [...items] : [];
+  const customSorted = list
+    .filter((item) => (item?.group || "custom") === "custom")
+    .sort((a, b) => String(a?.key || "").localeCompare(String(b?.key || "")));
+  let customIdx = 0;
+  return list.map((item) => {
+    if ((item?.group || "custom") !== "custom") return item;
+    const next = customSorted[customIdx];
+    customIdx += 1;
+    return next;
+  });
+};
+
 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>`,
@@ -85,6 +110,8 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
 export const Envars = ({ onRestartRequired = () => {} }) => {
   const [vars, setVars] = useState([]);
   const [reservedKeys, setReservedKeys] = useState(() => new Set());
+  const [pendingCustomKeys, setPendingCustomKeys] = useState([]);
+  const [secretMaskEpoch, setSecretMaskEpoch] = useState(0);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [newKey, setNewKey] = useState("");
@@ -93,9 +120,10 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const load = useCallback(async () => {
     try {
       const data = await fetchEnvVars();
-      const nextVars = data.vars || [];
+      const nextVars = sortCustomVarsAlphabetically(data.vars || []);
       baselineSignatureRef.current = getVarsSignature(nextVars);
       setVars(nextVars);
+      setPendingCustomKeys([]);
       setReservedKeys(new Set(data.reservedKeys || []));
       onRestartRequired(!!data.restartRequired);
     } catch (err) {
@@ -117,6 +145,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
   const handleDelete = (key) => {
     setVars((prev) => prev.filter((v) => v.key !== key));
+    setPendingCustomKeys((prev) => prev.filter((pendingKey) => pendingKey !== key));
   };
 
   const handleSave = async () => {
@@ -135,7 +164,11 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
           : "Environment variables saved",
         "success",
       );
-      baselineSignatureRef.current = getVarsSignature(vars);
+      const sortedVars = sortCustomVarsAlphabetically(vars);
+      setVars(sortedVars);
+      setPendingCustomKeys([]);
+      setSecretMaskEpoch((prev) => prev + 1);
+      baselineSignatureRef.current = getVarsSignature(sortedVars);
       setDirty(false);
     } catch (err) {
       showToast("Failed to save: " + err.message, "error");
@@ -158,7 +191,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
       if (eqIdx > 0)
         pairs.push({
           key: line.slice(0, eqIdx).trim(),
-          value: line.slice(eqIdx + 1).trim(),
+          value: stripSurroundingQuotes(line.slice(eqIdx + 1)),
         });
     }
     return pairs;
@@ -167,6 +200,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const addVars = (pairs) => {
     let added = 0;
     const blocked = [];
+    const addedCustomKeys = [];
     setVars((prev) => {
       const next = [...prev];
       for (const { key: rawKey, value } of pairs) {
@@ -189,11 +223,15 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
             source: "env_file",
             editable: true,
           });
+          addedCustomKeys.push(key);
         }
         added++;
       }
       return next;
     });
+    if (addedCustomKeys.length) {
+      setPendingCustomKeys((prev) => [...prev, ...addedCustomKeys]);
+    }
     return { added, blocked };
   };
 
@@ -264,6 +302,14 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     if (!grouped[g]) grouped[g] = [];
     grouped[g].push(v);
   }
+  if (grouped.custom?.length) {
+    const pending = new Set(pendingCustomKeys);
+    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));
+    grouped.custom = [...nonPending, ...pendingAtBottom];
+  }
 
   return html`
     <div class="space-y-4">
@@ -295,6 +341,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
                 ${grouped[g].map(
                   (v) =>
                     html`<${EnvRow}
+                      key=${`${secretMaskEpoch}:${v.key}`}
                       envVar=${v}
                       onChange=${handleChange}
                       onDelete=${handleDelete}

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/file-viewer/toolbar.js

@@ -39,18 +39,25 @@ export const FileViewerToolbar = ({
         ${pathSegments.map(
           (segment, index) => html`
             <span class="file-viewer-breadcrumb-item">
-              <span class=${index === pathSegments.length - 1 ? "is-current" : ""}>
+              <span
+                class=${index === pathSegments.length - 1 ? "is-current" : ""}
+              >
                 ${segment}
               </span>
-              ${index < pathSegments.length - 1 && html`<span class="file-viewer-sep">></span>`}
+              ${index < pathSegments.length - 1 &&
+              html`<span class="file-viewer-sep">></span>`}
             </span>
           `,
         )}
       </span>
-      ${isDirty ? html`<span class="file-viewer-dirty-dot" aria-hidden="true"></span>` : null}
+      ${isDirty
+        ? html`<span class="file-viewer-dirty-dot" aria-hidden="true"></span>`
+        : null}
     </div>
     <div class="file-viewer-tabbar-spacer"></div>
-    ${isPreviewOnly ? html`<div class="file-viewer-preview-pill">Preview</div>` : null}
+    ${isPreviewOnly
+      ? html`<div class="file-viewer-preview-pill">Preview</div>`
+      : null}
     ${!isDiffView &&
     isMarkdownFile &&
     html`
@@ -69,27 +76,32 @@ export const FileViewerToolbar = ({
         ? html`
             ${!isProtectedFile
               ? html`
-                  <button
-                    type="button"
-                    onclick=${onRequestDelete}
+                  <${ActionButton}
+                    onClick=${onRequestDelete}
                     disabled=${!canDeleteFile || deleting}
-                    class=${`file-viewer-icon-action file-viewer-delete-action ${
-                      !canDeleteFile || deleting ? "is-disabled" : ""
-                    }`.trim()}
+                    tone="secondary"
+                    size="sm"
+                    iconOnly=${true}
+                    idleLabel=""
+                    idleIcon=${DeleteBinLineIcon}
+                    idleIconClassName="file-viewer-icon-action-icon"
+                    className="file-viewer-save-action"
                     title=${isDeleteBlocked
                       ? "Locked files cannot be deleted"
                       : "Delete file"}
-                    aria-label="Delete file"
-                  >
-                    <${DeleteBinLineIcon} className="file-viewer-icon-action-icon" />
-                  </button>
+                    ariaLabel="Delete file"
+                  />
                 `
               : null}
             ${isDirty
               ? html`
                   <${ActionButton}
                     onClick=${handleDiscard}
-                    disabled=${loading || !canEditFile || isEditBlocked || deleting || saving}
+                    disabled=${loading ||
+                    !canEditFile ||
+                    isEditBlocked ||
+                    deleting ||
+                    saving}
                     tone="secondary"
                     size="sm"
                     idleLabel="Discard changes"

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}