@chrysb/alphaclaw 0.4.1-beta.2 → 0.4.3

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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.4.1-beta.2",
+  "version": "0.4.3",
   "publishConfig": {
     "access": "public"
   },