Merge pull request #220 from backbay-labs/feat/swarm-engine

feat: @clawdstrike/swarm-engine — browser-safe swarm orchestration with guard pipeline

Author: bb-connor

apps/workbench/package-lock.json

@@ -4,6 +4,18 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
+    "build:swarm-engine": "npm --prefix ../../packages/swarm-engine run build",
+    "predev": "npm run build:swarm-engine",
+    "prebuild": "npm run build:swarm-engine",
+    "postbuild": "vitest run src/__tests__/observatory-bundle-graph-smoke.test.ts",
+    "prepreview": "npm run build:swarm-engine",
+    "pretauri:dev": "npm run build:swarm-engine",
+    "pretauri:build": "npm run build:swarm-engine",
+    "pretest": "npm run build:swarm-engine",
+    "pretest:e2e": "npm run build:swarm-engine",
+    "pretest:e2e:headed": "npm run build:swarm-engine",
+    "pretest:e2e:ui": "npm run build:swarm-engine",
+    "pretypecheck": "npm run build:swarm-engine",
     "dev": "vite",
     "build": "vite build",
     "tauri:prepare": "bun run scripts/prepare-tauri-build.ts",
@@ -14,9 +26,11 @@
     "test": "vitest --passWithNoTests",
     "typecheck": "NODE_OPTIONS=--max-old-space-size=8192 npm exec tsc -- --noEmit",
     "lint": "eslint src/",
-    "test:e2e": "playwright test",
     "dogfood:live": "bash ../../scripts/workbench-live-dogfood.sh",
-    "dogfood:missions": "bash ../../scripts/workbench-mission-control-dogfood.sh"
+    "dogfood:missions": "bash ../../scripts/workbench-mission-control-dogfood.sh",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
@@ -65,7 +79,8 @@
     "three": "^0.183.2",
     "wawa-vfx": "^1.2.10",
     "yaml": "^2.7.0",
-    "zustand": "^5.0.12"
+    "zustand": "^5.0.12",
+    "@clawdstrike/swarm-engine": "file:../../packages/swarm-engine"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",

apps/workbench/package.json

@@ -1,12 +1,18 @@
 import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: "./e2e",
+  testDir: ".",
+  testMatch: ["e2e/**/*.spec.ts", "tests/e2e/**/*.spec.ts"],
   timeout: 60_000,
+  expect: { timeout: 10_000 },
   retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? "github" : "list",
   use: {
     baseURL: "http://127.0.0.1:1421",
     trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
   },
   webServer: {
     command: "npm run dev -- --host 127.0.0.1 --port 1421",

apps/workbench/playwright.config.ts

@@ -3,11 +3,18 @@ import { join } from "node:path";
 import { describe, expect, it } from "vitest";
 
 const distAssetsDir = join(process.cwd(), "dist/assets");
-const runSmoke = existsSync(distAssetsDir);
+const requiredAssetPrefixes = [
+  "ObservatoryWorldCanvas-",
+  "ObservatoryFlowRuntimeScene-",
+] as const;
+const builtAssets = existsSync(distAssetsDir) ? readdirSync(distAssetsDir) : [];
+const runSmoke = requiredAssetPrefixes.every((prefix) =>
+  builtAssets.some((entry) => entry.startsWith(prefix)),
+);
 const describeIfBuild = runSmoke ? describe : describe.skip;
 
 function findAssetByPrefix(prefix: string) {
-  const assetName = readdirSync(distAssetsDir).find((entry) => entry.startsWith(prefix));
+  const assetName = builtAssets.find((entry) => entry.startsWith(prefix));
   if (!assetName) {
     throw new Error(`Could not find a built asset with prefix "${prefix}" in ${distAssetsDir}`);
   }

apps/workbench/src/__tests__/observatory-bundle-graph-smoke.test.ts

@@ -0,0 +1,122 @@
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { SwarmBoardPage } from "../swarm-board-page";
+
+vi.mock("@xyflow/react", () => {
+  const ReactFlowMock = ({ children }: { children?: React.ReactNode }) => (
+    <div data-testid="react-flow-canvas">{children}</div>
+  );
+
+  return {
+    ReactFlow: ReactFlowMock,
+    ReactFlowProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    MiniMap: () => <div data-testid="react-flow-minimap" />,
+    useReactFlow: () => ({
+      getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+      fitView: vi.fn(),
+      setViewport: vi.fn(),
+      zoomIn: vi.fn(),
+      zoomOut: vi.fn(),
+    }),
+    applyNodeChanges: (_changes: unknown[], nodes: unknown[]) => nodes,
+    applyEdgeChanges: (_changes: unknown[], edges: unknown[]) => edges,
+    MarkerType: { ArrowClosed: "arrowclosed" },
+  };
+});
+
+vi.mock("@/features/swarm/hooks/use-coordinator-board-bridge", () => ({
+  useCoordinatorBoardBridge: vi.fn(),
+}));
+
+vi.mock("@/features/swarm/hooks/use-policy-eval-board-bridge", () => ({
+  usePolicyEvalBoardBridge: vi.fn(),
+}));
+
+vi.mock("@/features/swarm/hooks/use-trust-graph-bridge", () => ({
+  useTrustGraphBridge: vi.fn(),
+}));
+
+vi.mock("@/features/swarm/hooks/use-receipt-flow-bridge", () => ({
+  useReceiptFlowBridge: vi.fn(),
+  receiptEdgeTimestamps: new Map(),
+}));
+
+vi.mock("@/features/swarm/hooks/use-engine-board-bridge", () => ({
+  useEngineBoardBridge: vi.fn(),
+}));
+
+vi.mock("@/features/swarm/coordinator-instance", () => ({
+  getCoordinator: () => ({
+    isConnected: false,
+    outboxSize: 0,
+    joinedSwarmIds: [],
+  }),
+}));
+
+vi.mock("@/features/swarm/stores/swarm-engine-provider", () => ({
+  SwarmEngineProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useOptionalSwarmEngine: () => null,
+}));
+
+vi.mock("../swarm-board-toolbar", () => ({
+  SwarmBoardToolbar: () => <div data-testid="swarm-board-toolbar" />,
+}));
+
+vi.mock("../swarm-board-left-rail", () => ({
+  SwarmBoardLeftRail: () => <div data-testid="swarm-board-left-rail" />,
+}));
+
+vi.mock("../swarm-board-inspector", () => ({
+  SwarmBoardInspector: () => <div data-testid="swarm-board-inspector" />,
+}));
+
+vi.mock("../nodes", () => ({
+  swarmBoardNodeTypes: {},
+}));
+
+vi.mock("../edges", () => ({
+  swarmBoardEdgeTypes: {},
+}));
+
+vi.mock("@/lib/workbench/use-terminal-sessions", () => ({
+  useTerminalSessionsFromBoard: () => ({
+    spawnSession: vi.fn(),
+    killSession: vi.fn(),
+  }),
+}));
+
+vi.mock("@/lib/workbench/terminal-service", () => ({
+  terminalService: {
+    getCwd: vi.fn().mockResolvedValue("/mock/cwd"),
+    create: vi.fn().mockResolvedValue({ id: "mock-session", branch: "main" }),
+    write: vi.fn().mockResolvedValue(undefined),
+    kill: vi.fn().mockResolvedValue(undefined),
+    onExit: vi.fn().mockResolvedValue(() => {}),
+  },
+  worktreeService: {
+    create: vi.fn().mockResolvedValue({ path: "/mock/worktree", branch: "test-branch" }),
+    remove: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
+describe("SwarmBoardPage provider safety", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("renders even when the engine context is unavailable", async () => {
+    await act(async () => {
+      render(
+        <MemoryRouter initialEntries={["/workbench/swarm-board"]}>
+          <SwarmBoardPage />
+        </MemoryRouter>,
+      );
+      await Promise.resolve();
+    });
+
+    expect(screen.getByTestId("swarm-board-toolbar")).toBeInTheDocument();
+    expect(screen.getByTestId("react-flow-canvas")).toBeInTheDocument();
+  });
+});

apps/workbench/src/components/workbench/swarm-board/__tests__/swarm-board-page-provider.test.tsx

@@ -48,7 +48,7 @@ const ACTIVITY_RECENCY_MS = 3000;
 // Edge type visual config — restrained, functional colors
 // ---------------------------------------------------------------------------
 
-type SwarmEdgeType = "handoff" | "spawned" | "artifact" | "receipt";
+type SwarmEdgeType = "handoff" | "spawned" | "artifact" | "receipt" | "topology";
 
 interface EdgeStyleConfig {
   color: string;
@@ -86,6 +86,13 @@ const EDGE_STYLES: Record<SwarmEdgeType, EdgeStyleConfig> = {
     animated: true,
     dotSize: 5,
   },
+  topology: {
+    color: "#3d4250",
+    strokeWidth: 0.75,
+    strokeDasharray: "3 6",
+    animated: false,
+    dotSize: 4,
+  },
 };
 
 const DEFAULT_STYLE: EdgeStyleConfig = {
@@ -118,7 +125,7 @@ export function SwarmEdge({
 
   // Resolve edge type from data or fall back to label heuristic
   const edgeType = (data?.edgeType as SwarmEdgeType) ?? undefined;
-  const config = edgeType ? EDGE_STYLES[edgeType] : DEFAULT_STYLE;
+  const config = (edgeType && EDGE_STYLES[edgeType]) ?? DEFAULT_STYLE;
 
   // Hover-reveal: check if this edge connects to the hovered or selected node
   const hoveredNodeId = data?.hoveredNodeId as string | null | undefined;