@grackle-ai/web-components 0.107.2

package/src/components/panels/WorkpadPanel.tsx

@@ -0,0 +1,63 @@
+import type { JSX } from "react";
+import styles from "./WorkpadPanel.module.scss";
+
+/** Props for the WorkpadPanel component. */
+export interface WorkpadPanelProps {
+  /** Raw JSON string from the task's workpad field. */
+  workpad: string;
+}
+
+/** Parsed workpad shape. */
+interface ParsedWorkpad {
+  status?: string;
+  summary?: string;
+  extra?: Record<string, unknown>;
+}
+
+/**
+ * Displays a task's workpad (persistent structured context).
+ * Pure presentational — accepts the raw JSON string and renders
+ * status, summary, and extra fields if present.
+ */
+export function WorkpadPanel({ workpad }: WorkpadPanelProps): JSX.Element | undefined {
+  if (!workpad) {
+    return undefined;
+  }
+
+  let parsed: ParsedWorkpad;
+  try {
+    const raw: unknown = JSON.parse(workpad);
+    if (raw === undefined || raw === null || typeof raw !== "object" || Array.isArray(raw)) {
+      return undefined;
+    }
+    parsed = raw as ParsedWorkpad;
+  } catch {
+    return (
+      <div className={styles.workpadSection} data-testid="workpad-panel">
+        <div className={styles.workpadLabel}>Workpad</div>
+        <div className={styles.workpadExtra}>{workpad}</div>
+      </div>
+    );
+  }
+
+  if (!parsed.status && !parsed.summary && !parsed.extra) {
+    return undefined;
+  }
+
+  return (
+    <div className={styles.workpadSection} data-testid="workpad-panel">
+      <div className={styles.workpadLabel}>Workpad</div>
+      {parsed.status && (
+        <div className={styles.workpadStatus} data-testid="workpad-status">{parsed.status}</div>
+      )}
+      {parsed.summary && (
+        <div className={styles.workpadSummary} data-testid="workpad-summary">{parsed.summary}</div>
+      )}
+      {parsed.extra && Object.keys(parsed.extra).length > 0 && (
+        <div className={styles.workpadExtra} data-testid="workpad-extra">
+          {JSON.stringify(parsed.extra, null, 2)}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/panels/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Main content panel components.
+ * @module panels
+ */
+export { FindingsPanel } from "./FindingsPanel.js";
+export { TokensPanel } from "./TokensPanel.js";
+export { AppearancePanel } from "./AppearancePanel.js";
+export { AboutPanel } from "./AboutPanel.js";
+export { TaskEditPanel } from "./TaskEditPanel.js";
+export { TaskActionButtons } from "./TaskActionButtons.js";
+export { TaskOverviewPanel } from "./TaskOverviewPanel.js";
+export { PluginsPanel } from "./PluginsPanel.js";
+export type { PluginsPanelProps } from "./PluginsPanel.js";

package/src/components/personas/McpToolSelector.module.scss

@@ -0,0 +1,109 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.count {
+  font-size: 0.85rem;
+  color: var(--text-secondary, #888);
+}
+
+.presets {
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.presetButton {
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--border-color, #444);
+  border-radius: 4px;
+  background: var(--bg-secondary, #2a2a2a);
+  color: var(--text-primary, #ddd);
+  cursor: pointer;
+  font-size: 0.8rem;
+
+  &:hover:not(:disabled) {
+    background: var(--bg-hover, #333);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.filterInput {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--border-color, #444);
+  border-radius: 4px;
+  background: var(--bg-secondary, #2a2a2a);
+  color: var(--text-primary, #ddd);
+  font-size: 0.85rem;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.groups {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.group {
+  border: 1px solid var(--border-color, #333);
+  border-radius: 4px;
+  padding: 0.375rem 0.5rem;
+}
+
+.groupHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.groupName {
+  text-transform: capitalize;
+}
+
+.groupCount {
+  font-weight: 400;
+  color: var(--text-secondary, #888);
+  font-size: 0.75rem;
+}
+
+.toolList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.125rem 0.75rem;
+  margin-top: 0.25rem;
+  padding-left: 1.25rem;
+}
+
+.toolItem {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.toolName {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+}

package/src/components/personas/McpToolSelector.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { McpToolSelector } from "./McpToolSelector.js";
+import {
+  DEFAULT_SCOPED_MCP_TOOLS,
+  WORKER_MCP_TOOLS,
+  ALL_MCP_TOOL_NAMES,
+} from "@grackle-ai/common";
+
+const meta: Meta<typeof McpToolSelector> = {
+  title: "Grackle/Personas/McpToolSelector",
+  tags: ["autodocs"],
+  component: McpToolSelector,
+  args: {
+    selectedTools: [],
+    onChange: fn(),
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof McpToolSelector>;
+
+export const EmptySelection: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Verify preset buttons are visible
+    await expect(canvas.getByTestId("preset-default")).toBeInTheDocument();
+    await expect(canvas.getByTestId("preset-worker")).toBeInTheDocument();
+    await expect(canvas.getByTestId("preset-orchestrator")).toBeInTheDocument();
+    await expect(canvas.getByTestId("preset-admin")).toBeInTheDocument();
+    // Verify filter input is visible
+    await expect(canvas.getByTestId("mcp-tool-filter")).toBeInTheDocument();
+    // Verify "Using default" text (count is dynamic from DEFAULT_SCOPED_MCP_TOOLS)
+    await expect(canvas.getByText(/Using default \(\d+ tools\)/)).toBeInTheDocument();
+  },
+};
+
+export const WithPresetDefault: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("preset-default"));
+    await expect(args.onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([...DEFAULT_SCOPED_MCP_TOOLS]),
+    );
+  },
+};
+
+export const WithPresetWorker: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("preset-worker"));
+    await expect(args.onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([...WORKER_MCP_TOOLS]),
+    );
+  },
+};
+
+export const CustomSelection: Story = {
+  args: {
+    selectedTools: ["finding_post", "task_list", "workpad_read"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Verify selected tools are checked
+    const findingPost = canvas.getByTestId("tool-finding_post") as HTMLInputElement;
+    await expect(findingPost.checked).toBe(true);
+    const taskList = canvas.getByTestId("tool-task_list") as HTMLInputElement;
+    await expect(taskList.checked).toBe(true);
+    // Verify unselected tool is not checked
+    const envList = canvas.getByTestId("tool-env_list") as HTMLInputElement;
+    await expect(envList.checked).toBe(false);
+    // Verify count display
+    await expect(canvas.getByText(`3 of ${ALL_MCP_TOOL_NAMES.size} tools selected`)).toBeInTheDocument();
+  },
+};
+
+export const ToggleIndividualTool: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("tool-finding_post"));
+    await expect(args.onChange).toHaveBeenCalledWith(["finding_post"]);
+  },
+};
+
+export const SearchFilter: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const filterInput = canvas.getByTestId("mcp-tool-filter");
+    await userEvent.type(filterInput, "finding");
+    // finding group should be visible with its tools
+    await expect(canvas.getByTestId("tool-group-finding")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-finding_post")).toBeInTheDocument();
+    await expect(canvas.getByTestId("tool-finding_list")).toBeInTheDocument();
+    // env group should be hidden (no match)
+    await expect(canvas.queryByTestId("tool-group-env")).not.toBeInTheDocument();
+  },
+};
+
+export const GroupSelectAll: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    // Click the "task" group toggle to select all task tools
+    await userEvent.click(canvas.getByTestId("group-toggle-task"));
+    const called = (args.onChange as ReturnType<typeof fn>).mock.calls[0][0] as string[];
+    // Should include all task tools
+    await expect(called).toContain("task_list");
+    await expect(called).toContain("task_create");
+    await expect(called).toContain("task_show");
+    await expect(called).toContain("task_start");
+    await expect(called).toContain("task_complete");
+  },
+};
+
+export const DisabledState: Story = {
+  args: {
+    disabled: true,
+    selectedTools: ["finding_post"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Preset buttons should be disabled
+    await expect(canvas.getByTestId("preset-default")).toBeDisabled();
+    // Filter input should be disabled
+    await expect(canvas.getByTestId("mcp-tool-filter")).toBeDisabled();
+    // Tool checkboxes should be disabled
+    await expect(canvas.getByTestId("tool-finding_post")).toBeDisabled();
+  },
+};

package/src/components/personas/McpToolSelector.tsx

@@ -0,0 +1,180 @@
+/**
+ * A categorized multiselect for choosing which MCP tools a persona can access.
+ *
+ * Pure presentational component — receives data and callbacks as props.
+ */
+
+import { useState, useMemo, useCallback, type JSX } from "react";
+import {
+  ALL_MCP_TOOL_NAMES,
+  DEFAULT_SCOPED_MCP_TOOLS,
+  WORKER_MCP_TOOLS,
+  ORCHESTRATOR_MCP_TOOLS,
+  ADMIN_MCP_TOOLS,
+} from "@grackle-ai/common";
+import styles from "./McpToolSelector.module.scss";
+
+/** Tool groups derived from the naming convention (prefix before first underscore). */
+const TOOL_GROUPS: { group: string; tools: string[] }[] = (() => {
+  const grouped = new Map<string, string[]>();
+  for (const name of ALL_MCP_TOOL_NAMES) {
+    // Most tools use "group_action" naming; "get_version_status" is a special case
+    const group = name === "get_version_status" ? "version" : name.split("_")[0];
+    if (!grouped.has(group)) {
+      grouped.set(group, []);
+    }
+    grouped.get(group)!.push(name);
+  }
+  // Sort groups alphabetically, tools within each group alphabetically
+  return [...grouped.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([group, tools]) => ({ group, tools: tools.sort() }));
+})();
+
+/** Preset definitions for quick selection. */
+const PRESETS = [
+  { name: "default", label: "Default", tools: DEFAULT_SCOPED_MCP_TOOLS },
+  { name: "worker", label: "Worker", tools: WORKER_MCP_TOOLS },
+  { name: "orchestrator", label: "Orchestrator", tools: ORCHESTRATOR_MCP_TOOLS },
+  { name: "admin", label: "Admin", tools: ADMIN_MCP_TOOLS },
+] as const;
+
+export interface McpToolSelectorProps {
+  /** Currently selected tool names. Empty = default (shown as hint, not checked). */
+  selectedTools: string[];
+  /** Callback when selection changes. */
+  onChange: (tools: string[]) => void;
+  /** Whether the component is disabled. */
+  disabled?: boolean;
+}
+
+export function McpToolSelector({ selectedTools, onChange, disabled }: McpToolSelectorProps): JSX.Element {
+  const [filter, setFilter] = useState("");
+  const selectedSet = useMemo(() => new Set(selectedTools), [selectedTools]);
+
+  const toggleTool = useCallback((tool: string) => {
+    if (disabled) {
+      return;
+    }
+    const next = new Set(selectedSet);
+    if (next.has(tool)) {
+      next.delete(tool);
+    } else {
+      next.add(tool);
+    }
+    onChange([...next].sort());
+  }, [selectedSet, onChange, disabled]);
+
+  const toggleGroup = useCallback((tools: string[], allSelected: boolean) => {
+    if (disabled) {
+      return;
+    }
+    const next = new Set(selectedSet);
+    for (const t of tools) {
+      if (allSelected) {
+        next.delete(t);
+      } else {
+        next.add(t);
+      }
+    }
+    onChange([...next].sort());
+  }, [selectedSet, onChange, disabled]);
+
+  const applyPreset = useCallback((tools: readonly string[]) => {
+    if (disabled) {
+      return;
+    }
+    onChange([...tools].sort());
+  }, [onChange, disabled]);
+
+  const lowerFilter = filter.toLowerCase();
+
+  return (
+    <div className={styles.container} data-testid="mcp-tool-selector">
+      <div className={styles.header}>
+        <span className={styles.count}>
+          {selectedTools.length === 0
+            ? `Using default (${DEFAULT_SCOPED_MCP_TOOLS.length} tools)`
+            : `${selectedTools.length} of ${ALL_MCP_TOOL_NAMES.size} tools selected`}
+        </span>
+      </div>
+
+      <div className={styles.presets} data-testid="mcp-tool-presets">
+        {PRESETS.map((preset) => (
+          <button
+            key={preset.name}
+            type="button"
+            className={styles.presetButton}
+            disabled={disabled}
+            onClick={() => applyPreset(preset.tools)}
+            data-testid={`preset-${preset.name}`}
+          >
+            {preset.label}
+          </button>
+        ))}
+        <button
+          type="button"
+          className={styles.presetButton}
+          disabled={disabled}
+          onClick={() => onChange([])}
+          data-testid="preset-clear"
+        >
+          Clear
+        </button>
+      </div>
+
+      <input
+        type="text"
+        className={styles.filterInput}
+        placeholder="Filter tools..."
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        disabled={disabled}
+        data-testid="mcp-tool-filter"
+      />
+
+      <div className={styles.groups}>
+        {TOOL_GROUPS.map(({ group, tools }) => {
+          const visibleTools = lowerFilter
+            ? tools.filter((t) => t.toLowerCase().includes(lowerFilter))
+            : tools;
+          if (visibleTools.length === 0) {
+            return null;
+          }
+          const allSelected = visibleTools.every((t) => selectedSet.has(t));
+          return (
+            <div key={group} className={styles.group} data-testid={`tool-group-${group}`}>
+              <label className={styles.groupHeader}>
+                <input
+                  type="checkbox"
+                  checked={allSelected}
+                  onChange={() => toggleGroup(visibleTools, allSelected)}
+                  disabled={disabled}
+                  data-testid={`group-toggle-${group}`}
+                />
+                <span className={styles.groupName}>{group}</span>
+                <span className={styles.groupCount}>
+                  ({visibleTools.filter((t) => selectedSet.has(t)).length}/{visibleTools.length})
+                </span>
+              </label>
+              <div className={styles.toolList}>
+                {visibleTools.map((tool) => (
+                  <label key={tool} className={styles.toolItem}>
+                    <input
+                      type="checkbox"
+                      checked={selectedSet.has(tool)}
+                      onChange={() => toggleTool(tool)}
+                      disabled={disabled}
+                      data-testid={`tool-${tool}`}
+                    />
+                    <span className={styles.toolName}>{tool}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}