@chrysb/alphaclaw 0.3.2 → 0.3.3

package/lib/public/js/lib/syntax-highlighters/json.js

@@ -0,0 +1,61 @@
+import { escapeHtml, toLineObjects } from "./utils.js";
+
+const tokenizeJsonLine = (line) => {
+  const parts = [];
+  const source = String(line || "");
+  const stringRegex = /"([^"\\]|\\.)*"/g;
+  let lastIndex = 0;
+  let match = stringRegex.exec(source);
+
+  while (match) {
+    const start = match.index;
+    const end = stringRegex.lastIndex;
+    const value = match[0];
+    const trailing = source.slice(end);
+    const isKey = /^\s*:/.test(trailing);
+
+    if (start > lastIndex) {
+      parts.push({ kind: "text", value: source.slice(lastIndex, start) });
+    }
+    parts.push({ kind: isKey ? "key" : "string", value });
+    lastIndex = end;
+    match = stringRegex.exec(source);
+  }
+
+  if (lastIndex < source.length) {
+    parts.push({ kind: "text", value: source.slice(lastIndex) });
+  }
+
+  if (parts.length === 0) {
+    return [{ kind: "text", value: source }];
+  }
+  return parts;
+};
+
+const highlightJsonTextSegment = (text) => {
+  let content = escapeHtml(text);
+  content = content.replace(
+    /(^|[^\w.])(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)(?=$|[^\w.])/g,
+    '$1<span class="hl-number">$2</span>',
+  );
+  content = content.replace(/\b(true|false)\b/g, '<span class="hl-boolean">$1</span>');
+  content = content.replace(/\bnull\b/g, '<span class="hl-null">null</span>');
+  content = content.replace(/([{}\[\],:])/g, '<span class="hl-punc">$1</span>');
+  return content;
+};
+
+const renderHighlightedJsonLine = (line) =>
+  tokenizeJsonLine(line)
+    .map((part) => {
+      if (part.kind === "key") {
+        return `<span class="hl-key">${escapeHtml(part.value)}</span>`;
+      }
+      if (part.kind === "string") {
+        return `<span class="hl-string">${escapeHtml(part.value)}</span>`;
+      }
+      return highlightJsonTextSegment(part.value);
+    })
+    .join("");
+
+export const highlightJsonContent = (content) =>
+  toLineObjects(content, renderHighlightedJsonLine);

package/lib/public/js/lib/syntax-highlighters/markdown.js

@@ -0,0 +1,37 @@
+import { escapeHtml, toLineObjects } from "./utils.js";
+
+const renderInlineMarkdown = (line) => {
+  let content = escapeHtml(line);
+  content = content.replace(/`([^`]+)`/g, '<span class="hl-string">`$1`</span>');
+  content = content.replace(/\*\*([^*]+)\*\*/g, '<span class="hl-bold">**$1**</span>');
+  content = content.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<span class="hl-link">[$1]($2)</span>',
+  );
+  return content;
+};
+
+const renderHighlightedMarkdownLine = (line) => {
+  if (/^#{1,6}\s/.test(line)) {
+    return `<span class="hl-heading">${escapeHtml(line)}</span>`;
+  }
+  if (/^>\s/.test(line)) {
+    return `<span class="hl-comment">${escapeHtml(line)}</span>`;
+  }
+  if (/^```/.test(line)) {
+    return `<span class="hl-meta">${escapeHtml(line)}</span>`;
+  }
+  if (/^\|[-\s|]+\|$/.test(line)) {
+    return `<span class="hl-meta">${escapeHtml(line)}</span>`;
+  }
+  if (/^\s*[-*]\s/.test(line)) {
+    return renderInlineMarkdown(line).replace(
+      /^(\s*)([-*])/,
+      '$1<span class="hl-bullet">$2</span>',
+    );
+  }
+  return renderInlineMarkdown(line);
+};
+
+export const highlightMarkdownContent = (content) =>
+  toLineObjects(content, renderHighlightedMarkdownLine);

package/lib/public/js/lib/syntax-highlighters/utils.js

@@ -0,0 +1,13 @@
+export const escapeHtml = (value) =>
+  String(value || "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+
+export const toLineObjects = (content, renderer) =>
+  String(content || "")
+    .split("\n")
+    .map((line, index) => ({
+      lineNumber: index + 1,
+      html: renderer(line),
+    }));

package/lib/public/setup.html

@@ -8,6 +8,7 @@
   <link rel="icon" type="image/svg+xml" href="./img/logo.svg">
   <link rel="stylesheet" href="./css/theme.css">
   <link rel="stylesheet" href="./css/shell.css">
+  <link rel="stylesheet" href="./css/explorer.css">
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {

package/lib/server/constants.js

@@ -281,6 +281,7 @@ const SETUP_API_PREFIXES = [
   "/api/google",
   "/api/codex",
   "/api/models",
+  "/api/browse",
   "/api/gateway",
   "/api/restart-status",
   "/api/onboard",

package/lib/server/onboarding/workspace.js

@@ -61,12 +61,13 @@ const syncBootstrapPromptFiles = ({ fs, workspaceDir, baseUrl }) => {
 
 const installControlUiSkill = ({ fs, openclawDir, baseUrl }) => {
   try {
+    const setupUiUrl = resolveSetupUiUrl(baseUrl);
     const skillDir = `${openclawDir}/skills/control-ui`;
     fs.mkdirSync(skillDir, { recursive: true });
     const skillTemplate = fs.readFileSync(path.join(kSetupDir, "skills", "control-ui", "SKILL.md"), "utf8");
-    const skillContent = skillTemplate.replace(/\{\{BASE_URL\}\}/g, baseUrl);
+    const skillContent = skillTemplate.replace(/\{\{BASE_URL\}\}/g, setupUiUrl);
     fs.writeFileSync(`${skillDir}/SKILL.md`, skillContent);
-    console.log(`[onboard] Control UI skill installed (${baseUrl})`);
+    console.log(`[onboard] Control UI skill installed (${setupUiUrl})`);
   } catch (e) {
     console.error("[onboard] Skill install error:", e.message);
   }

package/lib/server/routes/browse.js

@@ -0,0 +1,295 @@
+const path = require("path");
+const { execFile } = require("child_process");
+
+const kDefaultTreeDepth = 10;
+const kIgnoredDirectoryNames = new Set([
+  ".git",
+  "node_modules",
+  ".cache",
+  "dist",
+  "build",
+]);
+
+const registerBrowseRoutes = ({ app, fs, kRootDir }) => {
+  const kRootResolved = path.resolve(kRootDir);
+  const kRootWithSep = `${kRootResolved}${path.sep}`;
+  const kRootDisplayName = "kRootDir/.openclaw";
+
+  if (!fs.existsSync(kRootResolved)) {
+    fs.mkdirSync(kRootResolved, { recursive: true });
+  }
+
+  const normalizeRelativePath = (inputPath) => {
+    const rawPath = String(inputPath || "").trim();
+    if (!rawPath) return "";
+    return rawPath.replace(/\\/g, "/").replace(/^\/+/, "");
+  };
+
+  const resolveSafePath = (inputPath) => {
+    const relativePath = normalizeRelativePath(inputPath);
+    const absolutePath = path.resolve(kRootResolved, relativePath);
+    const isInsideRoot =
+      absolutePath === kRootResolved || absolutePath.startsWith(kRootWithSep);
+    if (!isInsideRoot) {
+      return { ok: false, error: `Path must stay within ${kRootDisplayName}` };
+    }
+    return { ok: true, relativePath, absolutePath };
+  };
+
+  const isLikelyBinaryFile = (targetPath) => {
+    let fileHandle = null;
+    try {
+      fileHandle = fs.openSync(targetPath, "r");
+      const sample = Buffer.alloc(512);
+      const bytesRead = fs.readSync(fileHandle, sample, 0, sample.length, 0);
+      for (let index = 0; index < bytesRead; index += 1) {
+        if (sample[index] === 0) return true;
+      }
+      return false;
+    } finally {
+      if (fileHandle !== null) fs.closeSync(fileHandle);
+    }
+  };
+
+  const toRelativePath = (absolutePath) => {
+    const relative = path.relative(kRootResolved, absolutePath);
+    return relative === "" ? "" : relative.split(path.sep).join("/");
+  };
+
+  const buildTreeNode = (absolutePath, depthRemaining) => {
+    const stats = fs.statSync(absolutePath);
+    const nodeName = path.basename(absolutePath);
+    const nodePath = toRelativePath(absolutePath);
+
+    if (!stats.isDirectory()) {
+      return { type: "file", name: nodeName, path: nodePath };
+    }
+
+    if (depthRemaining <= 0) {
+      return { type: "folder", name: nodeName, path: nodePath, children: [] };
+    }
+
+    const children = fs
+      .readdirSync(absolutePath, { withFileTypes: true })
+      .filter((entry) => {
+        if (entry.isDirectory() && kIgnoredDirectoryNames.has(entry.name)) {
+          return false;
+        }
+        return entry.isDirectory() || entry.isFile();
+      })
+      .map((entry) => buildTreeNode(path.join(absolutePath, entry.name), depthRemaining - 1))
+      .sort((leftNode, rightNode) => {
+        if (leftNode.type !== rightNode.type) {
+          return leftNode.type === "folder" ? -1 : 1;
+        }
+        return leftNode.name.localeCompare(rightNode.name);
+      });
+
+    return { type: "folder", name: nodeName, path: nodePath, children };
+  };
+
+  const runGitSync = (message, relativeFilePath) =>
+    new Promise((resolve) => {
+      const syncArgs = ["git-sync", "-m", message];
+      if (relativeFilePath) {
+        syncArgs.push("--file", String(relativeFilePath));
+      }
+      execFile(
+        "alphaclaw",
+        syncArgs,
+        { timeout: 20000, cwd: kRootResolved },
+        (error) => {
+          if (error) {
+            return resolve({
+              ok: false,
+              error: error.message || "alphaclaw git-sync failed",
+            });
+          }
+          return resolve({ ok: true });
+        },
+      );
+    });
+
+  const runGitCommand = (args) =>
+    new Promise((resolve) => {
+      execFile(
+        "git",
+        args,
+        { timeout: 10000, cwd: kRootResolved },
+        (error, stdout, stderr) => {
+          if (error) {
+            return resolve({
+              ok: false,
+              error: String(stderr || stdout || error.message || "git command failed").trim(),
+            });
+          }
+          return resolve({ ok: true, stdout: String(stdout || "") });
+        },
+      );
+    });
+
+  const parseGithubRepoSlug = (value) => {
+    const raw = String(value || "").trim();
+    if (!raw) return "";
+    return raw
+      .replace(/^git@github\.com:/i, "")
+      .replace(/^https:\/\/github\.com\//i, "")
+      .replace(/\.git$/i, "")
+      .trim();
+  };
+
+  app.get("/api/browse/tree", (req, res) => {
+    const depthValue = Number.parseInt(String(req.query.depth || ""), 10);
+    const depth = Number.isFinite(depthValue) && depthValue > 0 ? depthValue : kDefaultTreeDepth;
+    try {
+      const tree = buildTreeNode(kRootResolved, depth);
+      return res.json({ ok: true, root: tree });
+    } catch (error) {
+      return res
+        .status(500)
+        .json({ ok: false, error: error.message || "Could not build file tree" });
+    }
+  });
+
+  app.get("/api/browse/read", (req, res) => {
+    const resolvedPath = resolveSafePath(req.query.path);
+    if (!resolvedPath.ok) {
+      return res.status(400).json({ ok: false, error: resolvedPath.error });
+    }
+
+    try {
+      const stats = fs.statSync(resolvedPath.absolutePath);
+      if (!stats.isFile()) {
+        return res.status(400).json({ ok: false, error: "Path is not a file" });
+      }
+      if (isLikelyBinaryFile(resolvedPath.absolutePath)) {
+        return res.status(400).json({ ok: false, error: "Binary files are not editable" });
+      }
+      const content = fs.readFileSync(resolvedPath.absolutePath, "utf8");
+      return res.json({
+        ok: true,
+        path: resolvedPath.relativePath,
+        content,
+      });
+    } catch (error) {
+      return res.status(500).json({ ok: false, error: error.message || "Could not read file" });
+    }
+  });
+
+  app.get("/api/browse/git-summary", async (req, res) => {
+    try {
+      const envRepoSlug = parseGithubRepoSlug(process.env.GITHUB_WORKSPACE_REPO || "");
+      const statusResult = await runGitCommand(["status", "--porcelain", "--branch"]);
+      if (!statusResult.ok) {
+        if (/not a git repository/i.test(statusResult.error || "")) {
+          return res.json({
+            ok: true,
+            isRepo: false,
+            repoPath: kRootResolved,
+          });
+        }
+        return res.status(500).json({
+          ok: false,
+          error: statusResult.error || "Could not read git status",
+        });
+      }
+
+      const statusLines = statusResult.stdout
+        .split("\n")
+        .map((line) => line.trimEnd())
+        .filter(Boolean);
+      const branchLine = statusLines.find((line) => line.startsWith("##")) || "";
+      const branch = branchLine.replace(/^##\s*/, "").split("...")[0] || "unknown";
+      const changedFiles = statusLines
+        .filter((line) => !line.startsWith("##"))
+        .map((line) => ({
+          status: line.slice(0, 2).trim() || "M",
+          path: line.slice(3).trim(),
+        }));
+
+      let repoSlug = envRepoSlug;
+      if (!repoSlug) {
+        const remoteResult = await runGitCommand(["remote", "get-url", "origin"]);
+        if (remoteResult.ok) {
+          repoSlug = parseGithubRepoSlug(remoteResult.stdout || "");
+        }
+      }
+      const repoUrl = repoSlug ? `https://github.com/${repoSlug}` : "";
+
+      const logResult = await runGitCommand([
+        "log",
+        "--pretty=format:%H%x09%h%x09%s%x09%ct",
+        "-n",
+        "5",
+      ]);
+      const commits = logResult.ok
+        ? logResult.stdout
+            .split("\n")
+            .map((line) => line.trim())
+            .filter(Boolean)
+            .map((line) => {
+              const [hash = "", shortHash = "", message = "", unixTs = "0"] = line.split("\t");
+              return {
+                hash,
+                shortHash,
+                message,
+                timestamp: Number.parseInt(unixTs, 10) || 0,
+                url: repoSlug && hash ? `${repoUrl}/commit/${hash}` : "",
+              };
+            })
+        : [];
+
+      return res.json({
+        ok: true,
+        isRepo: true,
+        repoPath: kRootResolved,
+        repoSlug,
+        repoUrl,
+        branch,
+        isDirty: changedFiles.length > 0,
+        changedFilesCount: changedFiles.length,
+        changedFiles: changedFiles.slice(0, 8),
+        commits,
+      });
+    } catch (error) {
+      return res.status(500).json({
+        ok: false,
+        error: error.message || "Could not build git summary",
+      });
+    }
+  });
+
+  app.put("/api/browse/write", async (req, res) => {
+    const { path: targetPath, content } = req.body || {};
+    const resolvedPath = resolveSafePath(targetPath);
+    if (!resolvedPath.ok) {
+      return res.status(400).json({ ok: false, error: resolvedPath.error });
+    }
+    if (typeof content !== "string") {
+      return res.status(400).json({ ok: false, error: "content must be a string" });
+    }
+
+    try {
+      const stats = fs.statSync(resolvedPath.absolutePath);
+      if (!stats.isFile()) {
+        return res.status(400).json({ ok: false, error: "Path is not a file" });
+      }
+      fs.writeFileSync(resolvedPath.absolutePath, content, "utf8");
+      const fileName = path.basename(resolvedPath.absolutePath);
+      const syncResult = await runGitSync(
+        `Edit ${fileName} via UI`,
+        resolvedPath.relativePath,
+      );
+      return res.json({
+        ok: true,
+        path: resolvedPath.relativePath,
+        synced: syncResult.ok,
+        syncError: syncResult.ok ? undefined : syncResult.error,
+      });
+    } catch (error) {
+      return res.status(500).json({ ok: false, error: error.message || "Could not save file" });
+    }
+  });
+};
+
+module.exports = { registerBrowseRoutes };

package/lib/server.js

@@ -65,7 +65,10 @@ const { createAlphaclawVersionService } = require("./server/alphaclaw-version");
 const {
   createRestartRequiredState,
 } = require("./server/restart-required-state");
-const { syncBootstrapPromptFiles } = require("./server/onboarding/workspace");
+const {
+  installControlUiSkill,
+  syncBootstrapPromptFiles,
+} = require("./server/onboarding/workspace");
 const { createTelegramApi } = require("./server/telegram-api");
 const { createDiscordApi } = require("./server/discord-api");
 const { createWatchdogNotifier } = require("./server/watchdog-notify");
@@ -79,6 +82,7 @@ const { registerSystemRoutes } = require("./server/routes/system");
 const { registerPairingRoutes } = require("./server/routes/pairings");
 const { registerCodexRoutes } = require("./server/routes/codex");
 const { registerGoogleRoutes } = require("./server/routes/google");
+const { registerBrowseRoutes } = require("./server/routes/browse");
 const { registerProxyRoutes } = require("./server/routes/proxy");
 const { registerTelegramRoutes } = require("./server/routes/telegram");
 const { registerWebhookRoutes } = require("./server/routes/webhooks");
@@ -196,6 +200,11 @@ registerSystemRoutes({
   OPENCLAW_DIR: constants.OPENCLAW_DIR,
   restartRequiredState,
 });
+registerBrowseRoutes({
+  app,
+  fs,
+  kRootDir: constants.OPENCLAW_DIR,
+});
 registerPairingRoutes({ app, clawCmd, isOnboarded });
 registerCodexRoutes({
   app,
@@ -229,8 +238,20 @@ const watchdog = createWatchdog({
 });
 setGatewayExitHandler((payload) => watchdog.onGatewayExit(payload));
 setGatewayLaunchHandler((payload) => watchdog.onGatewayLaunch(payload));
-const doSyncPromptFiles = () =>
-  syncBootstrapPromptFiles({ fs, workspaceDir: constants.WORKSPACE_DIR });
+const doSyncPromptFiles = () => {
+  const setupUiUrl = resolveSetupUrl();
+  syncBootstrapPromptFiles({
+    fs,
+    workspaceDir: constants.WORKSPACE_DIR,
+    baseUrl: setupUiUrl,
+  });
+  installControlUiSkill({
+    fs,
+    openclawDir: constants.OPENCLAW_DIR,
+    baseUrl: setupUiUrl,
+  });
+};
+doSyncPromptFiles();
 registerTelegramRoutes({
   app,
   telegramApi,

package/lib/setup/core-prompts/TOOLS.md

@@ -9,9 +9,11 @@ AlphaClaw UI: `{{SETUP_UI_URL}}`
 | Tab       | URL                          | What it manages                                                                                                                                                                            |
 | --------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | General   | `{{SETUP_UI_URL}}#general`   | Gateway status & restart, channel health (Telegram/Discord), pending pairings, feature health (Embeddings/Audio), Google Workspace connection, repo auto-sync schedule, OpenClaw dashboard |
+| Watchdog  | `{{SETUP_UI_URL}}#watchdog`  | Gateway watchdog lifecycle, crash-loop visibility, restart diagnostics, and auto-repair feature                                                                                            |
 | Providers | `{{SETUP_UI_URL}}#providers` | AI provider credentials (Anthropic, OpenAI, Gemini, Mistral, Voyage, Groq, Deepgram), feature capabilities, Codex OAuth                                                                    |
 | Envars    | `{{SETUP_UI_URL}}#envars`    | View/edit/add environment variables (saved to `/data/.env`), gateway restart to apply changes                                                                                              |
 | Webhooks  | `{{SETUP_UI_URL}}#webhooks`  | Webhook endpoint visibility, create flow, request history, and gateway delivery debugging                                                                                                  |
+| Browse    | `{{SETUP_UI_URL}}#browse`    | File browser and editor rooted at `.openclaw`, markdown preview/edit flow, and git-aware save workflow                                                                                     |
 
 ### Environment variables
 
@@ -38,7 +40,7 @@ After pushing, include a link to the commit using the abbreviated hash: [abc1234
 
 ## Webhooks
 
-You can create webhooks yourself or the user can create them through the Setup UI.
+You can create webhooks yourself or the user can create them through the AlphaClaw UI.
 
 Webhook transform files must follow this convention:
 

package/lib/setup/skills/control-ui/SKILL.md

@@ -1,9 +1,9 @@
 ---
-name: control-ui
-description: Know when and how to direct the user to the Setup UI for configuration tasks.
+name: alphaclaw
+description: Know when and how to direct the user to the AlphaClaw UI for configuration tasks.
 ---
 
-# Control UI
+# AlphaClaw UI
 
 There is a web-based Setup UI at `{{BASE_URL}}`. The **user** manages runtime configuration through it. You should NOT call these API endpoints yourself or write config files directly — instead, tell the user what they need to do and where to do it.
 
@@ -35,16 +35,16 @@ When a user asks about pairing their Telegram or Discord account:
 
 Supported Google services (user selects which to enable during OAuth):
 
-| Service | Read | Write | Google API |
-|---------|------|-------|------------|
-| Gmail | `gmail:read` | `gmail:write` | `gmail.googleapis.com` |
+| Service  | Read            | Write            | Google API                     |
+| -------- | --------------- | ---------------- | ------------------------------ |
+| Gmail    | `gmail:read`    | `gmail:write`    | `gmail.googleapis.com`         |
 | Calendar | `calendar:read` | `calendar:write` | `calendar-json.googleapis.com` |
-| Drive | `drive:read` | `drive:write` | `drive.googleapis.com` |
-| Sheets | `sheets:read` | `sheets:write` | `sheets.googleapis.com` |
-| Docs | `docs:read` | `docs:write` | `docs.googleapis.com` |
-| Tasks | `tasks:read` | `tasks:write` | `tasks.googleapis.com` |
-| Contacts | `contacts:read` | `contacts:write` | `people.googleapis.com` |
-| Meet | `meet:read` | `meet:write` | `meet.googleapis.com` |
+| Drive    | `drive:read`    | `drive:write`    | `drive.googleapis.com`         |
+| Sheets   | `sheets:read`   | `sheets:write`   | `sheets.googleapis.com`        |
+| Docs     | `docs:read`     | `docs:write`     | `docs.googleapis.com`          |
+| Tasks    | `tasks:read`    | `tasks:write`    | `tasks.googleapis.com`         |
+| Contacts | `contacts:read` | `contacts:write` | `people.googleapis.com`        |
+| Meet     | `meet:read`     | `meet:write`     | `meet.googleapis.com`          |
 
 Default enabled: Gmail (read), Calendar (read+write), Drive (read), Sheets (read), Docs (read).
 
@@ -60,11 +60,3 @@ gog contacts list --account user@gmail.com
 ```
 
 Config lives at `/data/.openclaw/gogcli/`.
-
-## What the Setup UI provides (for your awareness)
-
-This is a reference so you know what's available — not an invitation to call these endpoints.
-
-- **General tab** (`{{BASE_URL}}#general`): Gateway status/restart, OpenClaw version + update, channel health, pending pairings, feature health (Embeddings/Audio), Google Workspace
-- **Providers tab** (`{{BASE_URL}}#providers`): Primary model selection, AI provider credentials, feature capabilities, Codex OAuth
-- **Envars tab** (`{{BASE_URL}}#envars`): View/edit/add environment variables, save to `/data/.env`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "publishConfig": {
     "access": "public"
   },