@chrysb/alphaclaw 0.4.6-beta.4 → 0.4.6-beta.6

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

package/lib/public/js/lib/browse-route.js

@@ -0,0 +1,57 @@
+export const normalizeBrowsePath = (value) => String(value || "").replace(/^\/+|\/+$/g, "");
+
+export const buildBrowseRoute = (relativePath, options = {}) => {
+  const view = String(options?.view || "edit");
+  const encodedPath = String(relativePath || "")
+    .split("/")
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
+  const baseRoute = encodedPath ? `/browse/${encodedPath}` : "/browse";
+  const params = new URLSearchParams();
+  if (view === "diff" && encodedPath) params.set("view", "diff");
+  if (options.line) params.set("line", String(options.line));
+  if (options.lineEnd) params.set("lineEnd", String(options.lineEnd));
+  const query = params.toString();
+  return query ? `${baseRoute}?${query}` : baseRoute;
+};
+
+export const parseBrowseRoute = ({ location = "", browsePreviewPath = "" } = {}) => {
+  const isBrowseRoute = location.startsWith("/browse");
+  const browseRoutePath = isBrowseRoute ? String(location || "").split("?")[0] : "";
+  const browseRouteQuery =
+    isBrowseRoute && String(location || "").includes("?")
+      ? String(location || "").split("?").slice(1).join("?")
+      : "";
+  const selectedBrowsePath = isBrowseRoute
+    ? browseRoutePath
+        .replace(/^\/browse\/?/, "")
+        .split("/")
+        .filter(Boolean)
+        .map((segment) => {
+          try {
+            return decodeURIComponent(segment);
+          } catch {
+            return segment;
+          }
+        })
+        .join("/")
+    : "";
+  const activeBrowsePath = browsePreviewPath || selectedBrowsePath;
+  const browseQueryParams = isBrowseRoute ? new URLSearchParams(browseRouteQuery) : null;
+  const browseViewerMode =
+    !browsePreviewPath && browseQueryParams?.get("view") === "diff"
+      ? "diff"
+      : "edit";
+  const browseLineTarget = Number.parseInt(browseQueryParams?.get("line") || "", 10) || 0;
+  const browseLineEndTarget = Number.parseInt(browseQueryParams?.get("lineEnd") || "", 10) || 0;
+
+  return {
+    activeBrowsePath,
+    browseLineEndTarget,
+    browseLineTarget,
+    browseViewerMode,
+    isBrowseRoute,
+    selectedBrowsePath,
+  };
+};

package/lib/public/js/lib/format.js

@@ -1,4 +1,9 @@
 const kIntegerFormatter = new Intl.NumberFormat("en-US");
+const kCompactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
 const kUsdFormatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -25,6 +30,13 @@ const isSameDay = (left, right) =>
 export const formatInteger = (value) =>
   kIntegerFormatter.format(Number(value || 0));
 
+export const formatCompactNumber = (value) => {
+  const numberValue = Number(value || 0);
+  if (!Number.isFinite(numberValue)) return "0";
+  if (Math.abs(numberValue) < 1000) return formatInteger(numberValue);
+  return kCompactNumberFormatter.format(numberValue);
+};
+
 export const formatUsd = (value) => kUsdFormatter.format(Number(value || 0));
 
 export const formatLocaleDateTime = (

package/lib/public/js/lib/model-config.js

@@ -158,6 +158,7 @@ export const kFeatureDefs = [
 ];
 
 export const getVisibleAiFieldKeys = (provider) => {
+  if (provider === "openai-codex") return new Set();
   const authProvider = getAuthProviderFromModelProvider(provider);
   const fields = kProviderAuthFields[authProvider] || [];
   return new Set(fields.map((field) => field.key));