@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,272 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Event Renderer — individual session event styles
+// =============================================================================
+
+// System context (system prompt) — collapsible left-bordered section
+.systemContextEvent {
+  border-left: 3px solid var(--accent-purple, #a78bfa);
+  margin: var(--space-xs) 0;
+  font-size: var(--font-size-sm);
+}
+
+.systemContextHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  background: none;
+  border: none;
+  padding: 2px var(--space-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: inherit;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast),
+              background var(--transition-fast);
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--bg-overlay);
+  }
+}
+
+.systemContextBadge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-purple, #a78bfa);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.systemContextToggle {
+  margin-left: auto;
+  color: var(--text-tertiary);
+  font-size: 10px;
+}
+
+.systemContextPre {
+  padding: var(--space-xs) var(--space-sm);
+  margin: 0;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.systemContextEllipsis {
+  color: var(--text-tertiary);
+}
+
+.systemEvent {
+  color: var(--text-secondary);
+  font-style: italic;
+  font-size: var(--font-size-sm);
+  padding: 2px 0;
+}
+
+.systemTimestamp {
+  color: var(--text-tertiary);
+}
+
+.textEvent {
+  position: relative;
+  padding: var(--space-xs) 0;
+  padding-left: var(--space-xs);
+  line-height: var(--line-height);
+
+  // --- Markdown element styles ---
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: var(--space-sm) 0 var(--space-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  h1 { font-size: 1.4em; }
+  h2 { font-size: 1.2em; }
+  h3 { font-size: 1.1em; }
+
+  p {
+    margin: var(--space-xs) 0;
+  }
+
+  pre {
+    @include surface-inset;
+    padding: var(--space-sm);
+    margin: var(--space-xs) 0;
+    overflow: auto;
+    font-size: 11px;
+    white-space: pre-wrap;
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background: var(--bg-overlay);
+    padding: 1px 4px;
+    border-radius: var(--radius-sm);
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin: var(--space-xs) 0;
+    font-size: var(--font-size-sm);
+    width: 100%;
+  }
+
+  th, td {
+    border: 1px solid var(--border-subtle);
+    padding: var(--space-xs) var(--space-sm);
+    text-align: left;
+  }
+
+  th {
+    background: var(--bg-overlay);
+    font-weight: var(--font-weight-bold);
+  }
+
+  ul, ol {
+    padding-left: var(--space-lg);
+    margin: var(--space-xs) 0;
+  }
+
+  li {
+    margin: 2px 0;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  a {
+    color: var(--accent-blue);
+    text-decoration: underline;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border-subtle);
+    margin: var(--space-sm) 0;
+  }
+
+  blockquote {
+    border-left: 3px solid var(--border-subtle);
+    padding-left: var(--space-sm);
+    margin: var(--space-xs) 0;
+    color: var(--text-secondary);
+  }
+}
+
+// --- Copy button positioning ---
+
+.codeBlockWrapper {
+  position: relative;
+
+  &:hover .codeBlockCopyButton {
+    opacity: 0.4;
+  }
+}
+
+.codeBlockCopyButton {
+  // Override absolute position from CopyButton default — sits inside the wrapper.
+  // Mobile: base CopyButton handles always-visible (opacity: 1).
+}
+
+// Tool card styles have moved to ../tools/toolCards.module.scss.
+// Individual cards: FileReadCard, FileEditCard, ShellCard, SearchCard, etc.
+
+.errorEvent {
+  color: var(--accent-red);
+  font-weight: var(--font-weight-bold);
+  padding: var(--space-xs) 0;
+  border-left: 3px solid var(--accent-red);
+  padding-left: var(--space-sm);
+}
+
+.statusEvent {
+  color: var(--accent-yellow);
+  font-size: 11px;
+  padding: var(--space-xs) 0;
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  margin: var(--space-xs) 0;
+}
+
+.userInputEvent {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--space-xs) 0;
+}
+
+.userInputContent {
+  background: var(--accent-blue-dim);
+  color: var(--accent-blue-fg);
+  border: 1px solid var(--accent-blue);
+  border-radius: var(--radius-md);
+  padding: var(--space-xs) var(--space-sm);
+  max-width: 75%;
+  word-break: break-word;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height);
+
+  @include mobile {
+    max-width: 90%;
+  }
+}
+
+.signalEvent {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  border-left: 3px solid var(--accent-yellow);
+  padding: var(--space-xs) var(--space-sm);
+  margin: var(--space-xs) 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.signalBadge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-yellow);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.signalContent {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.usageEvent {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-xs) 0;
+  margin: var(--space-xs) 0;
+}
+
+.usageBadge {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  padding: 2px var(--space-sm);
+  letter-spacing: 0.02em;
+}
+
+.defaultEvent {
+  padding: 2px 0;
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { EventRenderer } from "./EventRenderer.js";
+import { makeEvent } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof EventRenderer> = {
+  component: EventRenderer,
+  title: "Grackle/Display/EventRenderer",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// --- Tool card stories (now routed through ToolCard) ---
+
+/** Unpaired tool_result renders as a generic tool card. */
+export const ToolResultSuccess: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_result",
+      content: "File written successfully",
+      raw: JSON.stringify({ is_error: false }),
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-generic")).toBeInTheDocument();
+  },
+};
+
+/** Paired tool_use+tool_result renders as a specialized card (FileReadCard). */
+export const PairedToolUseResult: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_result",
+      content: "import express from 'express';",
+    }),
+    toolUseCtx: { tool: "Read", args: { file_path: "/src/index.ts" } },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-file-read")).toBeInTheDocument();
+    await expect(canvas.getByText("index.ts")).toBeInTheDocument();
+  },
+};
+
+/** Paired Edit tool renders as FileEditCard with diff. */
+export const PairedEditResult: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_result",
+      content: "File updated",
+    }),
+    toolUseCtx: {
+      tool: "Edit",
+      args: { file_path: "/src/config.ts", old_string: "port = 3000", new_string: "port = 8080" },
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-file-edit")).toBeInTheDocument();
+    await expect(canvas.getByText("config.ts")).toBeInTheDocument();
+  },
+};
+
+/** Paired Bash tool renders as ShellCard. */
+export const PairedShellResult: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_result",
+      content: "[exit 0] Tests passed",
+    }),
+    toolUseCtx: { tool: "Bash", args: { command: "npm test" } },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-shell")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-command")).toHaveTextContent("npm test");
+  },
+};
+
+/** Unpaired tool_use renders as an in-progress card. */
+export const UnpairedToolUse: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_use",
+      content: JSON.stringify({ tool: "Read", args: { file_path: "/src/app.ts" } }),
+    }),
+  },
+  play: async ({ canvas }) => {
+    // Should render as FileReadCard (in-progress, no result)
+    const card = canvas.getByTestId("tool-card-file-read");
+    await expect(card.className).toContain("inProgress");
+  },
+};
+
+/** Error tool_result renders with red accent. */
+export const ToolResultError: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "tool_result",
+      content: "Error: ENOENT: no such file",
+      raw: JSON.stringify({ is_error: true }),
+    }),
+    toolUseCtx: { tool: "Read", args: { file_path: "/missing.ts" } },
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("tool-card-file-read");
+    await expect(card.className).toContain("cardRed");
+  },
+};
+
+// --- Markdown rendering stories ---
+
+/** Text event renders headings as h1/h2/h3 elements. */
+export const MarkdownHeadings: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "text",
+      content: "# Heading One\n\n## Heading Two\n\n### Heading Three",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("heading", { level: 1 })).toHaveTextContent("Heading One");
+    await expect(canvas.getByRole("heading", { level: 2 })).toHaveTextContent("Heading Two");
+    await expect(canvas.getByRole("heading", { level: 3 })).toHaveTextContent("Heading Three");
+  },
+};
+
+/** Text event renders bold, italic, and links. */
+export const MarkdownInlineFormatting: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "text",
+      content: "This has **bold text** and *italic text* and [a link](https://example.com)",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("bold text").tagName).toBe("STRONG");
+    await expect(canvas.getByText("italic text").tagName).toBe("EM");
+    const link = canvas.getByRole("link", { name: "a link" });
+    await expect(link).toHaveAttribute("href", "https://example.com");
+  },
+};
+
+/** Text event renders fenced code blocks as pre > code elements. */
+export const MarkdownCodeBlock: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "text",
+      content: "```js\nconst x = 42;\nconsole.log(x);\n```",
+    }),
+  },
+  play: async ({ canvasElement }) => {
+    // rehype-prism-plus splits code into <span> tokens for highlighting,
+    // so getByText can't find the full string. Query the DOM directly.
+    const pre = canvasElement.querySelector("pre");
+    await expect(pre).toBeTruthy();
+    await expect(pre!.textContent).toContain("const x = 42");
+  },
+};
+
+/** Text event wraps plain text content in paragraph elements. */
+export const MarkdownParagraphWrapping: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "text",
+      content: "This is a plain text paragraph.",
+    }),
+  },
+  play: async ({ canvas }) => {
+    const paragraph = canvas.getByText("This is a plain text paragraph.");
+    await expect(paragraph.tagName).toBe("P");
+  },
+};
+
+/** System context event renders as collapsible prompt. */
+export const SystemContext: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "system",
+      content: "You are a helpful assistant.\nYou write clean code.\nYou follow best practices.\nLine 4.\nLine 5.\nLine 6.",
+      raw: JSON.stringify({ systemContext: true }),
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("system-context-event")).toBeInTheDocument();
+    await expect(canvas.getByText("SYSTEM PROMPT")).toBeInTheDocument();
+  },
+};