@grackle-ai/web-components 0.107.2

package/src/components/tools/toolCards.module.scss

@@ -0,0 +1,234 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Shared Tool Card Styles
+// =============================================================================
+// Common styles used across all tool card sub-components.
+// Each card variant uses @use './toolCards.module.scss' for shared classes
+// and defines its own module for card-specific styles.
+
+// --- Card container (used by all cards except MetadataCard) ---
+
+.card {
+  @include surface-card;
+  padding: var(--space-sm) var(--space-md);
+  margin: var(--space-xs) 0;
+  font-size: var(--font-size-sm);
+
+  @include mobile {
+    padding: var(--space-xs) var(--space-sm);
+  }
+}
+
+.cardBlue    { border-left: 3px solid var(--accent-blue); }
+.cardOrange  { border-left: 3px solid var(--accent-yellow); }
+.cardGreen   { border-left: 3px solid var(--accent-green); }
+.cardPurple  { border-left: 3px solid var(--accent-purple, #a78bfa); }
+.cardNeutral { border-left: 3px solid var(--border-subtle); }
+.cardRed     { border-left: 3px solid var(--accent-red); }
+.cardTeal    { border-left: 3px solid var(--accent-teal, #2dd4bf); }
+
+// --- Header row ---
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: 20px;
+}
+
+.icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  font-size: var(--font-size-sm); // fallback for text icons (e.g. ShellCard "$")
+}
+
+.toolName {
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  flex-shrink: 0;
+}
+
+.fileName {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.spacer {
+  flex: 1;
+}
+
+// --- Expandable body ---
+
+.bodyToggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  background: none;
+  border: none;
+  padding: 2px 0;
+  color: var(--text-tertiary);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--text-secondary);
+  }
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--transition-fast);
+}
+
+.chevronExpanded {
+  transform: rotate(90deg);
+}
+
+.pre {
+  @include surface-inset;
+  padding: var(--space-sm);
+  margin: var(--space-xs) 0 0;
+  overflow: auto;
+  max-height: 400px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+
+  @include mobile {
+    max-height: 250px;
+    font-size: 10px;
+  }
+}
+
+// --- Diff lines ---
+
+.diffAdd {
+  background: rgba(46, 160, 67, 0.15);
+  color: var(--accent-green);
+
+  &::before {
+    content: '+';
+    display: inline-block;
+    width: 14px;
+    color: var(--accent-green);
+    flex-shrink: 0;
+  }
+}
+
+.diffRemove {
+  background: rgba(248, 81, 73, 0.15);
+  color: var(--accent-red);
+
+  &::before {
+    content: '−';
+    display: inline-block;
+    width: 14px;
+    color: var(--accent-red);
+    flex-shrink: 0;
+  }
+}
+
+.diffContext {
+  color: var(--text-secondary);
+
+  &::before {
+    content: ' ';
+    display: inline-block;
+    width: 14px;
+  }
+}
+
+.diffHeader {
+  color: var(--accent-blue);
+  font-weight: var(--font-weight-bold);
+  font-size: 10px;
+}
+
+.diffLine {
+  display: block;
+  padding: 0 var(--space-xs);
+  min-height: 1.5em;
+}
+
+// --- Exit code badges ---
+
+.exitOk {
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-green);
+}
+
+.exitError {
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-red);
+}
+
+.exitPending {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+// --- Copy button (inline in header row) ---
+
+.copyButtonInline {
+  position: static !important;
+  flex-shrink: 0;
+  opacity: 0.4 !important;
+
+  &:hover {
+    opacity: 1 !important;
+  }
+
+  @include mobile {
+    opacity: 1 !important;
+  }
+}
+
+// --- In-progress / dimmed state ---
+
+.inProgress {
+  opacity: 0.6;
+}
+
+// --- Metadata (inline, no card) ---
+
+.metadata {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  padding: 2px 0;
+  font-family: var(--font-mono);
+}
+
+.metadataPrefix {
+  color: var(--text-tertiary);
+  margin-right: var(--space-xs);
+}

package/src/components/workspace/WorkspaceBoard.module.scss

@@ -0,0 +1,238 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// WorkspaceBoard — Kanban-style board view
+// =============================================================================
+
+.boardContainer {
+  display: flex;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  overflow-x: auto;
+  flex: 1;
+  min-height: 0;
+  align-items: flex-start;
+
+  @include mobile {
+    padding: var(--space-sm);
+    gap: var(--space-sm);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Column
+// ---------------------------------------------------------------------------
+
+.column {
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  max-width: 300px;
+  flex: 1;
+  background: var(--bg-surface);
+  border-radius: var(--radius-md, 8px);
+  border: 1px solid var(--border-subtle);
+  overflow: hidden;
+
+  @include mobile {
+    min-width: 200px;
+  }
+}
+
+.columnHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-subtle);
+  font-family: var(--font-ui);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold, 600);
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+.columnIcon {
+  font-size: var(--font-size-base, 14px);
+  flex-shrink: 0;
+}
+
+.columnLabel {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.columnCount {
+  font-size: var(--font-size-xs, 11px);
+  color: var(--text-tertiary);
+  background: var(--bg-overlay);
+  border-radius: var(--radius-sm, 4px);
+  padding: 1px 6px;
+  min-width: 20px;
+  text-align: center;
+}
+
+// ---------------------------------------------------------------------------
+// Card list
+// ---------------------------------------------------------------------------
+
+.cardList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+  overflow-y: auto;
+  min-height: 40px;
+}
+
+// ---------------------------------------------------------------------------
+// Empty column placeholder
+// ---------------------------------------------------------------------------
+
+.emptyPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-xs, 11px);
+  font-style: italic;
+  padding: var(--space-md) var(--space-sm);
+}
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--bg-panel);
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              border-color var(--transition-fast),
+              box-shadow var(--transition-fast);
+  outline: none;
+
+  &:hover {
+    background: var(--bg-overlay);
+    border-color: var(--border-default);
+  }
+
+  &:focus-visible {
+    border-color: var(--accent-green);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 30%, transparent);
+  }
+}
+
+.cardHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-xs);
+}
+
+.cardStatusIcon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  font-size: var(--font-size-sm, 13px);
+}
+
+.cardTitle {
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--text-primary);
+  word-break: break-word;
+  line-height: 1.3;
+}
+
+// ---------------------------------------------------------------------------
+// Card badges
+// ---------------------------------------------------------------------------
+
+.cardBadges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  align-items: center;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: var(--font-size-xs, 11px);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--bg-overlay);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.blockedBadge {
+  color: var(--accent-yellow);
+  background: color-mix(in srgb, var(--accent-yellow) 12%, transparent);
+}
+
+.childBadge {
+  color: var(--text-tertiary);
+}
+
+.depBadge {
+  color: var(--text-tertiary);
+}
+
+.parentBadge {
+  color: var(--text-tertiary);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pausedSubBadge {
+  font-style: italic;
+}
+
+.personaBadge {
+  color: var(--accent-blue, var(--text-secondary));
+}
+
+.envBadge {
+  color: var(--text-tertiary);
+}
+
+// ---------------------------------------------------------------------------
+// Empty workspace CTA (mirrors DagView/WorkspacePage pattern)
+// ---------------------------------------------------------------------------
+
+.emptyCta {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  animation: fadeIn 300ms ease;
+}
+
+.ctaButton {
+  @include surface-card;
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-md, 8px);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium, 500);
+  cursor: pointer;
+  border: 1px solid var(--border-subtle);
+}
+
+.ctaDescription {
+  color: var(--text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/components/workspace/WorkspaceBoard.stories.tsx

@@ -0,0 +1,240 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { WorkspaceBoard } from "./WorkspaceBoard.js";
+import { buildTask, buildEnvironment } from "../../test-utils/storybook-helpers.js";
+
+const WORKSPACE_ID: string = "ws-board";
+const ENVIRONMENT_ID: string = "env-board";
+
+const meta: Meta<typeof WorkspaceBoard> = {
+  title: "Grackle/Workspace/WorkspaceBoard",
+  tags: ["autodocs"],
+  component: WorkspaceBoard,
+  args: {
+    workspaceId: WORKSPACE_ID,
+    environmentId: ENVIRONMENT_ID,
+    tasks: [],
+    sessions: [],
+    personas: [],
+    environments: [buildEnvironment({ id: ENVIRONMENT_ID })],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WorkspaceBoard>;
+
+/**
+ * When there are no tasks, the board shows an empty CTA with a "Create Task" button.
+ * Migrated from board-view.spec.ts: "empty workspace shows CTA on board view".
+ */
+export const EmptyCta: Story = {
+  name: "Empty workspace shows CTA",
+  args: {
+    tasks: [],
+  },
+  play: async ({ canvas }) => {
+    const cta = canvas.getByTestId("board-empty-cta");
+    await expect(cta).toBeInTheDocument();
+
+    const createButton = canvas.getByRole("button", { name: "Create Task" });
+    await expect(createButton).toBeInTheDocument();
+  },
+};
+
+/**
+ * All five board columns are rendered even when only one has tasks.
+ * Migrated from board-view.spec.ts: "all five columns are always rendered".
+ */
+export const AllFiveColumns: Story = {
+  name: "All five columns are rendered",
+  args: {
+    tasks: [
+      buildTask({ id: "t1", workspaceId: WORKSPACE_ID, title: "Only task", status: "not_started", sortOrder: 1 }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("board-column-not_started")).toBeInTheDocument();
+    await expect(canvas.getByTestId("board-column-working")).toBeInTheDocument();
+    await expect(canvas.getByTestId("board-column-paused")).toBeInTheDocument();
+    await expect(canvas.getByTestId("board-column-complete")).toBeInTheDocument();
+    await expect(canvas.getByTestId("board-column-failed")).toBeInTheDocument();
+  },
+};
+
+/**
+ * Tasks appear in the correct column based on their status, with count badges.
+ * Migrated from board-view.spec.ts: "tasks appear in correct columns based on status".
+ */
+export const TasksInCorrectColumns: Story = {
+  name: "Tasks in correct columns by status",
+  args: {
+    tasks: [
+      buildTask({ id: "t1", workspaceId: WORKSPACE_ID, title: "col-task-a", status: "not_started", sortOrder: 1 }),
+      buildTask({ id: "t2", workspaceId: WORKSPACE_ID, title: "col-task-b", status: "not_started", sortOrder: 2 }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const container = canvas.getByTestId("board-container");
+    await expect(container).toBeInTheDocument();
+
+    // Not Started column should exist and show count of 2
+    await expect(canvas.getByTestId("board-column-not_started")).toBeInTheDocument();
+    await expect(canvas.getByTestId("board-count-not_started")).toHaveTextContent("2");
+
+    // Other columns should show 0
+    await expect(canvas.getByTestId("board-count-working")).toHaveTextContent("0");
+    await expect(canvas.getByTestId("board-count-complete")).toHaveTextContent("0");
+  },
+};
+
+/**
+ * Clicking a board card triggers navigation (the onClick handler fires).
+ * Migrated from board-view.spec.ts: "clicking a card navigates to task detail".
+ */
+export const CardClick: Story = {
+  name: "Card click triggers navigation",
+  args: {
+    tasks: [
+      buildTask({ id: "t-nav", workspaceId: WORKSPACE_ID, title: "board-nav-task", status: "not_started", sortOrder: 1 }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const container = canvas.getByTestId("board-container");
+    await expect(container).toBeInTheDocument();
+
+    // Click the card — in Storybook we verify the card element is clickable
+    const card = canvas.getByTestId("board-card-t-nav");
+    await expect(card).toBeInTheDocument();
+    await userEvent.click(card);
+  },
+};
+
+/**
+ * Board cards are focusable via keyboard and respond to Enter key.
+ * Migrated from board-view.spec.ts: "card is focusable via keyboard".
+ */
+export const KeyboardFocus: Story = {
+  name: "Card is focusable via keyboard",
+  args: {
+    tasks: [
+      buildTask({ id: "t-focus", workspaceId: WORKSPACE_ID, title: "focus-task", status: "not_started", sortOrder: 1 }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("board-card-t-focus");
+    await expect(card).toBeInTheDocument();
+
+    // Card should have tabIndex and role="button"
+    await expect(card).toHaveAttribute("role", "button");
+
+    // Focus the card and verify it received focus
+    card.focus();
+    await expect(card).toHaveFocus();
+  },
+};
+
+/**
+ * Pressing Enter or Space on a focused card activates it.
+ */
+export const KeyboardActivation: Story = {
+  name: "Enter/Space activates focused card",
+  args: {
+    tasks: [
+      buildTask({ id: "t-kb", workspaceId: WORKSPACE_ID, title: "kb-task", status: "not_started", sortOrder: 1 }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    const card = canvas.getByTestId("board-card-t-kb");
+    card.focus();
+    await expect(card).toHaveFocus();
+
+    // Enter key should activate the card (trigger click handler)
+    await userEvent.keyboard("{Enter}");
+
+    // Space key should also activate the card
+    card.focus();
+    await userEvent.keyboard(" ");
+  },
+};
+
+/**
+ * A task with unresolved dependencies shows a "blocked" badge on its card.
+ * Migrated from board-view.spec.ts: "blocked task shows blocked badge in its status column".
+ */
+export const BlockedBadge: Story = {
+  name: "Blocked task shows blocked badge",
+  args: {
+    tasks: [
+      buildTask({
+        id: "t-blocker",
+        workspaceId: WORKSPACE_ID,
+        title: "blocker-task",
+        status: "not_started",
+        sortOrder: 1,
+      }),
+      buildTask({
+        id: "t-blocked",
+        workspaceId: WORKSPACE_ID,
+        title: "blocked-task",
+        status: "not_started",
+        dependsOn: ["t-blocker"],
+        sortOrder: 2,
+      }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    // Both tasks should be in Not Started column
+    await expect(canvas.getByTestId("board-count-not_started")).toHaveTextContent("2");
+
+    // The blocked task card should display a "blocked" badge
+    const blockedCard = canvas.getByTestId("board-card-t-blocked");
+    await expect(blockedCard).toBeInTheDocument();
+    await expect(blockedCard).toHaveTextContent(/blocked/);
+  },
+};
+
+/**
+ * A parent task with children shows a child progress badge like "0/2".
+ * Migrated from board-view.spec.ts: "child progress badge shows on parent cards".
+ */
+export const ChildProgressBadge: Story = {
+  name: "Child progress badge on parent cards",
+  args: {
+    tasks: [
+      buildTask({
+        id: "t-parent",
+        workspaceId: WORKSPACE_ID,
+        title: "parent-task",
+        status: "not_started",
+        canDecompose: true,
+        childTaskIds: ["t-child-1", "t-child-2"],
+        sortOrder: 1,
+      }),
+      buildTask({
+        id: "t-child-1",
+        workspaceId: WORKSPACE_ID,
+        title: "child-1",
+        status: "not_started",
+        parentTaskId: "t-parent",
+        depth: 1,
+        sortOrder: 1,
+      }),
+      buildTask({
+        id: "t-child-2",
+        workspaceId: WORKSPACE_ID,
+        title: "child-2",
+        status: "not_started",
+        parentTaskId: "t-parent",
+        depth: 1,
+        sortOrder: 2,
+      }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    // Parent card should show child progress badge "0/2"
+    const parentCard = canvas.getByTestId("board-card-t-parent");
+    await expect(parentCard).toBeInTheDocument();
+    await expect(parentCard).toHaveTextContent("0/2");
+  },
+};