@chrysb/alphaclaw 0.8.0 → 0.8.1-beta.1

package/lib/public/js/app.js

@@ -240,87 +240,105 @@ const App = () => {
             <span style="color: var(--accent)">alpha</span>claw
           </span>
         </div>
-        <div
-          class="app-content-pane browse-pane"
-          style=${{ display: browseState.isBrowseRoute ? "block" : "none" }}
-        >
-          <${BrowseRoute}
-            activeBrowsePath=${browseState.activeBrowsePath}
-            browseView=${browseState.browseViewerMode}
-            lineTarget=${browseState.browseLineTarget}
-            lineEndTarget=${browseState.browseLineEndTarget}
-            selectedBrowsePath=${browseState.selectedBrowsePath}
-            onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
-            onEditSelectedBrowseFile=${() =>
-              setLocation(
-                browseActions.buildBrowseRoute(browseState.selectedBrowsePath, {
-                  view: "edit",
-                }),
-              )}
-            onClearSelection=${() => {
-              browseActions.clearBrowsePreview();
-              setLocation("/browse");
-            }}
-          />
-        </div>
-        <div
-          class="app-content-pane agents-pane"
-          style=${{ display: isAgentsRoute ? "block" : "none" }}
-        >
-          <${AgentsRoute}
-            agents=${agentsState.agents}
-            loading=${agentsState.loading}
-            saving=${agentsState.saving}
-            agentsActions=${agentsActions}
-            selectedAgentId=${selectedAgentId}
-            activeTab=${agentDetailTab}
-            onSelectAgent=${(agentId) => setLocation(`/agents/${encodeURIComponent(agentId)}`)}
-            onSelectTab=${(tab) => {
-              const safePath = tab && tab !== "overview"
-                ? `/agents/${encodeURIComponent(selectedAgentId)}/${tab}`
-                : `/agents/${encodeURIComponent(selectedAgentId)}`;
-              setLocation(safePath);
-            }}
-            onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
-            onSetLocation=${setLocation}
-          />
-        </div>
-        <div
-          class="app-content-pane cron-pane"
-          style=${{ display: isCronRoute ? "block" : "none" }}
-        >
-          <${CronRoute}
-            jobId=${selectedCronJobId}
-            onSetLocation=${setLocation}
-          />
-        </div>
-        <div
-          class="app-content-pane ac-fixed-header-pane"
-          style=${{ display: isEnvarsRoute ? "block" : "none" }}
-        >
-          <${EnvarsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
-        </div>
-        <div
-          class="app-content-pane ac-fixed-header-pane"
-          style=${{ display: isModelsRoute ? "block" : "none" }}
-        >
-          <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
-        </div>
-        <div
-          class="app-content-pane"
-          style=${{ display: isNodesRoute ? "block" : "none" }}
-        >
-          <${NodesRoute} onRestartRequired=${controllerActions.setRestartRequired} />
-        </div>
-        <div
-          class="app-content-pane"
-          onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute || isEnvarsRoute || isModelsRoute || isNodesRoute ? "none" : "block" }}
-        >
+        ${browseState.isBrowseRoute
+          ? html`
+              <div class="app-content-pane browse-pane">
+                <${BrowseRoute}
+                  activeBrowsePath=${browseState.activeBrowsePath}
+                  browseView=${browseState.browseViewerMode}
+                  lineTarget=${browseState.browseLineTarget}
+                  lineEndTarget=${browseState.browseLineEndTarget}
+                  selectedBrowsePath=${browseState.selectedBrowsePath}
+                  onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
+                  onEditSelectedBrowseFile=${() =>
+                    setLocation(
+                      browseActions.buildBrowseRoute(browseState.selectedBrowsePath, {
+                        view: "edit",
+                      }),
+                    )}
+                  onClearSelection=${() => {
+                    browseActions.clearBrowsePreview();
+                    setLocation("/browse");
+                  }}
+                />
+              </div>
+            `
+          : null}
+        ${isAgentsRoute
+          ? html`
+              <div class="app-content-pane agents-pane">
+                <${AgentsRoute}
+                  agents=${agentsState.agents}
+                  loading=${agentsState.loading}
+                  saving=${agentsState.saving}
+                  agentsActions=${agentsActions}
+                  selectedAgentId=${selectedAgentId}
+                  activeTab=${agentDetailTab}
+                  onSelectAgent=${(agentId) =>
+                    setLocation(`/agents/${encodeURIComponent(agentId)}`)}
+                  onSelectTab=${(tab) => {
+                    const safePath = tab && tab !== "overview"
+                      ? `/agents/${encodeURIComponent(selectedAgentId)}/${tab}`
+                      : `/agents/${encodeURIComponent(selectedAgentId)}`;
+                    setLocation(safePath);
+                  }}
+                  onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
+                  onSetLocation=${setLocation}
+                />
+              </div>
+            `
+          : null}
+        ${isCronRoute
+          ? html`
+              <div class="app-content-pane cron-pane">
+                <${CronRoute}
+                  jobId=${selectedCronJobId}
+                  onSetLocation=${setLocation}
+                />
+              </div>
+            `
+          : null}
+        ${isEnvarsRoute
+          ? html`
+              <div class="app-content-pane ac-fixed-header-pane">
+                <${EnvarsRoute}
+                  onRestartRequired=${controllerActions.setRestartRequired}
+                />
+              </div>
+            `
+          : null}
+        ${isModelsRoute
+          ? html`
+              <div class="app-content-pane ac-fixed-header-pane">
+                <${ModelsRoute}
+                  onRestartRequired=${controllerActions.setRestartRequired}
+                />
+              </div>
+            `
+          : null}
+        ${isNodesRoute
+          ? html`
+              <div class="app-content-pane">
+                <${NodesRoute}
+                  onRestartRequired=${controllerActions.setRestartRequired}
+                />
+              </div>
+            `
+          : null}
+        ${browseState.isBrowseRoute ||
+        isAgentsRoute ||
+        isCronRoute ||
+        isEnvarsRoute ||
+        isModelsRoute ||
+        isNodesRoute
+          ? null
+          : html`
+              <div
+                class="app-content-pane"
+                onscroll=${shellActions.handlePaneScroll}
+              >
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute && !isEnvarsRoute && !isModelsRoute && !isNodesRoute
-              ? html`
-                  <${Switch}>
+            <${Switch}>
                     <${Route} path="/general">
                       <${GeneralRoute}
                         statusData=${controllerState.sharedStatus}
@@ -412,10 +430,9 @@ const App = () => {
                       <${RouteRedirect} to="/general" />
                     </${Route}>
                   </${Switch}>
-                `
-              : null}
           </div>
-        </div>
+              </div>
+            `}
         <${ToastContainer}
           className="fixed top-4 right-4 z-[60] space-y-2 pointer-events-none"
         />

package/lib/public/js/components/agents-tab/agent-pairing-section.js

@@ -17,6 +17,7 @@ import {
   rejectPairing,
 } from "../../lib/api.js";
 import { showToast } from "../toast.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 
 const html = htm.bind(h);
 
@@ -43,29 +44,60 @@ export const AgentPairingSection = ({ agent = {} }) => {
   const pairingDelayedRefreshTimerRefs = useRef([]);
   const agentId = String(agent?.id || "").trim();
   const isDefaultAgent = !!agent?.default;
+  const {
+    data: bindingsPayload,
+    loading: bindingsLoading,
+    refresh: refreshBindingsPayload,
+  } = useCachedFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/bindings`,
+    () => fetchAgentBindings(agent.id),
+    {
+      enabled: Boolean(agentId),
+      maxAgeMs: 30000,
+    },
+  );
+  const {
+    data: channelsPayload,
+    loading: channelsLoading,
+    refresh: refreshChannelsPayload,
+  } = useCachedFetch("/api/channels/accounts", fetchChannelAccounts, {
+    maxAgeMs: 30000,
+  });
 
   const loadBindings = useCallback(async () => {
     setLoadingBindings(true);
     try {
-      const [bindingsResult, channelsResult] = await Promise.all([
-        fetchAgentBindings(agent.id),
-        fetchChannelAccounts(),
+      const [nextBindingsPayload, nextChannelsPayload] = await Promise.all([
+        refreshBindingsPayload({ force: true }),
+        refreshChannelsPayload({ force: true }),
       ]);
-      setBindings(Array.isArray(bindingsResult?.bindings) ? bindingsResult.bindings : []);
-      setChannels(Array.isArray(channelsResult?.channels) ? channelsResult.channels : []);
+      setBindings(
+        Array.isArray(nextBindingsPayload?.bindings)
+          ? nextBindingsPayload.bindings
+          : [],
+      );
+      setChannels(
+        Array.isArray(nextChannelsPayload?.channels)
+          ? nextChannelsPayload.channels
+          : [],
+      );
     } catch {
       setBindings([]);
       setChannels([]);
     } finally {
       setLoadingBindings(false);
     }
-  }, [agent.id]);
+  }, [refreshBindingsPayload, refreshChannelsPayload]);
 
   useEffect(() => {
-    if (String(agent?.id || "").trim()) {
-      loadBindings();
-    }
-  }, [agent.id, loadBindings]);
+    setBindings(
+      Array.isArray(bindingsPayload?.bindings) ? bindingsPayload.bindings : [],
+    );
+    setChannels(
+      Array.isArray(channelsPayload?.channels) ? channelsPayload.channels : [],
+    );
+    setLoadingBindings(Boolean(bindingsLoading || channelsLoading));
+  }, [bindingsLoading, bindingsPayload, channelsLoading, channelsPayload]);
 
   useEffect(() => {
     const handleBindingsChanged = (event) => {
@@ -207,8 +239,11 @@ export const AgentPairingSection = ({ agent = {} }) => {
           };
         });
     },
-    1000,
-    { enabled: hasUnpaired && ownedAccounts.length > 0 },
+    3000,
+    {
+      enabled: hasUnpaired && ownedAccounts.length > 0,
+      cacheKey: `/api/pairings?agent=${encodeURIComponent(agentId)}`,
+    },
   );
 
   const pending = pairingsPoll.data || [];

package/lib/public/js/components/channels.js

@@ -15,6 +15,7 @@ import {
   fetchChannelAccounts,
   updateChannelAccount,
 } from "../lib/api.js";
+import { useCachedFetch } from "../hooks/use-cached-fetch.js";
 import {
   isImplicitDefaultAccount,
   resolveChannelAccountLabel,
@@ -140,31 +141,27 @@ export const Channels = ({
   onNavigate = () => {},
   onRefreshStatuses = () => {},
 }) => {
-  const [channelAccounts, setChannelAccounts] = useState([]);
-  const [loadingAccounts, setLoadingAccounts] = useState(true);
   const [saving, setSaving] = useState(false);
   const [createLoadingLabel, setCreateLoadingLabel] = useState("Creating...");
   const [menuOpenId, setMenuOpenId] = useState("");
   const [editingAccount, setEditingAccount] = useState(null);
   const [deletingAccount, setDeletingAccount] = useState(null);
+  const {
+    data: channelAccountsPayload,
+    loading: loadingAccounts,
+    refresh: refreshChannelAccounts,
+  } = useCachedFetch("/api/channels/accounts", fetchChannelAccounts, {
+    maxAgeMs: 30000,
+  });
+  const channelAccounts = Array.isArray(channelAccountsPayload?.channels)
+    ? channelAccountsPayload.channels
+    : [];
 
   const loadChannelAccounts = useCallback(async () => {
-    setLoadingAccounts(true);
     try {
-      const payload = await fetchChannelAccounts();
-      setChannelAccounts(
-        Array.isArray(payload?.channels) ? payload.channels : [],
-      );
-    } catch {
-      setChannelAccounts([]);
-    } finally {
-      setLoadingAccounts(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadChannelAccounts();
-  }, [loadChannelAccounts]);
+      await refreshChannelAccounts({ force: true });
+    } catch {}
+  }, [refreshChannelAccounts]);
 
 
   const configuredChannelMap = useMemo(

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

@@ -7,6 +7,7 @@ import {
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars, saveEnvVars } from "../lib/api.js";
+import { useCachedFetch } from "../hooks/use-cached-fetch.js";
 import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
@@ -315,24 +316,47 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const [showAllAiKeys, setShowAllAiKeys] = useState(false);
   const [newKey, setNewKey] = useState("");
   const baselineSignatureRef = useRef("[]");
+  const {
+    data: envPayload,
+    error: envPayloadError,
+    loading: envPayloadLoading,
+    refresh: refreshEnvPayload,
+  } = useCachedFetch("/api/env", fetchEnvVars, {
+    maxAgeMs: 30000,
+  });
 
-  const load = useCallback(async () => {
-    try {
-      const data = await fetchEnvVars();
+  const applyEnvPayload = useCallback(
+    (data) => {
+      if (!data) return;
       const nextVars = sortCustomVarsAlphabetically(data.vars || []);
       baselineSignatureRef.current = getVarsSignature(nextVars);
       setVars(nextVars);
       setPendingCustomKeys([]);
       setReservedKeys(new Set(data.reservedKeys || []));
       onRestartRequired(!!data.restartRequired);
+    },
+    [onRestartRequired],
+  );
+
+  const load = useCallback(async () => {
+    try {
+      const data = await refreshEnvPayload({ force: true });
+      applyEnvPayload(data);
     } catch (err) {
       console.error("Failed to load env vars:", err);
     }
-  }, []);
+  }, [applyEnvPayload, refreshEnvPayload]);
 
   useEffect(() => {
-    load();
-  }, [load]);
+    if (!envPayload) return;
+    if (dirty || saving) return;
+    applyEnvPayload(envPayload);
+  }, [applyEnvPayload, dirty, envPayload, saving]);
+
+  useEffect(() => {
+    if (!envPayloadError) return;
+    console.error("Failed to load env vars:", envPayloadError);
+  }, [envPayloadError]);
 
   useEffect(() => {
     setDirty(getVarsSignature(vars) !== baselineSignatureRef.current);
@@ -592,6 +616,18 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     `;
   };
 
+  if (envPayloadLoading && !vars.length) {
+    return html`
+      <${PaneShell}
+        header=${html`<${PageHeader} title="Envars" />`}
+      >
+        <div class="bg-surface border border-border rounded-xl p-4 text-sm text-gray-500">
+          Loading environment variables...
+        </div>
+      </${PaneShell}>
+    `;
+  }
+
   return html`
     <${PaneShell}
       header=${html`

package/lib/public/js/components/features.js

@@ -1,7 +1,7 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useEffect } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars } from "../lib/api.js";
+import { useCachedFetch } from "../hooks/use-cached-fetch.js";
 import { Badge } from "./badge.js";
 import {
   kFeatureDefs,
@@ -23,17 +23,11 @@ const resolveFeatureStatus = (feature, envVars) => {
 };
 
 export const Features = ({ onSwitchTab }) => {
-  const [envVars, setEnvVars] = useState([]);
-  const [loaded, setLoaded] = useState(false);
-
-  useEffect(() => {
-    fetchEnvVars()
-      .then((data) => {
-        setEnvVars(data.vars || []);
-        setLoaded(true);
-      })
-      .catch(() => setLoaded(true));
-  }, []);
+  const { data, loading } = useCachedFetch("/api/env", fetchEnvVars, {
+    maxAgeMs: 30000,
+  });
+  const envVars = Array.isArray(data?.vars) ? data.vars : [];
+  const loaded = !loading;
 
   if (!loaded) return null;
 

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

@@ -62,8 +62,11 @@ export const useGeneralTab = ({
       const data = await fetchPairings();
       return data.pending || [];
     },
-    1000,
-    { enabled: hasUnpaired && gatewayStatus === "running" },
+    3000,
+    {
+      enabled: hasUnpaired && gatewayStatus === "running",
+      cacheKey: "/api/pairings",
+    },
   );
   const pending = pairingsPoll.data || [];
   const shouldPollDevices =
@@ -75,14 +78,16 @@ export const useGeneralTab = ({
       setCliAutoApproveComplete(data?.cliAutoApproveComplete === true);
       return data.pending || [];
     },
-    2000,
-    { enabled: shouldPollDevices },
+    5000,
+    {
+      enabled: shouldPollDevices,
+      cacheKey: "/api/devices",
+    },
   );
   const devicePending = devicePoll.data || [];
 
   useEffect(() => {
     if (!isActive) return;
-    onRefreshStatuses();
     pairingsPoll.refresh();
     if (shouldPollDevices) {
       devicePoll.refresh();

package/lib/public/js/components/google/use-gmail-watch.js

@@ -6,34 +6,38 @@ import {
   startGmailWatch,
   stopGmailWatch,
 } from "../../lib/api.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 
 export const useGmailWatch = ({ gatewayStatus, accounts = [] }) => {
-  const [loading, setLoading] = useState(true);
-  const [config, setConfig] = useState(null);
   const [busyByAccountId, setBusyByAccountId] = useState({});
   const [savingClient, setSavingClient] = useState(false);
+  const accountSignature = useMemo(
+    () =>
+      accounts
+        .map((entry) => String(entry?.id || "").trim())
+        .filter(Boolean)
+        .sort()
+        .join("|"),
+    [accounts],
+  );
+  const {
+    data: config,
+    loading,
+    refresh: refreshCachedConfig,
+  } = useCachedFetch("/api/gmail/config", fetchGmailConfig, {
+    enabled: gatewayStatus === "running",
+    maxAgeMs: 30000,
+  });
 
   const refresh = useCallback(async () => {
-    setLoading(true);
-    try {
-      const nextConfig = await fetchGmailConfig();
-      setConfig(nextConfig);
-      return nextConfig;
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (gatewayStatus !== "running") return;
-    refresh();
-  }, [gatewayStatus, refresh]);
+    return refreshCachedConfig({ force: true });
+  }, [refreshCachedConfig]);
 
   useEffect(() => {
     if (gatewayStatus !== "running") return;
     if (!accounts.length) return;
-    refresh();
-  }, [accounts, gatewayStatus, refresh]);
+    refresh().catch(() => {});
+  }, [accountSignature, accounts.length, gatewayStatus, refresh]);
 
   const watchByAccountId = useMemo(() => {
     const map = new Map();

package/lib/public/js/components/google/use-google-accounts.js

@@ -1,34 +1,34 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useMemo, useRef } from "https://esm.sh/preact/hooks";
 import { fetchGoogleAccounts } from "../../lib/api.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 
 export const useGoogleAccounts = ({ gatewayStatus }) => {
-  const [accounts, setAccounts] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [hasCompanyCredentials, setHasCompanyCredentials] = useState(false);
-  const [hasPersonalCredentials, setHasPersonalCredentials] = useState(false);
+  const hasRefreshedAfterGatewayRunningRef = useRef(false);
+  const { data, loading, refresh } = useCachedFetch(
+    "/api/google/accounts",
+    fetchGoogleAccounts,
+    { maxAgeMs: 30000 },
+  );
 
-  const refreshAccounts = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await fetchGoogleAccounts();
-      if (data.ok) {
-        setAccounts(Array.isArray(data.accounts) ? data.accounts : []);
-        setHasCompanyCredentials(Boolean(data.hasCompanyCredentials));
-        setHasPersonalCredentials(Boolean(data.hasPersonalCredentials));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const accounts = useMemo(
+    () => (Array.isArray(data?.accounts) ? data.accounts : []),
+    [data?.accounts],
+  );
+  const hasCompanyCredentials = Boolean(data?.hasCompanyCredentials);
+  const hasPersonalCredentials = Boolean(data?.hasPersonalCredentials);
 
-  useEffect(() => {
-    refreshAccounts();
-  }, [refreshAccounts]);
+  const refreshAccounts = useCallback(async () => {
+    return refresh({ force: true });
+  }, [refresh]);
 
   useEffect(() => {
-    if (gatewayStatus === "running") {
-      refreshAccounts();
+    if (gatewayStatus !== "running") {
+      hasRefreshedAfterGatewayRunningRef.current = false;
+      return;
     }
+    if (hasRefreshedAfterGatewayRunningRef.current) return;
+    hasRefreshedAfterGatewayRunningRef.current = true;
+    refreshAccounts().catch(() => {});
   }, [gatewayStatus, refreshAccounts]);
 
   return {

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

@@ -7,6 +7,7 @@ import {
   disconnectCodex,
 } from "../../lib/api.js";
 import { showToast } from "../toast.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 
 let kModelsTabCache = null;
 const getCredentialValue = (value) =>
@@ -14,6 +15,7 @@ const getCredentialValue = (value) =>
 
 export const useModels = (agentId) => {
   const isScoped = !!agentId;
+  const normalizedAgentId = String(agentId || "").trim();
   const useCache = !isScoped;
   const [catalog, setCatalog] = useState(() => (useCache && kModelsTabCache?.catalog) || []);
   const [primary, setPrimary] = useState(() => (useCache && kModelsTabCache?.primary) || "");
@@ -43,15 +45,29 @@ export const useModels = (agentId) => {
   const updateCache = useCallback((patch) => {
     if (!isScoped) kModelsTabCache = { ...(kModelsTabCache || {}), ...patch };
   }, [isScoped]);
+  const modelsConfigCacheKey = normalizedAgentId
+    ? `/api/models/config?agentId=${encodeURIComponent(normalizedAgentId)}`
+    : "/api/models/config";
+  const catalogFetchState = useCachedFetch("/api/models", fetchModels, {
+    maxAgeMs: 30000,
+  });
+  const configFetchState = useCachedFetch(
+    modelsConfigCacheKey,
+    () => fetchModelsConfig(isScoped ? { agentId } : undefined),
+    { maxAgeMs: 30000 },
+  );
+  const codexFetchState = useCachedFetch("/api/codex/status", fetchCodexStatus, {
+    maxAgeMs: 15000,
+  });
 
   const refresh = useCallback(async () => {
     if (!ready) setLoading(true);
     setError("");
     try {
       const [catalogResult, configResult, codex] = await Promise.all([
-        fetchModels(),
-        fetchModelsConfig(isScoped ? { agentId } : undefined),
-        fetchCodexStatus(),
+        catalogFetchState.refresh({ force: true }),
+        configFetchState.refresh({ force: true }),
+        codexFetchState.refresh({ force: true }),
       ]);
       const catalogModels = Array.isArray(catalogResult.models)
         ? catalogResult.models
@@ -86,7 +102,7 @@ export const useModels = (agentId) => {
       setReady(true);
       setLoading(false);
     }
-  }, [ready, updateCache, agentId, isScoped]);
+  }, [catalogFetchState, codexFetchState, configFetchState, ready, updateCache, agentId, isScoped]);
 
   useEffect(() => {
     refresh();