@grackle-ai/web-components 0.107.2

package/eslint.config.cjs

@@ -0,0 +1,5 @@
+const rigConfig = require("@grackle-ai/heft-rig/profiles/web/config/eslint.config.cjs");
+
+module.exports = [
+  ...rigConfig
+];

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@grackle-ai/web-components",
+  "version": "0.107.2",
+  "description": "Presentational React component library for the Grackle web UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nick-pape/grackle.git",
+    "directory": "packages/web-components"
+  },
+  "keywords": [
+    "grackle",
+    "components",
+    "react",
+    "storybook"
+  ],
+  "homepage": "https://github.com/nick-pape/grackle#readme",
+  "bugs": {
+    "url": "https://github.com/nick-pape/grackle/issues"
+  },
+  "engines": {
+    "node": ">=22.0.0 <24.0.0"
+  },
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.5.0",
+    "@dagrejs/dagre": "^2.0.4",
+    "@xyflow/react": "^12.10.0",
+    "motion": "^11.18.0",
+    "d3-drag": "^3.0.0",
+    "d3-force": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-transition": "^3.0.0",
+    "d3-zoom": "^3.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.3",
+    "rehype-prism-plus": "^2.0.0",
+    "remark-gfm": "^4.0.0",
+    "lucide-react": "~0.474.0",
+    "react-router": "^7.0.0",
+    "@grackle-ai/common": "0.107.2"
+  },
+  "devDependencies": {
+    "@rushstack/heft": "1.2.7",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@types/d3-drag": "^3.0.0",
+    "@types/d3-force": "^3.0.0",
+    "@types/d3-selection": "^3.0.0",
+    "@types/d3-transition": "^3.0.0",
+    "@types/d3-zoom": "^3.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "sass": "^1.86.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.1.1",
+    "@testing-library/react": "^16.3.2",
+    "jsdom": "^29.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "storybook": "8.6.18",
+    "@storybook/addon-controls": "8.6.18",
+    "@storybook/addon-docs": "8.6.18",
+    "@storybook/react": "8.6.18",
+    "@storybook/react-vite": "8.6.18",
+    "@storybook/test": "8.6.18",
+    "@storybook/test-runner": "^0.21.0",
+    "concurrently": "^9.1.0",
+    "http-server": "^14.1.1",
+    "wait-on": "^8.0.0",
+    "@grackle-ai/heft-rig": "0.0.1"
+  },
+  "scripts": {
+    "build": "heft build --clean",
+    "clean": "heft clean",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
+    "_phase:build": "heft run --only build -- --clean",
+    "_phase:test": "heft run --only test"
+  }
+}

package/rush-logs/web-components._phase_build.cache.log

@@ -0,0 +1,4 @@
+Build cache hit.
+Cache key: bc1d5bf9201ce71abeaeaddd096deb9b0805d703
+Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
+Successfully restored output from the build cache.

package/rush-logs/web-components._phase_test.cache.log

@@ -0,0 +1,4 @@
+Build cache hit.
+Cache key: 3ae72563f781afd72723475938136f113846603e
+Clearing cached folders: .rush/temp/operation/_phase_test
+Successfully restored output from the build cache.

package/src/components/chat/ChatInput.module.scss

@@ -0,0 +1,81 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// ChatInput — reusable chat form for sending messages to agent sessions
+// =============================================================================
+
+.bar {
+  @include surface-panel;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-top: 1px solid var(--border-subtle);
+
+  @include mobile {
+    flex-wrap: wrap;
+    padding: var(--space-xs) var(--space-sm);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Form controls
+// ---------------------------------------------------------------------------
+
+.input {
+  @include input-field;
+  flex: 1;
+
+  @include mobile {
+    min-width: 0;
+    flex: 1 1 100%;
+  }
+}
+
+.select {
+  @include select-field;
+
+  @include mobile {
+    flex: 1 1 auto;
+    min-width: 80px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Buttons
+// ---------------------------------------------------------------------------
+
+.btnPrimary {
+  @include btn-primary;
+}
+
+.btnDanger {
+  @include btn-danger;
+}
+
+.btnGhost {
+  @include btn-ghost;
+}
+
+// ---------------------------------------------------------------------------
+// Status indicators
+// ---------------------------------------------------------------------------
+
+.badge {
+  background: var(--accent-green-dim);
+  color: var(--accent-green);
+  border-radius: var(--radius-full);
+  padding: 3px var(--space-md);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+.disconnectHint {
+  color: var(--accent-yellow);
+  font-size: 11px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}

package/src/components/chat/ChatInput.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "@storybook/test";
+import { ChatInput } from "./ChatInput.js";
+import type { Environment } from "../../hooks/types.js";
+import { makeEnvironment, makePersona } from "../../test-utils/storybook-helpers.js";
+
+const connectedEnv: Environment = makeEnvironment({ id: "local", displayName: "Local", status: "connected" });
+
+const meta: Meta<typeof ChatInput> = {
+  component: ChatInput,
+  title: "Grackle/Chat/ChatInput",
+  tags: ["autodocs"],
+  args: {
+    personas: [makePersona({ id: "p1", name: "Software Engineer" })],
+    environments: [connectedEnv],
+    onSendInput: fn(),
+    onSpawn: fn(),
+    onStartTask: fn(),
+    onProvisionEnvironment: fn(),
+    onShowToast: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Send mode shows text input and Send button. */
+export const SendMode: Story = {
+  args: {
+    mode: "send",
+    sessionId: "sess-1",
+    environmentId: "local",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText("Type a message...")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Send" })).toBeDisabled();
+  },
+};
+
+/** Spawn mode shows persona selector when showPersonaSelect is true. */
+export const SpawnModeWithPersonaSelect: Story = {
+  args: {
+    mode: "spawn",
+    environmentId: "local",
+    showPersonaSelect: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText("Enter prompt...")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Go" })).toBeDisabled();
+    // Persona selector should be present
+    const select = canvas.getByDisplayValue("(Default)");
+    await expect(select).toBeInTheDocument();
+  },
+};
+
+/** Go button is disabled when no environmentId is provided. */
+export const SpawnModeNoEnv: Story = {
+  args: {
+    mode: "spawn",
+    environmentId: "",
+    showPersonaSelect: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Go" })).toBeDisabled();
+  },
+};
+
+/** Start mode shows text input and Send button. */
+export const StartMode: Story = {
+  args: {
+    mode: "start",
+    taskId: "task-1",
+    environmentId: "local",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText("Type a message...")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Send" })).toBeDisabled();
+  },
+};
+
+/** Send mode renders input and Send button (Stop is in page header, not ChatInput). */
+export const SendModeActive: Story = {
+  args: {
+    mode: "send",
+    sessionId: "sess-1",
+    environmentId: "local",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText("Type a message...")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Send" })).toBeDisabled();
+  },
+};

package/src/components/chat/ChatInput.tsx

@@ -0,0 +1,168 @@
+import { useState, type FormEvent, type JSX } from "react";
+import type { ToastVariant } from "../../context/ToastContext.js";
+import type { Environment, PersonaData } from "../../hooks/types.js";
+import styles from "./ChatInput.module.scss";
+
+// --- Helpers ---
+
+/** Returns true when the environment with the given ID is disconnected or in error. */
+function isEnvDisconnected(environmentId: string | undefined, environments: Environment[]): boolean {
+  if (!environmentId) {
+    return false;
+  }
+  const env = environments.find((e) => e.id === environmentId);
+  return env !== undefined && (env.status === "disconnected" || env.status === "error");
+}
+
+// --- Subcomponents ---
+
+interface DisconnectedBannerProps {
+  environmentId: string;
+  onReconnect: (envId: string) => void;
+}
+
+/** Hint + Reconnect button shown when the task/session environment is unreachable. */
+function DisconnectedBanner({ environmentId, onReconnect }: DisconnectedBannerProps): JSX.Element {
+  return (
+    <>
+      <span className={styles.disconnectHint} data-testid="env-disconnect-hint">
+        Environment unavailable
+      </span>
+      <button
+        type="button"
+        onClick={() => onReconnect(environmentId)}
+        className={styles.btnGhost}
+        data-testid="reconnect-btn"
+        title="Reconnect the environment to resume messaging"
+      >
+        Reconnect
+      </button>
+    </>
+  );
+}
+
+// --- Main component ---
+
+/** Chat input mode determines the action performed on submit. */
+export interface ChatInputProps {
+  /** "send" = sendInput to existing session, "spawn" = create new session, "start" = start a task */
+  mode: "send" | "spawn" | "start";
+  /** Session ID to send input to (mode="send") */
+  sessionId?: string;
+  /** Environment ID (mode="spawn" and "start") */
+  environmentId?: string;
+  /** Task ID to start (mode="start") */
+  taskId?: string;
+  /** Show persona selector dropdown (mode="spawn") */
+  showPersonaSelect?: boolean;
+  /** All personas (for persona selector in spawn mode). */
+  personas: PersonaData[];
+  /** All environments (for disconnect detection). */
+  environments: Environment[];
+  /** Send text input to an existing session. */
+  onSendInput: (sessionId: string, text: string) => void;
+  /** Spawn a new session. */
+  onSpawn: (environmentId: string, prompt: string, personaId?: string) => void;
+  /** Start a task. */
+  onStartTask: (taskId: string, personaId?: string, environmentId?: string, notes?: string) => void;
+  /** Reconnect a disconnected environment. */
+  onProvisionEnvironment: (environmentId: string) => void;
+  /** Display a toast notification. */
+  onShowToast?: (message: string, variant?: ToastVariant) => void;
+}
+
+/** Reusable form component for sending messages to agent sessions. */
+export function ChatInput({
+  mode,
+  sessionId,
+  environmentId,
+  taskId,
+  showPersonaSelect,
+  personas,
+  environments,
+  onSendInput,
+  onSpawn,
+  onStartTask,
+  onProvisionEnvironment,
+  onShowToast,
+}: ChatInputProps): JSX.Element {
+
+  const [text, setText] = useState("");
+  const [spawnPersonaId, setSpawnPersonaId] = useState("");
+
+  const envDisconnected = isEnvDisconnected(environmentId, environments);
+
+  const handleSubmit = (e: FormEvent): void => {
+    e.preventDefault();
+    if (!text.trim()) {
+      return;
+    }
+
+    if (mode === "send") {
+      if (!sessionId || envDisconnected) {
+        return;
+      }
+      onSendInput(sessionId, text);
+      setText("");
+    } else if (mode === "spawn") {
+      if (!environmentId) {
+        return;
+      }
+      onSpawn(environmentId, text, spawnPersonaId);
+      onShowToast?.("Session started", "success");
+      setText("");
+      setSpawnPersonaId("");
+    } else {
+      // mode === "start"
+      if (!taskId) {
+        return;
+      }
+      onStartTask(taskId, undefined, environmentId, text);
+      setText("");
+    }
+  };
+
+  // --- spawn mode ---
+  if (mode === "spawn") {
+    return (
+      <form onSubmit={handleSubmit} className={styles.bar}>
+        <span className={styles.badge}>
+          new chat
+        </span>
+        <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Enter prompt..." autoFocus className={styles.input} aria-label="Enter prompt" />
+        {showPersonaSelect && (
+          <select value={spawnPersonaId} onChange={(e) => setSpawnPersonaId(e.target.value)} className={styles.select} aria-label="Select persona">
+            <option value="">(Default)</option>
+            {personas.map((p) => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+        )}
+        <button type="submit" disabled={!text.trim() || !environmentId} className={styles.btnPrimary}>Go</button>
+      </form>
+    );
+  }
+
+  // --- start mode ---
+  if (mode === "start") {
+    return (
+      <form onSubmit={handleSubmit} className={styles.bar}>
+        <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type a message..." autoFocus className={styles.input} aria-label="Type a message" />
+        <button type="submit" disabled={!text.trim()} className={styles.btnPrimary}>Send</button>
+      </form>
+    );
+  }
+
+  // --- send mode ---
+  return (
+    <form onSubmit={handleSubmit} className={styles.bar}>
+      {envDisconnected && environmentId && (
+        <DisconnectedBanner environmentId={environmentId} onReconnect={onProvisionEnvironment} />
+      )}
+      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type a message..." autoFocus={!envDisconnected} disabled={envDisconnected} className={styles.input} aria-label="Type a message" />
+      <span title={envDisconnected ? "Environment is unavailable — reconnect first" : undefined}>
+        <button type="submit" disabled={!text.trim() || envDisconnected} className={styles.btnPrimary}>Send</button>
+      </span>
+    </form>
+  );
+}

package/src/components/chat/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Chat components for sending messages to agent sessions.
+ * @module chat
+ */
+export { ChatInput } from "./ChatInput.js";
+export type { ChatInputProps } from "./ChatInput.js";

package/src/components/dag/DagView.module.scss

@@ -0,0 +1,149 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// DAG View — React Flow dark theme overrides and task node styles
+// =============================================================================
+
+.dagContainer {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  // React Flow theme overrides
+  --xy-background-color: transparent;
+  --xy-node-border-radius: var(--radius-lg);
+  --xy-edge-stroke: var(--text-tertiary);
+  --xy-minimap-background: var(--bg-inset);
+  --xy-minimap-mask-background: var(--bg-overlay);
+  --xy-controls-button-background-color: var(--bg-elevated);
+  --xy-controls-button-background-color-hover: var(--bg-overlay);
+  --xy-controls-button-color: var(--text-secondary);
+  --xy-controls-button-color-hover: var(--text-primary);
+  --xy-controls-button-border-color: var(--border-subtle);
+  --xy-attribution-background-color: transparent;
+}
+
+.emptyDag {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+}
+
+// =============================================================================
+// Task Node
+// =============================================================================
+
+.taskNode {
+  @include surface-card;
+  width: 220px;
+  min-height: 60px;
+  display: flex;
+  overflow: hidden;
+  cursor: pointer;
+  @include card-hover;
+
+  @include mobile {
+    width: 160px;
+    min-height: 48px;
+  }
+}
+
+.taskNodeBorder {
+  width: 4px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.taskNodeContent {
+  flex: 1;
+  padding: var(--space-sm) var(--space-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.taskNodeHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.taskNodeIcon {
+  font-size: var(--font-size-sm);
+  flex-shrink: 0;
+}
+
+.taskNodeTitle {
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.taskNodeBadges {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.childBadge {
+  @include surface-inset;
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  padding: 1px var(--space-xs);
+}
+
+.depBadge {
+  @include surface-inset;
+  font-size: var(--font-size-xs);
+  color: var(--accent-yellow);
+  padding: 1px var(--space-xs);
+}
+
+// =============================================================================
+// Handles
+// =============================================================================
+
+.handle {
+  width: 6px !important;
+  height: 6px !important;
+  background: var(--text-tertiary) !important;
+  border: 1px solid var(--border-subtle) !important;
+}
+
+// =============================================================================
+// MiniMap node colors (set via nodeColor callback, not CSS)
+// =============================================================================
+
+// ---------------------------------------------------------------------------
+// Empty state CTA
+// ---------------------------------------------------------------------------
+
+.emptyCta {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-xl);
+  text-align: center;
+}
+
+.ctaDescription {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  max-width: 280px;
+  line-height: var(--line-height);
+}
+
+.ctaButton {
+  @include btn-primary;
+  padding: var(--space-sm) var(--space-xl);
+  font-size: var(--font-size-md);
+}