@chrysb/alphaclaw 0.3.3 → 0.3.4-beta.0

package/bin/alphaclaw.js

@@ -11,6 +11,14 @@ const {
 } = require("../lib/cli/git-sync");
 const { buildSecretReplacements } = require("../lib/server/helpers");
 
+const kUsageTrackerPluginPath = path.resolve(
+  __dirname,
+  "..",
+  "lib",
+  "plugin",
+  "usage-tracker",
+);
+
 // ---------------------------------------------------------------------------
 // Parse CLI flags
 // ---------------------------------------------------------------------------
@@ -772,6 +780,8 @@ if (fs.existsSync(configPath)) {
     const cfg = JSON.parse(fs.readFileSync(configPath, "utf8"));
     if (!cfg.channels) cfg.channels = {};
     if (!cfg.plugins) cfg.plugins = {};
+    if (!cfg.plugins.load) cfg.plugins.load = {};
+    if (!Array.isArray(cfg.plugins.load.paths)) cfg.plugins.load.paths = [];
     if (!cfg.plugins.entries) cfg.plugins.entries = {};
     let changed = false;
 
@@ -798,6 +808,14 @@ if (fs.existsSync(configPath)) {
       console.log("[alphaclaw] Discord added");
       changed = true;
     }
+    if (!cfg.plugins.load.paths.includes(kUsageTrackerPluginPath)) {
+      cfg.plugins.load.paths.push(kUsageTrackerPluginPath);
+      changed = true;
+    }
+    if (cfg.plugins.entries["usage-tracker"]?.enabled !== true) {
+      cfg.plugins.entries["usage-tracker"] = { enabled: true };
+      changed = true;
+    }
 
     if (changed) {
       let content = JSON.stringify(cfg, null, 2);

package/lib/plugin/usage-tracker/index.js

@@ -0,0 +1,308 @@
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { DatabaseSync } = require("node:sqlite");
+
+const kPluginId = "usage-tracker";
+const kFallbackRootDir = path.join(os.homedir(), ".alphaclaw");
+
+const coerceCount = (value) => {
+  const parsed = Number.parseInt(String(value ?? 0), 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+};
+
+const resolveRootDir = () =>
+  process.env.ALPHACLAW_ROOT_DIR ||
+  process.env.OPENCLAW_HOME ||
+  process.env.OPENCLAW_ROOT_DIR ||
+  kFallbackRootDir;
+
+const safeAlterTable = (database, sql) => {
+  try {
+    database.exec(sql);
+  } catch (err) {
+    const message = String(err?.message || "").toLowerCase();
+    if (!message.includes("duplicate column name")) throw err;
+  }
+};
+
+const ensureSchema = (database) => {
+  database.exec("PRAGMA journal_mode=WAL;");
+  database.exec("PRAGMA synchronous=NORMAL;");
+  database.exec("PRAGMA busy_timeout=5000;");
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS usage_events (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      timestamp INTEGER NOT NULL,
+      session_id TEXT,
+      session_key TEXT,
+      run_id TEXT,
+      provider TEXT NOT NULL,
+      model TEXT NOT NULL,
+      input_tokens INTEGER NOT NULL DEFAULT 0,
+      output_tokens INTEGER NOT NULL DEFAULT 0,
+      cache_read_tokens INTEGER NOT NULL DEFAULT 0,
+      cache_write_tokens INTEGER NOT NULL DEFAULT 0,
+      total_tokens INTEGER NOT NULL DEFAULT 0
+    );
+  `);
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_usage_events_ts
+    ON usage_events(timestamp DESC);
+  `);
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_usage_events_session
+    ON usage_events(session_id);
+  `);
+  safeAlterTable(
+    database,
+    "ALTER TABLE usage_events ADD COLUMN session_key TEXT;",
+  );
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_usage_events_session_key
+    ON usage_events(session_key);
+  `);
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS usage_daily (
+      date TEXT NOT NULL,
+      model TEXT NOT NULL,
+      provider TEXT,
+      input_tokens INTEGER NOT NULL DEFAULT 0,
+      output_tokens INTEGER NOT NULL DEFAULT 0,
+      cache_read_tokens INTEGER NOT NULL DEFAULT 0,
+      cache_write_tokens INTEGER NOT NULL DEFAULT 0,
+      total_tokens INTEGER NOT NULL DEFAULT 0,
+      turn_count INTEGER NOT NULL DEFAULT 0,
+      PRIMARY KEY (date, model)
+    );
+  `);
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS tool_events (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      timestamp INTEGER NOT NULL,
+      session_id TEXT,
+      session_key TEXT,
+      tool_name TEXT NOT NULL,
+      success INTEGER NOT NULL DEFAULT 1,
+      duration_ms INTEGER
+    );
+  `);
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_tool_events_session
+    ON tool_events(session_id);
+  `);
+  safeAlterTable(
+    database,
+    "ALTER TABLE tool_events ADD COLUMN session_key TEXT;",
+  );
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_tool_events_session_key
+    ON tool_events(session_key);
+  `);
+};
+
+const createPlugin = () => {
+  let database = null;
+  let dbPath = "";
+  let insertUsageEventStmt = null;
+  let upsertUsageDailyStmt = null;
+  let insertToolEventStmt = null;
+
+  const getDatabase = () => {
+    if (database) return database;
+    const rootDir = resolveRootDir();
+    const dbDir = path.join(rootDir, "db");
+    fs.mkdirSync(dbDir, { recursive: true });
+    dbPath = path.join(dbDir, "usage.db");
+    database = new DatabaseSync(dbPath);
+    ensureSchema(database);
+    insertUsageEventStmt = database.prepare(`
+      INSERT INTO usage_events (
+        timestamp,
+        session_id,
+        session_key,
+        run_id,
+        provider,
+        model,
+        input_tokens,
+        output_tokens,
+        cache_read_tokens,
+        cache_write_tokens,
+        total_tokens
+      ) VALUES (
+        $timestamp,
+        $session_id,
+        $session_key,
+        $run_id,
+        $provider,
+        $model,
+        $input_tokens,
+        $output_tokens,
+        $cache_read_tokens,
+        $cache_write_tokens,
+        $total_tokens
+      )
+    `);
+    upsertUsageDailyStmt = database.prepare(`
+      INSERT INTO usage_daily (
+        date,
+        model,
+        provider,
+        input_tokens,
+        output_tokens,
+        cache_read_tokens,
+        cache_write_tokens,
+        total_tokens,
+        turn_count
+      ) VALUES (
+        $date,
+        $model,
+        $provider,
+        $input_tokens,
+        $output_tokens,
+        $cache_read_tokens,
+        $cache_write_tokens,
+        $total_tokens,
+        1
+      )
+      ON CONFLICT(date, model) DO UPDATE SET
+        provider = COALESCE(excluded.provider, usage_daily.provider),
+        input_tokens = usage_daily.input_tokens + excluded.input_tokens,
+        output_tokens = usage_daily.output_tokens + excluded.output_tokens,
+        cache_read_tokens = usage_daily.cache_read_tokens + excluded.cache_read_tokens,
+        cache_write_tokens = usage_daily.cache_write_tokens + excluded.cache_write_tokens,
+        total_tokens = usage_daily.total_tokens + excluded.total_tokens,
+        turn_count = usage_daily.turn_count + 1
+    `);
+    insertToolEventStmt = database.prepare(`
+      INSERT INTO tool_events (
+        timestamp,
+        session_id,
+        session_key,
+        tool_name,
+        success,
+        duration_ms
+      ) VALUES (
+        $timestamp,
+        $session_id,
+        $session_key,
+        $tool_name,
+        $success,
+        $duration_ms
+      )
+    `);
+    return database;
+  };
+
+  const writeUsageEvent = (event, ctx, logger) => {
+    const usage = event?.usage ?? {};
+    const timestamp = Date.now();
+    const date = new Date(timestamp).toISOString().slice(0, 10);
+    const inputTokens = coerceCount(usage.input);
+    const outputTokens = coerceCount(usage.output);
+    const cacheReadTokens = coerceCount(usage.cacheRead);
+    const cacheWriteTokens = coerceCount(usage.cacheWrite);
+    const fallbackTotal = inputTokens + outputTokens + cacheReadTokens + cacheWriteTokens;
+    const totalTokens = coerceCount(usage.total) || fallbackTotal;
+    if (totalTokens <= 0) return;
+    getDatabase();
+    insertUsageEventStmt.run({
+      $timestamp: timestamp,
+      $session_id: String(event?.sessionId || ctx?.sessionId || ""),
+      $session_key: String(ctx?.sessionKey || ""),
+      $run_id: String(event?.runId || ""),
+      $provider: String(event?.provider || "unknown"),
+      $model: String(event?.model || "unknown"),
+      $input_tokens: inputTokens,
+      $output_tokens: outputTokens,
+      $cache_read_tokens: cacheReadTokens,
+      $cache_write_tokens: cacheWriteTokens,
+      $total_tokens: totalTokens,
+    });
+    upsertUsageDailyStmt.run({
+      $date: date,
+      $model: String(event?.model || "unknown"),
+      $provider: String(event?.provider || "unknown"),
+      $input_tokens: inputTokens,
+      $output_tokens: outputTokens,
+      $cache_read_tokens: cacheReadTokens,
+      $cache_write_tokens: cacheWriteTokens,
+      $total_tokens: totalTokens,
+    });
+    if (logger?.debug) {
+      logger.debug(
+        `[${kPluginId}] usage event recorded model=${String(event?.model || "unknown")} total=${totalTokens}`,
+      );
+    }
+  };
+
+  const deriveToolSuccess = (event) => {
+    const message = event?.message;
+    if (!message || typeof message !== "object") {
+      return event?.error ? 0 : 1;
+    }
+    if (message?.isError === true) return 0;
+    if (message?.ok === false) return 0;
+    if (typeof message?.error === "string" && message.error.trim()) return 0;
+    return 1;
+  };
+
+  const writeToolEvent = (event, ctx) => {
+    const toolName = String(event?.toolName || "").trim();
+    if (!toolName) return;
+    const sessionKey = String(ctx?.sessionKey || "").trim();
+    const sessionId = String(ctx?.sessionId || "").trim();
+    if (!sessionKey && !sessionId) return;
+    getDatabase();
+    insertToolEventStmt.run({
+      $timestamp: Date.now(),
+      $session_id: sessionId,
+      $session_key: sessionKey,
+      $tool_name: toolName,
+      $success: deriveToolSuccess(event),
+      $duration_ms: coerceCount(event?.durationMs) || null,
+    });
+  };
+
+  return {
+    id: kPluginId,
+    name: "AlphaClaw Usage Tracker",
+    description: "Captures LLM and tool usage into SQLite for Usage UI",
+    register: (api) => {
+      const logger = api?.logger;
+      try {
+        getDatabase();
+        logger?.info?.(`[${kPluginId}] initialized db=${dbPath}`);
+      } catch (err) {
+        logger?.error?.(`[${kPluginId}] failed to initialize database: ${err?.message || err}`);
+        return;
+      }
+      api.on("llm_output", (event, ctx) => {
+        try {
+          writeUsageEvent(event, ctx, logger);
+        } catch (err) {
+          logger?.error?.(`[${kPluginId}] llm_output write error: ${err?.message || err}`);
+        }
+      });
+      api.on("tool_result_persist", (event, ctx) => {
+        try {
+          writeToolEvent(
+            {
+              ...event,
+              toolName: String(event?.toolName || ctx?.toolName || ""),
+              durationMs: event?.durationMs,
+            },
+            ctx,
+          );
+        } catch (err) {
+          logger?.error?.(`[${kPluginId}] tool_result_persist write error: ${err?.message || err}`);
+        }
+        return {};
+      });
+    },
+  };
+};
+
+const plugin = createPlugin();
+module.exports = plugin;
+module.exports.default = plugin;

package/lib/plugin/usage-tracker/openclaw.plugin.json

@@ -0,0 +1,8 @@
+{
+  "id": "usage-tracker",
+  "configSchema": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {}
+  }
+}

package/lib/public/css/explorer.css

@@ -102,7 +102,33 @@
 .file-tree-wrap {
   width: 100%;
   overflow-y: auto;
-  padding: 8px 0;
+  padding: 6px 0 8px;
+}
+
+.file-tree-search {
+  padding: 0 8px 6px;
+}
+
+.file-tree-search-input {
+  width: 100%;
+  height: 28px;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text);
+  font-size: 12px;
+  padding: 0 9px;
+  outline: none;
+  font-family: inherit;
+}
+
+.file-tree-search-input::placeholder {
+  color: var(--text-dim);
+}
+
+.file-tree-search-input:focus {
+  border-color: rgba(99, 235, 255, 0.45);
+  box-shadow: 0 0 0 1px rgba(99, 235, 255, 0.18);
 }
 
 .file-tree-wrap::-webkit-scrollbar {
@@ -153,6 +179,11 @@
   color: var(--accent);
 }
 
+.tree-item > a.soft-active:not(.active) {
+  background: rgba(99, 235, 255, 0.06);
+  color: var(--text);
+}
+
 .tree-item > a.active::before {
   content: '';
   position: absolute;
@@ -317,6 +348,16 @@
   flex: 1;
 }
 
+.file-viewer-preview-pill {
+  margin-right: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 8px;
+  line-height: 1;
+}
+
 .file-viewer-tab {
   display: flex;
   align-items: center;
@@ -791,6 +832,15 @@
   font-size: 12px;
 }
 
+.file-viewer-loading-shell {
+  flex: 1 1 auto;
+  min-height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
 .file-viewer-state-error {
   color: #f87171;
 }

package/lib/public/css/shell.css

@@ -1,8 +1,9 @@
 /* ── App shell grid ─────────────────────────────── */
 
 .app-shell {
+  --sidebar-width: 220px;
   display: grid;
-  grid-template-columns: 220px 0 minmax(0, 1fr);
+  grid-template-columns: var(--sidebar-width) 0px minmax(0, 1fr);
   grid-template-rows: auto 1fr 24px;
   height: 100vh;
   position: relative;
@@ -286,6 +287,7 @@
 
 @media (max-width: 768px) {
   .app-shell {
+    --sidebar-width: 0px !important;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr 24px;
   }

package/lib/public/css/theme.css

@@ -451,3 +451,38 @@ textarea:focus {
     animation-timing-function: linear;
   }
 }
+
+/* Reusable segmented control (pill toggle). */
+.ac-segmented-control {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--panel-border-contrast);
+  border-radius: 8px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.02);
+  height: 28px;
+}
+
+.ac-segmented-control-button {
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 12px;
+  letter-spacing: 0.03em;
+  height: 100%;
+  line-height: 1;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: color 0.12s, background 0.12s;
+}
+
+.ac-segmented-control-button:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.ac-segmented-control-button.active {
+  color: var(--accent);
+  background: var(--bg-active);
+}

package/lib/public/js/app.js

@@ -34,7 +34,7 @@ import { Welcome } from "./components/welcome.js";
 import { Envars } from "./components/envars.js";
 import { Webhooks } from "./components/webhooks.js";
 import { ToastContainer, showToast } from "./components/toast.js";
-import { TelegramWorkspace } from "./components/telegram-workspace.js";
+import { TelegramWorkspace } from "./components/telegram-workspace/index.js";
 import { ChevronDownIcon } from "./components/icons.js";
 import { UpdateActionButton } from "./components/update-action-button.js";
 import { GlobalRestartBanner } from "./components/global-restart-banner.js";
@@ -42,31 +42,19 @@ import { LoadingSpinner } from "./components/loading-spinner.js";
 import { WatchdogTab } from "./components/watchdog-tab.js";
 import { FileViewer } from "./components/file-viewer.js";
 import { AppSidebar } from "./components/sidebar.js";
+import { UsageTab } from "./components/usage-tab.js";
+import { readUiSettings, writeUiSettings } from "./lib/ui-settings.js";
 const html = htm.bind(h);
 const kDefaultUiTab = "general";
-const kUiSettingsStorageKey = "alphaclaw.uiSettings";
-const kLegacyUiSettingsStorageKey = "alphaclawUiSettings";
 const kDefaultSidebarWidthPx = 220;
 const kSidebarMinWidthPx = 180;
 const kSidebarMaxWidthPx = 460;
 const kBrowseLastPathUiSettingKey = "browseLastPath";
+const kLastMenuRouteUiSettingKey = "lastMenuRoute";
 
 const clampSidebarWidth = (value) =>
   Math.max(kSidebarMinWidthPx, Math.min(kSidebarMaxWidthPx, value));
 
-const readUiSettings = () => {
-  try {
-    const raw =
-      window.localStorage.getItem(kUiSettingsStorageKey) ||
-      window.localStorage.getItem(kLegacyUiSettingsStorageKey);
-    if (!raw) return {};
-    const parsed = JSON.parse(raw);
-    return parsed && typeof parsed === "object" ? parsed : {};
-  } catch {
-    return {};
-  }
-};
-
 const getHashPath = () => {
   const hash = window.location.hash.replace(/^#/, "");
   if (!hash) return `/${kDefaultUiTab}`;
@@ -407,7 +395,20 @@ const App = () => {
       ? 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 [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const [browsePreviewPath, setBrowsePreviewPath] = useState("");
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
@@ -603,6 +604,7 @@ const App = () => {
     setMobileSidebarOpen(false);
   };
   const navigateToBrowseFile = (relativePath) => {
+    setBrowsePreviewPath("");
     setLocation(buildBrowseRoute(relativePath));
     setMobileSidebarOpen(false);
   };
@@ -618,7 +620,8 @@ const App = () => {
   const handleSelectSidebarTab = (nextTab) => {
     setSidebarTab(nextTab);
     if (nextTab === "menu" && location.startsWith("/browse")) {
-      setLocation("/general");
+      setBrowsePreviewPath("");
+      setLocation(lastMenuRoute || `/${kDefaultUiTab}`);
       return;
     }
     if (nextTab === "browse" && !location.startsWith("/browse")) {
@@ -642,10 +645,16 @@ const App = () => {
 
   const kNavSections = [
     {
-      label: "Status",
+      label: "Setup",
       items: [
         { id: "general", label: "General" },
+      ],
+    },
+    {
+      label: "Monitoring",
+      items: [
         { id: "watchdog", label: "Watchdog" },
+        { id: "usage", label: "Usage" },
       ],
     },
     {
@@ -681,6 +690,8 @@ const App = () => {
     ? "providers"
     : location.startsWith("/watchdog")
     ? "watchdog"
+    : location.startsWith("/usage")
+    ? "usage"
     : location.startsWith("/envars")
     ? "envars"
     : location.startsWith("/webhooks")
@@ -695,6 +706,19 @@ const App = () => {
     });
   }, [location]);
 
+  useEffect(() => {
+    if (location.startsWith("/browse")) return;
+    setBrowsePreviewPath("");
+  }, [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;
@@ -707,10 +731,9 @@ const App = () => {
     const settings = readUiSettings();
     settings.sidebarWidthPx = sidebarWidthPx;
     settings[kBrowseLastPathUiSettingKey] = lastBrowsePath;
-    try {
-      window.localStorage.setItem(kUiSettingsStorageKey, JSON.stringify(settings));
-    } catch {}
-  }, [sidebarWidthPx, lastBrowsePath]);
+    settings[kLastMenuRouteUiSettingKey] = lastMenuRoute;
+    writeUiSettings(settings);
+  }, [sidebarWidthPx, lastBrowsePath, lastMenuRoute]);
 
   const resizeSidebarWithClientX = useCallback((clientX) => {
     const shellElement = appShellRef.current;
@@ -759,7 +782,7 @@ const App = () => {
     <div
       class="app-shell"
       ref=${appShellRef}
-      style=${{ gridTemplateColumns: `${sidebarWidthPx}px 0px minmax(0, 1fr)` }}
+      style=${{ "--sidebar-width": `${sidebarWidthPx}px` }}
     >
       <${GlobalRestartBanner}
         visible=${restartRequired}
@@ -780,6 +803,7 @@ const App = () => {
         onSelectNavItem=${handleSelectNavItem}
         selectedBrowsePath=${selectedBrowsePath}
         onSelectBrowseFile=${navigateToBrowseFile}
+        onPreviewBrowseFile=${setBrowsePreviewPath}
         acHasUpdate=${acHasUpdate}
         acLatest=${acLatest}
         acDismissed=${acDismissed}
@@ -824,7 +848,11 @@ const App = () => {
           ${isBrowseRoute
             ? html`
                 <${FileViewer}
-                  filePath=${selectedBrowsePath}
+                  filePath=${browsePreviewPath || selectedBrowsePath}
+                  isPreviewOnly=${Boolean(
+                    browsePreviewPath &&
+                      browsePreviewPath !== selectedBrowsePath,
+                  )}
                 />
               `
             : html`
@@ -867,6 +895,27 @@ const App = () => {
                       />
                     </div>
                   </${Route}>
+                  <${Route} path="/usage/:sessionId">
+                    ${(params) => html`
+                      <div class="pt-4">
+                        <${UsageTab}
+                          sessionId=${decodeURIComponent(params.sessionId || "")}
+                          onSelectSession=${(id) =>
+                            setLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
+                          onBackToSessions=${() => setLocation("/usage")}
+                        />
+                      </div>
+                    `}
+                  </${Route}>
+                  <${Route} path="/usage">
+                    <div class="pt-4">
+                      <${UsageTab}
+                        onSelectSession=${(id) =>
+                          setLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
+                        onBackToSessions=${() => setLocation("/usage")}
+                      />
+                    </div>
+                  </${Route}>
                   <${Route} path="/envars">
                     <div class="pt-4">
                       <${Envars} onRestartRequired=${setRestartRequired} />