@grackle-ai/web-components 0.107.2

package/src/components/workspace/WorkspaceBoard.tsx

@@ -0,0 +1,232 @@
+import { useMemo, type JSX } from "react";
+import type { TaskData, Session, PersonaData, Environment } from "../../hooks/types.js";
+import { buildBoardColumns, type BoardTask } from "../../utils/boardColumns.js";
+import { getStatusStyle } from "../../utils/taskStatus.js";
+import { taskUrl, newTaskUrl, useAppNavigate } from "../../utils/navigation.js";
+import { AnimatePresence, motion } from "motion/react";
+import styles from "./WorkspaceBoard.module.scss";
+
+/** Props for the WorkspaceBoard component. */
+interface WorkspaceBoardProps {
+  workspaceId: string;
+  environmentId: string;
+  /** All tasks — filtered internally by workspaceId. */
+  tasks: TaskData[];
+  /** All sessions (used for metadata lookup). */
+  sessions: Session[];
+  /** All personas (used for metadata lookup). */
+  personas: PersonaData[];
+  /** All environments (used for metadata lookup). */
+  environments: Environment[];
+}
+
+/** Kanban-style board view with fixed columns for each task status. */
+export function WorkspaceBoard({ workspaceId, environmentId, tasks, sessions, personas, environments }: WorkspaceBoardProps): JSX.Element {
+  const navigate = useAppNavigate();
+
+  const workspaceTasks = useMemo(
+    () => tasks.filter((t) => t.workspaceId === workspaceId),
+    [tasks, workspaceId],
+  );
+
+  const taskStatusById = useMemo(
+    () => new Map(tasks.map((t) => [t.id, t.status])),
+    [tasks],
+  );
+
+  const tasksById = useMemo(
+    () => new Map(workspaceTasks.map((t) => [t.id, t])),
+    [workspaceTasks],
+  );
+
+  const boardMetadataByTaskId = useMemo(() => {
+    const sessionById = new Map(sessions.map((s) => [s.id, s]));
+    const personaById = new Map(personas.map((p) => [p.id, p]));
+    const environmentById = new Map(environments.map((e) => [e.id, e]));
+    const sessionStatusByTaskId = new Map<string, string>();
+    const personaNameByTaskId = new Map<string, string>();
+    const environmentNameByTaskId = new Map<string, string>();
+
+    for (const task of workspaceTasks) {
+      if (task.latestSessionId) {
+        const session = sessionById.get(task.latestSessionId);
+        if (session) {
+          sessionStatusByTaskId.set(task.id, session.endReason || session.status);
+
+          if (session.personaId) {
+            const persona = personaById.get(session.personaId);
+            if (persona) {
+              personaNameByTaskId.set(task.id, persona.name);
+            }
+          }
+
+          if (session.environmentId) {
+            const environment = environmentById.get(session.environmentId);
+            if (environment) {
+              environmentNameByTaskId.set(task.id, environment.displayName);
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      sessionStatusByTaskId,
+      personaNameByTaskId,
+      environmentNameByTaskId,
+    };
+  }, [workspaceTasks, sessions, personas, environments]);
+
+  const columns = useMemo(
+    () => buildBoardColumns({
+      tasks: workspaceTasks,
+      taskStatusById,
+      sessionStatusByTaskId: boardMetadataByTaskId.sessionStatusByTaskId,
+    }),
+    [workspaceTasks, taskStatusById, boardMetadataByTaskId],
+  );
+
+  if (workspaceTasks.length === 0) {
+    return (
+      <div className={styles.emptyCta} data-testid="board-empty-cta">
+        <button
+          className={styles.ctaButton}
+          onClick={() => navigate(newTaskUrl(workspaceId, undefined, environmentId))}
+        >
+          Create Task
+        </button>
+        <div className={styles.ctaDescription}>
+          Break your work into tasks and let agents tackle them
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.boardContainer} data-testid="board-container">
+      {columns.map((col) => (
+        <section
+          key={col.status}
+          className={styles.column}
+          data-testid={`board-column-${col.status}`}
+          aria-label={`${col.label}, ${col.tasks.length} ${col.tasks.length === 1 ? "task" : "tasks"}`}
+        >
+          <div className={styles.columnHeader}>
+            <span className={styles.columnIcon} style={{ color: col.style.color }}>
+              {col.style.icon}
+            </span>
+            <span className={styles.columnLabel}>{col.label}</span>
+            <span className={styles.columnCount} data-testid={`board-count-${col.status}`}>
+              {col.tasks.length}
+            </span>
+          </div>
+          <div className={styles.cardList}>
+            {col.tasks.length === 0 ? (
+              <div className={styles.emptyPlaceholder}>No tasks</div>
+            ) : (
+              <AnimatePresence mode="popLayout">
+                {col.tasks.map((bt) => (
+                  <motion.div
+                    key={bt.task.id}
+                    layout
+                    initial={{ opacity: 0, y: 4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -4 }}
+                    transition={{ duration: 0.15 }}
+                  >
+                    <BoardCard
+                      boardTask={bt}
+                      tasksById={tasksById}
+                      personaName={boardMetadataByTaskId.personaNameByTaskId.get(bt.task.id)}
+                      envName={boardMetadataByTaskId.environmentNameByTaskId.get(bt.task.id)}
+                      onClick={() => navigate(taskUrl(bt.task.id, undefined, workspaceId, environmentId))}
+                    />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            )}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BoardCard
+// ---------------------------------------------------------------------------
+
+interface BoardCardProps {
+  boardTask: BoardTask;
+  tasksById: Map<string, TaskData>;
+  personaName?: string;
+  envName?: string;
+  onClick: () => void;
+}
+
+/** Individual card rendered inside a board column. */
+function BoardCard({ boardTask, tasksById, personaName, envName, onClick }: BoardCardProps): JSX.Element {
+  const { task, isBlocked, childCount, doneChildCount, pausedSubBadge } = boardTask;
+  const statusStyle = getStatusStyle(task.status);
+  const parentTask = task.parentTaskId ? tasksById.get(task.parentTaskId) : undefined;
+
+  return (
+    <div
+      className={styles.card}
+      tabIndex={0}
+      role="button"
+      data-testid={`board-card-${task.id}`}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      <div className={styles.cardHeader}>
+        <span className={styles.cardStatusIcon} style={{ color: statusStyle.color }}>
+          {statusStyle.icon}
+        </span>
+        <span className={styles.cardTitle}>{task.title}</span>
+      </div>
+      <div className={styles.cardBadges}>
+        {parentTask && (
+          <span className={`${styles.badge} ${styles.parentBadge}`} title={parentTask.title}>
+            {parentTask.title}
+          </span>
+        )}
+        {childCount > 0 && (
+          <span className={`${styles.badge} ${styles.childBadge}`}>
+            {doneChildCount}/{childCount}
+          </span>
+        )}
+        {isBlocked && (
+          <span className={`${styles.badge} ${styles.blockedBadge}`}>
+            blocked
+          </span>
+        )}
+        {task.dependsOn.length > 0 && !isBlocked && (
+          <span className={`${styles.badge} ${styles.depBadge}`}>
+            dep
+          </span>
+        )}
+        {pausedSubBadge && (
+          <span className={`${styles.badge} ${styles.pausedSubBadge}`}>
+            {pausedSubBadge}
+          </span>
+        )}
+        {personaName && (
+          <span className={`${styles.badge} ${styles.personaBadge}`}>
+            {personaName}
+          </span>
+        )}
+        {envName && (
+          <span className={`${styles.badge} ${styles.envBadge}`}>
+            {envName}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+@use '../../styles/mixins' as *;
+
+.formContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  max-width: 680px;
+
+  @include mobile {
+    max-width: 100%;
+  }
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.label {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.titleInput {
+  @include input-field;
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  padding: var(--space-sm) var(--space-md);
+  width: 100%;
+}
+
+.descriptionTextarea {
+  @include input-field;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  resize: vertical;
+  min-height: 120px;
+  padding: var(--space-sm) var(--space-md);
+  width: 100%;
+  font-family: var(--font-mono);
+  line-height: 1.5;
+}
+
+.selectField {
+  @include input-field;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  padding: var(--space-xs) var(--space-sm);
+  width: 100%;
+  max-width: 320px;
+  cursor: pointer;
+}
+
+.checkboxRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    accent-color: var(--accent-green);
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+}
+
+.checkboxLabel {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.fieldError {
+  font-size: var(--font-size-xs);
+  color: var(--accent-red);
+}

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "@storybook/test";
+import { WorkspaceFormFields, defaultFormValues } from "./WorkspaceFormFields.js";
+import type { Environment, PersonaData } from "../../hooks/types.js";
+import { makeEnvironment, makePersona } from "../../test-utils/storybook-helpers.js";
+
+const envLocal: Environment = makeEnvironment({
+  id: "env-1",
+  displayName: "Local Machine",
+  status: "connected",
+});
+
+const envSSH: Environment = makeEnvironment({
+  id: "env-2",
+  displayName: "Dev Server",
+  adapterType: "ssh",
+  status: "ready",
+});
+
+const personaDefault: PersonaData = makePersona({
+  id: "persona-1",
+  name: "Code Reviewer",
+  description: "Reviews pull requests",
+});
+
+const personaWriter: PersonaData = makePersona({
+  id: "persona-2",
+  name: "Tech Writer",
+  description: "Writes documentation",
+});
+
+const meta: Meta<typeof WorkspaceFormFields> = {
+  component: WorkspaceFormFields,
+  title: "Grackle/Workspace/WorkspaceFormFields",
+  tags: ["autodocs"],
+  args: {
+    values: defaultFormValues(),
+    onChange: fn(),
+    environments: [envLocal, envSSH],
+    personas: [personaDefault, personaWriter],
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Empty form with default values. */
+export const EmptyForm: Story = {
+  play: async ({ canvas }) => {
+    const nameInput = canvas.getByTestId("workspace-form-name");
+    await expect(nameInput).toBeInTheDocument();
+    await expect(nameInput).toHaveValue("");
+
+    const descInput = canvas.getByTestId("workspace-form-description");
+    await expect(descInput).toBeInTheDocument();
+    await expect(descInput).toHaveValue("");
+
+    const repoInput = canvas.getByTestId("workspace-form-repo");
+    await expect(repoInput).toBeInTheDocument();
+    await expect(repoInput).toHaveValue("");
+
+    // Environment select should list environments
+    const envSelect = canvas.getByTestId("workspace-form-environment");
+    await expect(envSelect).toBeInTheDocument();
+
+    // Persona select should be present
+    const personaSelect = canvas.getByTestId("workspace-form-persona");
+    await expect(personaSelect).toBeInTheDocument();
+
+    // Worktree checkbox should be checked by default
+    const worktreeCheckbox = canvas.getByTestId("workspace-form-worktrees");
+    await expect(worktreeCheckbox).toBeChecked();
+  },
+};
+
+/** Form displaying validation errors. */
+export const WithErrors: Story = {
+  args: {
+    values: defaultFormValues(),
+    errors: {
+      name: "Name is required",
+      environmentId: "Environment is required",
+      repoUrl: "Invalid URL",
+    },
+  },
+  play: async ({ canvas }) => {
+    const nameError = canvas.getByTestId("workspace-form-error-name");
+    await expect(nameError).toBeInTheDocument();
+    await expect(nameError).toHaveTextContent("Name is required");
+
+    const envError = canvas.getByTestId("workspace-form-error-environmentId");
+    await expect(envError).toBeInTheDocument();
+    await expect(envError).toHaveTextContent("Environment is required");
+
+    const repoError = canvas.getByTestId("workspace-form-error-repoUrl");
+    await expect(repoError).toBeInTheDocument();
+    await expect(repoError).toHaveTextContent("Invalid URL");
+  },
+};
+
+/** Disabled form prevents all interactions. */
+export const Disabled: Story = {
+  args: {
+    values: {
+      ...defaultFormValues(),
+      name: "My Workspace",
+      environmentId: "env-1",
+    },
+    disabled: true,
+  },
+  play: async ({ canvas }) => {
+    const nameInput = canvas.getByTestId("workspace-form-name");
+    await expect(nameInput).toBeDisabled();
+    await expect(nameInput).toHaveValue("My Workspace");
+
+    const descInput = canvas.getByTestId("workspace-form-description");
+    await expect(descInput).toBeDisabled();
+
+    const repoInput = canvas.getByTestId("workspace-form-repo");
+    await expect(repoInput).toBeDisabled();
+
+    const envSelect = canvas.getByTestId("workspace-form-environment");
+    await expect(envSelect).toBeDisabled();
+
+    const personaSelect = canvas.getByTestId("workspace-form-persona");
+    await expect(personaSelect).toBeDisabled();
+
+    const worktreeCheckbox = canvas.getByTestId("workspace-form-worktrees");
+    await expect(worktreeCheckbox).toBeDisabled();
+
+    const workdirInput = canvas.getByTestId("workspace-form-workdir");
+    await expect(workdirInput).toBeDisabled();
+  },
+};

package/src/components/workspace/WorkspaceFormFields.tsx

@@ -0,0 +1,185 @@
+/**
+ * Shared workspace form fields used by both the create page and the inline-edit
+ * detail page. Each field renders its own label + input/control.
+ *
+ * @module
+ */
+
+import { type JSX } from "react";
+import type { Workspace, Environment, PersonaData } from "../../hooks/types.js";
+import styles from "./WorkspaceFormFields.module.scss";
+
+/** Fields managed by the workspace form. */
+export interface WorkspaceFormValues {
+  name: string;
+  description: string;
+  repoUrl: string;
+  environmentId: string;
+  defaultPersonaId: string;
+  useWorktrees: boolean;
+  workingDirectory: string;
+}
+
+/** Build a blank set of defaults, optionally seeded from a workspace. */
+export function defaultFormValues(ws?: Workspace, environmentId?: string): WorkspaceFormValues {
+  return {
+    name: ws?.name ?? "",
+    description: ws?.description ?? "",
+    repoUrl: ws?.repoUrl ?? "",
+    environmentId: ws?.linkedEnvironmentIds[0] ?? environmentId ?? "",
+    defaultPersonaId: ws?.defaultPersonaId ?? "",
+    useWorktrees: ws?.useWorktrees ?? true,
+    workingDirectory: ws?.workingDirectory ?? "",
+  };
+}
+
+/** Props for {@link WorkspaceFormFields}. */
+interface WorkspaceFormFieldsProps {
+  values: WorkspaceFormValues;
+  onChange: (values: WorkspaceFormValues) => void;
+  environments: Environment[];
+  personas: PersonaData[];
+  /** Validation errors keyed by field name. */
+  errors?: Partial<Record<keyof WorkspaceFormValues, string>>;
+  /** Whether the form is in a submitting state. */
+  disabled?: boolean;
+  /** Whether the name field should receive autofocus on mount. */
+  autoFocusName?: boolean;
+}
+
+const MAX_NAME_LENGTH: number = 100;
+
+/** Shared form fields for workspace create/edit. */
+export function WorkspaceFormFields({
+  values,
+  onChange,
+  environments,
+  personas,
+  errors,
+  disabled,
+  autoFocusName,
+}: WorkspaceFormFieldsProps): JSX.Element {
+  const set = <K extends keyof WorkspaceFormValues>(key: K, val: WorkspaceFormValues[K]): void => {
+    onChange({ ...values, [key]: val });
+  };
+
+  return (
+    <div className={styles.formContent}>
+      {/* Name */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-name">Name</label>
+        <input
+          id="ws-name"
+          className={styles.titleInput}
+          type="text"
+          value={values.name}
+          onChange={(e) => set("name", e.target.value)}
+          placeholder="Workspace name"
+          maxLength={MAX_NAME_LENGTH}
+          autoFocus={autoFocusName}
+          disabled={disabled}
+          data-testid="workspace-form-name"
+        />
+        {errors?.name && <span className={styles.fieldError} data-testid="workspace-form-error-name">{errors.name}</span>}
+      </div>
+
+      {/* Description */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-description">Description</label>
+        <textarea
+          id="ws-description"
+          className={styles.descriptionTextarea}
+          value={values.description}
+          onChange={(e) => set("description", e.target.value)}
+          placeholder="Optional description (Markdown supported)"
+          disabled={disabled}
+          data-testid="workspace-form-description"
+        />
+      </div>
+
+      {/* Repository URL */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-repo">Repository URL</label>
+        <input
+          id="ws-repo"
+          className={styles.titleInput}
+          type="text"
+          value={values.repoUrl}
+          onChange={(e) => set("repoUrl", e.target.value)}
+          placeholder="https://github.com/org/repo"
+          disabled={disabled}
+          data-testid="workspace-form-repo"
+        />
+        {errors?.repoUrl && <span className={styles.fieldError} data-testid="workspace-form-error-repoUrl">{errors.repoUrl}</span>}
+      </div>
+
+      {/* Environment */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-environment">Environment</label>
+        <select
+          id="ws-environment"
+          className={styles.selectField}
+          value={values.environmentId}
+          onChange={(e) => set("environmentId", e.target.value)}
+          disabled={disabled}
+          data-testid="workspace-form-environment"
+        >
+          <option value="">Select environment…</option>
+          {environments.map((env) => (
+            <option key={env.id} value={env.id}>
+              {env.displayName || env.id}
+            </option>
+          ))}
+        </select>
+        {errors?.environmentId && <span className={styles.fieldError} data-testid="workspace-form-error-environmentId">{errors.environmentId}</span>}
+      </div>
+
+      {/* Default Persona */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-persona">Default Persona</label>
+        <select
+          id="ws-persona"
+          className={styles.selectField}
+          value={values.defaultPersonaId}
+          onChange={(e) => set("defaultPersonaId", e.target.value)}
+          disabled={disabled}
+          data-testid="workspace-form-persona"
+        >
+          <option value="">(Inherit)</option>
+          {personas.map((p) => (
+            <option key={p.id} value={p.id}>{p.name}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Worktree isolation */}
+      <div className={styles.section}>
+        <label className={styles.checkboxRow}>
+          <input
+            type="checkbox"
+            checked={values.useWorktrees}
+            onChange={(e) => set("useWorktrees", e.target.checked)}
+            disabled={disabled}
+            data-testid="workspace-form-worktrees"
+          />
+          <span className={styles.checkboxLabel}>Enable worktree isolation</span>
+        </label>
+      </div>
+
+      {/* Working directory */}
+      <div className={styles.section}>
+        <label className={styles.label} htmlFor="ws-workdir">Working Directory</label>
+        <input
+          id="ws-workdir"
+          className={styles.titleInput}
+          type="text"
+          value={values.workingDirectory}
+          onChange={(e) => set("workingDirectory", e.target.value)}
+          placeholder="Default (server default)"
+          disabled={disabled}
+          data-testid="workspace-form-workdir"
+        />
+      </div>
+    </div>
+  );
+}

package/src/context/GrackleContext.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared GrackleContext definition used by both the real GrackleProvider (in @grackle-ai/web)
+ * and MockGrackleProvider (in this package). Only the raw context + consumer hook live here;
+ * the actual provider with gRPC wiring lives in @grackle-ai/web.
+ *
+ * @module
+ */
+
+import React, { createContext, useContext } from "react";
+import type { UseGrackleSocketResult } from "./GrackleContextTypes.js";
+
+/** Re-export the socket result type so consumers can reference it. */
+export type { UseGrackleSocketResult };
+
+/** Alias for the context value type. */
+export type GrackleContextType = UseGrackleSocketResult;
+
+/** The raw React context for Grackle state. */
+export const GrackleContext: React.Context<GrackleContextType | undefined> = createContext<GrackleContextType | undefined>(undefined);
+
+/** Consumes the Grackle context; must be called within a GrackleProvider or MockGrackleProvider. */
+export function useGrackle(): GrackleContextType {
+  const ctx = useContext(GrackleContext);
+  if (!ctx) {
+    throw new Error("useGrackle must be used within GrackleProvider");
+  }
+  return ctx;
+}