@chrysb/alphaclaw 0.4.6-beta.3 → 0.4.6-beta.5

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

@@ -0,0 +1,230 @@
+import { useState, useEffect, useCallback } from "https://esm.sh/preact/hooks";
+import {
+  fetchStatus,
+  fetchOnboardStatus,
+  fetchAuthStatus,
+  fetchAlphaclawVersion,
+  updateAlphaclaw,
+  fetchRestartStatus,
+  restartGateway,
+  fetchWatchdogStatus,
+  fetchDoctorStatus,
+  updateOpenclaw,
+} from "../lib/api.js";
+import { shouldRequireRestartForBrowsePath } from "../lib/browse-restart-policy.js";
+import { usePolling } from "./usePolling.js";
+import { showToast } from "../components/toast.js";
+
+export const useAppShellController = ({ location = "" } = {}) => {
+  const [onboarded, setOnboarded] = useState(null);
+  const [authEnabled, setAuthEnabled] = useState(false);
+  const [acVersion, setAcVersion] = useState(null);
+  const [acLatest, setAcLatest] = useState(null);
+  const [acHasUpdate, setAcHasUpdate] = useState(false);
+  const [acUpdating, setAcUpdating] = useState(false);
+  const [restartRequired, setRestartRequired] = useState(false);
+  const [browseRestartRequired, setBrowseRestartRequired] = useState(false);
+  const [restartingGateway, setRestartingGateway] = useState(false);
+  const [gatewayRestartSignal, setGatewayRestartSignal] = useState(0);
+  const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
+  const [openclawUpdateInProgress, setOpenclawUpdateInProgress] = useState(false);
+
+  const sharedStatusPoll = usePolling(fetchStatus, statusPollCadenceMs, {
+    enabled: onboarded === true,
+  });
+  const sharedWatchdogPoll = usePolling(fetchWatchdogStatus, statusPollCadenceMs, {
+    enabled: onboarded === true,
+  });
+  const sharedDoctorPoll = usePolling(fetchDoctorStatus, statusPollCadenceMs, {
+    enabled: onboarded === true,
+  });
+  const sharedStatus = sharedStatusPoll.data || null;
+  const sharedWatchdogStatus = sharedWatchdogPoll.data?.status || null;
+  const sharedDoctorStatus = sharedDoctorPoll.data?.status || null;
+  const isAnyRestartRequired = restartRequired || browseRestartRequired;
+
+  const refreshSharedStatuses = useCallback(() => {
+    sharedStatusPoll.refresh();
+    sharedWatchdogPoll.refresh();
+    sharedDoctorPoll.refresh();
+  }, [sharedDoctorPoll.refresh, sharedStatusPoll.refresh, sharedWatchdogPoll.refresh]);
+
+  useEffect(() => {
+    fetchOnboardStatus()
+      .then((data) => setOnboarded(data.onboarded))
+      .catch(() => setOnboarded(false));
+    fetchAuthStatus()
+      .then((data) => setAuthEnabled(!!data.authEnabled))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!onboarded) return;
+    let active = true;
+    const check = async (refresh = false) => {
+      try {
+        const data = await fetchAlphaclawVersion(refresh);
+        if (!active) return;
+        setAcVersion(data.currentVersion || null);
+        setAcLatest(data.latestVersion || null);
+        setAcHasUpdate(!!data.hasUpdate);
+      } catch {}
+    };
+    check(true);
+    const id = setInterval(() => check(false), 5 * 60 * 1000);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [onboarded]);
+
+  const refreshRestartStatus = useCallback(async () => {
+    if (!onboarded) return;
+    try {
+      const data = await fetchRestartStatus();
+      setRestartRequired(!!data.restartRequired);
+      setRestartingGateway(!!data.restartInProgress);
+    } catch {}
+  }, [onboarded]);
+
+  useEffect(() => {
+    if (!onboarded) return;
+    refreshRestartStatus();
+  }, [onboarded, refreshRestartStatus]);
+
+  useEffect(() => {
+    if (onboarded !== true) return;
+    const inStatusView =
+      location.startsWith("/general") || location.startsWith("/watchdog");
+    const gatewayStatus = sharedStatus?.gateway ?? null;
+    const watchdogHealth = String(sharedWatchdogStatus?.health || "").toLowerCase();
+    const watchdogLifecycle = String(sharedWatchdogStatus?.lifecycle || "").toLowerCase();
+    const shouldFastPollWatchdog =
+      watchdogHealth === "unknown" ||
+      watchdogLifecycle === "restarting" ||
+      watchdogLifecycle === "stopped" ||
+      !!sharedWatchdogStatus?.operationInProgress;
+    const shouldFastPollGateway = !gatewayStatus || gatewayStatus !== "running";
+    const nextCadenceMs =
+      inStatusView && (shouldFastPollWatchdog || shouldFastPollGateway) ? 2000 : 15000;
+    setStatusPollCadenceMs((currentCadenceMs) =>
+      currentCadenceMs === nextCadenceMs ? currentCadenceMs : nextCadenceMs,
+    );
+  }, [
+    location,
+    onboarded,
+    sharedStatus?.gateway,
+    sharedWatchdogStatus?.health,
+    sharedWatchdogStatus?.lifecycle,
+    sharedWatchdogStatus?.operationInProgress,
+  ]);
+
+  useEffect(() => {
+    if (!onboarded || (!restartRequired && !restartingGateway)) return;
+    const id = setInterval(refreshRestartStatus, 2000);
+    return () => clearInterval(id);
+  }, [onboarded, restartRequired, restartingGateway, refreshRestartStatus]);
+
+  useEffect(() => {
+    const handleBrowseFileSaved = (event) => {
+      const savedPath = String(event?.detail?.path || "");
+      if (!shouldRequireRestartForBrowsePath(savedPath)) return;
+      setBrowseRestartRequired(true);
+    };
+    window.addEventListener("alphaclaw:browse-file-saved", handleBrowseFileSaved);
+    return () => {
+      window.removeEventListener("alphaclaw:browse-file-saved", handleBrowseFileSaved);
+    };
+  }, []);
+
+  const handleGatewayRestart = useCallback(async () => {
+    if (restartingGateway) return;
+    setRestartingGateway(true);
+    try {
+      const data = await restartGateway();
+      if (!data?.ok) throw new Error(data?.error || "Gateway restart failed");
+      setRestartRequired(!!data.restartRequired);
+      setBrowseRestartRequired(false);
+      setGatewayRestartSignal(Date.now());
+      refreshSharedStatuses();
+      showToast("Gateway restarted", "success");
+      setTimeout(refreshRestartStatus, 800);
+    } catch (err) {
+      showToast(err.message || "Restart failed", "error");
+      setTimeout(refreshRestartStatus, 800);
+    } finally {
+      setRestartingGateway(false);
+    }
+  }, [refreshRestartStatus, refreshSharedStatuses, restartingGateway]);
+
+  const handleOpenclawUpdate = useCallback(async () => {
+    if (openclawUpdateInProgress) {
+      return { ok: false, error: "OpenClaw update already in progress" };
+    }
+    setOpenclawUpdateInProgress(true);
+    try {
+      const data = await updateOpenclaw();
+      return data;
+    } finally {
+      setOpenclawUpdateInProgress(false);
+      refreshSharedStatuses();
+      setTimeout(refreshSharedStatuses, 1200);
+      setTimeout(refreshSharedStatuses, 3500);
+      setTimeout(refreshRestartStatus, 1200);
+    }
+  }, [openclawUpdateInProgress, refreshRestartStatus, refreshSharedStatuses]);
+
+  const handleOpenclawVersionActionComplete = useCallback(
+    ({ type }) => {
+      if (type !== "update") return;
+      refreshSharedStatuses();
+      setTimeout(refreshSharedStatuses, 1200);
+    },
+    [refreshSharedStatuses],
+  );
+
+  const handleAcUpdate = useCallback(async () => {
+    if (acUpdating) return;
+    setAcUpdating(true);
+    try {
+      const data = await updateAlphaclaw();
+      if (data.ok) {
+        showToast("AlphaClaw updated — restarting...", "success");
+        setTimeout(() => window.location.reload(), 5000);
+      } else {
+        showToast(data.error || "AlphaClaw update failed", "error");
+        setAcUpdating(false);
+      }
+    } catch (err) {
+      showToast(err.message || "Could not update AlphaClaw", "error");
+      setAcUpdating(false);
+    }
+  }, [acUpdating]);
+
+  return {
+    state: {
+      acHasUpdate,
+      acLatest,
+      acUpdating,
+      acVersion,
+      authEnabled,
+      gatewayRestartSignal,
+      isAnyRestartRequired,
+      onboarded,
+      openclawUpdateInProgress,
+      restartingGateway,
+      sharedDoctorStatus,
+      sharedStatus,
+      sharedWatchdogStatus,
+    },
+    actions: {
+      handleAcUpdate,
+      handleGatewayRestart,
+      handleOnboardingComplete: () => setOnboarded(true),
+      handleOpenclawUpdate,
+      handleOpenclawVersionActionComplete,
+      refreshSharedStatuses,
+      setRestartRequired,
+    },
+  };
+};

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

@@ -0,0 +1,112 @@
+import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
+import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
+
+const kDefaultSidebarWidthPx = 220;
+const kSidebarMinWidthPx = 180;
+const kSidebarMaxWidthPx = 460;
+
+const clampSidebarWidth = (value) =>
+  Math.max(kSidebarMinWidthPx, Math.min(kSidebarMaxWidthPx, value));
+
+export const useAppShellUi = () => {
+  const appShellRef = useRef(null);
+  const menuRef = useRef(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [sidebarWidthPx, setSidebarWidthPx] = useState(() => {
+    const settings = readUiSettings();
+    if (!Number.isFinite(settings.sidebarWidthPx)) return kDefaultSidebarWidthPx;
+    return clampSidebarWidth(settings.sidebarWidthPx);
+  });
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
+
+  const closeMenu = useCallback((event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setMenuOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (menuOpen) {
+      document.addEventListener("click", closeMenu, true);
+      return () => document.removeEventListener("click", closeMenu, true);
+    }
+  }, [closeMenu, menuOpen]);
+
+  useEffect(() => {
+    if (!mobileSidebarOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [mobileSidebarOpen]);
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings.sidebarWidthPx = sidebarWidthPx;
+    writeUiSettings(settings);
+  }, [sidebarWidthPx]);
+
+  const resizeSidebarWithClientX = useCallback((clientX) => {
+    const shellElement = appShellRef.current;
+    if (!shellElement) return;
+    const shellBounds = shellElement.getBoundingClientRect();
+    const nextWidth = clampSidebarWidth(Math.round(clientX - shellBounds.left));
+    setSidebarWidthPx(nextWidth);
+  }, []);
+
+  const onSidebarResizerPointerDown = useCallback((event) => {
+    event.preventDefault();
+    setIsResizingSidebar(true);
+    resizeSidebarWithClientX(event.clientX);
+  }, [resizeSidebarWithClientX]);
+
+  useEffect(() => {
+    if (!isResizingSidebar) return () => {};
+    const onPointerMove = (event) => resizeSidebarWithClientX(event.clientX);
+    const onPointerUp = () => setIsResizingSidebar(false);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    const previousUserSelect = document.body.style.userSelect;
+    const previousCursor = document.body.style.cursor;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      document.body.style.userSelect = previousUserSelect;
+      document.body.style.cursor = previousCursor;
+    };
+  }, [isResizingSidebar, resizeSidebarWithClientX]);
+
+  const handlePaneScroll = useCallback((event) => {
+    const nextScrolled = event.currentTarget.scrollTop > 0;
+    setMobileTopbarScrolled((currentScrolled) =>
+      currentScrolled === nextScrolled ? currentScrolled : nextScrolled,
+    );
+  }, []);
+
+  return {
+    refs: {
+      appShellRef,
+      menuRef,
+    },
+    state: {
+      isResizingSidebar,
+      menuOpen,
+      mobileSidebarOpen,
+      mobileTopbarScrolled,
+      sidebarWidthPx,
+    },
+    actions: {
+      closeMobileSidebar: () => setMobileSidebarOpen(false),
+      handlePaneScroll,
+      onSidebarResizerPointerDown,
+      onToggleMenu: () => setMenuOpen((open) => !open),
+      setMenuOpen,
+      setMobileSidebarOpen,
+    },
+  };
+};

package/lib/public/js/hooks/use-browse-navigation.js

@@ -0,0 +1,193 @@
+import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
+import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
+import { kDefaultUiTab, getSelectedNavId, kNavSections } from "../lib/app-navigation.js";
+import { buildBrowseRoute, normalizeBrowsePath, parseBrowseRoute } from "../lib/browse-route.js";
+
+const kBrowseLastPathUiSettingKey = "browseLastPath";
+const kLastMenuRouteUiSettingKey = "lastMenuRoute";
+
+export const useBrowseNavigation = ({
+  location = "",
+  setLocation = () => {},
+  onCloseMobileSidebar = () => {},
+} = {}) => {
+  const [sidebarTab, setSidebarTab] = useState(() =>
+    location.startsWith("/browse") ? "browse" : "menu",
+  );
+  const [lastBrowsePath, setLastBrowsePath] = useState(() => {
+    const settings = readUiSettings();
+    return typeof settings[kBrowseLastPathUiSettingKey] === "string"
+      ? settings[kBrowseLastPathUiSettingKey]
+      : "";
+  });
+  const [lastMenuRoute, setLastMenuRoute] = useState(() => {
+    const settings = readUiSettings();
+    const storedRoute = settings[kLastMenuRouteUiSettingKey];
+    if (
+      typeof storedRoute === "string" &&
+      storedRoute.startsWith("/") &&
+      !storedRoute.startsWith("/browse")
+    ) {
+      return storedRoute;
+    }
+    return `/${kDefaultUiTab}`;
+  });
+  const [browsePreviewPath, setBrowsePreviewPath] = useState("");
+  const routeHistoryRef = useRef([]);
+
+  const {
+    activeBrowsePath,
+    browseLineEndTarget,
+    browseLineTarget,
+    browseViewerMode,
+    isBrowseRoute,
+    selectedBrowsePath,
+  } = parseBrowseRoute({
+    location,
+    browsePreviewPath,
+  });
+
+  const selectedNavId = getSelectedNavId({
+    isBrowseRoute,
+    location,
+  });
+
+  useEffect(() => {
+    setSidebarTab((currentTab) => {
+      if (location.startsWith("/browse")) return "browse";
+      if (currentTab === "browse") return "menu";
+      return currentTab;
+    });
+  }, [location]);
+
+  useEffect(() => {
+    if (location.startsWith("/browse")) return;
+    setBrowsePreviewPath("");
+  }, [location]);
+
+  useEffect(() => {
+    const historyStack = routeHistoryRef.current;
+    const lastEntry = historyStack[historyStack.length - 1];
+    if (lastEntry === location) return;
+    historyStack.push(location);
+    if (historyStack.length > 100) {
+      historyStack.shift();
+    }
+  }, [location]);
+
+  useEffect(() => {
+    if (location.startsWith("/browse")) return;
+    if (location === "/telegram") return;
+    setLastMenuRoute((currentRoute) =>
+      currentRoute === location ? currentRoute : location,
+    );
+  }, [location]);
+
+  useEffect(() => {
+    if (!isBrowseRoute) return;
+    if (!selectedBrowsePath) return;
+    setLastBrowsePath((currentPath) =>
+      currentPath === selectedBrowsePath ? currentPath : selectedBrowsePath,
+    );
+  }, [isBrowseRoute, selectedBrowsePath]);
+
+  useEffect(() => {
+    const handleBrowseGitSynced = () => {
+      if (!isBrowseRoute || browseViewerMode !== "diff") return;
+      const activePath = String(selectedBrowsePath || "").trim();
+      if (!activePath) return;
+      setLocation(buildBrowseRoute(activePath, { view: "edit" }));
+    };
+    window.addEventListener("alphaclaw:browse-git-synced", handleBrowseGitSynced);
+    return () => {
+      window.removeEventListener("alphaclaw:browse-git-synced", handleBrowseGitSynced);
+    };
+  }, [browseViewerMode, isBrowseRoute, selectedBrowsePath, setLocation]);
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings[kBrowseLastPathUiSettingKey] = lastBrowsePath;
+    settings[kLastMenuRouteUiSettingKey] = lastMenuRoute;
+    writeUiSettings(settings);
+  }, [lastBrowsePath, lastMenuRoute]);
+
+  const navigateToSubScreen = useCallback((screen) => {
+    setLocation(`/${screen}`);
+    onCloseMobileSidebar();
+  }, [onCloseMobileSidebar, setLocation]);
+
+  const handleBrowsePreviewFile = useCallback((nextPreviewPath) => {
+    const normalizedPreviewPath = normalizeBrowsePath(nextPreviewPath);
+    setBrowsePreviewPath(normalizedPreviewPath);
+  }, []);
+
+  const navigateToBrowseFile = useCallback((relativePath, options = {}) => {
+    const normalizedTargetPath = normalizeBrowsePath(relativePath);
+    const selectingDirectory =
+      !!options.directory || String(relativePath || "").trim().endsWith("/");
+    const shouldPreservePreview = selectingDirectory && !!options.preservePreview;
+    const activePath = normalizeBrowsePath(
+      browsePreviewPath || selectedBrowsePath || "",
+    );
+    const nextPreviewPath =
+      shouldPreservePreview && activePath && activePath !== normalizedTargetPath
+        ? activePath
+        : "";
+    setBrowsePreviewPath(nextPreviewPath);
+    const routeOptions = selectingDirectory
+      ? { ...options, view: "edit" }
+      : options;
+    setLocation(buildBrowseRoute(normalizedTargetPath, routeOptions));
+    onCloseMobileSidebar();
+  }, [browsePreviewPath, onCloseMobileSidebar, selectedBrowsePath, setLocation]);
+
+  const handleSelectSidebarTab = useCallback((nextTab) => {
+    setSidebarTab(nextTab);
+    if (nextTab === "menu" && location.startsWith("/browse")) {
+      setBrowsePreviewPath("");
+      setLocation(lastMenuRoute || `/${kDefaultUiTab}`);
+      return;
+    }
+    if (nextTab === "browse" && !location.startsWith("/browse")) {
+      setLocation(buildBrowseRoute(lastBrowsePath));
+    }
+  }, [lastBrowsePath, lastMenuRoute, location, setLocation]);
+
+  const handleSelectNavItem = useCallback((itemId) => {
+    setLocation(`/${itemId}`);
+    onCloseMobileSidebar();
+  }, [onCloseMobileSidebar, setLocation]);
+
+  const exitSubScreen = useCallback(() => {
+    setLocation(`/${kDefaultUiTab}`);
+    onCloseMobileSidebar();
+  }, [onCloseMobileSidebar, setLocation]);
+
+  return {
+    state: {
+      activeBrowsePath,
+      browseLineEndTarget,
+      browseLineTarget,
+      browsePreviewPath,
+      browseViewerMode,
+      isBrowseRoute,
+      routeHistoryRef,
+      selectedBrowsePath,
+      selectedNavId,
+      sidebarTab,
+    },
+    actions: {
+      buildBrowseRoute,
+      clearBrowsePreview: () => setBrowsePreviewPath(""),
+      exitSubScreen,
+      handleBrowsePreviewFile,
+      handleSelectNavItem,
+      handleSelectSidebarTab,
+      navigateToBrowseFile,
+      navigateToSubScreen,
+    },
+    constants: {
+      kNavSections,
+    },
+  };
+};

package/lib/public/js/hooks/use-hash-location.js

@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from "https://esm.sh/preact/hooks";
+import { kDefaultUiTab } from "../lib/app-navigation.js";
+
+const getHashPath = () => {
+  const hash = window.location.hash.replace(/^#/, "");
+  if (!hash) return `/${kDefaultUiTab}`;
+  return hash.startsWith("/") ? hash : `/${hash}`;
+};
+
+export const useHashLocation = () => {
+  const [location, setLocationState] = useState(getHashPath);
+
+  useEffect(() => {
+    const onHashChange = () => setLocationState(getHashPath());
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  const setLocation = useCallback((to) => {
+    const normalized = to.startsWith("/") ? to : `/${to}`;
+    const nextHash = `#${normalized}`;
+    if (window.location.hash !== nextHash) {
+      window.location.hash = normalized;
+      return;
+    }
+    setLocationState(normalized);
+  }, []);
+
+  return [location, setLocation];
+};
+
+export const getHashRouterPath = getHashPath;

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

@@ -496,6 +496,41 @@ export const setPrimaryModel = async (modelKey) => {
   return res.json();
 };
 
+export const fetchModelsConfig = async () => {
+  const res = await authFetch('/api/models/config');
+  return res.json();
+};
+
+export const saveModelsConfig = async ({ primary, configuredModels, profiles, authOrder }) => {
+  const res = await authFetch('/api/models/config', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ primary, configuredModels, profiles, authOrder }),
+  });
+  return res.json();
+};
+
+export const fetchAuthProfiles = async () => {
+  const res = await authFetch('/api/models/auth');
+  return res.json();
+};
+
+export const upsertAuthProfile = async (profileId, credential) => {
+  const res = await authFetch(`/api/models/auth/${encodeURIComponent(profileId)}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(credential),
+  });
+  return res.json();
+};
+
+export const deleteAuthProfile = async (profileId) => {
+  const res = await authFetch(`/api/models/auth/${encodeURIComponent(profileId)}`, {
+    method: 'DELETE',
+  });
+  return res.json();
+};
+
 export const fetchCodexStatus = async () => {
   const res = await authFetch('/api/codex/status');
   return res.json();

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

@@ -0,0 +1,39 @@
+export const kDefaultUiTab = "general";
+
+export const kNavSections = [
+  {
+    label: "Setup",
+    items: [
+      { id: "general", label: "General" },
+    ],
+  },
+  {
+    label: "Monitoring",
+    items: [
+      { id: "watchdog", label: "Watchdog" },
+      { id: "usage", label: "Usage" },
+      { id: "doctor", label: "Doctor" },
+    ],
+  },
+  {
+    label: "Config",
+    items: [
+      { id: "models", label: "Models" },
+      { id: "envars", label: "Envars" },
+      { id: "webhooks", label: "Webhooks" },
+    ],
+  },
+];
+
+export const getSelectedNavId = ({ isBrowseRoute = false, location = "" } = {}) => {
+  if (isBrowseRoute) return "browse";
+  if (location === "/telegram") return "";
+  if (location.startsWith("/models")) return "models";
+  if (location.startsWith("/providers")) return "models";
+  if (location.startsWith("/watchdog")) return "watchdog";
+  if (location.startsWith("/usage")) return "usage";
+  if (location.startsWith("/doctor")) return "doctor";
+  if (location.startsWith("/envars")) return "envars";
+  if (location.startsWith("/webhooks")) return "webhooks";
+  return kDefaultUiTab;
+};

package/lib/public/js/lib/browse-restart-policy.js

@@ -0,0 +1,28 @@
+const kBrowseRestartRequiredRules = [
+  { type: "file", path: "openclaw.json" },
+  { type: "directory", path: "hooks/transforms" },
+];
+
+const normalizeRestartRulePath = (value) =>
+  String(value || "")
+    .trim()
+    .replace(/^\/+|\/+$/g, "");
+
+const matchesBrowseRestartRequiredRule = (path, rule) => {
+  const normalizedPath = normalizeRestartRulePath(path);
+  if (!normalizedPath) return false;
+  if (!rule || typeof rule !== "object") return false;
+  const type = String(rule.type || "").toLowerCase();
+  const targetPath = normalizeRestartRulePath(rule.path);
+  if (!targetPath) return false;
+  if (type === "directory") {
+    return normalizedPath === targetPath || normalizedPath.startsWith(`${targetPath}/`);
+  }
+  if (type === "file") {
+    return normalizedPath === targetPath;
+  }
+  return false;
+};
+
+export const shouldRequireRestartForBrowsePath = (path) =>
+  kBrowseRestartRequiredRules.some((rule) => matchesBrowseRestartRequiredRule(path, rule));