@elizaos/app-core 2.0.0-alpha.10

package/test/app/MessageContent.test.tsx

@@ -0,0 +1,326 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { describe, expect, it, vi } from "vitest";
+
+// ---------------------------------------------------------------------------
+// Mocks — MessageContent uses useApp() and client internally
+// ---------------------------------------------------------------------------
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => ({
+    agentStatus: { agentName: "Milady" },
+    setState: vi.fn(),
+  }),
+  getVrmPreviewUrl: () => null,
+}));
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: {
+    getConfig: vi.fn(async () => ({})),
+    getPluginList: vi.fn(async () => []),
+  },
+}));
+
+import {
+  compilePatches,
+  findPatchRegions,
+  looksLikePatch,
+  MessageContent,
+  normalizePluginId,
+  tryParsePatch,
+} from "../../src/components/MessageContent";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function renderText(text: string): string {
+  let tree!: TestRenderer.ReactTestRenderer;
+  TestRenderer.act(() => {
+    tree = TestRenderer.create(
+      React.createElement(MessageContent, {
+        message: { id: "m1", role: "assistant", text, timestamp: 1 },
+      }),
+    );
+  });
+
+  // Collect all text content from the rendered tree
+  function collectText(node: TestRenderer.ReactTestInstance): string {
+    return node.children
+      .map((child) =>
+        typeof child === "string"
+          ? child
+          : collectText(child as TestRenderer.ReactTestInstance),
+      )
+      .join("");
+  }
+
+  return collectText(tree.root).trim();
+}
+
+// ---------------------------------------------------------------------------
+// Tests — JSONL patch detection (the json-render renderer path)
+// ---------------------------------------------------------------------------
+
+describe("looksLikePatch", () => {
+  it("matches compact JSON patch", () => {
+    expect(looksLikePatch('{"op":"add","path":"/root","value":"x"}')).toBe(
+      true,
+    );
+  });
+
+  it("matches spaced JSON patch (Claude output style)", () => {
+    expect(
+      looksLikePatch('{ "op": "add", "path": "/root", "value": "x" }'),
+    ).toBe(true);
+  });
+
+  it("rejects plain text", () => {
+    expect(looksLikePatch("Hello world")).toBe(false);
+  });
+
+  it("rejects JSON without op field", () => {
+    expect(looksLikePatch('{"type":"Card","props":{}}')).toBe(false);
+  });
+
+  it("rejects code fence lines", () => {
+    expect(looksLikePatch("```json")).toBe(false);
+    expect(looksLikePatch("```")).toBe(false);
+  });
+});
+
+describe("tryParsePatch", () => {
+  it("parses compact add patch", () => {
+    const p = tryParsePatch('{"op":"add","path":"/root","value":"card-1"}');
+    expect(p).not.toBeNull();
+    expect(p?.op).toBe("add");
+    expect(p?.path).toBe("/root");
+  });
+
+  it("parses spaced add patch", () => {
+    const p = tryParsePatch(
+      '{ "op": "add", "path": "/root", "value": "card-1" }',
+    );
+    expect(p).not.toBeNull();
+    expect(p?.op).toBe("add");
+    expect(p?.path).toBe("/root");
+  });
+
+  it("returns null for plain text", () => {
+    expect(tryParsePatch("Sure, here is your form:")).toBeNull();
+  });
+
+  it("returns null for invalid JSON", () => {
+    expect(tryParsePatch('{"op":"add","path":"/root"')).toBeNull();
+  });
+});
+
+describe("compilePatches", () => {
+  it("builds a valid UiSpec from add patches", () => {
+    const patches = [
+      { op: "add" as const, path: "/root", value: "card-1" },
+      {
+        op: "add" as const,
+        path: "/elements/card-1",
+        value: { type: "Card", props: { title: "Test" }, children: [] },
+      },
+      { op: "add" as const, path: "/state/amount", value: 0 },
+    ];
+    const spec = compilePatches(patches);
+    expect(spec).not.toBeNull();
+    expect(spec?.root).toBe("card-1");
+    expect(spec?.elements["card-1"]).toBeDefined();
+    expect(spec?.state.amount).toBe(0);
+  });
+
+  it("returns null if /root is missing", () => {
+    const patches = [
+      {
+        op: "add" as const,
+        path: "/elements/card-1",
+        value: { type: "Card", props: {}, children: [] },
+      },
+    ];
+    expect(compilePatches(patches)).toBeNull();
+  });
+
+  it("ignores prototype-pollution path segments", () => {
+    const patches = [
+      { op: "add" as const, path: "/root", value: "card-1" },
+      {
+        op: "add" as const,
+        path: "/elements/card-1",
+        value: { type: "Card", props: { title: "Safe" }, children: [] },
+      },
+      {
+        op: "add" as const,
+        path: "/state/__proto__/polluted",
+        value: true,
+      },
+      { op: "add" as const, path: "/state/amount", value: 42 },
+    ];
+
+    const spec = compilePatches(patches);
+    expect(spec).not.toBeNull();
+    expect(spec?.state.amount).toBe(42);
+    expect(Object.hasOwn(Object.prototype, "polluted")).toBe(false);
+  });
+});
+
+describe("findPatchRegions", () => {
+  it("detects bare compact JSONL patches", () => {
+    const text = [
+      "Sure, here you go:",
+      '{"op":"add","path":"/root","value":"card-1"}',
+      '{"op":"add","path":"/elements/card-1","value":{"type":"Card","props":{"title":"Hi"},"children":[]}}',
+      '{"op":"add","path":"/state","value":{}}',
+    ].join("\n");
+    const regions = findPatchRegions(text);
+    expect(regions).toHaveLength(1);
+    expect(regions[0].spec.root).toBe("card-1");
+  });
+
+  it("detects spaced JSONL patches (Claude output style)", () => {
+    const text = [
+      "Here is your dashboard:",
+      '{ "op": "add", "path": "/root", "value": "card-1" }',
+      '{ "op": "add", "path": "/elements/card-1", "value": { "type": "Card", "props": { "title": "Dashboard" }, "children": [] } }',
+      '{ "op": "add", "path": "/state", "value": {} }',
+    ].join("\n");
+    const regions = findPatchRegions(text);
+    expect(regions).toHaveLength(1);
+    expect(regions[0].spec.root).toBe("card-1");
+  });
+
+  it("detects patches inside a code fence", () => {
+    const text = [
+      "Here is the UI:",
+      "```json",
+      '{"op":"add","path":"/root","value":"card-1"}',
+      '{"op":"add","path":"/elements/card-1","value":{"type":"Card","props":{"title":"Fenced"},"children":[]}}',
+      '{"op":"add","path":"/state","value":{}}',
+      "```",
+    ].join("\n");
+    const regions = findPatchRegions(text);
+    expect(regions).toHaveLength(1);
+    expect(regions[0].spec.root).toBe("card-1");
+  });
+
+  it("returns empty array for plain text", () => {
+    expect(findPatchRegions("Hello! How can I help you today?")).toHaveLength(
+      0,
+    );
+  });
+
+  it("returns empty array if /root patch is missing", () => {
+    const text =
+      '{"op":"add","path":"/elements/card-1","value":{"type":"Card","props":{},"children":[]}}';
+    expect(findPatchRegions(text)).toHaveLength(0);
+  });
+
+  it("flushes before malformed patch-like text after an empty line", () => {
+    const text = [
+      '{"op":"add","path":"/root","value":"card-1"}',
+      "",
+      '{"op":"add","path":"/elements/card-1"',
+      "hello",
+    ].join("\n");
+
+    const regions = findPatchRegions(text);
+    expect(regions).toHaveLength(1);
+    expect(regions[0]?.raw).toBe(
+      '{"op":"add","path":"/root","value":"card-1"}',
+    );
+  });
+});
+
+describe("normalizePluginId", () => {
+  it("strips the plugin package prefix", () => {
+    expect(normalizePluginId("@elizaos/plugin-discord")).toBe("discord");
+  });
+
+  it("leaves plain plugin ids unchanged", () => {
+    expect(normalizePluginId("discord")).toBe("discord");
+  });
+
+  it("leaves non-plugin scoped packages unchanged", () => {
+    expect(normalizePluginId("@scope/not-plugin-name")).toBe(
+      "@scope/not-plugin-name",
+    );
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests — XML stripping regression
+// ---------------------------------------------------------------------------
+
+describe("MessageContent — XML action stripping", () => {
+  it("strips <actions> XML from message text", () => {
+    const text =
+      'Here is my response <actions><action name="DO_THING"><params>{"key":"val"}</params></action></actions>';
+    const rendered = renderText(text);
+    expect(rendered).toBe("Here is my response");
+    expect(rendered).not.toContain("<actions>");
+  });
+
+  it("strips <params> XML from message text", () => {
+    const text =
+      'Some text <params>{"repo":"https://github.com/test"}</params>';
+    const rendered = renderText(text);
+    expect(rendered).toBe("Some text");
+    expect(rendered).not.toContain("<params>");
+  });
+
+  it("renders empty for message containing only XML", () => {
+    const text =
+      '<actions><action name="START_CODING_TASK"><params>{"task":"fix bug"}</params></action></actions>';
+    const rendered = renderText(text);
+    expect(rendered).toBe("");
+  });
+
+  it("preserves message text with no XML", () => {
+    const text = "Hello, how can I help you today?";
+    const rendered = renderText(text);
+    expect(rendered).toBe("Hello, how can I help you today?");
+  });
+
+  it("shows only the <text> portion of structured response XML", () => {
+    const text =
+      "<response><thought>internal chain</thought><text>Hello world</text></response>";
+    const rendered = renderText(text);
+    expect(rendered).toBe("Hello world");
+    expect(rendered).not.toContain("internal chain");
+  });
+
+  it("shows partial streamed <text> content without leaking wrapper XML", () => {
+    const text = "<response><thought>internal chain</thought><text>Hello world";
+    const rendered = renderText(text);
+    expect(rendered).toBe("Hello world");
+    expect(rendered).not.toContain("<response>");
+    expect(rendered).not.toContain("internal chain");
+  });
+
+  it("renders nothing until structured response text starts", () => {
+    const text = "<response><thought>internal chain</thought>";
+    const rendered = renderText(text);
+    expect(rendered).toBe("");
+  });
+
+  it("strips analysis XML blocks from displayed text", () => {
+    const text =
+      "Visible text <analysis>do not show this planning output</analysis> after";
+    const rendered = renderText(text);
+    expect(rendered.replace(/\s+/g, " ").trim()).toBe("Visible text after");
+    expect(rendered).not.toContain("planning output");
+  });
+
+  it("strips single-star stage directions from displayed assistant text", () => {
+    const rendered = renderText("*waves warmly* Hello there.");
+    expect(rendered).toBe("Hello there.");
+  });
+
+  it("preserves bold markdown-style text", () => {
+    const rendered = renderText("**Saturday**: Sunny and warm.");
+    expect(rendered).toBe("**Saturday**: Sunny and warm.");
+  });
+});

package/test/app/PermissionsOnboarding.test.tsx

@@ -0,0 +1,356 @@
+/**
+ * Tests for PermissionsOnboardingSection — platform-aware onboarding.
+ *
+ * Validates that the onboarding senses step renders correctly on
+ * Electron (desktop), Web (auto-continue), and Capacitor/mobile (streaming).
+ */
+// @vitest-environment jsdom
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// ── Hoisted mocks ─────────────────────────────────────────────────────
+
+const { mockUseApp, mockIsWeb, mockIsElectron, mockIsNative } = vi.hoisted(
+  () => ({
+    mockUseApp: vi.fn(),
+    mockIsWeb: vi.fn(() => false),
+    mockIsElectron: vi.fn(() => true),
+    mockIsNative: { value: false },
+  }),
+);
+const {
+  mockGetPermissions,
+  mockInvokeDesktopBridgeRequest,
+  mockSubscribeDesktopBridgeEvent,
+} = vi.hoisted(() => ({
+  mockGetPermissions: vi.fn(),
+  mockInvokeDesktopBridgeRequest: vi.fn(),
+  mockSubscribeDesktopBridgeEvent: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+}));
+
+vi.mock("@elizaos/app-core/platform", () => ({
+  hasRequiredOnboardingPermissions: vi.fn(() => true),
+  isWebPlatform: () => mockIsWeb(),
+  isElectronPlatform: () => mockIsElectron(),
+  get isNative() {
+    return mockIsNative.value;
+  },
+  isIOS: false,
+  isAndroid: false,
+  platform: "web",
+}));
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: {
+    getPermissions: mockGetPermissions,
+    isShellEnabled: vi.fn().mockResolvedValue(true),
+    refreshPermissions: vi.fn(),
+    requestPermission: vi.fn(),
+    openPermissionSettings: vi.fn(),
+    setShellEnabled: vi.fn(),
+  },
+}));
+
+vi.mock("@elizaos/app-core/bridge", () => ({
+  invokeDesktopBridgeRequest: mockInvokeDesktopBridgeRequest,
+  subscribeDesktopBridgeEvent: mockSubscribeDesktopBridgeEvent,
+}));
+
+vi.mock("@elizaos/app-core/components/ui-badges", () => ({
+  StatusBadge: ({ label }: { label: string }) =>
+    React.createElement("span", { "data-testid": "status-badge" }, label),
+}));
+
+vi.mock("@elizaos/app-core/components/ui-switch", () => ({
+  Switch: () => React.createElement("span", null, "switch"),
+}));
+
+vi.mock("@elizaos/ui", () => ({
+  Button: ({
+    children,
+    onClick,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+  }) =>
+    React.createElement(
+      "button",
+      { type: "button", onClick, ...rest },
+      children,
+    ),
+}));
+
+vi.mock("lucide-react", () => ({
+  Camera: () => React.createElement("span", null, "📷"),
+  Check: () => React.createElement("span", null, "✓"),
+  CircleUserRound: () => React.createElement("span", null, "👤"),
+  Cloud: () => React.createElement("span", null, "☁"),
+  Mic: () => React.createElement("span", null, "🎤"),
+  Monitor: () => React.createElement("span", null, "🖥"),
+  MousePointer2: () => React.createElement("span", null, "🖱"),
+  Settings: () => React.createElement("span", null, "⚙"),
+  Smartphone: () => React.createElement("span", null, "📱"),
+  Terminal: () => React.createElement("span", null, "💻"),
+}));
+
+import { PermissionsOnboardingSection } from "@elizaos/app-core/components/PermissionsSection";
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+function baseContext(overrides?: Record<string, unknown>) {
+  return {
+    t: (k: string) => k,
+    plugins: [],
+    handlePluginToggle: vi.fn(),
+    ...overrides,
+  };
+}
+
+function collectText(node: TestRenderer.ReactTestInstance): string {
+  return node.children
+    .map((child) => (typeof child === "string" ? child : collectText(child)))
+    .join(" ");
+}
+
+function findButtons(
+  root: TestRenderer.ReactTestInstance,
+): TestRenderer.ReactTestInstance[] {
+  return root.findAllByType("button");
+}
+
+function findButtonsByAriaLabel(
+  root: TestRenderer.ReactTestInstance,
+  label: string,
+): TestRenderer.ReactTestInstance[] {
+  return root.findAll(
+    (node) => node.type === "button" && node.props["aria-label"] === label,
+  );
+}
+
+function ensureNavigatorPermissionMocks(): void {
+  if (!navigator.permissions) {
+    Object.defineProperty(navigator, "permissions", {
+      value: { query: vi.fn() },
+      writable: true,
+      configurable: true,
+    });
+  }
+
+  if (!navigator.mediaDevices) {
+    Object.defineProperty(navigator, "mediaDevices", {
+      value: {
+        getUserMedia: vi.fn(),
+        enumerateDevices: vi.fn(),
+      },
+      writable: true,
+      configurable: true,
+    });
+  }
+
+  if (!navigator.mediaDevices.getUserMedia) {
+    Object.defineProperty(navigator.mediaDevices, "getUserMedia", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+  }
+
+  if (!navigator.mediaDevices.enumerateDevices) {
+    Object.defineProperty(navigator.mediaDevices, "enumerateDevices", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+  }
+}
+
+// ====================================================================
+
+describe("PermissionsOnboardingSection", () => {
+  beforeEach(() => {
+    ensureNavigatorPermissionMocks();
+    mockUseApp.mockReset();
+    mockIsWeb.mockReturnValue(false);
+    mockIsElectron.mockReturnValue(true);
+    mockIsNative.value = false;
+    mockGetPermissions.mockReset();
+    mockInvokeDesktopBridgeRequest.mockReset();
+    mockSubscribeDesktopBridgeEvent.mockReset();
+    mockGetPermissions.mockResolvedValue({
+      accessibility: { status: "granted", canRequest: false },
+      "screen-recording": { status: "granted", canRequest: false },
+      microphone: { status: "granted", canRequest: false },
+      camera: { status: "granted", canRequest: false },
+      shell: { status: "granted", canRequest: false },
+    });
+    mockInvokeDesktopBridgeRequest.mockImplementation(
+      async (options: { rpcMethod: string }) => {
+        if (options.rpcMethod === "permissionsGetAll") {
+          return {
+            accessibility: { status: "granted", canRequest: false },
+            "screen-recording": { status: "granted", canRequest: false },
+            microphone: { status: "granted", canRequest: false },
+            camera: { status: "granted", canRequest: false },
+            shell: { status: "granted", canRequest: false },
+          };
+        }
+        if (options.rpcMethod === "permissionsIsShellEnabled") {
+          return true;
+        }
+        if (options.rpcMethod === "permissionsGetPlatform") {
+          return "darwin";
+        }
+        return null;
+      },
+    );
+    mockSubscribeDesktopBridgeEvent.mockImplementation(() => () => {});
+    vi.mocked(navigator.permissions.query).mockReset();
+    vi.mocked(navigator.mediaDevices.getUserMedia).mockReset();
+    vi.mocked(navigator.mediaDevices.enumerateDevices).mockReset();
+  });
+
+  it("renders web auto-continue view when isWebPlatform() is true", async () => {
+    mockIsWeb.mockReturnValue(true);
+    mockIsElectron.mockReturnValue(false);
+    const onContinue = vi.fn();
+    mockUseApp.mockReturnValue(baseContext());
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(PermissionsOnboardingSection, { onContinue }),
+      );
+    });
+
+    const root = tree?.root;
+    const webView = root.findByProps({
+      "data-testid": "web-onboarding-permissions",
+    });
+    expect(webView).toBeDefined();
+    const text = collectText(root);
+    expect(text).toContain("Browser Permissions");
+    expect(text).toContain("Camera");
+    expect(text).toContain("Microphone");
+
+    // Should have a skip button
+    const buttons = findButtons(root);
+    const skipBtn = buttons.find((b) =>
+      collectText(b).includes("Skip for Now"),
+    );
+    expect(skipBtn).toBeDefined();
+    await act(async () => {
+      skipBtn?.props.onClick();
+    });
+    expect(onContinue).toHaveBeenCalledWith({ allowPermissionBypass: true });
+  });
+
+  it("renders mobile streaming permissions when isNative and not Electron", async () => {
+    mockIsWeb.mockReturnValue(false);
+    mockIsElectron.mockReturnValue(false);
+    mockIsNative.value = true;
+    const onContinue = vi.fn();
+    mockUseApp.mockReturnValue(baseContext());
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(PermissionsOnboardingSection, { onContinue }),
+      );
+    });
+
+    const root = tree?.root;
+    const mobileView = root.findByProps({
+      "data-testid": "mobile-onboarding-permissions",
+    });
+    expect(mobileView).toBeDefined();
+    const text = collectText(root);
+    expect(text).toContain("Streaming Permissions");
+    expect(text).toContain("Camera");
+    expect(text).toContain("Microphone");
+
+    // Should have a skip button
+    expect(text).toContain("Skip for Now");
+  });
+
+  it("renders desktop permissions on Electron", async () => {
+    mockIsWeb.mockReturnValue(false);
+    mockIsElectron.mockReturnValue(true);
+    mockIsNative.value = false;
+    const onContinue = vi.fn();
+    mockUseApp.mockReturnValue(baseContext());
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(PermissionsOnboardingSection, { onContinue }),
+      );
+    });
+
+    const root = tree?.root;
+    const text = collectText(root);
+    // Should show system permissions title and grant UI
+    expect(text).toContain("System Permissions");
+    expect(text).toContain("Continue");
+    expect(mockInvokeDesktopBridgeRequest).toHaveBeenCalledWith({
+      rpcMethod: "permissionsGetAll",
+      ipcChannel: "permissions:getAll",
+      params: undefined,
+    });
+    expect(mockGetPermissions).not.toHaveBeenCalled();
+  });
+
+  it("hides the camera grant button when renderer access is already granted", async () => {
+    mockIsWeb.mockReturnValue(false);
+    mockIsElectron.mockReturnValue(true);
+    mockIsNative.value = false;
+    const onContinue = vi.fn();
+    mockUseApp.mockReturnValue(baseContext());
+    mockInvokeDesktopBridgeRequest.mockImplementation(
+      async (options: { rpcMethod: string }) => {
+        if (options.rpcMethod === "permissionsGetAll") {
+          return {
+            accessibility: { status: "granted", canRequest: false },
+            "screen-recording": { status: "granted", canRequest: false },
+            microphone: { status: "granted", canRequest: false },
+            camera: { status: "not-determined", canRequest: true },
+            shell: { status: "granted", canRequest: false },
+          };
+        }
+        if (options.rpcMethod === "permissionsIsShellEnabled") {
+          return true;
+        }
+        if (options.rpcMethod === "permissionsGetPlatform") {
+          return "darwin";
+        }
+        return null;
+      },
+    );
+    vi.mocked(navigator.permissions.query).mockImplementation(
+      async ({ name }: { name: PermissionName }) =>
+        ({
+          state: name === "camera" ? "granted" : "prompt",
+        }) as PermissionStatus,
+    );
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(PermissionsOnboardingSection, { onContinue }),
+      );
+    });
+
+    const root = tree?.root;
+    expect(root).toBeDefined();
+    if (!root) {
+      throw new Error("PermissionsOnboardingSection root not rendered");
+    }
+
+    expect(findButtonsByAriaLabel(root, "Check Access Camera")).toHaveLength(0);
+  });
+});