@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,233 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// PersonaManager — CRUD for AI personas
+// =============================================================================
+
+.container {
+  padding: var(--space-lg);
+  max-width: 800px;
+  color: var(--text-primary);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-lg);
+
+  h2 {
+    margin: 0;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+.form {
+  @include surface-card;
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
+
+  h3 {
+    margin: 0 0 var(--space-md);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
+  }
+
+  label {
+    display: block;
+    margin-bottom: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+
+    input,
+    select,
+    textarea {
+      @include input-field;
+      display: block;
+      width: 100%;
+      margin-top: var(--space-xs);
+      box-sizing: border-box;
+    }
+
+    textarea {
+      resize: vertical;
+      font-family: var(--font-mono);
+    }
+  }
+}
+
+.formActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+}
+
+.editableSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.card {
+  @include surface-card;
+  padding: var(--space-md);
+
+  &.active {
+    border-color: var(--accent-green);
+  }
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  strong {
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+  }
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.defaultBadge {
+  @include surface-inset;
+  padding: 2px var(--space-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--accent-green);
+  border-radius: var(--radius-sm);
+}
+
+.cardActions {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.description {
+  margin: var(--space-sm) 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.meta {
+  display: flex;
+  gap: var(--space-md);
+  margin-top: var(--space-sm);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+
+  span {
+    @include surface-inset;
+    padding: 2px var(--space-sm);
+  }
+}
+
+.promptDetails {
+  margin-top: var(--space-sm);
+
+  summary {
+    cursor: pointer;
+    font-size: var(--font-size-xs);
+    color: var(--text-tertiary);
+
+    &:hover {
+      color: var(--accent-green);
+    }
+  }
+}
+
+.promptText {
+  margin: var(--space-sm) 0 0;
+  @include surface-inset;
+  padding: var(--space-sm);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-tertiary);
+  padding: var(--space-xl);
+}
+
+.btnPrimary {
+  @include btn-primary;
+  font-size: var(--font-size-sm);
+}
+
+.btnSecondary {
+  @include btn-outline;
+  font-size: var(--font-size-sm);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.btnSmall {
+  @include btn-ghost;
+  font-size: var(--font-size-xs);
+  padding: 2px var(--space-sm);
+}
+
+.btnDanger {
+  @include btn-danger;
+  font-size: var(--font-size-xs);
+  padding: 2px var(--space-sm);
+}
+
+.typeToggle {
+  display: flex;
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+  }
+}
+
+.typeBadge {
+  @include surface-inset;
+  padding: 2px var(--space-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+  border-radius: var(--radius-sm);
+}
+
+.scriptEditor {
+  font-family: var(--font-mono) !important;
+  font-size: var(--font-size-sm) !important;
+  line-height: 1.5;
+  tab-size: 2;
+}
+
+.optional {
+  font-weight: normal;
+  color: var(--text-tertiary);
+}

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

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { PersonaManager } from "./PersonaManager.js";
+import { buildPersona } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof PersonaManager> = {
+  title: "Grackle/Personas/PersonaManager",
+  tags: ["autodocs"],
+  component: PersonaManager,
+  args: {
+    personas: [],
+    appDefaultPersonaId: "",
+    onDeletePersona: fn(),
+    onSetAppDefaultPersonaId: fn(),
+    onNavigateToNew: fn(),
+    onNavigateToPersona: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PersonaManager>;
+
+/** Empty state shows a message and a "+ New Persona" button. */
+export const EmptyState: Story = {
+  play: async ({ canvas }) => {
+    await expect(
+      canvas.getByText("No personas yet. Create one to get started."),
+    ).toBeInTheDocument();
+    await expect(
+      canvas.getByRole("button", { name: "+ New Persona" }),
+    ).toBeInTheDocument();
+  },
+};
+
+/** Renders persona cards with names, type badges, and action buttons. */
+export const WithPersonas: Story = {
+  args: {
+    personas: [
+      buildPersona({
+        id: "p-1",
+        name: "Frontend Engineer",
+        description: "React and TypeScript specialist",
+        runtime: "claude-code",
+        model: "sonnet",
+        type: "agent",
+      }),
+      buildPersona({
+        id: "p-2",
+        name: "Nightly Report",
+        description: "Generates daily summaries",
+        runtime: "genaiscript",
+        type: "script",
+        script: 'script({ model: "openai:gpt-4o" });',
+      }),
+    ],
+    appDefaultPersonaId: "p-1",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Frontend Engineer")).toBeInTheDocument();
+    await expect(canvas.getByText("Nightly Report")).toBeInTheDocument();
+
+    // Type badges
+    await expect(canvas.getByTestId("persona-type-badge-p-1")).toHaveTextContent("Agent");
+    await expect(canvas.getByTestId("persona-type-badge-p-2")).toHaveTextContent("Script");
+
+    // Default badge on p-1
+    await expect(canvas.getByTestId("persona-default-badge-p-1")).toBeInTheDocument();
+  },
+};
+
+/** Clicking "+ New Persona" calls onNavigateToNew. */
+export const ClickNewPersona: Story = {
+  play: async ({ canvas, args }) => {
+    const newButton = canvas.getByRole("button", { name: "+ New Persona" });
+    await userEvent.click(newButton);
+
+    await expect(args.onNavigateToNew).toHaveBeenCalled();
+  },
+};
+
+/** Clicking a persona card calls onNavigateToPersona. */
+export const ClickPersonaCard: Story = {
+  args: {
+    personas: [
+      buildPersona({
+        id: "p-edit",
+        name: "Code Reviewer",
+        description: "Reviews pull requests",
+        type: "agent",
+      }),
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    const card = canvas.getByTestId("persona-card-p-edit");
+    await userEvent.click(card);
+
+    await expect(args.onNavigateToPersona).toHaveBeenCalledWith("p-edit");
+  },
+};
+
+/** Delete flow: clicking "Delete" shows a confirmation dialog. */
+export const DeletePersonaFlow: Story = {
+  args: {
+    personas: [
+      buildPersona({ id: "p-del", name: "Disposable Persona" }),
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    // Click Delete within the card actions
+    const deleteButton = canvas.getByTestId("persona-delete-p-del");
+    await userEvent.click(deleteButton);
+
+    // Confirmation dialog should appear
+    await expect(canvas.getByText("Delete Persona?")).toBeInTheDocument();
+
+    const dialog = canvas.getByRole("dialog", { name: "Delete Persona?" });
+    await userEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+    await expect(args.onDeletePersona).toHaveBeenCalledWith("p-del");
+  },
+};
+
+/** "Set Default" button is visible for non-default personas and hidden for the default. */
+export const SetDefaultButton: Story = {
+  args: {
+    personas: [
+      buildPersona({ id: "p-default", name: "Default Persona" }),
+      buildPersona({ id: "p-other", name: "Other Persona" }),
+    ],
+    appDefaultPersonaId: "p-default",
+  },
+  play: async ({ canvas }) => {
+    // The default persona should NOT have a "Set Default" button
+    await expect(canvas.queryByTestId("persona-set-default-p-default")).not.toBeInTheDocument();
+
+    // The non-default persona should have a "Set Default" button
+    await expect(canvas.getByTestId("persona-set-default-p-other")).toBeInTheDocument();
+  },
+};

package/src/components/personas/PersonaManager.tsx

@@ -0,0 +1,122 @@
+import { useState, type JSX } from "react";
+import type { PersonaData } from "../../hooks/types.js";
+import { Button } from "../display/Button.js";
+import { ConfirmDialog } from "../display/index.js";
+import styles from "./PersonaManager.module.scss";
+
+/** Props for the PersonaManager component. */
+export interface PersonaManagerProps {
+  /** All personas. */
+  personas: PersonaData[];
+  /** The app-level default persona ID. */
+  appDefaultPersonaId: string;
+  /** Callback to delete a persona. */
+  onDeletePersona: (personaId: string) => Promise<void>;
+  /** Callback to set the app-level default persona. */
+  onSetAppDefaultPersonaId: (personaId: string) => Promise<void>;
+  /** Navigate to the new persona page. */
+  onNavigateToNew: () => void;
+  /** Navigate to a persona's detail page for editing. */
+  onNavigateToPersona: (personaId: string) => void;
+}
+
+/** Persona list view — shows cards and navigates to detail pages for create/edit. */
+export function PersonaManager({
+  personas, appDefaultPersonaId,
+  onDeletePersona, onSetAppDefaultPersonaId,
+  onNavigateToNew, onNavigateToPersona,
+}: PersonaManagerProps): JSX.Element {
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const personaToDelete = confirmDelete ? personas.find((p) => p.id === confirmDelete) : undefined;
+
+  const handleDelete = async (id: string): Promise<void> => {
+    await onDeletePersona(id);
+    setConfirmDelete(null);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2>Personas</h2>
+        <Button variant="primary" size="md" onClick={onNavigateToNew} data-testid="persona-new-button">
+          + New Persona
+        </Button>
+      </div>
+
+      {personas.length === 0 ? (
+        <p className={styles.empty}>No personas yet. Create one to get started.</p>
+      ) : (
+        <div className={styles.list}>
+          {personas.map((p) => {
+            const isAppDefault = appDefaultPersonaId === p.id;
+            const isScript = p.type === "script";
+            return (
+              <div
+                key={p.id}
+                className={styles.card}
+                data-testid={`persona-card-${p.id}`}
+                onClick={() => onNavigateToPersona(p.id)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.currentTarget === e.target && (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    onNavigateToPersona(p.id);
+                  }
+                }}
+              >
+                <div className={styles.cardHeader}>
+                  <span className={styles.cardTitle}>
+                    <strong>{p.name}</strong>
+                    <span className={styles.typeBadge} data-testid={`persona-type-badge-${p.id}`}>
+                      {isScript ? "Script" : "Agent"}
+                    </span>
+                    {isAppDefault && (
+                      <span className={styles.defaultBadge} data-testid={`persona-default-badge-${p.id}`}>App Default</span>
+                    )}
+                  </span>
+                  <div className={styles.cardActions} onClick={(e) => e.stopPropagation()}>
+                    {!isAppDefault && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            onSetAppDefaultPersonaId(p.id).catch(() => undefined);
+                          }}
+                          data-testid={`persona-set-default-${p.id}`}
+                          title="Set as app default persona"
+                        >
+                        Set Default
+                      </Button>
+                    )}
+                    <Button variant="ghost" size="sm" onClick={() => onNavigateToPersona(p.id)}>Edit</Button>
+                    <Button variant="ghost" size="sm" onClick={() => setConfirmDelete(p.id)} data-testid={`persona-delete-${p.id}`}>Delete</Button>
+                  </div>
+                </div>
+                {p.description && <p className={styles.description}>{p.description}</p>}
+                <div className={styles.meta}>
+                  {p.runtime && <span>Runtime: {p.runtime}</span>}
+                  {p.model && <span>Model: {p.model}</span>}
+                  {p.maxTurns > 0 && <span>Max turns: {p.maxTurns}</span>}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <ConfirmDialog
+        isOpen={confirmDelete !== null}
+        title="Delete Persona?"
+        description={`"${personaToDelete?.name ?? ""}" will be permanently removed.`}
+        confirmLabel="Delete"
+        onConfirm={() => {
+          if (confirmDelete) {
+            handleDelete(confirmDelete).catch(() => undefined);
+          }
+        }}
+        onCancel={() => setConfirmDelete(null)}
+      />
+    </div>
+  );
+}

package/src/components/schedules/ScheduleManager.module.scss

@@ -0,0 +1,98 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// ScheduleManager — CRUD for cron schedules
+// =============================================================================
+
+.container {
+  padding: var(--space-lg);
+  max-width: 800px;
+  color: var(--text-primary);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-lg);
+
+  h2 {
+    margin: 0;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.card {
+  @include surface-card;
+  padding: var(--space-md);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--border-hover);
+  }
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+
+  strong {
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+  }
+}
+
+.statusBadge {
+  @include surface-inset;
+  padding: 2px var(--space-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-sm);
+
+  &.enabled {
+    color: var(--accent-green);
+  }
+
+  &.disabled {
+    color: var(--text-tertiary);
+  }
+}
+
+.cardActions {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.cardMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  margin-top: var(--space-sm);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+
+  span {
+    @include surface-inset;
+    padding: 2px var(--space-sm);
+  }
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-tertiary);
+  padding: var(--space-xl);
+}

package/src/components/schedules/ScheduleManager.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { ScheduleManager } from "./ScheduleManager.js";
+import { makeSchedule, makePersona } from "../../test-utils/storybook-helpers.js";
+
+const MOCK_PERSONAS: ReturnType<typeof makePersona>[] = [
+  makePersona({ id: "persona-1", name: "Nightly Reviewer" }),
+  makePersona({ id: "persona-2", name: "CI Monitor" }),
+];
+
+const meta: Meta<typeof ScheduleManager> = {
+  title: "Grackle/Schedules/ScheduleManager",
+  tags: ["autodocs"],
+  component: ScheduleManager,
+  args: {
+    schedules: [],
+    personas: MOCK_PERSONAS,
+    onDeleteSchedule: fn().mockResolvedValue(undefined),
+    onToggleEnabled: fn().mockResolvedValue(undefined),
+    onNavigateToNew: fn(),
+    onNavigateToSchedule: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScheduleManager>;
+
+export const Empty: Story = {
+  args: { schedules: [] },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId("schedule-empty-state")).toBeInTheDocument();
+  },
+};
+
+export const WithSchedules: Story = {
+  args: {
+    schedules: [
+      makeSchedule({ id: "s1", title: "Nightly Review", scheduleExpression: "0 21 * * *", personaId: "persona-1", enabled: true, runCount: 42, lastRunAt: new Date(Date.now() - 3600_000).toISOString() }),
+      makeSchedule({ id: "s2", title: "CI Monitor", scheduleExpression: "5m", personaId: "persona-2", enabled: true, runCount: 8, lastRunAt: new Date(Date.now() - 300_000).toISOString() }),
+      makeSchedule({ id: "s3", title: "Stale PR Cleanup", scheduleExpression: "1d", personaId: "persona-1", enabled: false, runCount: 0, lastRunAt: "" }),
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId("schedule-card-s1")).toBeInTheDocument();
+    await expect(canvas.getByTestId("schedule-card-s2")).toBeInTheDocument();
+    await expect(canvas.getByTestId("schedule-card-s3")).toBeInTheDocument();
+    await expect(canvas.getByTestId("schedule-status-badge-s1")).toHaveTextContent("Enabled");
+    await expect(canvas.getByTestId("schedule-status-badge-s3")).toHaveTextContent("Disabled");
+    await expect(canvas.getByTestId("schedule-expression-s2")).toHaveTextContent("5m");
+    await expect(canvas.getByTestId("schedule-run-count-s1")).toHaveTextContent("42");
+  },
+};
+
+export const DeleteConfirmation: Story = {
+  args: {
+    schedules: [makeSchedule({ id: "del-1", title: "Delete Me" })],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("schedule-delete-del-1"));
+    const dialog = document.querySelector('[role="dialog"]');
+    await expect(dialog).toBeInTheDocument();
+  },
+};
+
+export const ToggleEnabled: Story = {
+  args: {
+    schedules: [makeSchedule({ id: "tog-1", title: "Togglable", enabled: true })],
+    onToggleEnabled: fn().mockResolvedValue({}),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByTestId("schedule-toggle-tog-1"));
+    await expect(args.onToggleEnabled).toHaveBeenCalledWith("tog-1", { enabled: false });
+  },
+};