@stigmer/react 0.3.4 → 0.4.1

package/src/execution/ThreadSkeleton.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link ThreadSkeleton}. */
+export interface ThreadSkeletonProps {
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+const AI_LINE_WIDTHS = [
+  [85, 72, 90],
+  [78, 65, 88, 70],
+] as const;
+
+/**
+ * Pulse-animated skeleton that mimics the shape of a conversation
+ * thread. Renders alternating human-bubble and AI-response
+ * silhouettes so the loading state feels purposeful.
+ *
+ * Intended as an opt-in building block for consumers to show while
+ * session data loads. Not auto-rendered by {@link MessageThread}.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) return <ThreadSkeleton className="flex-1" />;
+ * ```
+ */
+export function ThreadSkeleton({ className }: ThreadSkeletonProps) {
+  return (
+    <div
+      className={cn("flex flex-col gap-4 pt-6 pb-4", className)}
+      aria-busy="true"
+      aria-label="Loading conversation"
+    >
+      <div className="animate-pulse space-y-4">
+        {/* Turn 1: Human bubble */}
+        <div className="ms-[20%] rounded-lg bg-muted-subtle px-4 py-3">
+          <div className="h-4 w-3/5 rounded bg-muted" />
+        </div>
+
+        {/* Turn 1: AI response */}
+        <div className="space-y-2 px-4">
+          {AI_LINE_WIDTHS[0].map((w, i) => (
+            <div
+              key={i}
+              className="h-4 rounded bg-muted"
+              style={{ width: `${w}%` }}
+            />
+          ))}
+        </div>
+
+        {/* Turn 2: Human bubble */}
+        <div className="ms-[20%] rounded-lg bg-muted-subtle px-4 py-3">
+          <div className="h-4 w-2/5 rounded bg-muted" />
+        </div>
+
+        {/* Turn 2: AI response */}
+        <div className="space-y-2 px-4">
+          {AI_LINE_WIDTHS[1].map((w, i) => (
+            <div
+              key={i}
+              className="h-4 rounded bg-muted"
+              style={{ width: `${w}%` }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/execution/ToolCallGroup.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
 import {
@@ -8,6 +8,7 @@ import {
   ToolCallStatus,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import { useRenderTracer } from "../internal/dev";
 import { ToolCallItem } from "./ToolCallItem";
 import { resolveToolCategory, extractPrimaryArg } from "./tool-categories";
 
@@ -131,6 +132,32 @@ const STATUS_COLOR: Record<AggregateStatus, string> = {
   pending: "text-muted-foreground",
 };
 
+/**
+ * Shallow comparison for `ToolCallGroupProps`.
+ *
+ * The `toolCalls` array may be a newly allocated subset (e.g.
+ * `buildThreadItems` filters out `task` calls). Structural sharing
+ * (T04) keeps individual `ToolCall` objects stable, so we compare
+ * array elements by reference rather than the array itself.
+ *
+ * @internal Exported for testing — not part of the public API.
+ */
+export function toolCallGroupPropsEqual(
+  prev: Readonly<ToolCallGroupProps>,
+  next: Readonly<ToolCallGroupProps>,
+): boolean {
+  if (prev.toolCalls.length !== next.toolCalls.length) return false;
+  for (let i = 0; i < prev.toolCalls.length; i++) {
+    if (prev.toolCalls[i] !== next.toolCalls[i]) return false;
+  }
+  return (
+    prev.subAgentExecutions === next.subAgentExecutions &&
+    prev.formatSummary === next.formatSummary &&
+    prev.defaultExpanded === next.defaultExpanded &&
+    prev.className === next.className
+  );
+}
+
 /**
  * Renders a summary line for a group of tool calls from a single
  * AI turn. Click to expand and see individual tool calls.
@@ -146,18 +173,24 @@ const STATUS_COLOR: Record<AggregateStatus, string> = {
  * (e.g., "Shell: ls -la /tmp"). Platform builders can override
  * via the `formatSummary` prop.
  *
+ * Wrapped in `React.memo` with a custom comparator that checks
+ * `toolCalls` elements by reference (structural sharing keeps
+ * individual `ToolCall` objects stable for unchanged calls).
+ *
  * @example
  * ```tsx
  * <ToolCallGroup toolCalls={message.toolCalls} />
  * ```
  */
-export function ToolCallGroup({
+export const ToolCallGroup = memo(function ToolCallGroup({
   toolCalls,
   subAgentExecutions,
   formatSummary,
   defaultExpanded = false,
   className,
 }: ToolCallGroupProps) {
+  useRenderTracer("ToolCallGroup", { toolCallCount: toolCalls.length });
+
   const status = deriveAggregateStatus(toolCalls);
   const isActive = status === "running" || status === "pending" || status === "waiting";
 
@@ -245,7 +278,7 @@ export function ToolCallGroup({
       </div>
     </div>
   );
-}
+}, toolCallGroupPropsEqual);
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons — same as SP1, kept inline for SDK independence

package/src/execution/UsageWidget.tsx

@@ -12,7 +12,7 @@ export interface UsageWidgetProps {
   /**
    * All executions for the current session — both completed and
    * actively streaming.  The widget aggregates cost data across
-   * every execution's per-message `llm_metrics`, presenting a
+   * every execution's `usageSummary` (proxy-maintained), presenting a
    * session-level total that never resets.
    *
    * Renders nothing when the list is empty or no execution has

package/src/execution/__tests__/message-entry.test.tsx

@@ -0,0 +1,236 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { MessageEntry } from "../MessageEntry";
+
+afterEach(cleanup);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeMessage(
+  type: MessageType,
+  content: string,
+  opts?: { isStreaming?: boolean },
+) {
+  const msg = create(AgentMessageSchema);
+  msg.type = type;
+  msg.content = content;
+  if (opts?.isStreaming) msg.isStreaming = true;
+  return msg;
+}
+
+function queryArticle(container: HTMLElement, name: string) {
+  return container.querySelector(`[role="article"][aria-label="${name}"]`);
+}
+
+// ---------------------------------------------------------------------------
+// AI Messages — Streamdown integration
+// ---------------------------------------------------------------------------
+
+describe("MessageEntry — AI messages (Streamdown)", () => {
+  it("renders AI message content as markdown", () => {
+    const msg = makeMessage(MessageType.MESSAGE_AI, "Hello **world**");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    expect(article).not.toBeNull();
+    expect(article!.textContent).toContain("Hello");
+    expect(article!.textContent).toContain("world");
+
+    const strong = article!.querySelector("strong");
+    expect(strong).not.toBeNull();
+    expect(strong!.textContent).toBe("world");
+  });
+
+  it("sets aria-busy=true when streaming", () => {
+    const msg = makeMessage(MessageType.MESSAGE_AI, "Streaming...", {
+      isStreaming: true,
+    });
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    expect(article!.getAttribute("aria-busy")).toBe("true");
+  });
+
+  it("sets aria-busy=false when not streaming", () => {
+    const msg = makeMessage(MessageType.MESSAGE_AI, "Done.");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    expect(article!.getAttribute("aria-busy")).toBe("false");
+  });
+
+  it("renders GFM tables without explicit remark-gfm plugin", () => {
+    const tableMarkdown = [
+      "| A | B |",
+      "|---|---|",
+      "| 1 | 2 |",
+    ].join("\n");
+
+    const msg = makeMessage(MessageType.MESSAGE_AI, tableMarkdown);
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    const table = article!.querySelector("table");
+    expect(table).not.toBeNull();
+  });
+
+  it("applies MARKDOWN_COMPONENTS overrides (paragraph styling)", () => {
+    const msg = makeMessage(MessageType.MESSAGE_AI, "A paragraph");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    const p = article!.querySelector("p");
+    expect(p).not.toBeNull();
+    expect(p!.className).toContain("text-sm");
+    expect(p!.className).toContain("text-foreground");
+  });
+
+  it("applies MARKDOWN_COMPONENTS overrides (link styling)", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "[click here](https://example.com)",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    const a = article!.querySelector("a");
+    expect(a).not.toBeNull();
+    expect(a!.className).toContain("text-primary");
+    expect(a!.getAttribute("target")).toBe("_blank");
+    expect(a!.getAttribute("rel")).toContain("noopener");
+  });
+
+  it("applies MARKDOWN_COMPONENTS overrides (code block styling)", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```js\nconsole.log('hi');\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    const pre = article!.querySelector("pre");
+    expect(pre).not.toBeNull();
+    expect(pre!.className).toContain("rounded-md");
+    expect(pre!.className).toContain("bg-muted");
+  });
+
+  it("wraps content in stgm-prose container", () => {
+    const msg = makeMessage(MessageType.MESSAGE_AI, "Hello");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const prose = container.querySelector(".stgm-prose");
+    expect(prose).not.toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Human messages — unchanged
+// ---------------------------------------------------------------------------
+
+describe("MessageEntry — Human messages", () => {
+  it("renders human message as plain text", () => {
+    const msg = makeMessage(MessageType.MESSAGE_HUMAN, "User question");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "User message");
+    expect(article).not.toBeNull();
+    expect(article!.textContent).toContain("User question");
+  });
+
+  it("applies muted background styling", () => {
+    const msg = makeMessage(MessageType.MESSAGE_HUMAN, "Hello");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "User message");
+    expect(article!.className).toContain("bg-muted-subtle");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// System messages — unchanged
+// ---------------------------------------------------------------------------
+
+describe("MessageEntry — System messages", () => {
+  it("renders system message", () => {
+    const msg = makeMessage(MessageType.MESSAGE_SYSTEM, "System notice");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "System message");
+    expect(article).not.toBeNull();
+    expect(article!.textContent).toContain("System notice");
+  });
+
+  it("renders with italic muted styling", () => {
+    const msg = makeMessage(MessageType.MESSAGE_SYSTEM, "Notice");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "System message");
+    const p = article!.querySelector("p");
+    expect(p).not.toBeNull();
+    expect(p!.className).toContain("italic");
+    expect(p!.className).toContain("text-muted-foreground");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Thinking messages — unchanged
+// ---------------------------------------------------------------------------
+
+describe("MessageEntry — Thinking messages", () => {
+  it("renders thinking message with preview", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_THINKING,
+      "Let me consider this problem carefully and think through all the options.",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "Model thinking");
+    expect(article).not.toBeNull();
+  });
+
+  it("shows spinner icon when streaming", () => {
+    const msg = makeMessage(MessageType.MESSAGE_THINKING, "", {
+      isStreaming: true,
+    });
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "Model thinking");
+    const svg = article!.querySelector("svg.animate-spin");
+    expect(svg).not.toBeNull();
+  });
+
+  it("returns null for empty non-streaming thinking", () => {
+    const msg = makeMessage(MessageType.MESSAGE_THINKING, "");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    expect(container.innerHTML).toBe("");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tool / unspecified — renders nothing
+// ---------------------------------------------------------------------------
+
+describe("MessageEntry — Tool and unspecified messages", () => {
+  it("renders nothing for TOOL messages", () => {
+    const msg = makeMessage(MessageType.MESSAGE_TOOL, "tool result");
+    const { container } = render(<MessageEntry message={msg} />);
+
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders nothing for UNSPECIFIED messages", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_TYPE_UNSPECIFIED,
+      "unknown",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    expect(container.innerHTML).toBe("");
+  });
+});