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

package/lib/public/js/components/models-tab/index.js

@@ -4,6 +4,8 @@ import htm from "https://esm.sh/htm";
 import { PageHeader } from "../page-header.js";
 import { LoadingSpinner } from "../loading-spinner.js";
 import { ActionButton } from "../action-button.js";
+import { PopActions } from "../pop-actions.js";
+import { PaneShell } from "../pane-shell.js";
 import { Badge } from "../badge.js";
 import { useModels } from "./use-models.js";
 import {
@@ -123,155 +125,157 @@ export const Models = ({ onRestartRequired = () => {}, agentId, embedded = false
   );
 
   const headerActions = html`
-    <${ActionButton}
-      onClick=${cancelChanges}
-      disabled=${!isDirty || saving}
-      tone="secondary"
-      size="sm"
-      idleLabel="Cancel"
-      className="transition-all"
-    />
-    <${ActionButton}
-      onClick=${saveAll}
-      disabled=${!isDirty || saving}
-      loading=${saving}
-      tone="primary"
-      size="sm"
-      idleLabel="Save changes"
-      loadingLabel="Saving..."
-      className="transition-all"
-    />
+    <${PopActions} visible=${isDirty}>
+      <${ActionButton}
+        onClick=${cancelChanges}
+        disabled=${saving}
+        tone="secondary"
+        size="sm"
+        idleLabel="Cancel"
+        className="text-xs"
+      />
+      <${ActionButton}
+        onClick=${saveAll}
+        disabled=${saving}
+        loading=${saving}
+        loadingMode="inline"
+        tone="primary"
+        size="sm"
+        idleLabel="Save changes"
+        loadingLabel="Saving…"
+        className="text-xs"
+      />
+    </${PopActions}>
   `;
 
   if (!ready) {
-    return html`
-      <div class="space-y-4">
-        ${!embedded
-          ? html`
-              <${PageHeader}
-                title="Models"
-                actions=${html`
-                  <${ActionButton}
-                    disabled=${true}
-                    tone="primary"
-                    size="sm"
-                    idleLabel="Save changes"
-                    className="transition-all"
-                  />
-                `}
-              />
-            `
-          : null}
-        <div class="bg-surface border border-border rounded-xl p-4">
-          <div class="flex items-center gap-2 text-sm text-gray-400">
-            <${LoadingSpinner} className="h-4 w-4" />
-            Loading model settings...
-          </div>
+    const loadingBody = html`
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center gap-2 text-sm text-gray-400">
+          <${LoadingSpinner} className="h-4 w-4" />
+          Loading model settings...
         </div>
       </div>
     `;
+    if (embedded) return loadingBody;
+    return html`
+      <${PaneShell}
+        header=${html`<${PageHeader} title="Models" />`}
+      >
+        ${loadingBody}
+      </${PaneShell}>
+    `;
   }
 
-  return html`
-    <div class="space-y-4">
-      ${!embedded
-        ? html`<${PageHeader} title="Models" actions=${headerActions} />`
+  const bodyContent = html`
+    <!-- Configured Models -->
+    <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+      <h2 class="card-label">Available Models</h2>
+
+      ${configuredModelEntries.length === 0
+        ? html`<p class="text-xs text-gray-500">
+            No models configured. Add a model below.
+          </p>`
         : html`
-            <div class="flex items-center justify-end gap-2">
-              ${headerActions}
+            <div class="space-y-1">
+              ${configuredModelEntries.map(
+                (entry) => html`
+                  <div
+                    class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-white/5"
+                  >
+                    <div class="flex items-center gap-2 min-w-0">
+                      <span class="text-sm text-gray-200 truncate"
+                        >${entry.label}</span
+                      >
+                      ${entry.isPrimary
+                        ? html`<${Badge} tone="cyan">Primary</${Badge}>`
+                        : entry.hasAuth
+                          ? html`
+                              <button
+                                onclick=${() => setPrimaryModel(entry.key)}
+                                class="text-xs px-2 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
+                              >
+                                Set primary
+                              </button>
+                            `
+                          : html`<${Badge} tone="warning">Needs auth</${Badge}>`}
+                    </div>
+                    <button
+                      onclick=${() => removeModel(entry.key)}
+                      class="text-xs text-gray-600 hover:text-red-400 shrink-0 px-1"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                `,
+              )}
             </div>
           `}
 
-      <!-- Configured Models -->
-      <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
-        <h2 class="card-label">Available Models</h2>
+      <div class="space-y-2">
+        <${SearchableModelPicker}
+          options=${pickerModels}
+          popularModels=${popularPickerModels}
+          placeholder="Add model..."
+          onSelect=${(modelKey) => {
+            addModel(modelKey);
+            if (!primary) setPrimaryModel(modelKey);
+          }}
+        />
+      </div>
 
-        ${configuredModelEntries.length === 0
-          ? html`<p class="text-xs text-gray-500">
-              No models configured. Add a model below.
-            </p>`
-          : html`
-              <div class="space-y-1">
-                ${configuredModelEntries.map(
-                  (entry) => html`
-                    <div
-                      class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-white/5"
-                    >
-                      <div class="flex items-center gap-2 min-w-0">
-                        <span class="text-sm text-gray-200 truncate"
-                          >${entry.label}</span
-                        >
-                        ${entry.isPrimary
-                          ? html`<${Badge} tone="cyan">Primary</${Badge}>`
-                          : entry.hasAuth
-                            ? html`
-                                <button
-                                  onclick=${() => setPrimaryModel(entry.key)}
-                                  class="text-xs px-2 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
-                                >
-                                  Set primary
-                                </button>
-                              `
-                            : html`<${Badge} tone="warning">Needs auth</${Badge}>`}
-                      </div>
-                      <button
-                        onclick=${() => removeModel(entry.key)}
-                        class="text-xs text-gray-600 hover:text-red-400 shrink-0 px-1"
-                      >
-                        Remove
-                      </button>
-                    </div>
-                  `,
-                )}
-              </div>
-            `}
+      ${loading
+        ? html`<p class="text-xs text-gray-600">
+            Loading model catalog...
+          </p>`
+        : error
+          ? html`<p class="text-xs text-gray-600">${error}</p>`
+          : null}
+    </div>
 
-        <div class="space-y-2">
-          <${SearchableModelPicker}
-            options=${pickerModels}
-            popularModels=${popularPickerModels}
-            placeholder="Add model..."
-            onSelect=${(modelKey) => {
-              addModel(modelKey);
-              if (!primary) setPrimaryModel(modelKey);
-            }}
-          />
-        </div>
+    <!-- Provider Auth -->
+    ${sortedProviders.length > 0
+      ? html`
+          <div class="space-y-3">
+            <h2 class="font-semibold text-base">
+              Provider Authentication
+            </h2>
+            ${sortedProviders.map(
+              (provider) => html`
+                <${ProviderAuthCard}
+                  provider=${provider}
+                  authProfiles=${authProfiles}
+                  authOrder=${authOrder}
+                  codexStatus=${codexStatus}
+                  onEditProfile=${editProfile}
+                  onEditAuthOrder=${editAuthOrder}
+                  getProfileValue=${getProfileValue}
+                  getEffectiveOrder=${getEffectiveOrder}
+                  onRefreshCodex=${refreshCodexStatus}
+                />
+              `,
+            )}
+          </div>
+        `
+      : null}
+  `;
 
-        ${loading
-          ? html`<p class="text-xs text-gray-600">
-              Loading model catalog...
-            </p>`
-          : error
-            ? html`<p class="text-xs text-gray-600">${error}</p>`
-            : null}
+  if (embedded) {
+    return html`
+      <div class="space-y-4">
+        <div class="flex items-center justify-end gap-2">
+          ${headerActions}
+        </div>
+        ${bodyContent}
       </div>
+    `;
+  }
 
-      <!-- Provider Auth -->
-      ${sortedProviders.length > 0
-        ? html`
-            <div class="space-y-3">
-              <h2 class="font-semibold text-base">
-                Provider Authentication
-              </h2>
-              ${sortedProviders.map(
-                (provider) => html`
-                  <${ProviderAuthCard}
-                    provider=${provider}
-                    authProfiles=${authProfiles}
-                    authOrder=${authOrder}
-                    codexStatus=${codexStatus}
-                    onEditProfile=${editProfile}
-                    onEditAuthOrder=${editAuthOrder}
-                    getProfileValue=${getProfileValue}
-                    getEffectiveOrder=${getEffectiveOrder}
-                    onRefreshCodex=${refreshCodexStatus}
-                  />
-                `,
-              )}
-            </div>
-          `
-        : null}
-    </div>
+  return html`
+    <${PaneShell}
+      header=${html`<${PageHeader} title="Models" actions=${headerActions} />`}
+    >
+      ${bodyContent}
+    </${PaneShell}>
   `;
 };

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -375,7 +375,14 @@ export const ProviderAuthCard = ({
                 };
                 if (currentValue?.expires) cred.expires = currentValue.expires;
                 onEditProfile(profileId, cred);
-                if (hasMultipleModes && newVal && !isActive) {
+                const savedProfile =
+                  authProfiles.find((p) => p.id === profileId) || null;
+                const isReverted =
+                  getCredentialValue(cred) ===
+                  getCredentialValue(savedProfile);
+                if (isReverted && hasMultipleModes) {
+                  onEditAuthOrder(provider, savedOrder);
+                } else if (hasMultipleModes && newVal && !isActive) {
                   handleSetActive(mode);
                 }
               }}

package/lib/public/js/components/models-tab/use-models.js

@@ -92,10 +92,13 @@ export const useModels = (agentId) => {
     refresh();
   }, [agentId]);
 
+  const stableStringify = (obj) =>
+    JSON.stringify(Object.keys(obj).sort().reduce((acc, k) => { acc[k] = obj[k]; return acc; }, {}));
+
   const modelConfigDirty =
     primary !== savedPrimaryRef.current ||
-    JSON.stringify(configuredModels) !==
-      JSON.stringify(savedConfiguredRef.current);
+    stableStringify(configuredModels) !==
+      stableStringify(savedConfiguredRef.current);
 
   const authDirty = (() => {
     const hasProfileChanges = Object.entries(profileEdits).some(
@@ -155,13 +158,37 @@ export const useModels = (agentId) => {
     [updateCache],
   );
 
-  const editProfile = useCallback((profileId, credential) => {
-    setProfileEdits((prev) => ({ ...prev, [profileId]: credential }));
-  }, []);
+  const editProfile = useCallback(
+    (profileId, credential) => {
+      const existing = authProfiles.find((p) => p.id === profileId);
+      if (getCredentialValue(credential) === getCredentialValue(existing)) {
+        setProfileEdits((prev) => {
+          const next = { ...prev };
+          delete next[profileId];
+          return next;
+        });
+        return;
+      }
+      setProfileEdits((prev) => ({ ...prev, [profileId]: credential }));
+    },
+    [authProfiles],
+  );
 
-  const editAuthOrder = useCallback((provider, orderedIds) => {
-    setOrderEdits((prev) => ({ ...prev, [provider]: orderedIds }));
-  }, []);
+  const editAuthOrder = useCallback(
+    (provider, orderedIds) => {
+      const existing = authOrder[provider] || null;
+      if (JSON.stringify(orderedIds) === JSON.stringify(existing)) {
+        setOrderEdits((prev) => {
+          const next = { ...prev };
+          delete next[provider];
+          return next;
+        });
+        return;
+      }
+      setOrderEdits((prev) => ({ ...prev, [provider]: orderedIds }));
+    },
+    [authOrder],
+  );
 
   const getProfileValue = useCallback(
     (profileId) => {

package/lib/public/js/components/pane-shell.js

@@ -0,0 +1,27 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+/**
+ * Shared layout shell for pages that need a fixed header with a
+ * separately scrollable body. The header stays pinned at the top
+ * while body content scrolls underneath.
+ *
+ * @param {preact.ComponentChildren} props.header  Content rendered in the fixed header area.
+ * @param {preact.ComponentChildren} props.children  Content rendered in the scrollable body.
+ */
+export const PaneShell = ({ header, children }) => html`
+  <div class="ac-pane-shell">
+    <div class="ac-pane-header">
+      <div class="ac-pane-header-content">
+        ${header}
+      </div>
+    </div>
+    <div class="ac-pane-body">
+      <div class="ac-pane-body-content">
+        ${children}
+      </div>
+    </div>
+  </div>
+`;

package/lib/public/js/components/routes/envars-route.js

@@ -5,7 +5,5 @@ import { Envars } from "../envars.js";
 const html = htm.bind(h);
 
 export const EnvarsRoute = ({ onRestartRequired = () => {} }) => html`
-  <div class="pt-4">
-    <${Envars} onRestartRequired=${onRestartRequired} />
-  </div>
+  <${Envars} onRestartRequired=${onRestartRequired} />
 `;

package/lib/public/js/components/routes/models-route.js

@@ -5,7 +5,5 @@ import { Models } from "../models-tab/index.js";
 const html = htm.bind(h);
 
 export const ModelsRoute = ({ onRestartRequired = () => {} }) => html`
-  <div class="pt-4">
-    <${Models} onRestartRequired=${onRestartRequired} />
-  </div>
+  <${Models} onRestartRequired=${onRestartRequired} />
 `;

package/lib/public/js/lib/app-navigation.js

@@ -10,10 +10,10 @@ export const kNavSections = [
   {
     label: "Monitoring",
     items: [
-      { id: "watchdog", label: "Watchdog" },
       { id: "cron", label: "Cron" },
       { id: "usage", label: "Usage" },
       { id: "doctor", label: "Doctor" },
+      { id: "watchdog", label: "Watchdog" },
     ],
   },
   {

package/lib/server/cost-utils.js

@@ -267,8 +267,8 @@ const deriveCostBreakdown = ({
   model = "",
 } = {}) => {
   const pricing =
-    resolvePricingFromFallbackMap(model) ||
-    resolvePricingFromOpenclawNodeModules({ provider, model });
+    resolvePricingFromOpenclawNodeModules({ provider, model }) ||
+    resolvePricingFromFallbackMap(model);
   if (!pricing) {
     return {
       inputCost: 0,

package/package.json

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