openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/navigation.test.ts

@@ -0,0 +1,189 @@
+import { describe, expect, it } from "vitest";
+import {
+  TAB_GROUPS,
+  iconForTab,
+  inferBasePathFromPathname,
+  normalizeBasePath,
+  normalizePath,
+  pathForTab,
+  subtitleForTab,
+  tabFromPath,
+  titleForTab,
+  type Tab,
+} from "./navigation.ts";
+
+/** All valid tab identifiers derived from TAB_GROUPS */
+const ALL_TABS: Tab[] = TAB_GROUPS.flatMap((group) => group.tabs) as Tab[];
+
+describe("iconForTab", () => {
+  it("returns a non-empty string for every tab", () => {
+    for (const tab of ALL_TABS) {
+      const icon = iconForTab(tab);
+      expect(icon).toBeTruthy();
+      expect(typeof icon).toBe("string");
+      expect(icon.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("returns stable icons for known tabs", () => {
+    expect(iconForTab("chat")).toBe("messageSquare");
+    expect(iconForTab("overview")).toBe("barChart");
+    expect(iconForTab("channels")).toBe("link");
+    expect(iconForTab("instances")).toBe("radio");
+    expect(iconForTab("sessions")).toBe("fileText");
+    expect(iconForTab("cron")).toBe("loader");
+    expect(iconForTab("skills")).toBe("zap");
+    expect(iconForTab("nodes")).toBe("monitor");
+    expect(iconForTab("config")).toBe("settings");
+    expect(iconForTab("debug")).toBe("bug");
+    expect(iconForTab("logs")).toBe("scrollText");
+  });
+
+  it("returns a fallback icon for unknown tab", () => {
+    // TypeScript won't allow this normally, but runtime could receive unexpected values
+    const unknownTab = "unknown" as Tab;
+    expect(iconForTab(unknownTab)).toBe("folder");
+  });
+});
+
+describe("titleForTab", () => {
+  it("returns a non-empty string for every tab", () => {
+    for (const tab of ALL_TABS) {
+      const title = titleForTab(tab);
+      expect(title).toBeTruthy();
+      expect(typeof title).toBe("string");
+    }
+  });
+
+  it("returns expected titles", () => {
+    expect(titleForTab("chat")).toBe("Chat");
+    expect(titleForTab("overview")).toBe("Overview");
+    expect(titleForTab("cron")).toBe("Cron Jobs");
+  });
+});
+
+describe("subtitleForTab", () => {
+  it("returns a string for every tab", () => {
+    for (const tab of ALL_TABS) {
+      const subtitle = subtitleForTab(tab);
+      expect(typeof subtitle).toBe("string");
+    }
+  });
+
+  it("returns descriptive subtitles", () => {
+    expect(subtitleForTab("chat")).toContain("chat session");
+    expect(subtitleForTab("config")).toContain("openclaw.json");
+  });
+});
+
+describe("normalizeBasePath", () => {
+  it("returns empty string for falsy input", () => {
+    expect(normalizeBasePath("")).toBe("");
+  });
+
+  it("adds leading slash if missing", () => {
+    expect(normalizeBasePath("ui")).toBe("/ui");
+  });
+
+  it("removes trailing slash", () => {
+    expect(normalizeBasePath("/ui/")).toBe("/ui");
+  });
+
+  it("returns empty string for root path", () => {
+    expect(normalizeBasePath("/")).toBe("");
+  });
+
+  it("handles nested paths", () => {
+    expect(normalizeBasePath("/apps/openclaw")).toBe("/apps/openclaw");
+  });
+});
+
+describe("normalizePath", () => {
+  it("returns / for falsy input", () => {
+    expect(normalizePath("")).toBe("/");
+  });
+
+  it("adds leading slash if missing", () => {
+    expect(normalizePath("chat")).toBe("/chat");
+  });
+
+  it("removes trailing slash except for root", () => {
+    expect(normalizePath("/chat/")).toBe("/chat");
+    expect(normalizePath("/")).toBe("/");
+  });
+});
+
+describe("pathForTab", () => {
+  it("returns correct path without base", () => {
+    expect(pathForTab("chat")).toBe("/chat");
+    expect(pathForTab("overview")).toBe("/overview");
+  });
+
+  it("prepends base path", () => {
+    expect(pathForTab("chat", "/ui")).toBe("/ui/chat");
+    expect(pathForTab("sessions", "/apps/openclaw")).toBe("/apps/openclaw/sessions");
+  });
+});
+
+describe("tabFromPath", () => {
+  it("returns tab for valid path", () => {
+    expect(tabFromPath("/chat")).toBe("chat");
+    expect(tabFromPath("/overview")).toBe("overview");
+    expect(tabFromPath("/sessions")).toBe("sessions");
+  });
+
+  it("returns chat for root path", () => {
+    expect(tabFromPath("/")).toBe("chat");
+  });
+
+  it("handles base paths", () => {
+    expect(tabFromPath("/ui/chat", "/ui")).toBe("chat");
+    expect(tabFromPath("/apps/openclaw/sessions", "/apps/openclaw")).toBe("sessions");
+  });
+
+  it("returns null for unknown path", () => {
+    expect(tabFromPath("/unknown")).toBeNull();
+  });
+
+  it("is case-insensitive", () => {
+    expect(tabFromPath("/CHAT")).toBe("chat");
+    expect(tabFromPath("/Overview")).toBe("overview");
+  });
+});
+
+describe("inferBasePathFromPathname", () => {
+  it("returns empty string for root", () => {
+    expect(inferBasePathFromPathname("/")).toBe("");
+  });
+
+  it("returns empty string for direct tab path", () => {
+    expect(inferBasePathFromPathname("/chat")).toBe("");
+    expect(inferBasePathFromPathname("/overview")).toBe("");
+  });
+
+  it("infers base path from nested paths", () => {
+    expect(inferBasePathFromPathname("/ui/chat")).toBe("/ui");
+    expect(inferBasePathFromPathname("/apps/openclaw/sessions")).toBe("/apps/openclaw");
+  });
+
+  it("handles index.html suffix", () => {
+    expect(inferBasePathFromPathname("/index.html")).toBe("");
+    expect(inferBasePathFromPathname("/ui/index.html")).toBe("/ui");
+  });
+});
+
+describe("TAB_GROUPS", () => {
+  it("contains all expected groups", () => {
+    const labels = TAB_GROUPS.map((g) => g.label);
+    expect(labels).toContain("Chat");
+    expect(labels).toContain("Control");
+    expect(labels).toContain("Agent");
+    expect(labels).toContain("Settings");
+  });
+
+  it("all tabs are unique", () => {
+    const allTabs = TAB_GROUPS.flatMap((g) => g.tabs);
+    const uniqueTabs = new Set(allTabs);
+    expect(uniqueTabs.size).toBe(allTabs.length);
+  });
+});

package/ui/src/ui/navigation.ts

@@ -0,0 +1,165 @@
+import { t } from "../i18n/index.ts";
+import type { IconName } from "./icons.js";
+
+export const TAB_GROUPS = [
+  { label: "chat", tabs: ["chat"] },
+  {
+    label: "control",
+    tabs: ["overview", "channels", "instances", "sessions", "usage", "cron"],
+  },
+  { label: "agent", tabs: ["agents", "skills", "nodes"] },
+  { label: "settings", tabs: ["config", "debug", "logs"] },
+] as const;
+
+export type Tab =
+  | "agents"
+  | "overview"
+  | "channels"
+  | "instances"
+  | "sessions"
+  | "usage"
+  | "cron"
+  | "skills"
+  | "nodes"
+  | "chat"
+  | "config"
+  | "debug"
+  | "logs";
+
+const TAB_PATHS: Record<Tab, string> = {
+  agents: "/agents",
+  overview: "/overview",
+  channels: "/channels",
+  instances: "/instances",
+  sessions: "/sessions",
+  usage: "/usage",
+  cron: "/cron",
+  skills: "/skills",
+  nodes: "/nodes",
+  chat: "/chat",
+  config: "/config",
+  debug: "/debug",
+  logs: "/logs",
+};
+
+const PATH_TO_TAB = new Map(Object.entries(TAB_PATHS).map(([tab, path]) => [path, tab as Tab]));
+
+export function normalizeBasePath(basePath: string): string {
+  if (!basePath) {
+    return "";
+  }
+  let base = basePath.trim();
+  if (!base.startsWith("/")) {
+    base = `/${base}`;
+  }
+  if (base === "/") {
+    return "";
+  }
+  if (base.endsWith("/")) {
+    base = base.slice(0, -1);
+  }
+  return base;
+}
+
+export function normalizePath(path: string): string {
+  if (!path) {
+    return "/";
+  }
+  let normalized = path.trim();
+  if (!normalized.startsWith("/")) {
+    normalized = `/${normalized}`;
+  }
+  if (normalized.length > 1 && normalized.endsWith("/")) {
+    normalized = normalized.slice(0, -1);
+  }
+  return normalized;
+}
+
+export function pathForTab(tab: Tab, basePath = ""): string {
+  const base = normalizeBasePath(basePath);
+  const path = TAB_PATHS[tab];
+  return base ? `${base}${path}` : path;
+}
+
+export function tabFromPath(pathname: string, basePath = ""): Tab | null {
+  const base = normalizeBasePath(basePath);
+  let path = pathname || "/";
+  if (base) {
+    if (path === base) {
+      path = "/";
+    } else if (path.startsWith(`${base}/`)) {
+      path = path.slice(base.length);
+    }
+  }
+  let normalized = normalizePath(path).toLowerCase();
+  if (normalized.endsWith("/index.html")) {
+    normalized = "/";
+  }
+  if (normalized === "/") {
+    return "chat";
+  }
+  return PATH_TO_TAB.get(normalized) ?? null;
+}
+
+export function inferBasePathFromPathname(pathname: string): string {
+  let normalized = normalizePath(pathname);
+  if (normalized.endsWith("/index.html")) {
+    normalized = normalizePath(normalized.slice(0, -"/index.html".length));
+  }
+  if (normalized === "/") {
+    return "";
+  }
+  const segments = normalized.split("/").filter(Boolean);
+  if (segments.length === 0) {
+    return "";
+  }
+  for (let i = 0; i < segments.length; i++) {
+    const candidate = `/${segments.slice(i).join("/")}`.toLowerCase();
+    if (PATH_TO_TAB.has(candidate)) {
+      const prefix = segments.slice(0, i);
+      return prefix.length ? `/${prefix.join("/")}` : "";
+    }
+  }
+  return `/${segments.join("/")}`;
+}
+
+export function iconForTab(tab: Tab): IconName {
+  switch (tab) {
+    case "agents":
+      return "folder";
+    case "chat":
+      return "messageSquare";
+    case "overview":
+      return "barChart";
+    case "channels":
+      return "link";
+    case "instances":
+      return "radio";
+    case "sessions":
+      return "fileText";
+    case "usage":
+      return "barChart";
+    case "cron":
+      return "loader";
+    case "skills":
+      return "zap";
+    case "nodes":
+      return "monitor";
+    case "config":
+      return "settings";
+    case "debug":
+      return "bug";
+    case "logs":
+      return "scrollText";
+    default:
+      return "folder";
+  }
+}
+
+export function titleForTab(tab: Tab) {
+  return t(`tabs.${tab}`);
+}
+
+export function subtitleForTab(tab: Tab) {
+  return t(`subtitles.${tab}`);
+}

package/ui/src/ui/open-external-url.test.ts

@@ -0,0 +1,108 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { openExternalUrlSafe, resolveSafeExternalUrl } from "./open-external-url.ts";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("resolveSafeExternalUrl", () => {
+  const baseHref = "https://openclaw.ai/chat";
+
+  it("allows absolute https URLs", () => {
+    expect(resolveSafeExternalUrl("https://example.com/a.png?x=1#y", baseHref)).toBe(
+      "https://example.com/a.png?x=1#y",
+    );
+  });
+
+  it("allows relative URLs resolved against the current origin", () => {
+    expect(resolveSafeExternalUrl("/assets/pic.png", baseHref)).toBe(
+      "https://openclaw.ai/assets/pic.png",
+    );
+  });
+
+  it("allows blob URLs", () => {
+    expect(resolveSafeExternalUrl("blob:https://openclaw.ai/abc-123", baseHref)).toBe(
+      "blob:https://openclaw.ai/abc-123",
+    );
+  });
+
+  it("allows data image URLs when enabled", () => {
+    expect(
+      resolveSafeExternalUrl("data:image/png;base64,iVBORw0KGgo=", baseHref, {
+        allowDataImage: true,
+      }),
+    ).toBe("data:image/png;base64,iVBORw0KGgo=");
+  });
+
+  it("rejects non-image data URLs", () => {
+    expect(
+      resolveSafeExternalUrl("data:text/html,<script>alert(1)</script>", baseHref, {
+        allowDataImage: true,
+      }),
+    ).toBeNull();
+  });
+
+  it("rejects SVG data image URLs", () => {
+    expect(
+      resolveSafeExternalUrl(
+        "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' />",
+        baseHref,
+        {
+          allowDataImage: true,
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it("rejects base64-encoded SVG data image URLs", () => {
+    expect(
+      resolveSafeExternalUrl(
+        "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIC8+",
+        baseHref,
+        {
+          allowDataImage: true,
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it("rejects data image URLs unless explicitly enabled", () => {
+    expect(resolveSafeExternalUrl("data:image/png;base64,iVBORw0KGgo=", baseHref)).toBeNull();
+  });
+
+  it("rejects javascript URLs", () => {
+    expect(resolveSafeExternalUrl("javascript:alert(1)", baseHref)).toBeNull();
+  });
+
+  it("rejects file URLs", () => {
+    expect(resolveSafeExternalUrl("file:///tmp/x.png", baseHref)).toBeNull();
+  });
+
+  it("rejects empty values", () => {
+    expect(resolveSafeExternalUrl("   ", baseHref)).toBeNull();
+  });
+});
+
+describe("openExternalUrlSafe", () => {
+  it("nulls opener when window.open returns a proxy-like object", () => {
+    const openedLikeProxy = {
+      opener: { postMessage: () => void 0 },
+    } as unknown as WindowProxy;
+    const openMock = vi.fn(() => openedLikeProxy);
+    vi.stubGlobal("window", {
+      location: { href: "https://openclaw.ai/chat" },
+      open: openMock,
+    } as unknown as Window & typeof globalThis);
+
+    const opened = openExternalUrlSafe("https://example.com/safe.png");
+
+    expect(openMock).toHaveBeenCalledWith(
+      "https://example.com/safe.png",
+      "_blank",
+      "noopener,noreferrer",
+    );
+    expect(opened).toBe(openedLikeProxy);
+    expect(openedLikeProxy.opener).toBeNull();
+  });
+});

package/ui/src/ui/open-external-url.ts

@@ -0,0 +1,73 @@
+const DATA_URL_PREFIX = "data:";
+const ALLOWED_EXTERNAL_PROTOCOLS = new Set(["http:", "https:", "blob:"]);
+const BLOCKED_DATA_IMAGE_MIME_TYPES = new Set(["image/svg+xml"]);
+
+function isAllowedDataImageUrl(url: string): boolean {
+  if (!url.toLowerCase().startsWith(DATA_URL_PREFIX)) {
+    return false;
+  }
+
+  const commaIndex = url.indexOf(",");
+  if (commaIndex < DATA_URL_PREFIX.length) {
+    return false;
+  }
+
+  const metadata = url.slice(DATA_URL_PREFIX.length, commaIndex);
+  const mimeType = metadata.split(";")[0]?.trim().toLowerCase() ?? "";
+  if (!mimeType.startsWith("image/")) {
+    return false;
+  }
+
+  return !BLOCKED_DATA_IMAGE_MIME_TYPES.has(mimeType);
+}
+
+export type ResolveSafeExternalUrlOptions = {
+  allowDataImage?: boolean;
+};
+
+export function resolveSafeExternalUrl(
+  rawUrl: string,
+  baseHref: string,
+  opts: ResolveSafeExternalUrlOptions = {},
+): string | null {
+  const candidate = rawUrl.trim();
+  if (!candidate) {
+    return null;
+  }
+
+  if (opts.allowDataImage === true && isAllowedDataImageUrl(candidate)) {
+    return candidate;
+  }
+
+  if (candidate.toLowerCase().startsWith(DATA_URL_PREFIX)) {
+    return null;
+  }
+
+  try {
+    const parsed = new URL(candidate, baseHref);
+    return ALLOWED_EXTERNAL_PROTOCOLS.has(parsed.protocol.toLowerCase()) ? parsed.toString() : null;
+  } catch {
+    return null;
+  }
+}
+
+export type OpenExternalUrlSafeOptions = ResolveSafeExternalUrlOptions & {
+  baseHref?: string;
+};
+
+export function openExternalUrlSafe(
+  rawUrl: string,
+  opts: OpenExternalUrlSafeOptions = {},
+): WindowProxy | null {
+  const baseHref = opts.baseHref ?? window.location.href;
+  const safeUrl = resolveSafeExternalUrl(rawUrl, baseHref, opts);
+  if (!safeUrl) {
+    return null;
+  }
+
+  const opened = window.open(safeUrl, "_blank", "noopener,noreferrer");
+  if (opened) {
+    opened.opener = null;
+  }
+  return opened;
+}

package/ui/src/ui/presenter.ts

@@ -0,0 +1,85 @@
+import { formatRelativeTimestamp, formatDurationHuman, formatMs } from "./format.ts";
+import type { CronJob, GatewaySessionRow, PresenceEntry } from "./types.ts";
+
+export function formatPresenceSummary(entry: PresenceEntry): string {
+  const host = entry.host ?? "unknown";
+  const ip = entry.ip ? `(${entry.ip})` : "";
+  const mode = entry.mode ?? "";
+  const version = entry.version ?? "";
+  return `${host} ${ip} ${mode} ${version}`.trim();
+}
+
+export function formatPresenceAge(entry: PresenceEntry): string {
+  const ts = entry.ts ?? null;
+  return ts ? formatRelativeTimestamp(ts) : "n/a";
+}
+
+export function formatNextRun(ms?: number | null) {
+  if (!ms) {
+    return "n/a";
+  }
+  const weekday = new Date(ms).toLocaleDateString(undefined, { weekday: "short" });
+  return `${weekday}, ${formatMs(ms)} (${formatRelativeTimestamp(ms)})`;
+}
+
+export function formatSessionTokens(row: GatewaySessionRow) {
+  if (row.totalTokens == null) {
+    return "n/a";
+  }
+  const total = row.totalTokens ?? 0;
+  const ctx = row.contextTokens ?? 0;
+  return ctx ? `${total} / ${ctx}` : String(total);
+}
+
+export function formatEventPayload(payload: unknown): string {
+  if (payload == null) {
+    return "";
+  }
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    // oxlint-disable typescript/no-base-to-string
+    return String(payload);
+  }
+}
+
+export function formatCronState(job: CronJob) {
+  const state = job.state ?? {};
+  const next = state.nextRunAtMs ? formatMs(state.nextRunAtMs) : "n/a";
+  const last = state.lastRunAtMs ? formatMs(state.lastRunAtMs) : "n/a";
+  const status = state.lastStatus ?? "n/a";
+  return `${status} · next ${next} · last ${last}`;
+}
+
+export function formatCronSchedule(job: CronJob) {
+  const s = job.schedule;
+  if (s.kind === "at") {
+    const atMs = Date.parse(s.at);
+    return Number.isFinite(atMs) ? `At ${formatMs(atMs)}` : `At ${s.at}`;
+  }
+  if (s.kind === "every") {
+    return `Every ${formatDurationHuman(s.everyMs)}`;
+  }
+  return `Cron ${s.expr}${s.tz ? ` (${s.tz})` : ""}`;
+}
+
+export function formatCronPayload(job: CronJob) {
+  const p = job.payload;
+  if (p.kind === "systemEvent") {
+    return `System: ${p.text}`;
+  }
+  const base = `Agent: ${p.message}`;
+  const delivery = job.delivery;
+  if (delivery && delivery.mode !== "none") {
+    const target =
+      delivery.mode === "webhook"
+        ? delivery.to
+          ? ` (${delivery.to})`
+          : ""
+        : delivery.channel || delivery.to
+          ? ` (${delivery.channel ?? "last"}${delivery.to ? ` -> ${delivery.to}` : ""})`
+          : "";
+    return `${base} · ${delivery.mode}${target}`;
+  }
+  return base;
+}

package/ui/src/ui/storage.node.test.ts

@@ -0,0 +1,63 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+function createStorageMock(): Storage {
+  const store = new Map<string, string>();
+  return {
+    get length() {
+      return store.size;
+    },
+    clear() {
+      store.clear();
+    },
+    getItem(key: string) {
+      return store.get(key) ?? null;
+    },
+    key(index: number) {
+      return Array.from(store.keys())[index] ?? null;
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+    setItem(key: string, value: string) {
+      store.set(key, String(value));
+    },
+  };
+}
+
+describe("loadSettings default gateway URL derivation", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.stubGlobal("localStorage", createStorageMock());
+    vi.stubGlobal("navigator", { language: "en-US" } as Navigator);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses configured base path and normalizes trailing slash", async () => {
+    vi.stubGlobal("location", {
+      protocol: "https:",
+      host: "gateway.example:8443",
+      pathname: "/ignored/path",
+    } as Location);
+    vi.stubGlobal("window", { __OPENCLAW_CONTROL_UI_BASE_PATH__: " /openclaw/ " } as Window &
+      typeof globalThis);
+
+    const { loadSettings } = await import("./storage.ts");
+    expect(loadSettings().gatewayUrl).toBe("wss://gateway.example:8443/openclaw");
+  });
+
+  it("infers base path from nested pathname when configured base path is not set", async () => {
+    vi.stubGlobal("location", {
+      protocol: "http:",
+      host: "gateway.example:18789",
+      pathname: "/apps/openclaw/chat",
+    } as Location);
+    vi.stubGlobal("window", {} as Window & typeof globalThis);
+
+    const { loadSettings } = await import("./storage.ts");
+    expect(loadSettings().gatewayUrl).toBe("ws://gateway.example:18789/apps/openclaw");
+  });
+});