@runtypelabs/persona 4.21.1 → 4.22.1

package/src/client.unified-tools.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import { AgentWidgetClient } from "./client";
+import type { AgentWidgetEvent, AgentWidgetMessage } from "./types";
+import type { RuntypeExecutionStreamEvent } from "./generated/runtype-openapi-contract";
+
+type Frame = RuntypeExecutionStreamEvent extends infer E
+  ? E extends RuntypeExecutionStreamEvent ? Omit<E, "seq" | "executionId"> : never
+  : never;
+
+async function consume(frames: Frame[]) {
+  const events: AgentWidgetEvent[] = [];
+  const client = new AgentWidgetClient({
+    apiUrl: "https://example.test/dispatch",
+    customFetch: async () => new Response(frames.map((frame, seq) =>
+      `event: ${frame.type}\ndata: ${JSON.stringify({ executionId: "exec_test", seq, ...frame })}\n\n`
+    ).join(""), { headers: { "Content-Type": "text/event-stream" } }),
+  });
+  await client.dispatch({ messages: [] }, event => events.push(event));
+  const messages = new Map<string, AgentWidgetMessage>();
+  for (const event of events) if (event.type === "message") messages.set(event.message.id, event.message);
+  return { events, messages: [...messages.values()] };
+}
+
+const start = (id: string, parameters?: Record<string, unknown>): Frame => ({
+  type: "tool_start", toolCallId: id, toolName: "lookup", toolType: "builtin", parameters,
+});
+
+describe("canonical unified tool channels", () => {
+  it.each([undefined, { query: "provisional" }])("applies final parameters after a provisional start (%j)", async parameters => {
+    const { messages } = await consume([
+      start("call_a", parameters),
+      { type: "tool_input_delta", toolCallId: "call_a", delta: '{"query":"hello"}' },
+      { type: "tool_input_complete", toolCallId: "call_a", parameters: { query: "hello" } },
+      { type: "tool_complete", toolCallId: "call_a", success: true },
+    ]);
+    expect(messages[0].toolCall).toMatchObject({ id: "call_a", args: { query: "hello" }, chunks: ['{"query":"hello"}'] });
+  });
+
+  it("accepts empty final parameters", async () => {
+    const { messages } = await consume([start("call_a", { stale: true }),
+      { type: "tool_input_complete", toolCallId: "call_a", parameters: {} }]);
+    expect(messages[0].toolCall?.args).toEqual({});
+  });
+
+  it("keeps continuation calls separate from the last started call", async () => {
+    const { messages } = await consume([
+      start("call_b"),
+      { type: "tool_input_complete", toolCallId: "call_a", toolName: "lookup", parameters: { query: "A" } },
+      { type: "tool_output_delta", toolCallId: "call_a", delta: "A output" },
+      { type: "tool_complete", toolCallId: "call_a", toolName: "lookup", success: true, result: "A result", executionTime: 42 },
+      { type: "tool_complete", toolCallId: "call_b", success: true, result: "B result" },
+    ]);
+    expect(messages.map(m => m.toolCall?.id).sort()).toEqual(["call_a", "call_b"]);
+    expect(messages.find(m => m.toolCall?.id === "call_a")?.toolCall).toMatchObject({ args: { query: "A" }, chunks: ["A output"], result: "A result", duration: 42, durationMs: 42 });
+    expect(messages.find(m => m.toolCall?.id === "call_b")?.toolCall?.result).toBe("B result");
+  });
+
+  it("keeps the canonical ID and name on a completion-only continuation", async () => {
+    const { messages } = await consume([{ type: "tool_complete", toolCallId: "call_a", toolName: "lookup", success: true }]);
+    expect(messages[0].toolCall).toMatchObject({ id: "call_a", name: "lookup" });
+  });
+
+  it("retains a tool failure while the execution continues", async () => {
+    const { messages, events } = await consume([
+      start("call_a"),
+      { type: "tool_complete", toolCallId: "call_a", success: false, error: "Search timed out" },
+      { type: "text_start", id: "text_a" },
+      { type: "text_delta", id: "text_a", delta: "I can try another search." },
+      { type: "text_complete", id: "text_a" },
+      { type: "execution_complete", kind: "agent", success: true },
+    ]);
+    expect(messages[0].toolCall).toMatchObject({ status: "complete", success: false, error: "Search timed out" });
+    expect(messages.at(-1)?.content).toBe("I can try another search.");
+    expect(events.filter(e => e.type === "error")).toEqual([]);
+  });
+});

package/src/components/artifact-preview.ts

@@ -447,6 +447,11 @@ function setupPreviewLoading(
   const addTimer = (fn: () => void, ms: number): void => {
     const id = setTimeout(() => {
       timers.delete(id);
+      // Unit tests drop rendered blocks without running destroy(), so a
+      // pending timer can outlive the test file's DOM environment. Every
+      // callback here does DOM work; with no document left there is nothing
+      // to do (and `document.createElement` would throw).
+      if (typeof document === "undefined") return;
       fn();
     }, ms) as unknown as number;
     timers.add(id);

package/src/components/event-stream-badge-theming.test.ts

@@ -0,0 +1,162 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_BADGE_COLORS,
+  getBadgeBorderColor,
+  getBadgeColor,
+} from "./event-stream-view";
+import { createDarkTheme, createLightTheme, themeToCssVariables } from "../utils/theme";
+
+/**
+ * Contrast lock for the event-stream badge chips. The chip paints inline
+ * `var(--persona-event-badge-*)` styles, so the pairs the theme pipeline emits
+ * ARE the rendered colors inside any themed root; asserting on the emitted
+ * variables is equivalent to a rendered-computed-style check without a
+ * browser. Both schemes must hold every family at >= 4.5:1 (WCAG AA for the
+ * 11px badge text).
+ */
+
+const FAMILIES = [
+  "flow",
+  "step",
+  "reasoning",
+  "tool",
+  "agent",
+  "error",
+  "default",
+] as const;
+
+const HEX6 = /^#[0-9a-fA-F]{6}$/;
+
+function channelLuminance(byte: number): number {
+  const c = byte / 255;
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function relativeLuminance(hex: string): number {
+  const r = channelLuminance(parseInt(hex.slice(1, 3), 16));
+  const g = channelLuminance(parseInt(hex.slice(3, 5), 16));
+  const b = channelLuminance(parseInt(hex.slice(5, 7), 16));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrastRatio(a: string, b: string): number {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+const SCHEMES = {
+  light: () => themeToCssVariables(createLightTheme()),
+  dark: () => themeToCssVariables(createDarkTheme()),
+} as const;
+
+describe("event-stream badge theming", () => {
+  for (const [scheme, buildVars] of Object.entries(SCHEMES)) {
+    it(`${scheme} scheme emits a >=4.5:1 pair for every badge family`, () => {
+      const vars = buildVars();
+      for (const family of FAMILIES) {
+        const bg = vars[`--persona-event-badge-${family}-bg`];
+        const fg = vars[`--persona-event-badge-${family}-fg`];
+        expect(bg, `${family} bg`).toMatch(HEX6);
+        expect(fg, `${family} fg`).toMatch(HEX6);
+        const ratio = contrastRatio(bg, fg);
+        expect(
+          ratio,
+          `${scheme} ${family}: ${fg} on ${bg} is ${ratio.toFixed(2)}:1`
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    });
+  }
+
+  it("light pairs keep the pre-token rendered colors", () => {
+    // The 4.x chips resolved these exact values inside a themed root; the
+    // token pipeline must reproduce them so light mode is unchanged.
+    const vars = SCHEMES.light();
+    expect(vars["--persona-event-badge-flow-bg"]).toBe("#dcfce7");
+    expect(vars["--persona-event-badge-flow-fg"]).toBe("#15803d");
+    expect(vars["--persona-event-badge-tool-bg"]).toBe("#f3e8ff");
+    expect(vars["--persona-event-badge-tool-fg"]).toBe("#6b21a8");
+    expect(vars["--persona-event-badge-agent-bg"]).toBe("#ccfbf1");
+    expect(vars["--persona-event-badge-agent-fg"]).toBe("#115e59");
+    expect(vars["--persona-event-badge-default-bg"]).toBe("#f3f4f6");
+    expect(vars["--persona-event-badge-default-fg"]).toBe("#4b5563");
+  });
+
+  it("dark pairs differ from light for every family", () => {
+    const light = SCHEMES.light();
+    const dark = SCHEMES.dark();
+    for (const family of FAMILIES) {
+      expect(
+        dark[`--persona-event-badge-${family}-bg`],
+        `${family} bg`
+      ).not.toBe(light[`--persona-event-badge-${family}-bg`]);
+    }
+  });
+
+  it("every default badge value references a variable both schemes emit", () => {
+    const light = SCHEMES.light();
+    const dark = SCHEMES.dark();
+    const pairs = [...Object.values(DEFAULT_BADGE_COLORS), getBadgeColor("unmatched_type")];
+    for (const pair of pairs) {
+      for (const value of [pair.bg, pair.text]) {
+        const match = /^var\((--persona-event-badge-[a-z]+-(?:bg|fg)), #[0-9a-f]{6}\)$/.exec(
+          value
+        );
+        expect(match, value).not.toBeNull();
+        const varName = match![1];
+        expect(light[varName], `${varName} (light)`).toBeDefined();
+        expect(dark[varName], `${varName} (dark)`).toBeDefined();
+      }
+    }
+  });
+
+  it("routes event types to families: prefixes, reasoning, and execution_error", () => {
+    expect(getBadgeColor("execution_start")).toBe(DEFAULT_BADGE_COLORS.flow_);
+    expect(getBadgeColor("turn_start")).toBe(DEFAULT_BADGE_COLORS.agent_);
+    expect(getBadgeColor("text_delta")).toBe(DEFAULT_BADGE_COLORS.agent_);
+    expect(getBadgeColor("flow_start")).toBe(DEFAULT_BADGE_COLORS.flow_);
+    expect(getBadgeColor("tool_input_delta")).toBe(DEFAULT_BADGE_COLORS.tool_);
+    expect(getBadgeColor("agent_turn_start")).toBe(DEFAULT_BADGE_COLORS.agent_);
+    // reasoning_* must hit the reasoning family (the old `reason_` prefix
+    // never matched `reasoning_start` and dropped it to the default pair).
+    expect(getBadgeColor("reasoning_start")).toBe(DEFAULT_BADGE_COLORS.reasoning_);
+    expect(getBadgeColor("error")).toBe(DEFAULT_BADGE_COLORS.error);
+    expect(getBadgeColor("execution_error")).toBe(DEFAULT_BADGE_COLORS.error);
+  });
+
+  it("custom badgeColors: exact match beats prefix match", () => {
+    const exact = { bg: "#111111", text: "#eeeeee" };
+    const prefix = { bg: "#222222", text: "#dddddd" };
+    const custom = { tool_: prefix, ["tool_start"]: exact };
+    expect(getBadgeColor("tool_start", custom)).toBe(exact);
+    expect(getBadgeColor("tool_complete", custom)).toBe(prefix);
+  });
+
+  it("custom badgeColors: any custom match beats any default match", () => {
+    const custom = { execution_: { bg: "#222222", text: "#dddddd" } };
+    // A host prefix must cover its whole family: the built-in exact
+    // `execution_error` entry sits in the lower default tier.
+    expect(getBadgeColor("execution_error", custom)).toBe(custom.execution_);
+    expect(getBadgeColor("execution_start", custom)).toBe(custom.execution_);
+    // A narrower custom prefix wins over the default family prefix (the old
+    // merged-map lookup iterated the default `tool_` key first).
+    const narrowPair = { bg: "#333333", text: "#cccccc" };
+    expect(getBadgeColor("tool_input_delta", { ["tool_input_"]: narrowPair })).toBe(narrowPair);
+    // Unmatched custom maps still fall through to the default families.
+    expect(getBadgeColor("flow_start", custom)).toBe(DEFAULT_BADGE_COLORS.flow_);
+  });
+
+  it("border composition is valid CSS for hex and non-hex text colors", () => {
+    // Bare 6-digit hex keeps the historical alpha suffix.
+    expect(getBadgeBorderColor("#6b21a8")).toBe("#6b21a850");
+    // var() refs (every default) and other CSS colors must compose via
+    // color-mix; a bare suffix would produce an invalid, dropped declaration.
+    expect(getBadgeBorderColor("var(--persona-event-badge-tool-fg, #6b21a8)")).toBe(
+      "color-mix(in srgb, var(--persona-event-badge-tool-fg, #6b21a8) 31%, transparent)"
+    );
+    expect(getBadgeBorderColor("rgb(107, 33, 168)")).toBe(
+      "color-mix(in srgb, rgb(107, 33, 168) 31%, transparent)"
+    );
+  });
+});