@grackle-ai/web-components 0.107.2

package/src/components/display/FloatingActionBar.tsx

@@ -0,0 +1,119 @@
+/**
+ * Floating action bar shown at the bottom of EventStream during multi-select mode.
+ *
+ * Displays selection count, select all/deselect all toggle, Copy button,
+ * Forward button, and Cancel.
+ * Pure presentational component -- no useGrackle().
+ */
+
+import { type JSX } from "react";
+import { Copy, Forward, X } from "lucide-react";
+import { motion } from "motion/react";
+import { ICON_SM } from "../../utils/iconSize.js";
+import { Tooltip } from "./Tooltip.js";
+import styles from "./FloatingActionBar.module.scss";
+
+/** Props for the FloatingActionBar component. */
+export interface FloatingActionBarProps {
+  /** Number of currently selected events. */
+  selectedCount: number;
+  /** Total number of selectable (content-bearing) events. */
+  totalSelectable: number;
+  /** Called when "Select all" is clicked. */
+  onSelectAll: () => void;
+  /** Called when "Deselect all" is clicked. */
+  onDeselectAll: () => void;
+  /** Called when "Copy" is clicked. */
+  onCopy: () => void;
+  /** Called when "Forward" is clicked. Omit to hide the Forward button. */
+  onForward?: () => void;
+  /** When true, the Forward button is rendered but disabled. */
+  forwardDisabled?: boolean;
+  /** Called when "Cancel" (X) is clicked. */
+  onCancel: () => void;
+}
+
+/**
+ * Floating action bar for multi-select mode in EventStream.
+ *
+ * Positioned absolutely at the bottom of the EventStream wrapper.
+ * Uses motion.div for animated entrance/exit.
+ */
+export function FloatingActionBar({
+  selectedCount,
+  totalSelectable,
+  onSelectAll,
+  onDeselectAll,
+  onCopy,
+  onForward,
+  forwardDisabled = false,
+  onCancel,
+}: FloatingActionBarProps): JSX.Element {
+  const allSelected = selectedCount > 0 && selectedCount >= totalSelectable;
+
+  return (
+    <motion.div
+      className={styles.bar}
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 12 }}
+      transition={{ duration: 0.15 }}
+      data-testid="floating-action-bar"
+    >
+      <div className={styles.left}>
+        <span className={styles.count} data-testid="floating-bar-count">
+          {selectedCount} selected
+        </span>
+        <button
+          type="button"
+          className={styles.toggleButton}
+          onClick={allSelected ? onDeselectAll : onSelectAll}
+          data-testid="floating-bar-select-all"
+        >
+          {allSelected ? "Deselect all" : "Select all"}
+        </button>
+      </div>
+      <div className={styles.right}>
+        <button
+          type="button"
+          className={styles.copyButton}
+          onClick={onCopy}
+          disabled={selectedCount === 0}
+          data-testid="floating-bar-copy"
+        >
+          <Copy size={ICON_SM} aria-hidden="true" />
+          Copy
+        </button>
+        {onForward !== undefined && (
+          <Tooltip
+            text={forwardDisabled ? "No active sessions to forward to" : "Forward to another session"}
+          >
+            <button
+              type="button"
+              className={styles.forwardButton}
+              aria-disabled={forwardDisabled || selectedCount === 0}
+              onClick={() => {
+                if (!forwardDisabled && selectedCount > 0) {
+                  onForward();
+                }
+              }}
+              data-testid="floating-bar-forward"
+            >
+              <Forward size={ICON_SM} aria-hidden="true" />
+              Forward
+            </button>
+          </Tooltip>
+        )}
+        <button
+          type="button"
+          className={styles.cancelButton}
+          onClick={onCancel}
+          aria-label="Cancel selection"
+          data-testid="floating-bar-cancel"
+        >
+          <X size={ICON_SM} aria-hidden="true" />
+        </button>
+      </div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,50 @@
+@use '../../styles/mixins' as *;
+
+.attemptSelector {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+}
+
+.attemptLabel {
+  margin-right: var(--space-xs);
+}
+
+.attemptButton {
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 2px var(--space-sm);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    color: var(--text-secondary);
+    border-color: var(--border-primary);
+    background: var(--bg-surface);
+  }
+}
+
+.attemptActive {
+  color: var(--accent-green);
+  border-color: var(--accent-green);
+  background: var(--accent-green-dim);
+}
+
+.attemptStatus {
+  font-size: 10px;
+  margin-left: 2px;
+  opacity: 0.7;
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { SessionAttemptSelector } from "./SessionAttemptSelector.js";
+import type { Session } from "../../hooks/types.js";
+import { makeSession } from "../../test-utils/storybook-helpers.js";
+
+const stoppedCompleted: Session = makeSession({
+  id: "sess-a",
+  status: "stopped",
+  endReason: "completed",
+});
+
+const running: Session = makeSession({
+  id: "sess-b",
+  status: "running",
+});
+
+const stoppedFailed: Session = makeSession({
+  id: "sess-c",
+  status: "stopped",
+  endReason: "error",
+});
+
+const meta: Meta<typeof SessionAttemptSelector> = {
+  title: "Primitives/Display/SessionAttemptSelector",
+  component: SessionAttemptSelector,
+  tags: ["autodocs"],
+  args: {
+    taskSessions: [stoppedCompleted, running],
+    selectedSessionId: running.id,
+    onSelect: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SessionAttemptSelector>;
+
+/** Component returns nothing when there is only one session. */
+export const HiddenForSingleSession: Story = {
+  args: {
+    taskSessions: [running],
+    selectedSessionId: running.id,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByTestId("attempt-selector")).toBeNull();
+  },
+};
+
+/** Two attempts are rendered with correct labels. */
+export const TwoAttempts: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("attempt-selector")).toBeInTheDocument();
+    await expect(canvas.getByTestId("attempt-1")).toBeInTheDocument();
+    await expect(canvas.getByTestId("attempt-2")).toBeInTheDocument();
+  },
+};
+
+/** The selected attempt is highlighted via aria-pressed. */
+export const ActiveAttemptHighlighted: Story = {
+  args: {
+    taskSessions: [stoppedCompleted, running, stoppedFailed],
+    selectedSessionId: running.id,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("attempt-2")).toHaveAttribute("aria-pressed", "true");
+    await expect(canvas.getByTestId("attempt-1")).toHaveAttribute("aria-pressed", "false");
+    await expect(canvas.getByTestId("attempt-3")).toHaveAttribute("aria-pressed", "false");
+  },
+};
+
+/** Clicking an attempt fires the onSelect callback with the session id. */
+export const ClickFiresOnSelect: Story = {
+  play: async ({ canvas, args }) => {
+    const btn = canvas.getByTestId("attempt-1");
+    await userEvent.click(btn);
+    await expect(args.onSelect).toHaveBeenCalledWith(stoppedCompleted.id);
+  },
+};

package/src/components/display/SessionAttemptSelector.tsx

@@ -0,0 +1,49 @@
+import type { JSX } from "react";
+import type { Session } from "../../hooks/types.js";
+import styles from "./SessionAttemptSelector.module.scss";
+
+/** Props for {@link SessionAttemptSelector}. */
+export interface SessionAttemptSelectorProps {
+  /** All sessions (attempts) for a task, ordered chronologically. */
+  taskSessions: Session[];
+  /** The currently selected session id. */
+  selectedSessionId: string | undefined;
+  /** Called when the user clicks an attempt button. */
+  onSelect: (sessionId: string) => void;
+}
+
+/**
+ * Displays a row of numbered attempt buttons when a task has multiple sessions.
+ * Returns `undefined` when fewer than two sessions exist.
+ */
+export function SessionAttemptSelector({ taskSessions, selectedSessionId, onSelect }: SessionAttemptSelectorProps): JSX.Element | undefined {
+  if (taskSessions.length < 2) {
+    return undefined;
+  }
+  return (
+    <div className={styles.attemptSelector} data-testid="attempt-selector">
+      <span className={styles.attemptLabel}>Attempts:</span>
+      {taskSessions.map((s, i) => {
+        const isActive = s.id === selectedSessionId;
+        const statusIcon = s.status === "stopped" && s.endReason === "completed" ? "\u2713"
+          : s.status === "stopped" ? "\u2717"
+          : s.status === "running" || s.status === "idle" ? "\u25CF"
+          : "";
+        return (
+          <button
+            key={s.id}
+            className={`${styles.attemptButton} ${isActive ? styles.attemptActive : ""}`}
+            onClick={() => onSelect(s.id)}
+            title={`Attempt #${i + 1} \u2014 ${s.status}`}
+            aria-label={`Attempt #${i + 1}, ${s.status}`}
+            aria-pressed={isActive}
+            data-testid={`attempt-${i + 1}`}
+          >
+            #{i + 1}
+            {statusIcon && <span className={styles.attemptStatus}>{statusIcon}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,200 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// SessionPicker -- modal dialog for selecting a forward-to session
+// =============================================================================
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-bg, rgba(0, 0, 0, 0.55));
+}
+
+.dialog {
+  @include surface-card;
+  width: min(480px, calc(100vw - var(--space-xl)));
+  max-height: min(480px, calc(100vh - var(--space-xl)));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-md) var(--space-sm);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.closeButton {
+  @include btn-ghost(var(--text-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--bg-overlay);
+  }
+}
+
+.filterRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 0 var(--space-md) var(--space-sm);
+  flex-shrink: 0;
+}
+
+.searchIcon {
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.filterInput {
+  flex: 1;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  padding: var(--space-xs) var(--space-sm);
+  outline: none;
+
+  &::placeholder {
+    color: var(--text-muted);
+  }
+
+  &:focus {
+    border-color: var(--accent-blue);
+  }
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0 var(--space-sm) var(--space-sm);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.emptyItem {
+  padding: var(--space-md);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.sessionRow {
+  @include btn-ghost(var(--text-primary));
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-xs);
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  text-align: left;
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+.sessionMain {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+}
+
+.envName {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.personaName {
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 1px var(--space-xs);
+  flex-shrink: 0;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusBadge {
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  padding: 1px var(--space-xs);
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+
+  &.status_running {
+    background: color-mix(in srgb, var(--accent-green) 20%, transparent);
+    color: var(--accent-green);
+  }
+
+  &.status_idle {
+    background: color-mix(in srgb, var(--accent-blue) 20%, transparent);
+    color: var(--accent-blue);
+  }
+
+  &.status_other {
+    background: var(--bg-overlay);
+    color: var(--text-secondary);
+  }
+}
+
+.sessionPrompt {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.noSessions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-xl);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+
+  p {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { SessionPicker } from "./SessionPicker.js";
+import type { Environment, Session } from "../../hooks/types.js";
+import { makeSession, makeEnvironment } from "../../test-utils/storybook-helpers.js";
+
+const mockEnvironments: Environment[] = [
+  makeEnvironment({ id: "env-1", displayName: "Production" }),
+  makeEnvironment({ id: "env-2", displayName: "Staging" }),
+  makeEnvironment({ id: "env-3", displayName: "Dev Box" }),
+];
+
+const mockSessions: Session[] = [
+  makeSession({ id: "sess-1", environmentId: "env-1", status: "running", prompt: "Refactor the authentication module and update tests" }),
+  makeSession({ id: "sess-2", environmentId: "env-2", status: "idle", prompt: "Fix the login redirect bug in the frontend" }),
+  makeSession({ id: "sess-3", environmentId: "env-3", status: "running", prompt: "Add dark mode support to the settings page" }),
+];
+
+const meta: Meta<typeof SessionPicker> = {
+  component: SessionPicker,
+  title: "Grackle/Display/SessionPicker",
+  tags: ["autodocs"],
+  args: {
+    isOpen: true,
+    sessions: mockSessions,
+    environments: mockEnvironments,
+    onSelect: fn(),
+    onCancel: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default state: multiple active sessions available. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    const dialog = canvas.getByTestId("session-picker-dialog");
+    await expect(dialog).toBeInTheDocument();
+
+    const list = canvas.getByTestId("session-picker-list");
+    await expect(list).toBeInTheDocument();
+
+    // All three sessions should be listed
+    await expect(canvas.getByTestId("session-picker-item-sess-1")).toBeInTheDocument();
+    await expect(canvas.getByTestId("session-picker-item-sess-2")).toBeInTheDocument();
+    await expect(canvas.getByTestId("session-picker-item-sess-3")).toBeInTheDocument();
+  },
+};
+
+/** Status badges are rendered for each session. */
+export const StatusBadges: Story = {
+  play: async ({ canvas }) => {
+    const runningBadge = canvas.getByTestId("session-picker-status-sess-1");
+    await expect(runningBadge).toHaveTextContent("running");
+
+    const idleBadge = canvas.getByTestId("session-picker-status-sess-2");
+    await expect(idleBadge).toHaveTextContent("idle");
+  },
+};
+
+/** Clicking a session row calls onSelect with the session ID. */
+export const SelectSession: Story = {
+  play: async ({ canvas, args }) => {
+    const sessionRow = canvas.getByTestId("session-picker-item-sess-2");
+    await userEvent.click(sessionRow);
+    await expect(args.onSelect).toHaveBeenCalledWith("sess-2");
+  },
+};
+
+/** Clicking the close button calls onCancel. */
+export const CloseButton: Story = {
+  play: async ({ canvas, args }) => {
+    const closeBtn = canvas.getByTestId("session-picker-close");
+    await userEvent.click(closeBtn);
+    await expect(args.onCancel).toHaveBeenCalled();
+  },
+};
+
+/** Empty session list shows a no-sessions message. */
+export const NoSessions: Story = {
+  args: {
+    sessions: [],
+  },
+  play: async ({ canvas }) => {
+    const noSessions = canvas.getByTestId("session-picker-no-sessions");
+    await expect(noSessions).toBeInTheDocument();
+  },
+};
+
+/** Filter input appears only when there are more than 4 sessions. */
+export const FilterInput: Story = {
+  args: {
+    sessions: [
+      makeSession({ id: "sess-a", environmentId: "env-1", status: "running", prompt: "Task alpha" }),
+      makeSession({ id: "sess-b", environmentId: "env-1", status: "idle", prompt: "Task beta" }),
+      makeSession({ id: "sess-c", environmentId: "env-2", status: "running", prompt: "Task gamma" }),
+      makeSession({ id: "sess-d", environmentId: "env-2", status: "idle", prompt: "Task delta" }),
+      makeSession({ id: "sess-e", environmentId: "env-3", status: "running", prompt: "Task epsilon" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const filter = canvas.getByTestId("session-picker-filter");
+    await expect(filter).toBeInTheDocument();
+
+    // Type to filter by environment name
+    await userEvent.type(filter, "Staging");
+
+    // Only staging sessions should appear (sess-c and sess-d use env-2)
+    await expect(canvas.getByTestId("session-picker-item-sess-c")).toBeInTheDocument();
+    await expect(canvas.getByTestId("session-picker-item-sess-d")).toBeInTheDocument();
+    // Production sessions should be hidden
+    await expect(canvas.queryByTestId("session-picker-item-sess-a")).not.toBeInTheDocument();
+  },
+};
+
+/** Filter by prompt text. */
+export const FilterByPrompt: Story = {
+  args: {
+    sessions: [
+      makeSession({ id: "sess-a", environmentId: "env-1", status: "running", prompt: "Fix authentication bug" }),
+      makeSession({ id: "sess-b", environmentId: "env-1", status: "idle", prompt: "Add dark mode" }),
+      makeSession({ id: "sess-c", environmentId: "env-2", status: "running", prompt: "Fix database migration" }),
+      makeSession({ id: "sess-d", environmentId: "env-2", status: "idle", prompt: "Update dependencies" }),
+      makeSession({ id: "sess-e", environmentId: "env-3", status: "running", prompt: "Fix CSS layout" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const filter = canvas.getByTestId("session-picker-filter");
+    await userEvent.type(filter, "Fix");
+
+    // Only "Fix" sessions should appear
+    await expect(canvas.getByTestId("session-picker-item-sess-a")).toBeInTheDocument();
+    await expect(canvas.getByTestId("session-picker-item-sess-c")).toBeInTheDocument();
+    await expect(canvas.getByTestId("session-picker-item-sess-e")).toBeInTheDocument();
+    // Non-fix sessions hidden
+    await expect(canvas.queryByTestId("session-picker-item-sess-b")).not.toBeInTheDocument();
+  },
+};
+
+/** No match shows empty state message. */
+export const FilterNoMatch: Story = {
+  args: {
+    sessions: [
+      makeSession({ id: "sess-a", environmentId: "env-1", status: "running", prompt: "Task alpha" }),
+      makeSession({ id: "sess-b", environmentId: "env-1", status: "idle", prompt: "Task beta" }),
+      makeSession({ id: "sess-c", environmentId: "env-2", status: "running", prompt: "Task gamma" }),
+      makeSession({ id: "sess-d", environmentId: "env-2", status: "idle", prompt: "Task delta" }),
+      makeSession({ id: "sess-e", environmentId: "env-3", status: "running", prompt: "Task epsilon" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const filter = canvas.getByTestId("session-picker-filter");
+    await userEvent.type(filter, "xyzzy-no-match");
+
+    const empty = canvas.getByTestId("session-picker-empty");
+    await expect(empty).toBeInTheDocument();
+  },
+};
+
+/** Picker is hidden when isOpen is false. */
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+  },
+  play: async ({ canvas }) => {
+    const overlay = canvas.queryByTestId("session-picker-overlay");
+    await expect(overlay).not.toBeInTheDocument();
+  },
+};