@grackle-ai/web-components 0.107.2

package/src/components/display/CopyButton.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState, type JSX } from "react";
+import { Check, Clipboard } from "lucide-react";
+import { ICON_MD } from "../../utils/iconSize.js";
+import styles from "./CopyButton.module.scss";
+
+/** Duration in milliseconds to show the "copied" checkmark before reverting. */
+const COPIED_FEEDBACK_DURATION: number = 2000;
+
+/** Props for the CopyButton component. */
+interface CopyButtonProps {
+  /** Plain text to copy to the clipboard. */
+  text: string;
+  /** Additional CSS class name for positioning variants. */
+  className?: string;
+  /** Test ID for Storybook and E2E tests. */
+  "data-testid"?: string;
+}
+
+/**
+ * Small copy-to-clipboard button with visual feedback.
+ *
+ * Shows a clipboard emoji by default, switches to a checkmark on click,
+ * then reverts after 2 seconds.
+ */
+export function CopyButton({ text, className, "data-testid": testId }: CopyButtonProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== undefined) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = useCallback(async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timerRef.current !== undefined) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+        timerRef.current = undefined;
+      }, COPIED_FEEDBACK_DURATION);
+    } catch {
+      /* clipboard API unavailable — fail silently */
+    }
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      className={`${styles.copyButton} ${className ?? ""}`}
+      onClick={() => { handleClick().catch(() => { /* clipboard unavailable */ }); }}
+      aria-label={copied ? "Copied" : "Copy to clipboard"}
+      data-testid={testId ?? "copy-button"}
+    >
+      {copied ? <Check size={ICON_MD} aria-hidden="true" /> : <Clipboard size={ICON_MD} aria-hidden="true" />}
+    </button>
+  );
+}

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

@@ -0,0 +1,37 @@
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 6px 16px;
+  background: var(--accent-blue-dim, rgba(59, 130, 246, 0.15));
+  border-bottom: 1px solid var(--accent-blue, #3b82f6);
+  font-size: 13px;
+  line-height: 1.4;
+  flex-shrink: 0;
+  z-index: 200;
+}
+
+.label {
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--accent-blue, #3b82f6);
+  color: #fff;
+}
+
+.text {
+  color: var(--text-secondary, #aaa);
+}
+
+.link {
+  color: var(--accent-blue, #3b82f6);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: var(--text-primary, #fff);
+  }
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { DemoBanner } from "./DemoBanner.js";
+
+const meta: Meta<typeof DemoBanner> = {
+  title: "App/Display/DemoBanner",
+  component: DemoBanner,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DemoBanner>;
+
+/** Banner renders with the DEMO label and install link. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    const banner = canvas.getByTestId("demo-banner");
+    await expect(banner).toBeInTheDocument();
+
+    // DEMO label is visible
+    await expect(canvas.getByText("DEMO")).toBeInTheDocument();
+
+    // Descriptive text is present
+    await expect(canvas.getByText(/interactive demo with mock data/)).toBeInTheDocument();
+
+    // Install link points to the GitHub repo
+    const link = canvas.getByRole("link", { name: "Install Grackle" });
+    await expect(link).toBeInTheDocument();
+    await expect(link).toHaveAttribute("href", "https://github.com/nick-pape/grackle");
+  },
+};
+
+/** Install link opens in a new tab with security attributes. */
+export const LinkOpensInNewTab: Story = {
+  play: async ({ canvas }) => {
+    const link = canvas.getByRole("link", { name: "Install Grackle" });
+    await expect(link).toHaveAttribute("target", "_blank");
+    await expect(link).toHaveAttribute("rel", "noopener noreferrer");
+  },
+};

package/src/components/display/DemoBanner.tsx

@@ -0,0 +1,23 @@
+import styles from "./DemoBanner.module.scss";
+import type { JSX } from "react";
+
+/** Persistent banner indicating the app is running in demo/mock mode. */
+export function DemoBanner(): JSX.Element {
+  return (
+    <div className={styles.banner} data-testid="demo-banner">
+      <span className={styles.label}>DEMO</span>
+      <span className={styles.text}>
+        This is an interactive demo with mock data.{" "}
+        <a
+          href="https://github.com/nick-pape/grackle"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.link}
+        >
+          Install Grackle
+        </a>{" "}
+        to use it for real.
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// EventHoverRow -- hover actions + selection mode wrapper for events
+// =============================================================================
+
+.row {
+  position: relative;
+}
+
+// --- Hover action row (normal mode) ---
+
+.hoverActions {
+  position: absolute;
+  top: -28px;
+  right: var(--space-sm);
+  z-index: 5;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+
+  @include mobile {
+    opacity: 1;
+  }
+}
+
+.row:hover .hoverActions,
+.row:focus-within .hoverActions {
+  opacity: 1;
+}
+
+.hoverButton {
+  @include btn-ghost(var(--text-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--bg-overlay);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: 1px;
+  }
+}
+
+// --- Selection mode ---
+
+.selectingRow {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+
+  &:hover {
+    background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
+  }
+}
+
+.selected {
+  background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
+
+  &:hover {
+    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
+  }
+}
+
+.checkboxArea {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: var(--space-xs);
+  width: 28px;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--accent-blue);
+}
+
+.contentArea {
+  flex: 1;
+  min-width: 0;
+}

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "@storybook/test";
+import { EventHoverRow } from "./EventHoverRow.js";
+
+const meta: Meta<typeof EventHoverRow> = {
+  component: EventHoverRow,
+  title: "Grackle/Display/EventHoverRow",
+  tags: ["autodocs"],
+  args: {
+    copyText: "Sample event content for clipboard",
+    isContentBearing: true,
+    isSelecting: false,
+    isSelected: false,
+    onSelect: fn(),
+    onToggle: fn(),
+    onCopied: fn(),
+    children: (
+      <div style={{ padding: "8px", background: "var(--bg-secondary)", borderRadius: 4 }}>
+        Sample event content for clipboard
+      </div>
+    ),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default state - hover to see action buttons. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    const row = canvas.getByTestId("event-hover-row");
+    await expect(row).toBeInTheDocument();
+    // Hover actions exist in DOM (opacity controlled by CSS)
+    const actions = canvas.getByTestId("event-hover-actions");
+    await expect(actions).toBeInTheDocument();
+  },
+};
+
+/** Hover shows Copy and Select buttons. */
+export const HoverActions: Story = {
+  play: async ({ canvas }) => {
+    const copyBtn = canvas.getByTestId("event-hover-copy");
+    await expect(copyBtn).toBeInTheDocument();
+    await expect(copyBtn).toHaveAccessibleName("Copy event content");
+
+    const selectBtn = canvas.getByTestId("event-hover-select");
+    await expect(selectBtn).toBeInTheDocument();
+    await expect(selectBtn).toHaveAccessibleName("Select this event");
+  },
+};
+
+/** Selection mode with event NOT selected - shows unchecked checkbox. */
+export const SelectionModeUnselected: Story = {
+  args: {
+    isSelecting: true,
+    isSelected: false,
+  },
+  play: async ({ canvas }) => {
+    const row = canvas.getByTestId("event-selectable-row");
+    await expect(row).toBeInTheDocument();
+
+    const checkbox = canvas.getByTestId("event-select-checkbox");
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).not.toBeChecked();
+  },
+};
+
+/** Selection mode with event selected - shows checked checkbox + highlight. */
+export const SelectionModeSelected: Story = {
+  args: {
+    isSelecting: true,
+    isSelected: true,
+  },
+  play: async ({ canvas }) => {
+    const row = canvas.getByTestId("event-selectable-row");
+    await expect(row).toBeInTheDocument();
+
+    const checkbox = canvas.getByTestId("event-select-checkbox");
+    await expect(checkbox).toBeChecked();
+  },
+};
+
+/** Non-content-bearing event - no hover actions or checkbox. */
+export const NonContentBearing: Story = {
+  args: {
+    isContentBearing: false,
+    children: (
+      <div style={{ padding: "4px", color: "gray", fontSize: "12px" }}>
+        --- status: running ---
+      </div>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    // No hover actions or checkbox should exist
+    const actions = canvasElement.querySelector("[data-testid='event-hover-actions']");
+    await expect(actions).toBeFalsy();
+    const checkbox = canvasElement.querySelector("[data-testid='event-select-checkbox']");
+    await expect(checkbox).toBeFalsy();
+  },
+};

package/src/components/display/EventHoverRow.tsx

@@ -0,0 +1,154 @@
+/**
+ * Wrapper component for events in the EventStream that provides:
+ * - Hover action row (Copy + Select) in normal mode
+ * - Checkbox + full-row click target in selection mode
+ *
+ * Presentational component decoupled from useGrackle(). Performs clipboard
+ * side effects via navigator.clipboard when the user clicks Copy.
+ */
+
+import { useState, useCallback, useEffect, useRef, type JSX, type ReactNode, type MouseEvent } from "react";
+import { Clipboard, Check, CheckSquare } from "lucide-react";
+import { ICON_SM } from "../../utils/iconSize.js";
+import styles from "./EventHoverRow.module.scss";
+
+/** Props for the EventHoverRow component. */
+export interface EventHoverRowProps {
+  /** Text to copy when the hover Copy button is clicked. */
+  copyText: string;
+  /** Whether this event has copyable content (shows hover actions). */
+  isContentBearing: boolean;
+  /** Whether multi-select mode is active. */
+  isSelecting: boolean;
+  /** Whether this event is currently selected in multi-select mode. */
+  isSelected: boolean;
+  /** Accessible label for the selection checkbox (e.g. "Select message from assistant at 2:34 PM"). */
+  checkboxLabel?: string;
+  /** Called when the Select button in the hover row is clicked (enters selection mode). */
+  onSelect: () => void;
+  /** Called when the row is clicked in selection mode. Receives the shiftKey state. */
+  onToggle: (shiftKey: boolean) => void;
+  /** Called after a successful single-event copy from the hover row. */
+  onCopied?: () => void;
+  /** The event content to wrap. */
+  children: ReactNode;
+}
+
+/**
+ * Wraps an event in the EventStream with hover actions (normal mode) or
+ * selection affordances (multi-select mode).
+ */
+export function EventHoverRow({
+  copyText,
+  isContentBearing,
+  isSelecting,
+  isSelected,
+  checkboxLabel,
+  onSelect,
+  onToggle,
+  onCopied,
+  children,
+}: EventHoverRowProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Clear the "copied" feedback timer on unmount
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current !== undefined) {
+        clearTimeout(copiedTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(copyText);
+      setCopied(true);
+      onCopied?.();
+      if (copiedTimerRef.current !== undefined) {
+        clearTimeout(copiedTimerRef.current);
+      }
+      copiedTimerRef.current = setTimeout(() => { setCopied(false); }, 2000);
+    } catch {
+      // Clipboard write failed silently
+    }
+  }, [copyText, onCopied]);
+
+  const handleRowClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      if (!isSelecting) {
+        return;
+      }
+      // Don't intercept if the user clicked inside an interactive element
+      const target = e.target as HTMLElement;
+      if (target.closest("a, button, input, textarea, select, [role=button]")) {
+        return;
+      }
+      e.preventDefault();
+      onToggle(e.shiftKey);
+    },
+    [isSelecting, onToggle],
+  );
+
+  // Non-content-bearing events: render plain, no interactivity
+  if (!isContentBearing) {
+    return <div className={styles.row}>{children}</div>;
+  }
+
+  // Selection mode: checkbox + clickable row
+  if (isSelecting) {
+    return (
+      <div
+        className={`${styles.row} ${styles.selectingRow} ${isSelected ? styles.selected : ""}`}
+        onClick={handleRowClick}
+        data-testid="event-selectable-row"
+      >
+        <div className={styles.checkboxArea}>
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={(e) => { onToggle((e.nativeEvent as globalThis.MouseEvent).shiftKey); }}
+            onClick={(e) => { e.stopPropagation(); }}
+            className={styles.checkbox}
+            aria-label={checkboxLabel ?? "Select this event"}
+            data-testid="event-select-checkbox"
+          />
+        </div>
+        <div className={styles.contentArea}>{children}</div>
+      </div>
+    );
+  }
+
+  // Normal mode: hover action row
+  return (
+    <div
+      className={styles.row}
+      data-testid="event-hover-row"
+    >
+      <div className={styles.hoverActions} data-testid="event-hover-actions">
+        <button
+          type="button"
+          className={styles.hoverButton}
+          onClick={() => { handleCopy().catch(() => {}); }}
+          aria-label="Copy event content"
+          data-testid="event-hover-copy"
+        >
+          {copied
+            ? <Check size={ICON_SM} aria-hidden="true" />
+            : <Clipboard size={ICON_SM} aria-hidden="true" />}
+        </button>
+        <button
+          type="button"
+          className={styles.hoverButton}
+          onClick={onSelect}
+          aria-label="Select this event"
+          data-testid="event-hover-select"
+        >
+          <CheckSquare size={ICON_SM} aria-hidden="true" />
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}