@chrysb/alphaclaw 0.6.2-beta.5 → 0.7.0-beta.0

package/lib/public/js/components/file-viewer/use-file-viewer.js

@@ -32,6 +32,7 @@ import { useFileDiff } from "./use-file-diff.js";
 import { useFileViewerDraftSync } from "./use-file-viewer-draft-sync.js";
 import { useFileViewerHotkeys } from "./use-file-viewer-hotkeys.js";
 import { useEditorSelectionRestore } from "./use-editor-selection-restore.js";
+import { useEditorLineNumberSync } from "./use-editor-line-number-sync.js";
 
 export const useFileViewer = ({
   filePath = "",
@@ -190,29 +191,12 @@ export const useFileViewer = ({
     [parsedFrontmatter.body, isMarkdownFile],
   );
 
-  const syncEditorLineNumberHeights = useCallback(() => {
-    if (!shouldUseHighlightedEditor || viewMode !== "edit") return;
-    const numberRows = editorLineNumberRowRefs.current;
-    const highlightRows = editorHighlightLineRefs.current;
-    const rowCount = Math.min(numberRows.length, highlightRows.length);
-    for (let index = 0; index < rowCount; index += 1) {
-      const numberRow = numberRows[index];
-      const highlightRow = highlightRows[index];
-      if (!numberRow || !highlightRow) continue;
-      numberRow.style.height = `${highlightRow.offsetHeight}px`;
-    }
-  }, [shouldUseHighlightedEditor, viewMode]);
-
-  useEffect(() => {
-    syncEditorLineNumberHeights();
-  }, [content, syncEditorLineNumberHeights]);
-
-  useEffect(() => {
-    if (!shouldUseHighlightedEditor || viewMode !== "edit") return () => {};
-    const onResize = () => syncEditorLineNumberHeights();
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [shouldUseHighlightedEditor, viewMode, syncEditorLineNumberHeights]);
+  useEditorLineNumberSync({
+    enabled: shouldUseHighlightedEditor && viewMode === "edit",
+    syncKey: `${normalizedPath}:${renderContent.length}:${highlightedEditorLines.length}`,
+    editorLineNumberRowRefs,
+    editorHighlightLineRefs,
+  });
 
   useEffect(() => {
     if (!isMarkdownFile && viewMode !== "edit") {

package/lib/public/js/components/file-viewer/utils.js

@@ -13,11 +13,7 @@ export const clampSelectionIndex = (value, maxValue) => {
 export const countTextLines = (content) => {
   const text = String(content || "");
   if (!text) return 1;
-  let lineCount = 1;
-  for (let index = 0; index < text.length; index += 1) {
-    if (text.charCodeAt(index) === 10) lineCount += 1;
-  }
-  return lineCount;
+  return text.split(/\r\n|\r|\n/).length;
 };
 
 export const shouldUseSimpleEditorMode = ({

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/onboarding/welcome-pairing-step.js

@@ -43,7 +43,9 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
         <div class="font-medium text-sm">
           ${pairing.code || pairing.id || "Pending request"}
         </div>
-        <span class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400">
+        <span
+          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400"
+        >
           Request
         </span>
       </div>
@@ -54,14 +56,18 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
         <button
           onclick=${handleApprove}
           disabled=${!!busyAction}
-          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
+          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction
+            ? "opacity-50 cursor-not-allowed"
+            : ""}"
         >
           ${busyAction === "approve" ? "Approving..." : "Approve"}
         </button>
         <button
           onclick=${handleReject}
           disabled=${!!busyAction}
-          class="ac-btn-secondary text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
+          class="ac-btn-secondary text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction
+            ? "opacity-50 cursor-not-allowed"
+            : ""}"
         >
           ${busyAction === "reject" ? "Rejecting..." : "Reject"}
         </button>
@@ -83,15 +89,20 @@ export const WelcomePairingStep = ({
   onSkip,
 }) => {
   const channelMeta = kChannelMeta[channel] || {
-    label: channel ? channel.charAt(0).toUpperCase() + channel.slice(1) : "Channel",
+    label: channel
+      ? channel.charAt(0).toUpperCase() + channel.slice(1)
+      : "Channel",
     iconSrc: "",
   };
   const channelInfo = channels?.[channel];
 
   if (!channel) {
     return html`
-      <div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
-        Missing channel configuration. Go back and add a Telegram or Discord bot token.
+      <div
+        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+      >
+        Missing channel configuration. Go back and add a Telegram or Discord bot
+        token.
       </div>
     `;
   }
@@ -101,12 +112,16 @@ export const WelcomePairingStep = ({
       <div class="min-h-[300px] pb-6 px-6 flex flex-col">
         <div class="flex-1 flex items-center justify-center text-center">
           <div class="space-y-3 max-w-xl mx-auto">
-            <p class="text-sm font-medium text-green-300 mb-12">🎉 Setup complete</p>
+            <p class="text-sm font-medium text-green-300 mb-12">
+              🎉 Setup complete
+            </p>
             <p class="text-xs text-gray-300">
-              Your ${channelMeta.label} channel is connected. You can switch to ${channelMeta.label} and start using your agent now.
+              Your ${channelMeta.label} channel is connected. You can switch to
+              ${channelMeta.label} and start using your agent now.
             </p>
             <p class="text-xs text-gray-500 font-normal opacity-85">
-              Continue to the dashboard to explore extras like Google Workspace and additional integrations.
+              Continue to the dashboard to explore extras like Google Workspace
+              and additional integrations.
             </p>
           </div>
         </div>
@@ -124,60 +139,74 @@ export const WelcomePairingStep = ({
     <div class="min-h-[300px] pb-6 flex flex-col gap-3">
       <div class="flex items-center justify-end gap-2">
         <${Badge} tone="warning"
-          >${loading
-            ? "Checking..."
-            : pairings.length > 0
-              ? "Pairing request detected"
-              : "Awaiting pairing"}</${Badge}
+          >${
+            loading
+              ? "Checking..."
+              : pairings.length > 0
+                ? "Pairing request detected"
+                : "Awaiting pairing"
+          }</${Badge}
         >
       </div>
 
-      ${pairings.length > 0
-        ? html`<div class="flex-1 flex items-center">
-            <div class="w-full">
-              ${pairings.map(
-                (pairing) =>
-                  html`<${PairingRow}
-                    key=${pairing.id}
-                    pairing=${pairing}
-                    onApprove=${onApprove}
-                    onReject=${onReject}
-                  />`,
-              )}
-            </div>
-          </div>`
-        : html`<div class="flex-1 flex items-center justify-center text-center py-4">
-            <div class="space-y-4">
-            ${channelMeta.iconSrc
-              ? html`<img
-                  src=${channelMeta.iconSrc}
-                  alt=${channelMeta.label}
-                  class="w-8 h-8 mx-auto rounded-md"
-                />`
-              : null}
-            <p class="text-gray-300 text-sm">
-              Send a message to your ${channelMeta.label} bot
-            </p>
-            <p class="text-gray-600 text-xs">
-              The pairing request will appear here in 5-10 seconds
-            </p>
-            </div>
-          </div>`}
+      ${
+        pairings.length > 0
+          ? html`<div class="flex-1 flex items-center">
+              <div class="w-full">
+                ${pairings.map(
+                  (pairing) =>
+                    html`<${PairingRow}
+                      key=${pairing.id}
+                      pairing=${pairing}
+                      onApprove=${onApprove}
+                      onReject=${onReject}
+                    />`,
+                )}
+              </div>
+            </div>`
+          : html`<div
+              class="flex-1 flex items-center justify-center text-center py-4"
+            >
+              <div class="space-y-4">
+                ${channelMeta.iconSrc
+                  ? html`<img
+                      src=${channelMeta.iconSrc}
+                      alt=${channelMeta.label}
+                      class="w-8 h-8 mx-auto rounded-md"
+                    />`
+                  : null}
+                <p class="text-gray-300 text-sm">
+                  Send a message to your ${channelMeta.label} bot
+                </p>
+                <p class="text-gray-600 text-xs">
+                  The pairing request will appear here in 5-10 seconds
+                </p>
+              </div>
+            </div>`
+      }
 
-      ${error
-        ? html`<div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
-            ${error}
-          </div>`
-        : null}
-      <div class="pt-3 border-t border-border text-center">
-        <button
-          type="button"
-          onclick=${onSkip}
-          class="ac-tip-link text-xs font-medium"
-        >
-          Skip pairing for now
-        </button>
-      </div>
+      ${
+        error
+          ? html`<div
+              class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+            >
+              ${error}
+            </div>`
+          : null
+      }
+      ${
+        pairings.length === 0
+          ? html`<div class="pt-3 text-center">
+              <button
+                type="button"
+                onclick=${onSkip}
+                class="ac-tip-link text-xs font-medium"
+              >
+                Skip pairing for now
+              </button>
+            </div>`
+          : null
+      }
     </div>
   `;
 };

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