@chrysb/alphaclaw 0.3.4-beta.0 → 0.3.5-beta.0

package/bin/alphaclaw.js

@@ -10,6 +10,9 @@ const {
   validateGitSyncFilePath,
 } = require("../lib/cli/git-sync");
 const { buildSecretReplacements } = require("../lib/server/helpers");
+const {
+  migrateManagedInternalFiles,
+} = require("../lib/server/internal-files-migration");
 
 const kUsageTrackerPluginPath = path.resolve(
   __dirname,
@@ -143,6 +146,10 @@ if (portFlag) {
 
 const openclawDir = path.join(rootDir, ".openclaw");
 fs.mkdirSync(openclawDir, { recursive: true });
+const { hourlyGitSyncPath } = migrateManagedInternalFiles({
+  fs,
+  openclawDir,
+});
 console.log(`[alphaclaw] Root directory: ${rootDir}`);
 
 // Check for pending update marker (written by the update endpoint before restart).
@@ -542,7 +549,6 @@ if (!fs.existsSync(gogConfigFile)) {
 // 8. Install/reconcile system cron entry
 // ---------------------------------------------------------------------------
 
-const hourlyGitSyncPath = path.join(openclawDir, "hourly-git-sync.sh");
 const packagedHourlyGitSyncPath = path.join(setupDir, "hourly-git-sync.sh");
 
 try {
@@ -822,7 +828,16 @@ if (fs.existsSync(configPath)) {
       const replacements = buildSecretReplacements(process.env);
       for (const [secret, envRef] of replacements) {
         if (secret) {
-          content = content.split(secret).join(envRef);
+          // Only replace the secret if it is an exact match for a JSON string value
+          // This ensures we do not replace substrings inside other strings
+          const secretJson = JSON.stringify(secret);
+          content = content.replace(
+            new RegExp(
+              secretJson.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&"),
+              "g",
+            ),
+            JSON.stringify(envRef),
+          );
         }
       }
       fs.writeFileSync(configPath, content);

package/lib/public/css/explorer.css

@@ -105,6 +105,11 @@
   padding: 6px 0 8px;
 }
 
+.file-tree-wrap-loading {
+  min-height: 100%;
+  display: flex;
+}
+
 .file-tree-search {
   padding: 0 8px 6px;
 }
@@ -281,6 +286,14 @@
   box-shadow: 0 0 6px rgba(45, 226, 255, 0.75);
 }
 
+.tree-lock-icon {
+  flex: 0 0 auto;
+  margin-left: auto;
+  width: 11px;
+  height: 11px;
+  color: var(--text-dim);
+}
+
 .tree-children {
   list-style: none;
 }
@@ -295,6 +308,15 @@
   color: var(--text-muted);
 }
 
+.file-tree-state-loading {
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .file-tree-state-error {
   color: #f87171;
 }
@@ -331,6 +353,21 @@
   background: rgba(234, 179, 8, 0.08);
 }
 
+.file-viewer-protected-banner.is-locked {
+  background: rgba(220, 38, 38, 0.16);
+}
+
+.file-viewer-protected-banner-icon {
+  width: 14px;
+  height: 14px;
+  color: #fca5a5;
+  flex-shrink: 0;
+}
+
+.file-viewer-protected-banner.is-locked .file-viewer-protected-banner-text {
+  color: #fecaca;
+}
+
 .file-viewer-protected-banner-text {
   font-size: 12px;
   color: #f7cc5e;
@@ -344,6 +381,15 @@
   letter-spacing: 0.01em;
 }
 
+.file-viewer-diff-banner {
+  background: rgba(59, 130, 246, 0.12);
+}
+
+.file-viewer-diff-banner .file-viewer-protected-banner-text,
+.file-viewer-diff-banner {
+  color: #bfdbfe;
+}
+
 .file-viewer-tabbar-spacer {
   flex: 1;
 }
@@ -559,6 +605,48 @@
   align-items: stretch;
 }
 
+.file-viewer-diff-shell {
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  padding: 8px 0;
+}
+
+.file-viewer-diff-pre {
+  margin: 0;
+  padding: 0 12px 12px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+.file-viewer-diff-line {
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 1px 8px;
+  border-radius: 4px;
+}
+
+.file-viewer-diff-line.is-added {
+  color: #86efac;
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.file-viewer-diff-line.is-removed {
+  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.file-viewer-diff-line.is-hunk {
+  color: #93c5fd;
+}
+
+.file-viewer-diff-line.is-header {
+  color: var(--text-dim);
+}
+
 .file-viewer-editor-line-num-col {
   width: 56px;
   flex-shrink: 0;
@@ -975,17 +1063,110 @@
   color: var(--text-muted);
 }
 
-.sidebar-git-list {
+.sidebar-git-changes-label {
+  padding: 7px 10px 4px;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+.sidebar-git-changes-list {
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 3px;
-  padding: 6px 10px 0;
+  gap: 2px;
+  padding: 0 6px;
+}
+
+.sidebar-git-change-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 22px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  line-height: 1.25;
+}
+
+.sidebar-git-change-row.is-clickable {
+  cursor: pointer;
+}
+
+.sidebar-git-change-row.is-clickable:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.sidebar-git-change-path {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.sidebar-git-change-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  font-size: 10px;
+}
+
+.sidebar-git-change-plus {
+  color: #71f8a7;
+}
+
+.sidebar-git-change-minus {
+  color: #f3a86a;
+}
+
+.sidebar-git-change-status {
+  font-size: 10px;
+  letter-spacing: 0.06em;
+}
+
+.sidebar-git-change-row.is-untracked .sidebar-git-change-status {
+  color: #71f8a7;
+}
+
+.sidebar-git-change-row.is-modified .sidebar-git-change-status {
+  color: #63ebff;
+}
+
+.sidebar-git-change-row.is-deleted .sidebar-git-change-status {
+  color: #f87171;
+}
+
+.sidebar-git-change-row.is-deleted .sidebar-git-change-path {
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+.sidebar-git-scroll {
   overflow-y: auto;
   min-height: 0;
   flex: 1 1 auto;
 }
 
+.sidebar-git-actions {
+  padding: 8px 10px 6px;
+}
+
+.sidebar-git-sync-button {
+  width: 100%;
+}
+
+.sidebar-git-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 10px 0;
+}
+
 .sidebar-git-list li {
   display: flex;
   align-items: baseline;

package/lib/public/css/theme.css

@@ -8,7 +8,7 @@
   --border-strong: rgba(255, 255, 255, 0.11);
   --text: #c9d1d9;
   --text-muted: #6e7681;
-  --text-dim: #383d47;
+  --text-dim: #424854;
   --accent: #63ebff;
   --accent-dim: rgba(99, 235, 255, 0.4);
   --accent-link: rgba(99, 235, 255, 0.6);

package/lib/public/js/app.js

@@ -383,7 +383,9 @@ const App = () => {
   const [acDismissed, setAcDismissed] = useState(false);
   const [authEnabled, setAuthEnabled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [sidebarTab, setSidebarTab] = useState("menu");
+  const [sidebarTab, setSidebarTab] = useState(() =>
+    location.startsWith("/browse") ? "browse" : "menu",
+  );
   const [sidebarWidthPx, setSidebarWidthPx] = useState(() => {
     const settings = readUiSettings();
     if (!Number.isFinite(settings.sidebarWidthPx)) return kDefaultSidebarWidthPx;
@@ -591,21 +593,24 @@ const App = () => {
     `;
   }
 
-  const buildBrowseRoute = (relativePath) => {
+  const buildBrowseRoute = (relativePath, options = {}) => {
+    const view = String(options?.view || "edit");
     const encodedPath = String(relativePath || "")
       .split("/")
       .filter(Boolean)
       .map((segment) => encodeURIComponent(segment))
       .join("/");
-    return encodedPath ? `/browse/${encodedPath}` : "/browse";
+    const baseRoute = encodedPath ? `/browse/${encodedPath}` : "/browse";
+    if (view === "diff" && encodedPath) return `${baseRoute}?view=diff`;
+    return baseRoute;
   };
   const navigateToSubScreen = (screen) => {
     setLocation(`/${screen}`);
     setMobileSidebarOpen(false);
   };
-  const navigateToBrowseFile = (relativePath) => {
+  const navigateToBrowseFile = (relativePath, options = {}) => {
     setBrowsePreviewPath("");
-    setLocation(buildBrowseRoute(relativePath));
+    setLocation(buildBrowseRoute(relativePath, options));
     setMobileSidebarOpen(false);
   };
   const handleSidebarLogout = async () => {
@@ -668,8 +673,13 @@ const App = () => {
   ];
 
   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
-    ? location
+    ? browseRoutePath
         .replace(/^\/browse\/?/, "")
         .split("/")
         .filter(Boolean)
@@ -682,6 +692,12 @@ const App = () => {
         })
         .join("/")
     : "";
+  const activeBrowsePath = browsePreviewPath || selectedBrowsePath;
+  const browseViewerMode =
+    !browsePreviewPath &&
+    new URLSearchParams(browseRouteQuery).get("view") === "diff"
+      ? "diff"
+      : "edit";
   const selectedNavId = isBrowseRoute
     ? "browse"
     : location === "/telegram"
@@ -727,6 +743,28 @@ const App = () => {
     );
   }, [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,
+      );
+    };
+  }, [
+    isBrowseRoute,
+    browseViewerMode,
+    selectedBrowsePath,
+    setLocation,
+    buildBrowseRoute,
+  ]);
+
   useEffect(() => {
     const settings = readUiSettings();
     settings.sidebarWidthPx = sidebarWidthPx;
@@ -848,11 +886,23 @@ const App = () => {
           ${isBrowseRoute
             ? html`
                 <${FileViewer}
-                  filePath=${browsePreviewPath || selectedBrowsePath}
+                  filePath=${activeBrowsePath}
                   isPreviewOnly=${Boolean(
                     browsePreviewPath &&
                       browsePreviewPath !== selectedBrowsePath,
                   )}
+                  browseView=${browseViewerMode}
+                  onRequestEdit=${(targetPath) => {
+                    const normalizedTargetPath = String(targetPath || "");
+                    if (
+                      normalizedTargetPath &&
+                      normalizedTargetPath !== selectedBrowsePath
+                    ) {
+                      navigateToBrowseFile(normalizedTargetPath, { view: "edit" });
+                      return;
+                    }
+                    setLocation(buildBrowseRoute(selectedBrowsePath, { view: "edit" }));
+                  }}
                 />
               `
             : html`

package/lib/public/js/components/file-tree.js

@@ -1,5 +1,11 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchBrowseTree } from "../lib/api.js";
 import {
@@ -17,14 +23,45 @@ import {
   FileCodeLineIcon,
   Database2LineIcon,
   HashtagIcon,
+  LockLineIcon,
 } from "./icons.js";
+import { LoadingSpinner } from "./loading-spinner.js";
 
 const html = htm.bind(h);
 const kTreeIndentPx = 9;
 const kFolderBasePaddingPx = 10;
 const kFileBasePaddingPx = 14;
+const kTreeRefreshIntervalMs = 5000;
 const kCollapsedFoldersStorageKey = "alphaclaw.browse.collapsedFolders";
 const kLegacyCollapsedFoldersStorageKey = "alphaclawBrowseCollapsedFolders";
+const kLockedBrowsePaths = new Set([
+  "hooks/bootstrap/agents.md",
+  "hooks/bootstrap/tools.md",
+  ".alphaclaw/hourly-git-sync.sh",
+  ".alphaclaw/.cli-device-auto-approved",
+]);
+
+const normalizePolicyPath = (inputPath) =>
+  String(inputPath || "")
+    .replaceAll("\\", "/")
+    .replace(/^\.\/+/, "")
+    .replace(/^\/+/, "")
+    .trim()
+    .toLowerCase();
+
+const matchesPolicyPath = (policyPathSet, normalizedPath) => {
+  const safeNormalizedPath = String(normalizedPath || "").trim();
+  if (!safeNormalizedPath) return false;
+  for (const policyPath of policyPathSet) {
+    if (
+      safeNormalizedPath === policyPath ||
+      safeNormalizedPath.endsWith(`/${policyPath}`)
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
 
 const readStoredCollapsedPaths = () => {
   try {
@@ -165,6 +202,10 @@ const TreeNode = ({
     const isActive = selectedPath === node.path;
     const isSearchActiveNode = searchActivePath === node.path;
     const hasDraft = draftPaths.has(node.path || "");
+    const isLocked = matchesPolicyPath(
+      kLockedBrowsePaths,
+      normalizePolicyPath(node.path || ""),
+    );
     const fileIconMeta = getFileIconMeta(node.name);
     const FileTypeIcon = fileIconMeta.icon;
     return html`
@@ -179,7 +220,14 @@ const TreeNode = ({
         >
           <${FileTypeIcon} className=${fileIconMeta.className} />
           <span class="tree-label">${node.name}</span>
-          ${hasDraft ? html`<span class="tree-draft-dot" aria-hidden="true"></span>` : null}
+          ${isLocked
+            ? html`<${LockLineIcon}
+                className="tree-lock-icon"
+                title="Managed by Alpha Claw"
+              />`
+            : hasDraft
+              ? html`<span class="tree-draft-dot" aria-hidden="true"></span>`
+              : null}
         </a>
       </li>
     `;
@@ -237,34 +285,55 @@ export const FileTree = ({
   const [searchQuery, setSearchQuery] = useState("");
   const [searchActivePath, setSearchActivePath] = useState("");
   const searchInputRef = useRef(null);
+  const treeSignatureRef = useRef("");
 
-  useEffect(() => {
-    let active = true;
-    const loadTree = async () => {
-      setLoading(true);
-      setError("");
-      try {
-        const data = await fetchBrowseTree();
-        if (!active) return;
-        setTreeRoot(data.root || null);
-        setCollapsedPaths((previousPaths) => {
-          if (previousPaths instanceof Set) return previousPaths;
-          const nextPaths = new Set();
-          collectFolderPaths(data.root, nextPaths);
-          return nextPaths;
-        });
-      } catch (loadError) {
-        if (!active) return;
+  const loadTree = useCallback(async ({ showLoading = false } = {}) => {
+    if (showLoading) setLoading(true);
+    if (showLoading) setError("");
+    try {
+      const data = await fetchBrowseTree();
+      const nextRoot = data.root || null;
+      const nextSignature = JSON.stringify(nextRoot || {});
+      if (treeSignatureRef.current !== nextSignature) {
+        treeSignatureRef.current = nextSignature;
+        setTreeRoot(nextRoot);
+      }
+      setCollapsedPaths((previousPaths) => {
+        if (previousPaths instanceof Set) return previousPaths;
+        const nextPaths = new Set();
+        collectFolderPaths(nextRoot, nextPaths);
+        return nextPaths;
+      });
+      if (showLoading) setError("");
+    } catch (loadError) {
+      if (showLoading) {
         setError(loadError.message || "Could not load file tree");
-      } finally {
-        if (active) setLoading(false);
       }
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadTree({ showLoading: true });
+  }, [loadTree]);
+
+  useEffect(() => {
+    const refreshTree = () => {
+      loadTree({ showLoading: false });
     };
-    loadTree();
+    const refreshInterval = window.setInterval(
+      refreshTree,
+      kTreeRefreshIntervalMs,
+    );
+    window.addEventListener("alphaclaw:browse-file-saved", refreshTree);
+    window.addEventListener("alphaclaw:browse-tree-refresh", refreshTree);
     return () => {
-      active = false;
+      window.clearInterval(refreshInterval);
+      window.removeEventListener("alphaclaw:browse-file-saved", refreshTree);
+      window.removeEventListener("alphaclaw:browse-tree-refresh", refreshTree);
     };
-  }, []);
+  }, [loadTree]);
 
   const normalizedSearchQuery = String(searchQuery || "").trim().toLowerCase();
   const rootChildren = useMemo(() => {
@@ -430,7 +499,13 @@ export const FileTree = ({
   };
 
   if (loading) {
-    return html`<div class="file-tree-state">Loading files...</div>`;
+    return html`
+      <div class="file-tree-wrap file-tree-wrap-loading">
+        <div class="file-tree-state file-tree-state-loading">
+          <${LoadingSpinner} className="h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+    `;
   }
   if (error) {
     return html`<div class="file-tree-state file-tree-state-error">