@grackle-ai/web-components 0.107.2

package/src/utils/scrollUtils.ts

@@ -0,0 +1,49 @@
+/**
+ * Pure scroll-math utilities for the smart-scroll feature.
+ * No DOM or React dependencies — easy to unit test.
+ */
+
+/** Pixel threshold for "near anchor" detection. */
+export const SCROLL_ANCHOR_THRESHOLD_PX: number = 50;
+
+/**
+ * Whether the scroll position is within threshold of the anchor point.
+ *
+ * @param scrollTop - Current scrollTop of the container
+ * @param scrollHeight - Total scrollable height of the container
+ * @param clientHeight - Visible height of the container
+ * @param isReversed - If true, anchor is at the top; otherwise at bottom
+ * @param threshold - Override the default 50px threshold
+ * @returns True if the scroll position is near the anchor
+ */
+export function isNearAnchor(
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+  isReversed: boolean,
+  threshold: number = SCROLL_ANCHOR_THRESHOLD_PX,
+): boolean {
+  if (isReversed) {
+    // Anchor is at the top — near anchor when scrollTop is small
+    return scrollTop < threshold;
+  }
+  // Anchor is at the bottom — near anchor when close to max scroll
+  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+  return distanceFromBottom < threshold;
+}
+
+/**
+ * Compute the scrollTop delta needed to compensate for prepended content.
+ * Used in reverse mode to prevent viewport shift when new items appear at top.
+ *
+ * @param previousScrollHeight - scrollHeight before the render
+ * @param currentScrollHeight - scrollHeight after the render
+ * @returns Positive delta to add to scrollTop, or 0 if no compensation needed
+ */
+export function computeScrollCompensation(
+  previousScrollHeight: number,
+  currentScrollHeight: number,
+): number {
+  const delta = currentScrollHeight - previousScrollHeight;
+  return delta > 0 ? delta : 0;
+}

package/src/utils/sessionEvents.test.ts

@@ -0,0 +1,302 @@
+import { describe, it, expect } from "vitest";
+import { groupConsecutiveTextEvents, pairToolEvents } from "./sessionEvents.js";
+import type { SessionEvent } from "../hooks/types.js";
+
+/** Creates a minimal SessionEvent for testing. */
+function makeEvent(overrides: Partial<SessionEvent> & { eventType: string }): SessionEvent {
+  return {
+    id: "evt-" + Math.random().toString(36).slice(2, 8),
+    sessionId: "session-1",
+    timestamp: new Date().toISOString(),
+    content: "",
+    ...overrides,
+  } as SessionEvent;
+}
+
+describe("groupConsecutiveTextEvents", () => {
+  it("merges consecutive text events", () => {
+    const events = [
+      makeEvent({ eventType: "text", content: "Hello " }),
+      makeEvent({ eventType: "text", content: "world" }),
+    ];
+    const result = groupConsecutiveTextEvents(events);
+    expect(result).toHaveLength(1);
+    expect(result[0].content).toBe("Hello world");
+  });
+
+  it("does not merge non-consecutive text events", () => {
+    const events = [
+      makeEvent({ eventType: "text", content: "first" }),
+      makeEvent({ eventType: "system", content: "separator" }),
+      makeEvent({ eventType: "text", content: "second" }),
+    ];
+    const result = groupConsecutiveTextEvents(events);
+    expect(result).toHaveLength(3);
+  });
+});
+
+describe("pairToolEvents", () => {
+  describe("Anthropic ID format (Claude Code)", () => {
+    it("pairs tool_use with tool_result by raw.id / raw.tool_use_id", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_abc123", name: "Bash" }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "file1.txt\nfile2.txt",
+          raw: JSON.stringify({ tool_use_id: "toolu_abc123", is_error: false }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      // tool_use consumed, only tool_result with context remains
+      expect(result).toHaveLength(1);
+      expect(result[0].eventType).toBe("tool_result");
+      expect(result[0].toolUseCtx).toBeDefined();
+      expect(result[0].toolUseCtx!.tool).toBe("Bash");
+      expect(result[0].content).toBe("file1.txt\nfile2.txt");
+    });
+  });
+
+  describe("Copilot ID format", () => {
+    it("pairs tool_use with tool_result by raw.data.toolCallId", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "powershell", args: { command: "ls" } }),
+          raw: JSON.stringify({
+            type: "tool.execution_start",
+            data: { toolCallId: "call_xyz789", toolName: "powershell" },
+          }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "Directory listing...",
+          raw: JSON.stringify({
+            type: "tool.execution_complete",
+            data: { toolCallId: "call_xyz789", success: true },
+          }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(1);
+      expect(result[0].eventType).toBe("tool_result");
+      expect(result[0].toolUseCtx).toBeDefined();
+      expect(result[0].toolUseCtx!.tool).toBe("powershell");
+    });
+  });
+
+  describe("Codex ID format", () => {
+    it("pairs tool_use with tool_result by raw.item.id", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "command_execution", args: { command: "ls" } }),
+          raw: JSON.stringify({
+            type: "item.started",
+            item: { id: "item_1", type: "command_execution" },
+          }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "[exit 0] file1.txt",
+          raw: JSON.stringify({
+            type: "item.completed",
+            item: { id: "item_1", type: "command_execution" },
+          }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(1);
+      expect(result[0].eventType).toBe("tool_result");
+      expect(result[0].toolUseCtx).toBeDefined();
+      expect(result[0].toolUseCtx!.tool).toBe("command_execution");
+    });
+  });
+
+  describe("adjacent fallback pairing", () => {
+    it("pairs unpaired tool_use with immediately adjacent tool_result", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "echo hi" } }),
+          // No raw metadata — cannot pair by ID
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "hi",
+          // No raw metadata — cannot pair by ID
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(1);
+      expect(result[0].eventType).toBe("tool_result");
+      expect(result[0].toolUseCtx).toBeDefined();
+      expect(result[0].toolUseCtx!.tool).toBe("Bash");
+    });
+
+    it("does not pair tool_result that appears before tool_use", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_result",
+          content: "orphan result",
+        }),
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      // Both remain unpaired
+      expect(result).toHaveLength(2);
+      expect(result[0].eventType).toBe("tool_result");
+      expect(result[0].toolUseCtx).toBeUndefined();
+      expect(result[1].eventType).toBe("tool_use");
+    });
+
+    it("does not pair non-adjacent tool_use and tool_result", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+        }),
+        makeEvent({
+          eventType: "text",
+          content: "some text in between",
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "result",
+        }),
+      ];
+      const result = pairToolEvents(events);
+      // All three remain (tool_use not consumed, text stays, tool_result unpaired)
+      expect(result).toHaveLength(3);
+      expect(result[0].eventType).toBe("tool_use");
+      expect(result[2].eventType).toBe("tool_result");
+      expect(result[2].toolUseCtx).toBeUndefined();
+    });
+  });
+
+  describe("multiple tool calls", () => {
+    it("pairs multiple Codex tool calls correctly", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "command_execution", args: { command: "ls" } }),
+          raw: JSON.stringify({ type: "item.started", item: { id: "item_1" } }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: "[exit 0] files...",
+          raw: JSON.stringify({ type: "item.completed", item: { id: "item_1" } }),
+        }),
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "mcp__grackle__workpad_write", args: { status: "done" } }),
+          raw: JSON.stringify({ type: "item.started", item: { id: "item_2" } }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: '{"taskId":"abc"}',
+          raw: JSON.stringify({ type: "item.completed", item: { id: "item_2" } }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(2);
+      expect(result[0].toolUseCtx!.tool).toBe("command_execution");
+      expect(result[1].toolUseCtx!.tool).toBe("mcp__grackle__workpad_write");
+    });
+  });
+
+  describe("detailedResult extraction", () => {
+    it("extracts detailedContent from Copilot tool result JSON", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "edit", args: { file: "test.ts" } }),
+          raw: JSON.stringify({ data: { toolCallId: "call_1" } }),
+        }),
+        makeEvent({
+          eventType: "tool_result",
+          content: JSON.stringify({ content: "Applied changes", detailedContent: "--- a/test.ts\n+++ b/test.ts\n@@ -1 +1 @@\n-old\n+new" }),
+          raw: JSON.stringify({ data: { toolCallId: "call_1" } }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(1);
+      expect(result[0].toolUseCtx!.detailedResult).toBe("--- a/test.ts\n+++ b/test.ts\n@@ -1 +1 @@\n-old\n+new");
+    });
+  });
+
+  describe("unpaired tool_use (Claude Code text-result pattern)", () => {
+    it("leaves tool_use in display when no tool_result exists", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_abc" }),
+        }),
+        makeEvent({
+          eventType: "text",
+          content: "```\nfile1.txt\nfile2.txt\n```",
+        }),
+      ];
+      const result = pairToolEvents(events);
+      // tool_use remains (not consumed), text remains
+      expect(result).toHaveLength(2);
+      expect(result[0].eventType).toBe("tool_use");
+      expect(result[1].eventType).toBe("text");
+    });
+
+    it("marks unpaired tool_use as settled when subsequent events exist", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_abc" }),
+        }),
+        makeEvent({
+          eventType: "text",
+          content: "```\nfile1.txt\n```",
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result[0].settled).toBe(true);
+    });
+
+    it("does not mark tool_use as settled when it is the last event (still running)", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "npm install" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_xyz" }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(1);
+      expect(result[0].settled).toBeUndefined();
+    });
+
+    it("does not mark tool_use as settled when only more tool_use events follow", () => {
+      const events = [
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "ls" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_1" }),
+        }),
+        makeEvent({
+          eventType: "tool_use",
+          content: JSON.stringify({ tool: "Bash", args: { command: "pwd" } }),
+          raw: JSON.stringify({ type: "tool_use", id: "toolu_2" }),
+        }),
+      ];
+      const result = pairToolEvents(events);
+      expect(result).toHaveLength(2);
+      expect(result[0].settled).toBeUndefined();
+      expect(result[1].settled).toBeUndefined();
+    });
+  });
+});

package/src/utils/sessionEvents.ts

@@ -0,0 +1,233 @@
+import type { SessionEvent } from "../hooks/types.js";
+
+/** Session event augmented with optional tool_use context for paired tool results. */
+export type DisplayEvent = SessionEvent & {
+  toolUseCtx?: { tool: string; args: unknown; detailedResult?: string };
+  /**
+   * True when a tool_use event has no matching tool_result but subsequent events
+   * prove the tool completed (e.g. Claude Code emits results as text, not tool_result).
+   * EventRenderer uses this to avoid showing a misleading in-progress spinner.
+   */
+  settled?: boolean;
+};
+
+/** Merges consecutive "text" events into single entries with concatenated content. */
+export function groupConsecutiveTextEvents(events: SessionEvent[]): SessionEvent[] {
+  const result: SessionEvent[] = [];
+  for (const event of events) {
+    const previous = result[result.length - 1];
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- previous is undefined on first iteration
+    if (event.eventType === "text" && previous?.eventType === "text") {
+      result[result.length - 1] = { ...previous, content: previous.content + event.content };
+    } else {
+      result.push(event);
+    }
+  }
+  return result;
+}
+
+/**
+ * Extracts the tool-use ID from a tool_use event's raw metadata.
+ *
+ * Different runtimes store the ID in different locations:
+ * - Claude Code (Anthropic SDK): `raw.id` (e.g. "toolu_...")
+ * - Copilot: `raw.data.toolCallId` (e.g. "call_...")
+ * - Codex: `raw.item.id` (e.g. "item_1")
+ */
+function extractToolUseId(raw: Record<string, unknown>): string | undefined {
+  if (typeof raw.id === "string") {
+    return raw.id;
+  }
+  const data = raw.data as Record<string, unknown> | undefined;
+  if (data && typeof data.toolCallId === "string") {
+    return data.toolCallId;
+  }
+  const item = raw.item as Record<string, unknown> | undefined;
+  if (item && typeof item.id === "string") {
+    return item.id;
+  }
+  return undefined;
+}
+
+/**
+ * Extracts the tool-use ID from a tool_result event's raw metadata.
+ *
+ * Different runtimes store the back-reference in different locations:
+ * - Claude Code (Anthropic SDK): `raw.tool_use_id`
+ * - Copilot: `raw.data.toolCallId`
+ * - Codex: `raw.item.id`
+ */
+function extractToolResultId(raw: Record<string, unknown>): string | undefined {
+  if (typeof raw.tool_use_id === "string") {
+    return raw.tool_use_id;
+  }
+  const data = raw.data as Record<string, unknown> | undefined;
+  if (data && typeof data.toolCallId === "string") {
+    return data.toolCallId;
+  }
+  const item = raw.item as Record<string, unknown> | undefined;
+  if (item && typeof item.id === "string") {
+    return item.id;
+  }
+  return undefined;
+}
+
+/** Pairs tool_use events with their tool_result counterparts. */
+export function pairToolEvents(events: SessionEvent[]): DisplayEvent[] {
+  const parsedRaw = new Map<SessionEvent, Record<string, unknown>>();
+  for (const e of events) {
+    if (!e.raw) continue;
+    try {
+      parsedRaw.set(e, JSON.parse(e.raw) as Record<string, unknown>);
+    } catch { /* skip unparseable events */ }
+  }
+
+  // Build a map of tool_use IDs → context, supporting all runtime ID formats.
+  const toolUseById = new Map<string, { tool: string; args: unknown }>();
+  for (const e of events) {
+    if (e.eventType !== "tool_use") continue;
+    const raw = parsedRaw.get(e);
+    const id = raw ? extractToolUseId(raw) : undefined;
+    if (!id) continue;
+    try {
+      const content = JSON.parse(e.content) as { tool: string; args: unknown };
+      toolUseById.set(id, { tool: content.tool, args: content.args });
+    } catch { /* skip unparseable events */ }
+  }
+
+  // Phase 1: ID-based pairing — match tool_result events to tool_use by ID.
+  const consumedIds = new Set<string>();
+  const pairedResultIndices = new Set<number>();
+  const display: DisplayEvent[] = events.map((e, index) => {
+    if (e.eventType !== "tool_result") return e;
+    const raw = parsedRaw.get(e);
+    const resultId = raw ? extractToolResultId(raw) : undefined;
+    if (!resultId) return e;
+    const ctx = toolUseById.get(resultId);
+    if (!ctx) return e;
+    consumedIds.add(resultId);
+    pairedResultIndices.add(index);
+
+    // Extract detailedResult from content when it's a JSON object with detailedContent
+    // (Copilot emits tool results in this format with embedded diffs).
+    // Guard with startsWith check to avoid throwing on plain text / large outputs.
+    let detailedResult: string | undefined;
+    const contentStr: string = e.content.trim();
+    if (contentStr.startsWith("{")) {
+      try {
+        const parsed = JSON.parse(contentStr) as Record<string, unknown>;
+        if (typeof parsed.detailedContent === "string") {
+          detailedResult = parsed.detailedContent;
+        }
+      } catch { /* content looks like JSON but isn't — skip */ }
+    }
+
+    return { ...e, toolUseCtx: { ...ctx, detailedResult } };
+  });
+
+  // Phase 2: Adjacent fallback — pair remaining unpaired tool_use with an immediately
+  // adjacent unpaired tool_result. Only pairs when the tool_result directly follows
+  // the tool_use (no events between them) to avoid mis-pairing in async scenarios.
+  const unpairedToolUseIndices: number[] = [];
+  for (let i = 0; i < display.length; i++) {
+    if (display[i].eventType !== "tool_use") continue;
+    const raw = parsedRaw.get(display[i]);
+    const id = raw ? extractToolUseId(raw) : undefined;
+    if (id && consumedIds.has(id)) continue;
+    unpairedToolUseIndices.push(i);
+  }
+
+  const unpairedResultIndices: number[] = [];
+  for (let i = 0; i < display.length; i++) {
+    if (display[i].eventType !== "tool_result" || pairedResultIndices.has(i)) continue;
+    unpairedResultIndices.push(i);
+  }
+
+  // Match unpaired tool_use to an immediately adjacent unpaired tool_result.
+  let resultCursor = 0;
+  for (const useIdx of unpairedToolUseIndices) {
+    // Advance cursor past results that appear before this tool_use
+    while (resultCursor < unpairedResultIndices.length && unpairedResultIndices[resultCursor] < useIdx) {
+      resultCursor++;
+    }
+    if (resultCursor >= unpairedResultIndices.length) break;
+
+    const resultIdx = unpairedResultIndices[resultCursor];
+    // Only pair if the tool_result is the immediately next event (adjacent)
+    if (resultIdx !== useIdx + 1) continue;
+    const useEvent = display[useIdx];
+    const resultEvent = display[resultIdx];
+
+    let ctx: { tool: string; args: unknown } | undefined;
+    try {
+      const content = JSON.parse(useEvent.content) as { tool: string; args: unknown };
+      ctx = { tool: content.tool, args: content.args };
+    } catch { /* skip */ }
+
+    if (ctx) {
+      // Extract detailedResult
+      let detailedResult: string | undefined;
+      const contentStr: string = resultEvent.content.trim();
+      if (contentStr.startsWith("{")) {
+        try {
+          const parsed = JSON.parse(contentStr) as Record<string, unknown>;
+          if (typeof parsed.detailedContent === "string") {
+            detailedResult = parsed.detailedContent;
+          }
+        } catch { /* skip */ }
+      }
+
+      display[resultIdx] = { ...resultEvent, toolUseCtx: { ...ctx, detailedResult } };
+      pairedResultIndices.add(resultIdx);
+
+      // Mark the tool_use as consumed so it's filtered out below
+      const raw = parsedRaw.get(useEvent);
+      const id = raw ? extractToolUseId(raw) : undefined;
+      if (id) {
+        consumedIds.add(id);
+      } else {
+        // No ID available — use a synthetic marker to track consumption
+        consumedIds.add(`__seq_${useIdx}`);
+        // Store the synthetic ID so the filter below can find it
+        parsedRaw.set(useEvent, { ...(raw ?? {}), __seqId: `__seq_${useIdx}` });
+      }
+      resultCursor++;
+    }
+  }
+
+  // Filter out consumed tool_use events (their info is now embedded in tool_result).
+  const filtered = display.filter((e) => {
+    if (e.eventType !== "tool_use") return true;
+    const raw = parsedRaw.get(e);
+    if (!raw) return true;
+    const id = extractToolUseId(raw);
+    if (id && consumedIds.has(id)) return false;
+    // Check synthetic sequential marker
+    const seqId = raw.__seqId as string | undefined;
+    if (seqId && consumedIds.has(seqId)) return false;
+    return true;
+  });
+
+  // Phase 3: Mark remaining unpaired tool_use events as "settled" if subsequent
+  // events prove the tool completed. This handles runtimes like Claude Code that
+  // emit tool results as text events rather than tool_result events — without this,
+  // the ShellCard shows a misleading in-progress spinner forever.
+  for (let i = 0; i < filtered.length; i++) {
+    if (filtered[i].eventType !== "tool_use") continue;
+    // Only settle if there is at least one subsequent non-tool_use event.
+    // This avoids prematurely settling in multi-tool sequences where only
+    // more tool_use events follow (the tools may still be running).
+    let hasNonToolUseAfter = false;
+    for (let j = i + 1; j < filtered.length; j++) {
+      if (filtered[j].eventType !== "tool_use") {
+        hasNonToolUseAfter = true;
+        break;
+      }
+    }
+    if (hasNonToolUseAfter) {
+      filtered[i] = { ...filtered[i], settled: true };
+    }
+  }
+
+  return filtered;
+}