@chrysb/alphaclaw 0.8.0 → 0.8.1-beta.0

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();

package/lib/public/js/components/nodes-tab/connected-nodes/user-connected-nodes.js

@@ -1,7 +1,7 @@
 import { usePolling } from "../../../hooks/usePolling.js";
 import { fetchNodesStatus } from "../../../lib/api.js";
 
-const kNodesPollIntervalMs = 3000;
+const kNodesPollIntervalMs = 10000;
 
 export const useConnectedNodes = ({ enabled = true } = {}) => {
   const poll = usePolling(
@@ -12,7 +12,7 @@ export const useConnectedNodes = ({ enabled = true } = {}) => {
       return { nodes, pending };
     },
     kNodesPollIntervalMs,
-    { enabled },
+    { enabled, cacheKey: "/api/nodes" },
   );
 
   return {

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

@@ -1,26 +1,30 @@
 import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
 import { fetchNodeConnectInfo } from "../../lib/api.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 import { showToast } from "../toast.js";
 import { useConnectedNodes } from "./connected-nodes/user-connected-nodes.js";
 
 export const useNodesTab = () => {
   const connectedNodesState = useConnectedNodes({ enabled: true });
   const [wizardVisible, setWizardVisible] = useState(false);
-  const [connectInfo, setConnectInfo] = useState(null);
   const [refreshingNodes, setRefreshingNodes] = useState(false);
+  const {
+    data: connectInfo,
+    error: connectInfoError,
+  } = useCachedFetch("/api/nodes/connect-info", fetchNodeConnectInfo, {
+    maxAgeMs: 60000,
+  });
   const pairedNodes = Array.isArray(connectedNodesState.nodes)
     ? connectedNodesState.nodes.filter((entry) => entry?.paired !== false)
     : [];
 
   useEffect(() => {
-    fetchNodeConnectInfo()
-      .then((result) => {
-        setConnectInfo(result || null);
-      })
-      .catch((error) => {
-        showToast(error.message || "Could not load node connect command", "error");
-      });
-  }, []);
+    if (!connectInfoError) return;
+    showToast(
+      connectInfoError.message || "Could not load node connect command",
+      "error",
+    );
+  }, [connectInfoError]);
 
   const refreshNodes = useCallback(async () => {
     if (refreshingNodes) return;

package/lib/public/js/hooks/use-app-shell-controller.js

@@ -10,6 +10,7 @@ import {
   fetchWatchdogStatus,
   fetchDoctorStatus,
   updateOpenclaw,
+  subscribeStatusEvents,
 } from "../lib/api.js";
 import { shouldRequireRestartForBrowsePath } from "../lib/browse-restart-policy.js";
 import { usePolling } from "./usePolling.js";
@@ -28,19 +29,28 @@ export const useAppShellController = ({ location = "" } = {}) => {
   const [gatewayRestartSignal, setGatewayRestartSignal] = useState(0);
   const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
   const [openclawUpdateInProgress, setOpenclawUpdateInProgress] = useState(false);
+  const [statusStreamConnected, setStatusStreamConnected] = useState(false);
+  const [statusStreamStatus, setStatusStreamStatus] = useState(null);
+  const [statusStreamWatchdog, setStatusStreamWatchdog] = useState(null);
+  const [statusStreamDoctor, setStatusStreamDoctor] = useState(null);
 
   const sharedStatusPoll = usePolling(fetchStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/status",
   });
   const sharedWatchdogPoll = usePolling(fetchWatchdogStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/watchdog/status",
   });
   const sharedDoctorPoll = usePolling(fetchDoctorStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/doctor/status",
   });
-  const sharedStatus = sharedStatusPoll.data || null;
-  const sharedWatchdogStatus = sharedWatchdogPoll.data?.status || null;
-  const sharedDoctorStatus = sharedDoctorPoll.data?.status || null;
+  const sharedStatus = statusStreamStatus || sharedStatusPoll.data || null;
+  const sharedWatchdogStatus =
+    statusStreamWatchdog || sharedWatchdogPoll.data?.status || null;
+  const sharedDoctorStatus =
+    statusStreamDoctor || sharedDoctorPoll.data?.status || null;
   const isAnyRestartRequired = restartRequired || browseRestartRequired;
 
   const refreshSharedStatuses = useCallback(() => {
@@ -58,6 +68,49 @@ export const useAppShellController = ({ location = "" } = {}) => {
       .catch(() => {});
   }, []);
 
+  useEffect(() => {
+    if (onboarded !== true) return;
+    let disposed = false;
+    const startStream = () => {
+      if (disposed) return;
+      try {
+        return subscribeStatusEvents({
+          onOpen: () => {
+            if (disposed) return;
+            setStatusStreamConnected(true);
+          },
+          onMessage: (payload = {}) => {
+            if (disposed) return;
+            if (payload.status && typeof payload.status === "object") {
+              setStatusStreamStatus(payload.status);
+            }
+            if (payload.watchdogStatus && typeof payload.watchdogStatus === "object") {
+              setStatusStreamWatchdog(payload.watchdogStatus);
+            }
+            if (payload.doctorStatus && typeof payload.doctorStatus === "object") {
+              setStatusStreamDoctor(payload.doctorStatus);
+            }
+          },
+          onError: () => {
+            if (disposed) return;
+            setStatusStreamConnected(false);
+          },
+        });
+      } catch {
+        setStatusStreamConnected(false);
+        return null;
+      }
+    };
+    let cleanup = startStream();
+    return () => {
+      disposed = true;
+      setStatusStreamConnected(false);
+      if (typeof cleanup === "function") {
+        cleanup();
+      }
+    };
+  }, [onboarded]);
+
   useEffect(() => {
     if (!onboarded) return;
     let active = true;

package/lib/public/js/hooks/use-cached-fetch.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { cachedFetch, getCached } from "../lib/api-cache.js";
+
+export const useCachedFetch = (
+  key,
+  fetcher,
+  {
+    enabled = true,
+    maxAgeMs = 15000,
+    staleWhileRevalidate = true,
+  } = {},
+) => {
+  const normalizedKey = useMemo(() => String(key || ""), [key]);
+  const initialCachedData = useMemo(() => getCached(normalizedKey), [normalizedKey]);
+  const [data, setData] = useState(initialCachedData);
+  const [loading, setLoading] = useState(initialCachedData === null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setData(getCached(normalizedKey));
+  }, [normalizedKey]);
+
+  const refresh = useCallback(
+    async ({ force = false } = {}) => {
+      if (!enabled) return getCached(normalizedKey);
+      if (getCached(normalizedKey) === null) {
+        setLoading(true);
+      }
+      try {
+        const next = await cachedFetch(normalizedKey, fetcher, {
+          maxAgeMs,
+          force,
+          staleWhileRevalidate,
+          onRevalidate: (revalidatedData) => {
+            setData(revalidatedData);
+            setError(null);
+          },
+        });
+        setData(next);
+        setError(null);
+        return next;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [enabled, fetcher, maxAgeMs, normalizedKey, staleWhileRevalidate],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    refresh().catch(() => {});
+  }, [enabled, refresh]);
+
+  return {
+    data,
+    error,
+    loading,
+    refresh,
+  };
+};

package/lib/public/js/hooks/usePolling.js

@@ -1,7 +1,19 @@
-import { useState, useEffect, useCallback, useRef } from 'https://esm.sh/preact/hooks';
+import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
+import { getCached, setCached } from "../lib/api-cache.js";
 
-export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
-  const [data, setData] = useState(null);
+export const usePolling = (
+  fetcher,
+  interval,
+  {
+    enabled = true,
+    pauseWhenHidden = true,
+    cacheKey = "",
+  } = {},
+) => {
+  const normalizedCacheKey = String(cacheKey || "");
+  const [data, setData] = useState(() =>
+    normalizedCacheKey ? getCached(normalizedCacheKey) : null,
+  );
   const [error, setError] = useState(null);
   const fetcherRef = useRef(fetcher);
   fetcherRef.current = fetcher;
@@ -9,6 +21,9 @@ export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
   const refresh = useCallback(async () => {
     try {
       const result = await fetcherRef.current();
+      if (normalizedCacheKey) {
+        setCached(normalizedCacheKey, result);
+      }
       setData(result);
       setError(null);
       return result;
@@ -16,14 +31,37 @@ export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
       setError(err);
       return null;
     }
-  }, []);
+  }, [normalizedCacheKey]);
+
+  useEffect(() => {
+    if (!normalizedCacheKey) return;
+    const cached = getCached(normalizedCacheKey);
+    if (cached !== null) {
+      setData(cached);
+    }
+  }, [normalizedCacheKey]);
 
   useEffect(() => {
     if (!enabled) return;
+    if (pauseWhenHidden && typeof document !== "undefined" && document.hidden) {
+      return undefined;
+    }
     refresh();
-    const id = setInterval(refresh, interval);
-    return () => clearInterval(id);
-  }, [enabled, interval, refresh]);
+    const intervalId = setInterval(refresh, interval);
+    return () => clearInterval(intervalId);
+  }, [enabled, interval, pauseWhenHidden, refresh]);
+
+  useEffect(() => {
+    if (!enabled || !pauseWhenHidden || typeof document === "undefined") return;
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refresh();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [enabled, pauseWhenHidden, refresh]);
 
   return { data, error, refresh };
 };

package/lib/public/js/lib/api-cache.js

@@ -0,0 +1,88 @@
+const kApiCache = new Map();
+const kInFlightByKey = new Map();
+
+const nowMs = () => Date.now();
+
+const isFresh = (entry, maxAgeMs) => {
+  if (!entry) return false;
+  return nowMs() - Number(entry.fetchedAt || 0) < Number(maxAgeMs || 0);
+};
+
+export const getCached = (key = "") => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return null;
+  return kApiCache.get(normalizedKey)?.data ?? null;
+};
+
+export const setCached = (key = "", data = null) => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return data;
+  kApiCache.set(normalizedKey, {
+    data,
+    fetchedAt: nowMs(),
+  });
+  return data;
+};
+
+export const invalidateCache = (key = "") => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return;
+  kApiCache.delete(normalizedKey);
+  kInFlightByKey.delete(normalizedKey);
+};
+
+export const cachedFetch = async (
+  key,
+  fetcher,
+  {
+    maxAgeMs = 15000,
+    force = false,
+    staleWhileRevalidate = true,
+    onRevalidate = null,
+  } = {},
+) => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey || typeof fetcher !== "function") {
+    return fetcher();
+  }
+
+  const entry = kApiCache.get(normalizedKey);
+  if (!force && isFresh(entry, maxAgeMs)) {
+    return entry.data;
+  }
+
+  if (!force && staleWhileRevalidate && entry) {
+    if (!kInFlightByKey.has(normalizedKey)) {
+      const backgroundPromise = Promise.resolve()
+        .then(() => fetcher())
+        .then((result) => {
+          setCached(normalizedKey, result);
+          if (typeof onRevalidate === "function") {
+            onRevalidate(result);
+          }
+          return result;
+        })
+        .finally(() => {
+          kInFlightByKey.delete(normalizedKey);
+        });
+      kInFlightByKey.set(normalizedKey, backgroundPromise);
+    }
+    return entry.data;
+  }
+
+  if (kInFlightByKey.has(normalizedKey)) {
+    return kInFlightByKey.get(normalizedKey);
+  }
+
+  const requestPromise = Promise.resolve()
+    .then(() => fetcher())
+    .then((result) => {
+      setCached(normalizedKey, result);
+      return result;
+    })
+    .finally(() => {
+      kInFlightByKey.delete(normalizedKey);
+    });
+  kInFlightByKey.set(normalizedKey, requestPromise);
+  return requestPromise;
+};

package/lib/public/js/lib/api.js

@@ -31,6 +31,35 @@ export const authFetch = async (url, opts = {}) => {
   return res;
 };
 
+export const subscribeStatusEvents = ({
+  onMessage = () => {},
+  onOpen = () => {},
+  onError = () => {},
+} = {}) => {
+  if (typeof window?.EventSource !== "function") {
+    throw new Error("Server events are not supported in this browser");
+  }
+  const source = new window.EventSource("/api/events/status", {
+    withCredentials: true,
+  });
+  const handleStatus = (event) => {
+    let payload = {};
+    try {
+      payload = event?.data ? JSON.parse(event.data) : {};
+    } catch {}
+    onMessage(payload || {});
+  };
+  source.addEventListener("status", handleStatus);
+  source.onopen = () => onOpen();
+  source.onerror = (event) => onError(event);
+  return () => {
+    source.removeEventListener("status", handleStatus);
+    source.onopen = null;
+    source.onerror = null;
+    source.close();
+  };
+};
+
 export async function fetchStatus() {
   const res = await authFetch("/api/status");
   return res.json();

package/lib/server/init/register-server-routes.js

@@ -132,6 +132,8 @@ const registerServerRoutes = ({
     restartRequiredState,
     topicRegistry,
     authProfiles,
+    watchdog,
+    doctorService,
   });
   registerBrowseRoutes({
     app,

package/lib/server/routes/system.js

@@ -25,6 +25,8 @@ const registerSystemRoutes = ({
   restartRequiredState,
   topicRegistry,
   authProfiles,
+  watchdog,
+  doctorService,
 }) => {
   let envRestartPending = false;
   const kManagedChannelTokenPattern =
@@ -465,12 +467,12 @@ const registerSystemRoutes = ({
     res.json({ ok: true, changed, restartRequired });
   });
 
-  app.get("/api/status", async (req, res) => {
+  const buildStatusPayload = async () => {
     const configExists = fs.existsSync(`${OPENCLAW_DIR}/openclaw.json`);
     const running = await isGatewayRunning();
     const repo = process.env.GITHUB_WORKSPACE_REPO || "";
     const openclawVersion = openclawVersionService.readOpenclawVersion();
-    res.json({
+    return {
       gateway: running
         ? "running"
         : configExists
@@ -481,6 +483,52 @@ const registerSystemRoutes = ({
       repo,
       openclawVersion,
       syncCron: getSystemCronStatus(),
+    };
+  };
+
+  app.get("/api/status", async (req, res) => {
+    const payload = await buildStatusPayload();
+    res.json(payload);
+  });
+
+  app.get("/api/events/status", async (req, res) => {
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache, no-transform");
+    res.setHeader("Connection", "keep-alive");
+    res.setHeader("X-Accel-Buffering", "no");
+    res.flushHeaders?.();
+
+    const writeStatusEvent = async () => {
+      try {
+        const status = await buildStatusPayload();
+        const watchdogStatus =
+          typeof watchdog?.getStatus === "function" ? watchdog.getStatus() : null;
+        const doctorStatus =
+          typeof doctorService?.buildStatus === "function"
+            ? doctorService.buildStatus()
+            : null;
+        res.write("event: status\n");
+        res.write(
+          `data: ${JSON.stringify({
+            status,
+            watchdogStatus,
+            doctorStatus,
+            timestamp: new Date().toISOString(),
+          })}\n\n`,
+        );
+      } catch {}
+    };
+
+    await writeStatusEvent();
+    const statusIntervalId = setInterval(writeStatusEvent, 2000);
+    const keepAliveIntervalId = setInterval(() => {
+      res.write(": keepalive\n\n");
+    }, 15000);
+
+    req.on("close", () => {
+      clearInterval(statusIntervalId);
+      clearInterval(keepAliveIntervalId);
+      res.end();
     });
   });
 

package/package.json

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