openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/storage.ts

@@ -0,0 +1,99 @@
+const KEY = "openclaw.control.settings.v1";
+
+import { isSupportedLocale } from "../i18n/index.ts";
+import { inferBasePathFromPathname, normalizeBasePath } from "./navigation.ts";
+import type { ThemeMode } from "./theme.ts";
+
+export type UiSettings = {
+  gatewayUrl: string;
+  token: string;
+  sessionKey: string;
+  lastActiveSessionKey: string;
+  theme: ThemeMode;
+  chatFocusMode: boolean;
+  chatShowThinking: boolean;
+  splitRatio: number; // Sidebar split ratio (0.4 to 0.7, default 0.6)
+  navCollapsed: boolean; // Collapsible sidebar state
+  navGroupsCollapsed: Record<string, boolean>; // Which nav groups are collapsed
+  locale?: string;
+};
+
+export function loadSettings(): UiSettings {
+  const defaultUrl = (() => {
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    const configured =
+      typeof window !== "undefined" &&
+      typeof window.__OPENCLAW_CONTROL_UI_BASE_PATH__ === "string" &&
+      window.__OPENCLAW_CONTROL_UI_BASE_PATH__.trim();
+    const basePath = configured
+      ? normalizeBasePath(configured)
+      : inferBasePathFromPathname(location.pathname);
+    return `${proto}://${location.host}${basePath}`;
+  })();
+
+  const defaults: UiSettings = {
+    gatewayUrl: defaultUrl,
+    token: "",
+    sessionKey: "main",
+    lastActiveSessionKey: "main",
+    theme: "system",
+    chatFocusMode: false,
+    chatShowThinking: true,
+    splitRatio: 0.6,
+    navCollapsed: false,
+    navGroupsCollapsed: {},
+  };
+
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) {
+      return defaults;
+    }
+    const parsed = JSON.parse(raw) as Partial<UiSettings>;
+    return {
+      gatewayUrl:
+        typeof parsed.gatewayUrl === "string" && parsed.gatewayUrl.trim()
+          ? parsed.gatewayUrl.trim()
+          : defaults.gatewayUrl,
+      token: typeof parsed.token === "string" ? parsed.token : defaults.token,
+      sessionKey:
+        typeof parsed.sessionKey === "string" && parsed.sessionKey.trim()
+          ? parsed.sessionKey.trim()
+          : defaults.sessionKey,
+      lastActiveSessionKey:
+        typeof parsed.lastActiveSessionKey === "string" && parsed.lastActiveSessionKey.trim()
+          ? parsed.lastActiveSessionKey.trim()
+          : (typeof parsed.sessionKey === "string" && parsed.sessionKey.trim()) ||
+            defaults.lastActiveSessionKey,
+      theme:
+        parsed.theme === "light" || parsed.theme === "dark" || parsed.theme === "system"
+          ? parsed.theme
+          : defaults.theme,
+      chatFocusMode:
+        typeof parsed.chatFocusMode === "boolean" ? parsed.chatFocusMode : defaults.chatFocusMode,
+      chatShowThinking:
+        typeof parsed.chatShowThinking === "boolean"
+          ? parsed.chatShowThinking
+          : defaults.chatShowThinking,
+      splitRatio:
+        typeof parsed.splitRatio === "number" &&
+        parsed.splitRatio >= 0.4 &&
+        parsed.splitRatio <= 0.7
+          ? parsed.splitRatio
+          : defaults.splitRatio,
+      navCollapsed:
+        typeof parsed.navCollapsed === "boolean" ? parsed.navCollapsed : defaults.navCollapsed,
+      navGroupsCollapsed:
+        typeof parsed.navGroupsCollapsed === "object" && parsed.navGroupsCollapsed !== null
+          ? parsed.navGroupsCollapsed
+          : defaults.navGroupsCollapsed,
+      locale: isSupportedLocale(parsed.locale) ? parsed.locale : undefined,
+    };
+  } catch {
+    return defaults;
+  }
+}
+
+export function saveSettings(next: UiSettings) {
+  localStorage.setItem(KEY, JSON.stringify(next));
+}

package/ui/src/ui/test-helpers/app-mount.ts

@@ -0,0 +1,27 @@
+import { afterEach, beforeEach } from "vitest";
+import "../app.ts";
+import type { OpenClawApp } from "../app.ts";
+
+export function mountApp(pathname: string) {
+  window.history.replaceState({}, "", pathname);
+  const app = document.createElement("openclaw-app") as OpenClawApp;
+  app.connect = () => {
+    // no-op: avoid real gateway WS connections in browser tests
+  };
+  document.body.append(app);
+  return app;
+}
+
+export function registerAppMountHooks() {
+  beforeEach(() => {
+    window.__OPENCLAW_CONTROL_UI_BASE_PATH__ = undefined;
+    localStorage.clear();
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    window.__OPENCLAW_CONTROL_UI_BASE_PATH__ = undefined;
+    localStorage.clear();
+    document.body.innerHTML = "";
+  });
+}

package/ui/src/ui/text-direction.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { detectTextDirection } from "./text-direction.ts";
+
+describe("detectTextDirection", () => {
+  it("returns ltr for null and empty input", () => {
+    expect(detectTextDirection(null)).toBe("ltr");
+    expect(detectTextDirection("")).toBe("ltr");
+  });
+
+  it("detects rtl when first significant char is rtl script", () => {
+    expect(detectTextDirection("שלום עולם")).toBe("rtl");
+    expect(detectTextDirection("مرحبا")).toBe("rtl");
+  });
+
+  it("detects ltr when first significant char is ltr", () => {
+    expect(detectTextDirection("Hello world")).toBe("ltr");
+  });
+
+  it("skips punctuation and markdown prefix characters before detection", () => {
+    expect(detectTextDirection("**שלום")).toBe("rtl");
+    expect(detectTextDirection("# مرحبا")).toBe("rtl");
+    expect(detectTextDirection("- hello")).toBe("ltr");
+  });
+});

package/ui/src/ui/text-direction.ts

@@ -0,0 +1,30 @@
+/**
+ * RTL (Right-to-Left) text direction detection.
+ * Detects Hebrew, Arabic, Syriac, Thaana, Nko, Samaritan, Mandaic, Adlam,
+ * Phoenician, and Lydian scripts using Unicode Script Properties.
+ */
+
+const RTL_CHAR_REGEX =
+  /\p{Script=Hebrew}|\p{Script=Arabic}|\p{Script=Syriac}|\p{Script=Thaana}|\p{Script=Nko}|\p{Script=Samaritan}|\p{Script=Mandaic}|\p{Script=Adlam}|\p{Script=Phoenician}|\p{Script=Lydian}/u;
+
+/**
+ * Detect text direction from the first significant character.
+ * @param text - The text to check
+ * @param skipPattern - Characters to skip when looking for the first significant char.
+ *   Defaults to whitespace and Unicode punctuation/symbols.
+ */
+export function detectTextDirection(
+  text: string | null,
+  skipPattern: RegExp = /[\s\p{P}\p{S}]/u,
+): "rtl" | "ltr" {
+  if (!text) {
+    return "ltr";
+  }
+  for (const char of text) {
+    if (skipPattern.test(char)) {
+      continue;
+    }
+    return RTL_CHAR_REGEX.test(char) ? "rtl" : "ltr";
+  }
+  return "ltr";
+}

package/ui/src/ui/theme-transition.ts

@@ -0,0 +1,109 @@
+import type { ThemeMode } from "./theme.ts";
+
+export type ThemeTransitionContext = {
+  element?: HTMLElement | null;
+  pointerClientX?: number;
+  pointerClientY?: number;
+};
+
+export type ThemeTransitionOptions = {
+  nextTheme: ThemeMode;
+  applyTheme: () => void;
+  context?: ThemeTransitionContext;
+  currentTheme?: ThemeMode | null;
+};
+
+type DocumentWithViewTransition = Document & {
+  startViewTransition?: (callback: () => void) => { finished: Promise<void> };
+};
+
+const clamp01 = (value: number) => {
+  if (Number.isNaN(value)) {
+    return 0.5;
+  }
+  if (value <= 0) {
+    return 0;
+  }
+  if (value >= 1) {
+    return 1;
+  }
+  return value;
+};
+
+const hasReducedMotionPreference = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches ?? false;
+};
+
+const cleanupThemeTransition = (root: HTMLElement) => {
+  root.classList.remove("theme-transition");
+  root.style.removeProperty("--theme-switch-x");
+  root.style.removeProperty("--theme-switch-y");
+};
+
+export const startThemeTransition = ({
+  nextTheme,
+  applyTheme,
+  context,
+  currentTheme,
+}: ThemeTransitionOptions) => {
+  if (currentTheme === nextTheme) {
+    return;
+  }
+
+  const documentReference = globalThis.document ?? null;
+  if (!documentReference) {
+    applyTheme();
+    return;
+  }
+
+  const root = documentReference.documentElement;
+  const document_ = documentReference as DocumentWithViewTransition;
+  const prefersReducedMotion = hasReducedMotionPreference();
+
+  const canUseViewTransition = Boolean(document_.startViewTransition) && !prefersReducedMotion;
+
+  if (canUseViewTransition) {
+    let xPercent = 0.5;
+    let yPercent = 0.5;
+
+    if (
+      context?.pointerClientX !== undefined &&
+      context?.pointerClientY !== undefined &&
+      typeof window !== "undefined"
+    ) {
+      xPercent = clamp01(context.pointerClientX / window.innerWidth);
+      yPercent = clamp01(context.pointerClientY / window.innerHeight);
+    } else if (context?.element) {
+      const rect = context.element.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0 && typeof window !== "undefined") {
+        xPercent = clamp01((rect.left + rect.width / 2) / window.innerWidth);
+        yPercent = clamp01((rect.top + rect.height / 2) / window.innerHeight);
+      }
+    }
+
+    root.style.setProperty("--theme-switch-x", `${xPercent * 100}%`);
+    root.style.setProperty("--theme-switch-y", `${yPercent * 100}%`);
+    root.classList.add("theme-transition");
+
+    try {
+      const transition = document_.startViewTransition?.(() => {
+        applyTheme();
+      });
+      if (transition?.finished) {
+        void transition.finished.finally(() => cleanupThemeTransition(root));
+      } else {
+        cleanupThemeTransition(root);
+      }
+    } catch {
+      cleanupThemeTransition(root);
+      applyTheme();
+    }
+    return;
+  }
+
+  applyTheme();
+  cleanupThemeTransition(root);
+};

package/ui/src/ui/theme.ts

@@ -0,0 +1,16 @@
+export type ThemeMode = "system" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
+
+export function getSystemTheme(): ResolvedTheme {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "dark";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function resolveTheme(mode: ThemeMode): ResolvedTheme {
+  if (mode === "system") {
+    return getSystemTheme();
+  }
+  return mode;
+}

package/ui/src/ui/tool-display.ts

@@ -0,0 +1,159 @@
+import SHARED_TOOL_DISPLAY_JSON from "../../../apps/shared/OpenClawKit/Sources/OpenClawKit/Resources/tool-display.json" with { type: "json" };
+import {
+  defaultTitle,
+  formatToolDetailText,
+  normalizeToolName,
+  resolveToolVerbAndDetailForArgs,
+  type ToolDisplaySpec as ToolDisplaySpecBase,
+} from "../../../src/agents/tool-display-common.js";
+import type { IconName } from "./icons.ts";
+
+type ToolDisplaySpec = ToolDisplaySpecBase & {
+  icon?: string;
+};
+
+type SharedToolDisplaySpec = ToolDisplaySpecBase & {
+  emoji?: string;
+};
+
+type SharedToolDisplayConfig = {
+  version?: number;
+  fallback?: SharedToolDisplaySpec;
+  tools?: Record<string, SharedToolDisplaySpec>;
+};
+
+export type ToolDisplay = {
+  name: string;
+  icon: IconName;
+  title: string;
+  label: string;
+  verb?: string;
+  detail?: string;
+};
+
+const EMOJI_ICON_MAP: Record<string, IconName> = {
+  "🧩": "puzzle",
+  "🛠️": "wrench",
+  "🧰": "wrench",
+  "📖": "fileText",
+  "✍️": "edit",
+  "📝": "penLine",
+  "📎": "paperclip",
+  "🌐": "globe",
+  "📺": "monitor",
+  "🧾": "fileText",
+  "🔐": "settings",
+  "💻": "monitor",
+  "🔌": "plug",
+  "💬": "messageSquare",
+};
+
+const SLACK_SPEC: ToolDisplaySpec = {
+  icon: "messageSquare",
+  title: "Slack",
+  actions: {
+    react: { label: "react", detailKeys: ["channelId", "messageId", "emoji"] },
+    reactions: { label: "reactions", detailKeys: ["channelId", "messageId"] },
+    sendMessage: { label: "send", detailKeys: ["to", "content"] },
+    editMessage: { label: "edit", detailKeys: ["channelId", "messageId"] },
+    deleteMessage: { label: "delete", detailKeys: ["channelId", "messageId"] },
+    readMessages: { label: "read messages", detailKeys: ["channelId", "limit"] },
+    pinMessage: { label: "pin", detailKeys: ["channelId", "messageId"] },
+    unpinMessage: { label: "unpin", detailKeys: ["channelId", "messageId"] },
+    listPins: { label: "list pins", detailKeys: ["channelId"] },
+    memberInfo: { label: "member", detailKeys: ["userId"] },
+    emojiList: { label: "emoji list" },
+  },
+};
+
+function iconForEmoji(emoji?: string): IconName {
+  if (!emoji) {
+    return "puzzle";
+  }
+  return EMOJI_ICON_MAP[emoji] ?? "puzzle";
+}
+
+function convertSpec(spec?: SharedToolDisplaySpec): ToolDisplaySpec {
+  return {
+    icon: iconForEmoji(spec?.emoji),
+    title: spec?.title,
+    label: spec?.label,
+    detailKeys: spec?.detailKeys,
+    actions: spec?.actions,
+  };
+}
+
+const SHARED_TOOL_DISPLAY_CONFIG = SHARED_TOOL_DISPLAY_JSON as SharedToolDisplayConfig;
+const FALLBACK = convertSpec(SHARED_TOOL_DISPLAY_CONFIG.fallback ?? { emoji: "🧩" });
+const TOOL_MAP: Record<string, ToolDisplaySpec> = Object.fromEntries(
+  Object.entries(SHARED_TOOL_DISPLAY_CONFIG.tools ?? {}).map(([key, spec]) => [
+    key,
+    convertSpec(spec),
+  ]),
+);
+TOOL_MAP.slack = SLACK_SPEC;
+
+function shortenHomeInString(input: string): string {
+  if (!input) {
+    return input;
+  }
+
+  // Browser-safe home shortening: avoid importing Node-only helpers (keeps Vite builds working in Docker/CI).
+  const patterns = [
+    { re: /^\/Users\/[^/]+(\/|$)/, replacement: "~$1" }, // macOS
+    { re: /^\/home\/[^/]+(\/|$)/, replacement: "~$1" }, // Linux
+    { re: /^C:\\Users\\[^\\]+(\\|$)/i, replacement: "~$1" }, // Windows
+  ] as const;
+
+  for (const pattern of patterns) {
+    if (pattern.re.test(input)) {
+      return input.replace(pattern.re, pattern.replacement);
+    }
+  }
+
+  return input;
+}
+
+export function resolveToolDisplay(params: {
+  name?: string;
+  args?: unknown;
+  meta?: string;
+}): ToolDisplay {
+  const name = normalizeToolName(params.name);
+  const key = name.toLowerCase();
+  const spec = TOOL_MAP[key];
+  const icon = (spec?.icon ?? FALLBACK.icon ?? "puzzle") as IconName;
+  const title = spec?.title ?? defaultTitle(name);
+  const label = spec?.label ?? title;
+  let { verb, detail } = resolveToolVerbAndDetailForArgs({
+    toolKey: key,
+    args: params.args,
+    meta: params.meta,
+    spec,
+    fallbackDetailKeys: FALLBACK.detailKeys,
+    detailMode: "first",
+    detailCoerce: { includeFalse: true, includeZero: true },
+  });
+
+  if (detail) {
+    detail = shortenHomeInString(detail);
+  }
+
+  return {
+    name,
+    icon,
+    title,
+    label,
+    verb,
+    detail,
+  };
+}
+
+export function formatToolDetail(display: ToolDisplay): string | undefined {
+  return formatToolDetailText(display.detail, { prefixWithWith: true });
+}
+
+export function formatToolSummary(display: ToolDisplay): string {
+  const detail = formatToolDetail(display);
+  return detail ? `${display.label}: ${detail}` : display.label;
+}

package/ui/src/ui/types/chat-types.ts

@@ -0,0 +1,44 @@
+/**
+ * Chat message types for the UI layer.
+ */
+
+/** Union type for items in the chat thread */
+export type ChatItem =
+  | { kind: "message"; key: string; message: unknown }
+  | { kind: "divider"; key: string; label: string; timestamp: number }
+  | { kind: "stream"; key: string; text: string; startedAt: number }
+  | { kind: "reading-indicator"; key: string };
+
+/** A group of consecutive messages from the same role (Slack-style layout) */
+export type MessageGroup = {
+  kind: "group";
+  key: string;
+  role: string;
+  messages: Array<{ message: unknown; key: string }>;
+  timestamp: number;
+  isStreaming: boolean;
+};
+
+/** Content item types in a normalized message */
+export type MessageContentItem = {
+  type: "text" | "tool_call" | "tool_result";
+  text?: string;
+  name?: string;
+  args?: unknown;
+};
+
+/** Normalized message structure for rendering */
+export type NormalizedMessage = {
+  role: string;
+  content: MessageContentItem[];
+  timestamp: number;
+  id?: string;
+};
+
+/** Tool card representation for tool calls and results */
+export type ToolCard = {
+  kind: "call" | "result";
+  name: string;
+  args?: unknown;
+  text?: string;
+};