openclaw-multi-auto 1.3.7 → 1.3.9

package/ui/src/ui/chat-markdown.browser.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { mountApp, registerAppMountHooks } from "./test-helpers/app-mount.ts";
+
+registerAppMountHooks();
+
+describe("chat markdown rendering", () => {
+  it("renders markdown inside tool output sidebar", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    const timestamp = Date.now();
+    app.chatMessages = [
+      {
+        role: "assistant",
+        content: [
+          { type: "toolcall", name: "noop", arguments: {} },
+          { type: "toolresult", name: "noop", text: "Hello **world**" },
+        ],
+        timestamp,
+      },
+    ];
+
+    await app.updateComplete;
+
+    const toolCards = Array.from(app.querySelectorAll<HTMLElement>(".chat-tool-card"));
+    const toolCard = toolCards.find((card) =>
+      card.querySelector(".chat-tool-card__preview, .chat-tool-card__inline"),
+    );
+    expect(toolCard).not.toBeUndefined();
+    toolCard?.click();
+
+    await app.updateComplete;
+
+    const strong = app.querySelector(".sidebar-markdown strong");
+    expect(strong?.textContent).toBe("world");
+  });
+});

package/ui/src/ui/components/resizable-divider.ts

@@ -0,0 +1,110 @@
+import { LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+/**
+ * A draggable divider for resizable split views.
+ * Dispatches 'resize' events with { splitRatio: number } detail.
+ */
+@customElement("resizable-divider")
+export class ResizableDivider extends LitElement {
+  @property({ type: Number }) splitRatio = 0.6;
+  @property({ type: Number }) minRatio = 0.4;
+  @property({ type: Number }) maxRatio = 0.7;
+
+  private isDragging = false;
+  private startX = 0;
+  private startRatio = 0;
+
+  static styles = css`
+    :host {
+      width: 4px;
+      cursor: col-resize;
+      background: var(--border, #333);
+      transition: background 150ms ease-out;
+      flex-shrink: 0;
+      position: relative;
+    }
+    :host::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -4px;
+      right: -4px;
+      bottom: 0;
+    }
+    :host(:hover) {
+      background: var(--accent, #007bff);
+    }
+    :host(.dragging) {
+      background: var(--accent, #007bff);
+    }
+  `;
+
+  render() {
+    return nothing;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousedown", this.handleMouseDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mousedown", this.handleMouseDown);
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+  }
+
+  private handleMouseDown = (e: MouseEvent) => {
+    this.isDragging = true;
+    this.startX = e.clientX;
+    this.startRatio = this.splitRatio;
+    this.classList.add("dragging");
+
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+
+    e.preventDefault();
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (!this.isDragging) {
+      return;
+    }
+
+    const container = this.parentElement;
+    if (!container) {
+      return;
+    }
+
+    const containerWidth = container.getBoundingClientRect().width;
+    const deltaX = e.clientX - this.startX;
+    const deltaRatio = deltaX / containerWidth;
+
+    let newRatio = this.startRatio + deltaRatio;
+    newRatio = Math.max(this.minRatio, Math.min(this.maxRatio, newRatio));
+
+    this.dispatchEvent(
+      new CustomEvent("resize", {
+        detail: { splitRatio: newRatio },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private handleMouseUp = () => {
+    this.isDragging = false;
+    this.classList.remove("dragging");
+
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "resizable-divider": ResizableDivider;
+  }
+}

package/ui/src/ui/config-form.browser.test.ts

@@ -0,0 +1,443 @@
+import { render } from "lit";
+import { describe, expect, it, vi } from "vitest";
+import { analyzeConfigSchema, renderConfigForm } from "./views/config-form.ts";
+
+const rootSchema = {
+  type: "object",
+  properties: {
+    gateway: {
+      type: "object",
+      properties: {
+        auth: {
+          type: "object",
+          properties: {
+            token: { type: "string" },
+          },
+        },
+      },
+    },
+    allowFrom: {
+      type: "array",
+      items: { type: "string" },
+    },
+    mode: {
+      type: "string",
+      enum: ["off", "token"],
+    },
+    enabled: {
+      type: "boolean",
+    },
+    bind: {
+      anyOf: [{ const: "auto" }, { const: "lan" }, { const: "tailnet" }, { const: "loopback" }],
+    },
+  },
+};
+
+describe("config form renderer", () => {
+  it("renders inputs and patches values", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { label: "Gateway Token", sensitive: true },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        onPatch,
+      }),
+      container,
+    );
+
+    const tokenInput: HTMLInputElement | null = container.querySelector("input[type='password']");
+    expect(tokenInput).not.toBeNull();
+    if (!tokenInput) {
+      return;
+    }
+    tokenInput.value = "abc123";
+    tokenInput.dispatchEvent(new Event("input", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["gateway", "auth", "token"], "abc123");
+
+    const tokenButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(".cfg-segmented__btn"),
+    ).find((btn) => btn.textContent?.trim() === "token");
+    expect(tokenButton).not.toBeUndefined();
+    tokenButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["mode"], "token");
+
+    const checkbox: HTMLInputElement | null = container.querySelector("input[type='checkbox']");
+    expect(checkbox).not.toBeNull();
+    if (!checkbox) {
+      return;
+    }
+    checkbox.checked = true;
+    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["enabled"], true);
+  });
+
+  it("adds and removes array entries", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {},
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: { allowFrom: ["+1"] },
+        onPatch,
+      }),
+      container,
+    );
+
+    const addButton = container.querySelector(".cfg-array__add");
+    expect(addButton).not.toBeUndefined();
+    addButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["allowFrom"], ["+1", ""]);
+
+    const removeButton = container.querySelector(".cfg-array__item-remove");
+    expect(removeButton).not.toBeUndefined();
+    removeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["allowFrom"], []);
+  });
+
+  it("renders union literals as select options", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {},
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: { bind: "auto" },
+        onPatch,
+      }),
+      container,
+    );
+
+    const tailnetButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(".cfg-segmented__btn"),
+    ).find((btn) => btn.textContent?.trim() === "tailnet");
+    expect(tailnetButton).not.toBeUndefined();
+    tailnetButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["bind"], "tailnet");
+  });
+
+  it("renders map fields from additionalProperties", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const schema = {
+      type: "object",
+      properties: {
+        slack: {
+          type: "object",
+          additionalProperties: {
+            type: "string",
+          },
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {},
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: { slack: { channelA: "ok" } },
+        onPatch,
+      }),
+      container,
+    );
+
+    const removeButton = container.querySelector(".cfg-map__item-remove");
+    expect(removeButton).not.toBeUndefined();
+    removeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["slack"], {});
+  });
+
+  it("supports wildcard uiHints for map entries", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const schema = {
+      type: "object",
+      properties: {
+        plugins: {
+          type: "object",
+          properties: {
+            entries: {
+              type: "object",
+              additionalProperties: {
+                type: "object",
+                properties: {
+                  enabled: { type: "boolean" },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "plugins.entries.*.enabled": { label: "Plugin Enabled" },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: { plugins: { entries: { "voice-call": { enabled: true } } } },
+        onPatch,
+      }),
+      container,
+    );
+
+    expect(container.textContent).toContain("Plugin Enabled");
+  });
+
+  it("renders tags from uiHints metadata", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { tags: ["security", "secret"] },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        onPatch,
+      }),
+      container,
+    );
+
+    const tags = Array.from(container.querySelectorAll(".cfg-tag")).map((node) =>
+      node.textContent?.trim(),
+    );
+    expect(tags).toContain("security");
+    expect(tags).toContain("secret");
+  });
+
+  it("filters by tag query", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { tags: ["security"] },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        searchQuery: "tag:security",
+        onPatch,
+      }),
+      container,
+    );
+
+    expect(container.textContent).toContain("Gateway");
+    expect(container.textContent).toContain("Token");
+    expect(container.textContent).not.toContain("Allow From");
+    expect(container.textContent).not.toContain("Mode");
+  });
+
+  it("does not treat plain text as tag filter", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { tags: ["security"] },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        searchQuery: "security",
+        onPatch,
+      }),
+      container,
+    );
+
+    expect(container.textContent).toContain('No settings match "security"');
+  });
+
+  it("requires both text and tag when combined", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const analysis = analyzeConfigSchema(rootSchema);
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { tags: ["security"] },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        searchQuery: "token tag:security",
+        onPatch,
+      }),
+      container,
+    );
+
+    expect(container.textContent).toContain("Token");
+    expect(container.textContent).not.toContain('No settings match "token tag:security"');
+
+    const noMatchContainer = document.createElement("div");
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "gateway.auth.token": { tags: ["security"] },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: {},
+        searchQuery: "mode tag:security",
+        onPatch,
+      }),
+      noMatchContainer,
+    );
+    expect(noMatchContainer.textContent).toContain('No settings match "mode tag:security"');
+  });
+
+  it("supports SecretInput unions in additionalProperties maps", () => {
+    const onPatch = vi.fn();
+    const container = document.createElement("div");
+    const schema = {
+      type: "object",
+      properties: {
+        models: {
+          type: "object",
+          properties: {
+            providers: {
+              type: "object",
+              additionalProperties: {
+                type: "object",
+                properties: {
+                  apiKey: {
+                    anyOf: [
+                      { type: "string" },
+                      {
+                        oneOf: [
+                          {
+                            type: "object",
+                            properties: {
+                              source: { type: "string", const: "env" },
+                              provider: { type: "string" },
+                              id: { type: "string" },
+                            },
+                            required: ["source", "provider", "id"],
+                            additionalProperties: false,
+                          },
+                          {
+                            type: "object",
+                            properties: {
+                              source: { type: "string", const: "file" },
+                              provider: { type: "string" },
+                              id: { type: "string" },
+                            },
+                            required: ["source", "provider", "id"],
+                            additionalProperties: false,
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    expect(analysis.unsupportedPaths).not.toContain("models.providers");
+    expect(analysis.unsupportedPaths).not.toContain("models.providers.*.apiKey");
+
+    render(
+      renderConfigForm({
+        schema: analysis.schema,
+        uiHints: {
+          "models.providers.*.apiKey": { sensitive: true },
+        },
+        unsupportedPaths: analysis.unsupportedPaths,
+        value: { models: { providers: { openai: { apiKey: "old" } } } },
+        onPatch,
+      }),
+      container,
+    );
+
+    const apiKeyInput: HTMLInputElement | null = container.querySelector("input[type='password']");
+    expect(apiKeyInput).not.toBeNull();
+    if (!apiKeyInput) {
+      return;
+    }
+    apiKeyInput.value = "new-key";
+    apiKeyInput.dispatchEvent(new Event("input", { bubbles: true }));
+    expect(onPatch).toHaveBeenCalledWith(["models", "providers", "openai", "apiKey"], "new-key");
+  });
+
+  it("flags unsupported unions", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        mixed: {
+          anyOf: [{ type: "string" }, { type: "object", properties: {} }],
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    expect(analysis.unsupportedPaths).toContain("mixed");
+  });
+
+  it("supports nullable types", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        note: { type: ["string", "null"] },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    expect(analysis.unsupportedPaths).not.toContain("note");
+  });
+
+  it("ignores untyped additionalProperties schemas", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        channels: {
+          type: "object",
+          properties: {
+            whatsapp: {
+              type: "object",
+              properties: {
+                enabled: { type: "boolean" },
+              },
+            },
+          },
+          additionalProperties: {},
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    expect(analysis.unsupportedPaths).not.toContain("channels");
+  });
+
+  it("flags additionalProperties true", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        extra: {
+          type: "object",
+          additionalProperties: true,
+        },
+      },
+    };
+    const analysis = analyzeConfigSchema(schema);
+    expect(analysis.unsupportedPaths).toContain("extra");
+  });
+});

package/ui/src/ui/controllers/agent-files.ts

@@ -0,0 +1,126 @@
+import type { GatewayBrowserClient } from "../gateway.ts";
+import type {
+  AgentFileEntry,
+  AgentsFilesGetResult,
+  AgentsFilesListResult,
+  AgentsFilesSetResult,
+} from "../types.ts";
+
+export type AgentFilesState = {
+  client: GatewayBrowserClient | null;
+  connected: boolean;
+  agentFilesLoading: boolean;
+  agentFilesError: string | null;
+  agentFilesList: AgentsFilesListResult | null;
+  agentFileContents: Record<string, string>;
+  agentFileDrafts: Record<string, string>;
+  agentFileActive: string | null;
+  agentFileSaving: boolean;
+};
+
+function mergeFileEntry(
+  list: AgentsFilesListResult | null,
+  entry: AgentFileEntry,
+): AgentsFilesListResult | null {
+  if (!list) {
+    return list;
+  }
+  const hasEntry = list.files.some((file) => file.name === entry.name);
+  const nextFiles = hasEntry
+    ? list.files.map((file) => (file.name === entry.name ? entry : file))
+    : [...list.files, entry];
+  return { ...list, files: nextFiles };
+}
+
+export async function loadAgentFiles(state: AgentFilesState, agentId: string) {
+  if (!state.client || !state.connected || state.agentFilesLoading) {
+    return;
+  }
+  state.agentFilesLoading = true;
+  state.agentFilesError = null;
+  try {
+    const res = await state.client.request<AgentsFilesListResult | null>("agents.files.list", {
+      agentId,
+    });
+    if (res) {
+      state.agentFilesList = res;
+      if (state.agentFileActive && !res.files.some((file) => file.name === state.agentFileActive)) {
+        state.agentFileActive = null;
+      }
+    }
+  } catch (err) {
+    state.agentFilesError = String(err);
+  } finally {
+    state.agentFilesLoading = false;
+  }
+}
+
+export async function loadAgentFileContent(
+  state: AgentFilesState,
+  agentId: string,
+  name: string,
+  opts?: { force?: boolean; preserveDraft?: boolean },
+) {
+  if (!state.client || !state.connected || state.agentFilesLoading) {
+    return;
+  }
+  if (!opts?.force && Object.hasOwn(state.agentFileContents, name)) {
+    return;
+  }
+  state.agentFilesLoading = true;
+  state.agentFilesError = null;
+  try {
+    const res = await state.client.request<AgentsFilesGetResult | null>("agents.files.get", {
+      agentId,
+      name,
+    });
+    if (res?.file) {
+      const content = res.file.content ?? "";
+      const previousBase = state.agentFileContents[name] ?? "";
+      const currentDraft = state.agentFileDrafts[name];
+      const preserveDraft = opts?.preserveDraft ?? true;
+      state.agentFilesList = mergeFileEntry(state.agentFilesList, res.file);
+      state.agentFileContents = { ...state.agentFileContents, [name]: content };
+      if (
+        !preserveDraft ||
+        !Object.hasOwn(state.agentFileDrafts, name) ||
+        currentDraft === previousBase
+      ) {
+        state.agentFileDrafts = { ...state.agentFileDrafts, [name]: content };
+      }
+    }
+  } catch (err) {
+    state.agentFilesError = String(err);
+  } finally {
+    state.agentFilesLoading = false;
+  }
+}
+
+export async function saveAgentFile(
+  state: AgentFilesState,
+  agentId: string,
+  name: string,
+  content: string,
+) {
+  if (!state.client || !state.connected || state.agentFileSaving) {
+    return;
+  }
+  state.agentFileSaving = true;
+  state.agentFilesError = null;
+  try {
+    const res = await state.client.request<AgentsFilesSetResult | null>("agents.files.set", {
+      agentId,
+      name,
+      content,
+    });
+    if (res?.file) {
+      state.agentFilesList = mergeFileEntry(state.agentFilesList, res.file);
+      state.agentFileContents = { ...state.agentFileContents, [name]: content };
+      state.agentFileDrafts = { ...state.agentFileDrafts, [name]: content };
+    }
+  } catch (err) {
+    state.agentFilesError = String(err);
+  } finally {
+    state.agentFileSaving = false;
+  }
+}