@grackle-ai/web-components 0.107.2

package/src/components/display/EventRenderer.tsx

@@ -0,0 +1,271 @@
+import { type ReactNode, useState, type JSX } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import Markdown from "react-markdown";
+import rehypePrismPlus from "rehype-prism-plus/common";
+import remarkGfm from "remark-gfm";
+import type { SessionEvent } from "../../hooks/types.js";
+import { formatTokens, formatCost } from "../../utils/format.js";
+import { ICON_SM } from "../../utils/iconSize.js";
+import { ToolCard } from "../tools/ToolCard.js";
+import { CopyButton } from "./CopyButton.js";
+import styles from "./EventRenderer.module.scss";
+
+/** Props for the EventRenderer component. */
+interface Props {
+  event: SessionEvent;
+  /** Paired tool_use context, attached by SessionPanel when raw IDs match. */
+  toolUseCtx?: { tool: string; args: unknown; detailedResult?: string };
+  /** True when a tool_use completed but has no tool_result (e.g. Claude Code text-result pattern). */
+  settled?: boolean;
+}
+
+// --- Individual event type renderers ---
+
+/** Number of lines shown in the collapsed system context preview. */
+const SYSTEM_CONTEXT_PREVIEW_LINES: number = 3;
+
+/** Renders the system context (system prompt) as a collapsible left-bordered section. */
+function SystemContextEvent({ content }: { content: string }): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const lines = content.split("\n");
+  const hasMore = lines.length > SYSTEM_CONTEXT_PREVIEW_LINES;
+  const displayContent = expanded ? content : lines.slice(0, SYSTEM_CONTEXT_PREVIEW_LINES).join("\n");
+
+  return (
+    <div className={styles.systemContextEvent} data-testid="system-context-event">
+      <button
+        type="button"
+        className={styles.systemContextHeader}
+        onClick={() => { setExpanded((v) => !v); }}
+        aria-expanded={expanded}
+      >
+        <span className={styles.systemContextBadge}>SYSTEM PROMPT</span>
+        {hasMore && (
+          <span className={styles.systemContextToggle} aria-hidden="true">
+            {expanded ? <ChevronDown size={ICON_SM} /> : <ChevronRight size={ICON_SM} />}
+          </span>
+        )}
+      </button>
+      <pre className={styles.systemContextPre}>
+        {displayContent}
+        {!expanded && hasMore && (
+          <span className={styles.systemContextEllipsis}>{"\u2026"}</span>
+        )}
+      </pre>
+    </div>
+  );
+}
+
+/** Renders a system-level event with timestamp. */
+function SystemEvent({ time, content }: { time: string; content: string }): JSX.Element {
+  return (
+    <div className={styles.systemEvent}>
+      <span className={styles.systemTimestamp}>[{time}]</span> {content}
+    </div>
+  );
+}
+
+/** Recursively extracts plain text from React children (for code block copy). */
+export function extractText(node: ReactNode): string {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractText).join("");
+  }
+  if (node !== null && node !== undefined && typeof node === "object" && "props" in node) {
+    return extractText((node as { props: { children?: ReactNode } }).props.children);
+  }
+  return "";
+}
+
+/** Props passed by react-markdown to component overrides. */
+interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
+  children?: ReactNode;
+  /** AST node injected by react-markdown — must not be spread onto the DOM element. */
+  node?: unknown;
+}
+
+/** Wraps markdown `<pre>` blocks with a CopyButton for code-only copy. */
+function CodeBlockWrapper({ children, node, ...preProps }: PreProps): JSX.Element {
+  // node is destructured solely to exclude it from the DOM spread
+  if (node === undefined) { /* intentionally unused */ }
+  const rawText = extractText(children);
+  return (
+    <div className={styles.codeBlockWrapper}>
+      <pre {...preProps}>{children}</pre>
+      <CopyButton text={rawText} data-testid="copy-code-block" className={styles.codeBlockCopyButton} />
+    </div>
+  );
+}
+
+/** Markdown component overrides for adding copy buttons to code blocks. */
+const markdownComponents: Record<string, typeof CodeBlockWrapper> = {
+  pre: CodeBlockWrapper,
+};
+
+/** Renders an assistant text output event with markdown formatting. */
+function TextEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.textEvent}>
+      <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrismPlus]} components={markdownComponents}>
+        {content}
+      </Markdown>
+    </div>
+  );
+}
+
+// ToolUseEvent and ToolResultEvent have been replaced by the ToolCard component
+// in packages/web/src/components/tools/. See ToolCard.tsx for the router and
+// individual card components (FileReadCard, FileEditCard, ShellCard, etc.).
+
+/** Renders an error event with red styling. */
+function ErrorEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.errorEvent}>
+      Error: {content}
+    </div>
+  );
+}
+
+/** Renders a status change event with separator lines. */
+function StatusEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.statusEvent}>
+      --- {content} ---
+    </div>
+  );
+}
+
+/** Renders a user input event, right-aligned to distinguish it from agent output. */
+function UserInputEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.userInputEvent}>
+      <span className={styles.userInputContent}>{content}</span>
+    </div>
+  );
+}
+
+/** Renders a signal event (e.g. SIGCHLD) as a left-bordered banner. */
+function SignalEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.signalEvent} data-testid="signal-event">
+      <span className={styles.signalBadge}>SIGNAL</span>
+      <span className={styles.signalContent}>{content}</span>
+    </div>
+  );
+}
+
+/** Renders a usage event as a compact cost badge. */
+function UsageEvent({ content }: { content: string }): JSX.Element {
+  let label = content;
+  try {
+    const data = JSON.parse(content) as Record<string, unknown>;
+    const inTok = Number(data.input_tokens) || 0;
+    const outTok = Number(data.output_tokens) || 0;
+    const tokens = formatTokens(inTok + outTok);
+    const cost = formatCost(Number(data.cost_millicents) || 0);
+    label = `${tokens} tokens \u00b7 ${cost}`;
+  } catch { /* show raw content if JSON fails */ }
+  return (
+    <div className={styles.usageEvent} data-testid="usage-event">
+      <span className={styles.usageBadge}>{label}</span>
+    </div>
+  );
+}
+
+/** Renders an unrecognized event type. */
+function DefaultEvent({ content }: { content: string }): JSX.Element {
+  return (
+    <div className={styles.defaultEvent}>{content}</div>
+  );
+}
+
+// --- Main component ---
+
+/** Renders a single session event, dispatching to the appropriate type-specific renderer. */
+export function EventRenderer({ event, toolUseCtx, settled }: Props): JSX.Element {
+  const time = new Date(event.timestamp).toLocaleTimeString();
+
+  switch (event.eventType) {
+    case "system": {
+      // Detect system context events via the raw metadata marker
+      if (event.raw) {
+        try {
+          const rawData = JSON.parse(event.raw) as Record<string, unknown>;
+          if (rawData.systemContext === true) {
+            return <SystemContextEvent content={event.content} />;
+          }
+        } catch { /* not JSON, render as normal system event */ }
+      }
+      return <SystemEvent time={time} content={event.content} />;
+    }
+    case "text":
+    case "output":
+      return <TextEvent content={event.content} />;
+    case "tool_use": {
+      let tool = "";
+      let args: unknown = {};
+      try {
+        const parsed = JSON.parse(event.content) as { tool?: string; args?: unknown };
+        tool = parsed.tool || "";
+        args = parsed.args;
+      } catch { /* fallback to empty */ }
+      // When settled, pass empty result so the card shows as completed (no spinner)
+      // rather than in-progress. This handles Claude Code which emits results as text.
+      return <ToolCard tool={tool} args={args} result={settled ? "" : undefined} />;
+    }
+    case "tool_result": {
+      // When paired, toolUseCtx provides the tool name, args, and optional detailedResult.
+      // When unpaired, fall back to a generic display.
+      let isError = false;
+      if (event.raw) {
+        try {
+          const rawData = JSON.parse(event.raw) as Record<string, unknown>;
+          isError = rawData.is_error === true;
+        } catch { /* ignore */ }
+      }
+
+      // Try to extract displayable content from JSON-wrapped results.
+      // Guard with startsWith check to avoid throwing on plain text content.
+      let resultContent = event.content;
+      if (event.content.trimStart().startsWith("{")) {
+        try {
+          const parsed = JSON.parse(event.content) as Record<string, unknown>;
+          if (typeof parsed.content === "string") {
+            resultContent = parsed.content;
+          }
+        } catch { /* content looks like JSON but isn't — use as-is */ }
+      }
+
+      if (toolUseCtx) {
+        return (
+          <ToolCard
+            tool={toolUseCtx.tool}
+            args={toolUseCtx.args}
+            result={resultContent}
+            isError={isError}
+            detailedResult={toolUseCtx.detailedResult}
+          />
+        );
+      }
+      // Unpaired tool_result — use generic card with fallback label
+      return <ToolCard tool="Tool output" args={undefined} result={resultContent} isError={isError} />;
+    }
+    case "error":
+      return <ErrorEvent content={event.content} />;
+    case "status":
+      return <StatusEvent content={event.content} />;
+    case "user_input":
+      return <UserInputEvent content={event.content} />;
+    case "signal":
+      return <SignalEvent content={event.content} />;
+    case "usage":
+      return <UsageEvent content={event.content} />;
+    default:
+      return <DefaultEvent content={event.content} />;
+  }
+}

package/src/components/display/EventStream.module.scss

@@ -0,0 +1,93 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// EventStream — scrollable event list with smart scroll + direction toggle
+// =============================================================================
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.scrollContainer {
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-md);
+  // Extra top padding so the first event's hover action bar (positioned
+  // above via top: -28px) is not clipped by the scroll container.
+  padding-top: calc(var(--space-md) + 28px);
+}
+
+// Extra bottom padding when floating action bar is visible, so the last event
+// is not occluded by the bar.
+.selectingPadding {
+  padding-bottom: 64px;
+}
+
+.toolbar {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-md);
+  z-index: 10;
+}
+
+.directionToggle {
+  @include btn-ghost(var(--text-secondary));
+  @include surface-inset;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  padding: 0;
+  border-radius: var(--radius-sm);
+}
+
+.scrollToAnchor {
+  position: absolute;
+  z-index: 10;
+  right: var(--space-md);
+  @include surface-card;
+  padding: var(--space-xs) var(--space-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.scrollToAnchorBottom {
+  bottom: var(--space-md);
+}
+
+.scrollToAnchorTop {
+  top: calc(var(--space-sm) + 36px);
+}
+
+// ---------------------------------------------------------------------------
+// Event overflow warning (shown when events exceed the 5,000 in-memory cap)
+// ---------------------------------------------------------------------------
+
+.eventOverflowWarning {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) var(--space-sm);
+  margin-bottom: var(--space-sm);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--accent-yellow) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-yellow) 35%, transparent);
+  color: var(--accent-yellow);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-mono);
+}

package/src/components/display/EventStream.stories.tsx

@@ -0,0 +1,249 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { EventStream } from "./EventStream.js";
+import type { DisplayEvent } from "../../utils/sessionEvents.js";
+import { makeEvent, makeSession, makeEnvironment } from "../../test-utils/storybook-helpers.js";
+
+const sampleEvents: DisplayEvent[] = [
+  makeEvent({ eventType: "text", content: "First message", timestamp: "2026-01-01T00:00:01Z" }),
+  makeEvent({ eventType: "text", content: "Second message", timestamp: "2026-01-01T00:00:02Z" }),
+  makeEvent({ eventType: "text", content: "Third message", timestamp: "2026-01-01T00:00:03Z" }),
+];
+
+/** A richer set of events including non-content types for selection mode tests. */
+const mixedEvents: DisplayEvent[] = [
+  makeEvent({ eventType: "user_input", content: "Fix the bug", timestamp: "2026-01-01T00:00:01Z" }),
+  makeEvent({ eventType: "text", content: "Looking into it.", timestamp: "2026-01-01T00:00:02Z" }),
+  makeEvent({ eventType: "status", content: "running", timestamp: "2026-01-01T00:00:03Z" }),
+  makeEvent({ eventType: "text", content: "Found the issue in auth.ts", timestamp: "2026-01-01T00:00:04Z" }),
+  makeEvent({ eventType: "error", content: "Test failed", timestamp: "2026-01-01T00:00:05Z" }),
+];
+
+const meta: Meta<typeof EventStream> = {
+  component: EventStream,
+  title: "Grackle/Display/EventStream",
+  tags: ["autodocs"],
+  args: {
+    events: sampleEvents,
+    eventsDropped: 0,
+    onShowToast: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default stream with events in chronological order. */
+export const Default: Story = {};
+
+/** Direction toggle button is present. */
+export const DirectionToggle: Story = {
+  play: async ({ canvas }) => {
+    const toggle = canvas.getByTestId("direction-toggle");
+    await expect(toggle).toBeInTheDocument();
+  },
+};
+
+/** Empty state renders when no events. */
+export const EmptyState: Story = {
+  args: {
+    events: [],
+    emptyState: <div data-testid="custom-empty">No events yet</div>,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("custom-empty")).toBeInTheDocument();
+  },
+};
+
+/** Hover over a content event to see action buttons. */
+export const HoverActions: Story = {
+  play: async ({ canvas }) => {
+    // Hover actions should exist in the DOM (opacity controlled by CSS)
+    const hoverRows = canvas.getAllByTestId("event-hover-row");
+    await expect(hoverRows.length).toBeGreaterThan(0);
+
+    // Each content event should have copy and select buttons
+    const copyButtons = canvas.getAllByTestId("event-hover-copy");
+    await expect(copyButtons.length).toBe(sampleEvents.length);
+
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await expect(selectButtons.length).toBe(sampleEvents.length);
+  },
+};
+
+/** Non-content events (status) do not get hover actions. */
+export const NonContentNoHover: Story = {
+  args: {
+    events: mixedEvents,
+  },
+  play: async ({ canvas }) => {
+    // 4 content events out of 5 total (status is not content-bearing)
+    const hoverRows = canvas.getAllByTestId("event-hover-row");
+    await expect(hoverRows.length).toBe(4);
+  },
+};
+
+/** Clicking Select enters selection mode with floating action bar. */
+export const SelectionMode: Story = {
+  args: {
+    events: mixedEvents,
+  },
+  play: async ({ canvas }) => {
+    // Click the Select button on the first event
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Floating action bar should appear
+    const bar = canvas.getByTestId("floating-action-bar");
+    await expect(bar).toBeInTheDocument();
+
+    // Count should show 1 selected
+    const count = canvas.getByTestId("floating-bar-count");
+    await expect(count).toHaveTextContent("1 selected");
+
+    // Checkboxes should be visible
+    const checkboxes = canvas.getAllByTestId("event-select-checkbox");
+    await expect(checkboxes.length).toBe(4); // 4 content-bearing events
+  },
+};
+
+/** Select multiple events and verify count updates. */
+export const MultiSelect: Story = {
+  args: {
+    events: mixedEvents,
+  },
+  play: async ({ canvas }) => {
+    // Enter selection mode via first event
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Click second checkbox to select it too
+    const checkboxes = canvas.getAllByTestId("event-select-checkbox");
+    await userEvent.click(checkboxes[1]);
+
+    // Count should show 2
+    const count = canvas.getByTestId("floating-bar-count");
+    await expect(count).toHaveTextContent("2 selected");
+  },
+};
+
+/** Select All selects all content-bearing events. */
+export const SelectAll: Story = {
+  args: {
+    events: mixedEvents,
+  },
+  play: async ({ canvas }) => {
+    // Enter selection mode
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Click "Select all"
+    const selectAllBtn = canvas.getByTestId("floating-bar-select-all");
+    await expect(selectAllBtn).toHaveTextContent("Select all");
+    await userEvent.click(selectAllBtn);
+
+    // Count should show all content-bearing events (4 of 5)
+    const count = canvas.getByTestId("floating-bar-count");
+    await expect(count).toHaveTextContent("4 selected");
+
+    // Button should now say "Deselect all"
+    await expect(selectAllBtn).toHaveTextContent("Deselect all");
+  },
+};
+
+/** Forward button appears in floating bar when sessions + onForward are provided. */
+export const ForwardButtonVisible: Story = {
+  args: {
+    events: mixedEvents,
+    sessions: [
+      makeSession({ id: "sess-target", environmentId: "env-1", status: "running", prompt: "Another task" }),
+    ],
+    environments: [makeEnvironment({ id: "env-1", displayName: "Production" })],
+    currentSessionId: "sess-current",
+    onForward: fn(),
+  },
+  play: async ({ canvas }) => {
+    // Enter selection mode
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Forward button should be present and enabled (there is an active target session)
+    const forwardBtn = canvas.getByTestId("floating-bar-forward");
+    await expect(forwardBtn).toBeInTheDocument();
+    await expect(forwardBtn).toBeEnabled();
+  },
+};
+
+/** Forward button is disabled when no other active sessions exist. */
+export const ForwardButtonDisabled: Story = {
+  args: {
+    events: mixedEvents,
+    sessions: [],
+    environments: [],
+    currentSessionId: "sess-current",
+    onForward: fn(),
+  },
+  play: async ({ canvas }) => {
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    const forwardBtn = canvas.getByTestId("floating-bar-forward");
+    await expect(forwardBtn).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/** Clicking Forward opens the session picker dialog. */
+export const ForwardOpensSessionPicker: Story = {
+  args: {
+    events: mixedEvents,
+    sessions: [
+      makeSession({ id: "sess-target", environmentId: "env-1", status: "idle", prompt: "Other task" }),
+    ],
+    environments: [makeEnvironment({ id: "env-1", displayName: "Dev" })],
+    currentSessionId: "sess-current",
+    onForward: fn(),
+  },
+  play: async ({ canvas }) => {
+    // Enter selection mode
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Click Forward
+    const forwardBtn = canvas.getByTestId("floating-bar-forward");
+    await userEvent.click(forwardBtn);
+
+    // Session picker dialog should appear
+    const dialog = canvas.getByTestId("session-picker-dialog");
+    await expect(dialog).toBeInTheDocument();
+
+    // The target session should be listed
+    await expect(canvas.getByTestId("session-picker-item-sess-target")).toBeInTheDocument();
+  },
+};
+
+/** Cancel exits selection mode -- checkboxes disappear. */
+export const CancelSelection: Story = {
+  args: {
+    events: mixedEvents,
+  },
+  play: async ({ canvas, canvasElement }) => {
+    // Enter selection mode
+    const selectButtons = canvas.getAllByTestId("event-hover-select");
+    await userEvent.click(selectButtons[0]);
+
+    // Verify checkboxes are present (selection mode active)
+    const checkboxes = canvas.getAllByTestId("event-select-checkbox");
+    await expect(checkboxes.length).toBe(4);
+
+    // Click cancel
+    const cancelBtn = canvas.getByTestId("floating-bar-cancel");
+    await userEvent.click(cancelBtn);
+
+    // Selection mode exited: checkboxes should be gone, hover rows should be back
+    const checkboxesAfter = canvasElement.querySelectorAll("[data-testid='event-select-checkbox']");
+    await expect(checkboxesAfter.length).toBe(0);
+
+    // Hover rows should be back (content events re-render in normal mode)
+    const hoverRows = canvas.getAllByTestId("event-hover-row");
+    await expect(hoverRows.length).toBe(4);
+  },
+};