@grackle-ai/web-components 0.107.2

package/src/components/tools/TaskCard.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { TaskCard } from "./TaskCard.js";
+
+const meta: Meta<typeof TaskCard> = {
+  component: TaskCard,
+  title: "Tools/TaskCard",
+};
+export default meta;
+type Story = StoryObj<typeof TaskCard>;
+
+export const CreateInProgress: Story = {
+  name: "task_create - in progress",
+  args: {
+    tool: "mcp__grackle__task_create",
+    args: { title: "Fix authentication bug", description: "Session tokens not rotated" },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-task-title")).toHaveTextContent("Fix authentication bug");
+  },
+};
+
+export const CreateCompleted: Story = {
+  name: "task_create - completed",
+  args: {
+    tool: "mcp__grackle__task_create",
+    args: { title: "Fix authentication bug" },
+    result: JSON.stringify({
+      id: "74f5b716",
+      title: "Fix authentication bug",
+      status: "not_started",
+      branch: "default/fix-authentication-bug",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-task-detail")).toBeInTheDocument();
+  },
+};
+
+export const StartCompleted: Story = {
+  name: "task_start - session spawned",
+  args: {
+    tool: "mcp__grackle__task_start",
+    args: { taskId: "74f5b716" },
+    result: JSON.stringify({
+      sessionId: "1fec3be8-c4f6-423c-a071-9540b2663bc0",
+      taskId: "74f5b716",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-task-session")).toHaveTextContent("1fec3be8");
+  },
+};
+
+export const CompleteStatus: Story = {
+  name: "task_complete - marked complete",
+  args: {
+    tool: "mcp__grackle__task_complete",
+    args: { taskId: "74f5b716" },
+    result: JSON.stringify({
+      id: "74f5b716",
+      title: "Fix authentication bug",
+      status: "complete",
+      branch: "default/fix-authentication-bug",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-task-status")).toBeInTheDocument();
+  },
+};
+
+export const ListWithTasks: Story = {
+  name: "task_list - multiple tasks",
+  args: {
+    tool: "mcp__grackle__task_list",
+    args: {},
+    result: JSON.stringify([
+      { id: "t1", title: "Fix auth bug", status: "complete" },
+      { id: "t2", title: "Add dark mode", status: "working" },
+      { id: "t3", title: "Write tests", status: "not_started" },
+      { id: "t4", title: "Update docs", status: "paused" },
+      { id: "t5", title: "Refactor API", status: "failed" },
+    ]),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-task-count")).toHaveTextContent("5 tasks");
+    await expect(canvas.getByTestId("tool-card-task-list")).toBeInTheDocument();
+  },
+};
+
+export const CopilotFormat: Story = {
+  name: "task_list - Copilot tool name",
+  args: {
+    tool: "grackle-task_list",
+    args: {},
+    result: JSON.stringify([
+      { id: "t1", title: "Test task", status: "working" },
+    ]),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByText("task_list")).toBeInTheDocument();
+  },
+};
+
+export const ErrorState: Story = {
+  name: "task_start - error",
+  args: {
+    tool: "mcp__grackle__task_start",
+    args: { taskId: "invalid" },
+    result: "gRPC error [NotFound]: task not found",
+    isError: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-task")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-error")).toBeInTheDocument();
+  },
+};

package/src/components/tools/TaskCard.tsx

@@ -0,0 +1,203 @@
+import { useState, type JSX } from "react";
+import type { ToolCardProps } from "./ToolCardProps.js";
+import { extractBareName } from "./classifyTool.js";
+import styles from "./toolCards.module.scss";
+
+/** Shape of a task in MCP results. */
+interface TaskSummary {
+  id?: string;
+  title?: string;
+  status?: string;
+  branch?: string;
+  latestSessionId?: string;
+  parentTaskId?: string;
+  childTaskIds?: string[];
+}
+
+/** Extracts task-relevant fields from tool args. */
+function getArgs(args: unknown): { taskId?: string; title?: string; status?: string } {
+  if (args === null || args === undefined || typeof args !== "object") {
+    return {};
+  }
+  const a = args as Record<string, unknown>;
+  return {
+    taskId: typeof a.taskId === "string" ? a.taskId : undefined,
+    title: typeof a.title === "string" ? a.title : undefined,
+    status: typeof a.status === "string" ? a.status : undefined,
+  };
+}
+
+/** Parses MCP result JSON into a task or array of tasks. */
+function parseResult(result: string | undefined): { single?: TaskSummary; list?: TaskSummary[]; sessionId?: string } {
+  if (!result) {
+    return {};
+  }
+  try {
+    const parsed: unknown = JSON.parse(result);
+    if (Array.isArray(parsed)) {
+      return { list: (parsed as unknown[]).filter((v): v is TaskSummary => v !== null && typeof v === "object") };
+    }
+    if (typeof parsed === "object" && parsed !== null) {
+      const obj = parsed as Record<string, unknown>;
+      // task_start returns { sessionId, taskId }
+      if (typeof obj.sessionId === "string") {
+        return { sessionId: obj.sessionId, single: obj as TaskSummary };
+      }
+      return { single: obj as TaskSummary };
+    }
+  } catch { /* fall through */ }
+  return {};
+}
+
+/** Status icon for a task. */
+function statusIcon(status: string | undefined): string {
+  switch (status) {
+    case "complete":
+    case "completed":
+      return "\u2713";
+    case "working":
+    case "in_progress":
+      return "\u25CF";
+    case "paused":
+      return "\u23F8";
+    case "failed":
+      return "\u2717";
+    default:
+      return "\u25CB";
+  }
+}
+
+/** CSS color for a task status. */
+function statusColor(status: string | undefined): string {
+  switch (status) {
+    case "complete":
+    case "completed":
+      return "var(--accent-green, #4ade80)";
+    case "working":
+    case "in_progress":
+      return "var(--accent-blue, #60a5fa)";
+    case "failed":
+      return "var(--accent-red, #f87171)";
+    case "paused":
+      return "var(--text-tertiary, #888)";
+    default:
+      return "var(--text-secondary, #aaa)";
+  }
+}
+
+/** Number of tasks shown when collapsed. */
+const PREVIEW_COUNT: number = 5;
+
+/** Renders a task tool call with structured display. */
+export function TaskCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+  const bareName = extractBareName(tool);
+  const argData = getArgs(args);
+  const inProgress = result === undefined;
+  const { single, list, sessionId } = parseResult(result);
+
+  const displayTitle = single?.title ?? argData.title;
+  const displayStatus = single?.status ?? argData.status;
+
+  return (
+    <div
+      className={`${styles.card} ${isError ? styles.cardRed : styles.cardBlue} ${inProgress ? styles.inProgress : ""}`}
+      data-testid="tool-card-task"
+    >
+      <div className={styles.header}>
+        <span className={styles.icon} aria-hidden="true">&#x1F4CB;</span>
+        <span className={styles.toolName} style={{ color: "var(--accent-blue)" }}>
+          {bareName}
+        </span>
+        {displayTitle && (
+          <span className={styles.fileName} data-testid="tool-card-task-title">
+            &quot;{displayTitle}&quot;
+          </span>
+        )}
+        {!displayTitle && argData.taskId && (
+          <span className={styles.fileName} data-testid="tool-card-task-id">
+            {argData.taskId}
+          </span>
+        )}
+        {displayStatus && (
+          <>
+            <span className={styles.spacer} />
+            <span
+              className={styles.badge}
+              style={{ color: statusColor(displayStatus) }}
+              data-testid="tool-card-task-status"
+            >
+              {statusIcon(displayStatus)} {displayStatus}
+            </span>
+          </>
+        )}
+        {list && !displayStatus && (
+          <>
+            <span className={styles.spacer} />
+            <span className={styles.badge} data-testid="tool-card-task-count">
+              {list.length} {list.length === 1 ? "task" : "tasks"}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* In-progress: show args */}
+      {inProgress && !displayTitle && !argData.taskId && args !== null && args !== undefined && (
+        <pre className={styles.pre} data-testid="tool-card-args">
+          {JSON.stringify(args, null, 2)}
+        </pre>
+      )}
+
+      {/* Error */}
+      {isError && result && (
+        <pre className={styles.pre} data-testid="tool-card-error">
+          {result}
+        </pre>
+      )}
+
+      {/* Session ID from task_start */}
+      {!isError && sessionId && (
+        <div className={styles.pre} style={{ padding: "4px 8px", fontSize: "0.85em" }} data-testid="tool-card-task-session">
+          session: {sessionId}
+        </div>
+      )}
+
+      {/* Single task: show key fields */}
+      {!isError && single && !list && !sessionId && (
+        <pre className={styles.pre} data-testid="tool-card-task-detail">
+          {[
+            single.id ? `id: ${single.id}` : null,
+            single.status ? `status: ${single.status}` : null,
+            single.branch ? `branch: ${single.branch}` : null,
+            single.latestSessionId ? `session: ${single.latestSessionId}` : null,
+          ].filter(Boolean).join("\n")}
+        </pre>
+      )}
+
+      {/* Task list */}
+      {!isError && list && list.length > 0 && (
+        <>
+          <pre className={styles.pre} data-testid="tool-card-task-list">
+            {(expanded ? list : list.slice(0, PREVIEW_COUNT)).map((t) => {
+              const icon = statusIcon(t.status);
+              const title = t.title ?? t.id ?? "untitled";
+              return `${icon} ${title}`;
+            }).join("\n")}
+          </pre>
+          {list.length > PREVIEW_COUNT && (
+            <button
+              type="button"
+              className={styles.bodyToggle}
+              onClick={() => { setExpanded((v) => !v); }}
+              aria-expanded={expanded}
+              data-testid="tool-card-toggle"
+            >
+              <span className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`}>&#x25B8;</span>
+              {expanded ? "collapse" : `${list.length - PREVIEW_COUNT} more tasks`}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,131 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// TodoCard — checklist with progress bar and active task highlight
+// =============================================================================
+
+// --- Progress bar ---
+
+.progressBar {
+  height: 3px;
+  background: var(--bg-inset);
+  border-radius: 2px;
+  margin: var(--space-xs) 0;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--accent-green);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+// --- Active task callout ---
+
+.activeTask {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  margin: var(--space-xs) 0;
+  background: rgba(59, 130, 246, 0.08);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+}
+
+.activeIcon {
+  color: var(--accent-blue);
+  font-size: 8px;
+  animation: todoPulse 1.5s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.activeText {
+  color: var(--accent-blue);
+  font-weight: var(--font-weight-medium);
+  font-style: italic;
+}
+
+@keyframes todoPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+// --- Checklist ---
+
+.checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-top: var(--space-xs);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 3px var(--space-xs);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+}
+
+.itemIcon {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: var(--font-weight-bold);
+}
+
+.itemText {
+  flex: 1;
+  min-width: 0;
+}
+
+// --- Status variants ---
+
+.pending {
+  color: var(--text-tertiary);
+
+  .itemIcon {
+    color: var(--text-tertiary);
+  }
+}
+
+.in_progress {
+  color: var(--text-primary);
+  background: rgba(59, 130, 246, 0.05);
+
+  .itemIcon {
+    color: var(--accent-blue);
+    animation: todoPulse 1.5s ease-in-out infinite;
+  }
+
+  .itemText {
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.completed {
+  color: var(--text-secondary);
+
+  .itemIcon {
+    color: var(--accent-green);
+  }
+
+  .itemText {
+    text-decoration: line-through;
+    text-decoration-color: var(--text-tertiary);
+  }
+}
+
+// --- Empty state ---
+
+.emptyMessage {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  font-style: italic;
+  padding: var(--space-xs) 0;
+}

package/src/components/tools/TodoCard.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { TodoCard } from "./TodoCard.js";
+
+const meta: Meta<typeof TodoCard> = {
+  component: TodoCard,
+  title: "Grackle/Tools/TodoCard",
+  tags: ["autodocs"],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllPending: Story = {
+  name: "Initial - all pending",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Get bread", activeForm: "Getting bread", status: "pending" },
+        { content: "Spread peanut butter", activeForm: "Spreading peanut butter", status: "pending" },
+        { content: "Spread jelly", activeForm: "Spreading jelly", status: "pending" },
+        { content: "Combine slices", activeForm: "Combining slices", status: "pending" },
+        { content: "Cut in half", activeForm: "Cutting in half", status: "pending" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("0/5");
+    await expect(canvas.getAllByTestId("tool-card-todo-item")).toHaveLength(5);
+    // No active task when all pending
+    await expect(canvas.queryByTestId("tool-card-todo-active")).not.toBeInTheDocument();
+  },
+};
+
+export const FirstInProgress: Story = {
+  name: "Step 1 in progress",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Get bread", activeForm: "Getting bread", status: "in_progress" },
+        { content: "Spread peanut butter", activeForm: "Spreading peanut butter", status: "pending" },
+        { content: "Spread jelly", activeForm: "Spreading jelly", status: "pending" },
+        { content: "Combine slices", activeForm: "Combining slices", status: "pending" },
+        { content: "Cut in half", activeForm: "Cutting in half", status: "pending" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("0/5");
+    // Active task callout should show the activeForm text
+    const active = canvas.getByTestId("tool-card-todo-active");
+    await expect(active).toBeInTheDocument();
+    await expect(active).toHaveTextContent("Getting bread");
+  },
+};
+
+export const MidwayThrough: Story = {
+  name: "Midway - 2 done, 1 in progress",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Get bread", activeForm: "Getting bread", status: "completed" },
+        { content: "Spread peanut butter", activeForm: "Spreading peanut butter", status: "completed" },
+        { content: "Spread jelly", activeForm: "Spreading jelly", status: "in_progress" },
+        { content: "Combine slices", activeForm: "Combining slices", status: "pending" },
+        { content: "Cut in half", activeForm: "Cutting in half", status: "pending" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("2/5");
+    await expect(canvas.getByTestId("tool-card-todo-active")).toHaveTextContent("Spreading jelly");
+  },
+};
+
+export const AllCompleted: Story = {
+  name: "All completed",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Get bread", activeForm: "Getting bread", status: "completed" },
+        { content: "Spread peanut butter", activeForm: "Spreading peanut butter", status: "completed" },
+        { content: "Spread jelly", activeForm: "Spreading jelly", status: "completed" },
+        { content: "Combine slices", activeForm: "Combining slices", status: "completed" },
+        { content: "Cut in half", activeForm: "Cutting in half", status: "completed" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("5/5");
+    // No active task when all done
+    await expect(canvas.queryByTestId("tool-card-todo-active")).not.toBeInTheDocument();
+  },
+};
+
+export const Cleared: Story = {
+  name: "Cleared - empty list",
+  args: {
+    tool: "TodoWrite",
+    args: { todos: [] },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-todo-list")).not.toBeInTheDocument();
+    await expect(canvas.queryByTestId("tool-card-todo-progress")).not.toBeInTheDocument();
+  },
+};
+
+export const NearEnd: Story = {
+  name: "Near end - 4 done, 1 in progress",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Get bread", activeForm: "Getting bread", status: "completed" },
+        { content: "Spread peanut butter", activeForm: "Spreading peanut butter", status: "completed" },
+        { content: "Spread jelly", activeForm: "Spreading jelly", status: "completed" },
+        { content: "Combine slices", activeForm: "Combining slices", status: "completed" },
+        { content: "Cut in half", activeForm: "Cutting in half", status: "in_progress" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("4/5");
+    await expect(canvas.getByTestId("tool-card-todo-active")).toHaveTextContent("Cutting in half");
+  },
+};
+
+export const NoActiveForm: Story = {
+  name: "No activeForm - falls back to content",
+  args: {
+    tool: "TodoWrite",
+    args: {
+      todos: [
+        { content: "Research API options", status: "in_progress" },
+        { content: "Write implementation", status: "pending" },
+        { content: "Add tests", status: "pending" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-active")).toHaveTextContent("Research API options");
+  },
+};
+
+// --- Codex update_plan format ---
+
+export const CodexPlan: Story = {
+  name: "Codex - update_plan format",
+  args: {
+    tool: "update_plan",
+    args: {
+      explanation: "Working through the sandwich steps",
+      plan: [
+        { step: "Get bread from pantry", status: "completed" },
+        { step: "Spread peanut butter on slice", status: "in_progress" },
+        { step: "Spread jelly on other slice", status: "pending" },
+        { step: "Combine slices together", status: "pending" },
+      ],
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("1/4");
+    await expect(canvas.getByTestId("tool-card-todo-active")).toHaveTextContent("Spread peanut butter on slice");
+    await expect(canvas.getAllByTestId("tool-card-todo-item")).toHaveLength(4);
+  },
+};
+
+// --- Goose todo_write format (markdown checklist) ---
+
+export const GooseMarkdown: Story = {
+  name: "Goose - markdown checklist",
+  args: {
+    tool: "todo_write",
+    args: {
+      content: "- [x] Get two slices of bread\n- [x] Open peanut butter jar\n- [~] Spread PB on first slice\n- [ ] Spread jelly on second slice\n- [ ] Press slices together\n- [ ] Cut diagonally",
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("2/6");
+    await expect(canvas.getByTestId("tool-card-todo-active")).toHaveTextContent("Spread PB on first slice");
+    await expect(canvas.getAllByTestId("tool-card-todo-item")).toHaveLength(6);
+  },
+};
+
+export const GooseAllChecked: Story = {
+  name: "Goose - all checked off",
+  args: {
+    tool: "todo_write",
+    args: {
+      content: "- [x] Get bread\n- [x] Spread PB\n- [x] Spread jelly\n- [x] Combine\n- [x] Cut",
+    },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("tool-card-todo-progress")).toHaveTextContent("5/5");
+    await expect(canvas.queryByTestId("tool-card-todo-active")).not.toBeInTheDocument();
+  },
+};