feat(portal): allow PORTAL_APEX_HOSTS env to extend APEX_HOSTS

Hardcoded apex list is fine while breakpilot.com is the only target
but blocks deploying the portal under any other hostname. Adds a
comma-separated PORTAL_APEX_HOSTS env that prepends extras to the
default list (longest-first so the suffix-strip loop stays correct).

Needed today to deploy at portal-dev.meghsakha.com without forking
the codebase per environment. The default list still covers dev
(localhost) and prod (breakpilot.com, stage.breakpilot.com).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

eslint.config.mjs

@@ -6,7 +6,14 @@ const config = [
   ...nextWebVitals,
   ...nextTypescript,
   {
-    ignores: [".next/**", "node_modules/**", "coverage/**", "next-env.d.ts"],
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "coverage/**",
+      "next-env.d.ts",
+      // Auto-generated by `msw init` — patched on every MSW upgrade.
+      "public/mockServiceWorker.js",
+    ],
   },
 ];
 

package.json

@@ -43,5 +43,10 @@
     "tailwindcss": "^4.3.0",
     "typescript": "5.7.2",
     "vitest": "2.1.8"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

public/mockServiceWorker.js

@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.14.6'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

src/app/[slug]/layout.tsx

@@ -6,6 +6,10 @@ import { Lifeline } from "@/components/portal/Lifeline";
 import { NavRail } from "@/components/portal/NavRail";
 import { Topbar } from "@/components/portal/Topbar";
 import { ArchivedLockout } from "@/components/portal/ArchivedLockout";
+import { MockWorker } from "@/components/portal/MockWorker";
+import { ToastHost } from "@/components/portal/ToastHost";
+
+const MOCK_API = !!process.env.BP_DEV_FIXTURE;
 
 export default async function TenantLayout({
   children,
@@ -50,6 +54,17 @@ export default async function TenantLayout({
 
   return (
     <div className="app">
+      {MOCK_API ? (
+        <>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `window.__BP_MOCK_API__=true;window.__BP_TENANT_STATUS__=${JSON.stringify(tenant.status)};`,
+            }}
+          />
+          <MockWorker />
+        </>
+      ) : null}
+      <ToastHost />
       <Lifeline
         tenant={{
           status: tenant.status,

src/app/[slug]/settings/users/page.tsx

@@ -3,6 +3,7 @@ import { getPortalSession } from "@/lib/get-session";
 import { loadTenantForShell } from "@/lib/portal-data";
 import { Panel } from "@/components/portal/Panel";
 import { NotAllowed } from "@/components/portal/NotAllowed";
+import { InviteButton } from "@/components/portal/InviteButton";
 
 export default async function TeamPage({
   params,
@@ -28,7 +29,7 @@ export default async function TeamPage({
         </div>
         <div className="ph-actions">
           <button type="button" className="btn">Export</button>
-          <button type="button" className="btn btn-accent">Invite member</button>
+          <InviteButton tenantStatus={t.status} />
         </div>
       </div>
 

src/app/[slug]/workflows/layout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+// Workflows is full-bleed — the editor (palette + canvas + inspector)
+// takes the entire content area, so we strip the standard `.content-inner`
+// max-width wrapper and pin a block container that `.flow` (display:flex,
+// height:100%) fills naturally.
+//
+// Don't make this wrapper `display: flex` — the child `.flow` would then
+// be a non-flex flex-item that shrinks to its fixed-width palette +
+// inspector and leaves the canvas at width 0.
+export default function WorkflowsLayout({ children }: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/app/[slug]/workflows/page.tsx

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+import { getPortalSession } from "@/lib/get-session";
+import { hasOrgRole } from "@/lib/session";
+import { loadTenantForShell } from "@/lib/portal-data";
+import { NotAllowed } from "@/components/portal/NotAllowed";
+import { WorkflowEditor } from "@/components/portal/workflows/WorkflowEditor";
+
+export default async function WorkflowsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const session = await getPortalSession();
+
+  if (!session) redirect(`/${slug}/dashboard`);
+  if (!hasOrgRole(session, "IT_ADMIN")) {
+    return <NotAllowed need="IT_ADMIN" />;
+  }
+
+  const t = await loadTenantForShell(slug);
+  if (!t) return null;
+
+  return <WorkflowEditor frozen={t.status === "frozen"} />;
+}

src/components/portal/InviteButton.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, X } from "lucide-react";
+import { toast } from "./ToastHost";
+import type { OrgRole } from "@/lib/session";
+
+const ROLES: OrgRole[] = ["IT_ADMIN", "CXO", "FINANCE", "LEGAL", "USER"];
+
+// Live write affordance on the Team page — proves the MSW pipeline end
+// to end. Posts to /api/team/invites; MSW intercepts and returns 201 (or
+// 402 when the tenant is frozen, via the X-BP-Tenant-Status hint header).
+export function InviteButton({ tenantStatus }: { tenantStatus: string }) {
+  const [open, setOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<OrgRole>("USER");
+  const [busy, setBusy] = useState(false);
+
+  const close = () => {
+    if (busy) return;
+    setOpen(false);
+    setEmail("");
+    setRole("USER");
+  };
+
+  const submit = async () => {
+    if (!email.includes("@")) return;
+    setBusy(true);
+    try {
+      const res = await fetch("/api/team/invites", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          "x-bp-tenant-status": tenantStatus,
+        },
+        body: JSON.stringify({ email, role }),
+      });
+      const code = res.headers.get("x-bp-status-code") ?? `${res.status}`;
+      if (res.status === 201) {
+        toast({ msg: `Invitation sent to ${email}`, code });
+        close();
+      } else if (res.status === 402) {
+        toast({
+          msg: "Tenant is read-only — invitation blocked",
+          code: "402 · payment required",
+        });
+      } else if (res.status === 410) {
+        toast({ msg: "Tenant archived — invites unavailable", code: "410 · gone" });
+      } else {
+        toast({ msg: `Invite failed`, code });
+      }
+    } catch (e) {
+      toast({
+        msg: "Invite failed — network error",
+        code: e instanceof Error ? e.message : "unknown",
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn btn-sm btn-accent"
+        onClick={() => setOpen(true)}
+      >
+        <Plus size={13} /> Invite member
+      </button>
+      {open ? (
+        <div
+          className="scrim center"
+          onMouseDown={close}
+          role="dialog"
+          aria-modal
+        >
+          <div
+            className="modal"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <div className="modal-head">
+              <span className="brand-mark" style={{ width: 22, height: 22, fontSize: 11 }}>
+                B
+              </span>
+              <span className="modal-title">Invite a teammate</span>
+              <span className="spacer" />
+              <button
+                type="button"
+                className="btn btn-sm btn-ghost"
+                onClick={close}
+                aria-label="Close"
+              >
+                <X size={13} />
+              </button>
+            </div>
+            <div className="modal-body">
+              <div className="field" style={{ marginBottom: 14 }}>
+                <label>Work email</label>
+                <input
+                  autoFocus
+                  className="input mono"
+                  placeholder="name@company.eu"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div className="field">
+                <label>Role</label>
+                <div className="row wrap" style={{ gap: 6 }}>
+                  {ROLES.map((r) => (
+                    <button
+                      key={r}
+                      type="button"
+                      className={"btn btn-sm" + (role === r ? " btn-primary" : "")}
+                      onClick={() => setRole(r)}
+                    >
+                      {r}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div
+                className="muted"
+                style={{ fontSize: 11.5, marginTop: 14, lineHeight: 1.5 }}
+              >
+                An OIDC invitation will be issued via Keycloak. The user joins
+                on first SSO sign-in.{" "}
+                <span className="mono">POST /api/team/invites</span>
+              </div>
+            </div>
+            <div className="modal-foot">
+              <button type="button" className="btn btn-ghost" onClick={close} disabled={busy}>
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="btn btn-accent"
+                disabled={busy || !email.includes("@")}
+                onClick={submit}
+              >
+                {busy ? "Sending…" : "Send invitation"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

src/components/portal/MockWorker.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Boots the MSW service worker on the client when dev-fixture mode is on.
+// Reads the marker that `[slug]/layout` injects (window.__BP_MOCK_API__).
+// Idempotent — calling start() twice is safe because msw bails out on the
+// second invocation.
+
+declare global {
+  interface Window {
+    __BP_MOCK_API__?: boolean;
+    __BP_TENANT_STATUS__?: string;
+  }
+}
+
+export function MockWorker() {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!window.__BP_MOCK_API__) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const { worker } = await import("@/mocks/browser");
+        if (cancelled) return;
+        await worker.start({
+          onUnhandledRequest: "bypass",
+          quiet: true,
+        });
+      } catch (e) {
+        console.error("[mock-worker] failed to start:", e);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return null;
+}

src/components/portal/ThemeToggle.tsx

@@ -1,24 +1,36 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { Sun, Moon } from "lucide-react";
 
 type Theme = "light" | "dark";
 
-function readTheme(): Theme {
+function getThemeFromDom(): Theme {
-  if (typeof document === "undefined") return "light";
   const attr = document.documentElement.getAttribute("data-theme");
   return attr === "dark" ? "dark" : "light";
 }
 
-export function ThemeToggle() {
+// SSR snapshot — must be a stable reference per React's docs. The root
-  const [theme, setTheme] = useState<Theme>("light");
+// layout always renders `data-theme="light"` on the server, then a head
-  const [mounted, setMounted] = useState(false);
+// script overrides to the user's preference before hydration. `<html>`
+// has `suppressHydrationWarning` so the mismatch is intentional.
+function getServerSnapshot(): Theme {
+  return "light";
+}
 
-  useEffect(() => {
+function subscribe(onChange: () => void): () => void {
-    setTheme(readTheme());
+  const target = document.documentElement;
-    setMounted(true);
+  const observer = new MutationObserver(onChange);
-  }, []);
+  observer.observe(target, { attributes: true, attributeFilter: ["data-theme"] });
+  return () => observer.disconnect();
+}
+
+export function ThemeToggle() {
+  // useSyncExternalStore is the idiomatic way to read DOM-driven state
+  // into a React component without tripping the "no setState in effect"
+  // rule. The MutationObserver in `subscribe` keeps us in sync when any
+  // other code path (e.g. system preference handler) flips the attribute.
+  const theme = useSyncExternalStore(subscribe, getThemeFromDom, getServerSnapshot);
 
   function toggle() {
     const next: Theme = theme === "dark" ? "light" : "dark";
@@ -28,7 +40,6 @@ export function ThemeToggle() {
     } catch {
       /* no-op */
     }
-    setTheme(next);
   }
 
   return (
@@ -37,9 +48,9 @@ export function ThemeToggle() {
       className="theme-toggle"
       onClick={toggle}
       aria-label="Toggle theme"
-      title={mounted ? `Switch to ${theme === "dark" ? "light" : "dark"} theme` : "Toggle theme"}
+      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
     >
-      {mounted && theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
+      {theme === "dark" ? <Sun size={15} /> : <Moon size={15} />}
     </button>
   );
 }

src/components/portal/ToastHost.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export type ToastEvent = {
+  msg: string;
+  code?: string;
+  /** Override default 3.4s auto-dismiss. */
+  ttlMs?: number;
+};
+
+type ToastItem = ToastEvent & { id: number };
+
+const CHANNEL = "bp.toast";
+
+/**
+ * Emit a toast from anywhere on the client:
+ *   import { toast } from "@/components/portal/ToastHost";
+ *   toast({ msg: "Invitation sent", code: "201 · invite.created" });
+ *
+ * Falls back gracefully if `ToastHost` isn't mounted (e.g. on the auth
+ * picker) — the event simply has no listener.
+ */
+export function toast(t: ToastEvent) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(CHANNEL, { detail: t }));
+}
+
+// Bottom-right toast queue. One instance, mounted in `[slug]/layout`.
+export function ToastHost() {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<ToastEvent>).detail;
+      if (!detail) return;
+      const id = Date.now() + Math.floor(Math.random() * 10_000);
+      setItems((xs) => [...xs, { ...detail, id }]);
+      window.setTimeout(
+        () => setItems((xs) => xs.filter((x) => x.id !== id)),
+        detail.ttlMs ?? 3400,
+      );
+    };
+    window.addEventListener(CHANNEL, handler as EventListener);
+    return () => window.removeEventListener(CHANNEL, handler as EventListener);
+  }, []);
+
+  return (
+    <div className="toasts" aria-live="polite">
+      {items.map((t) => (
+        <div key={t.id} className="toast" role="status">
+          <div className="col" style={{ gap: 2 }}>
+            <span>{t.msg}</span>
+            {t.code ? <span className="t-code">{t.code}</span> : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/portal/workflows/WorkflowEditor.tsx

@@ -0,0 +1,825 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Maximize2,
+  Minus,
+  Play,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from "lucide-react";
+import {
+  defConfig,
+  FLOW_CATS,
+  FLOW_MODULES,
+  KIND_COLOR,
+  NODE_W,
+  modsByCat,
+  nodeH,
+  portX,
+  portY,
+  seedFlow,
+  wirePath,
+  type FlowEdge,
+  type FlowKind,
+  type FlowNode,
+  type FlowSetting,
+} from "@/lib/flow-modules";
+
+type Selection =
+  | { type: "node"; id: string }
+  | { type: "edge"; id: string }
+  | null;
+
+type DragState =
+  | { mode: "pan"; sx: number; sy: number; px: number; py: number }
+  | { mode: "move"; id: string; ox: number; oy: number }
+  | { mode: "wire"; from: [string, number] }
+  | { mode: "new"; mod: string }
+  | null;
+
+type PendingWire = {
+  from: [string, number];
+  x0: number;
+  y0: number;
+  x: number;
+  y: number;
+};
+
+type Ghost = { x: number; y: number; mod: string };
+
+type Toast = { id: number; msg: string; code?: string };
+
+const SEED = seedFlow();
+
+export function WorkflowEditor({ frozen }: { frozen: boolean }) {
+  const [nodes, setNodes] = useState<FlowNode[]>(SEED.nodes);
+  const [edges, setEdges] = useState<FlowEdge[]>(SEED.edges);
+  const [sel, setSel] = useState<Selection>({ type: "node", id: "n2" });
+  const [pan, setPan] = useState({ x: 22, y: 54 });
+  const [zoom, setZoom] = useState(0.78);
+  const [pending, setPending] = useState<PendingWire | null>(null);
+  const [ghost, setGhost] = useState<Ghost | null>(null);
+  const [active, setActive] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+  const [name, setName] = useState("Findings → evidence + notify");
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<DragState>(null);
+  // Latest pan/zoom mirrored into a ref so the global mousemove handler
+  // (registered once in the effect below) can read the current viewport
+  // without re-subscribing on every change. The mirror is updated in an
+  // effect rather than during render to satisfy React's "no ref access
+  // during render" rule.
+  const stateRef = useRef({ pan, zoom });
+  useEffect(() => {
+    stateRef.current = { pan, zoom };
+  }, [pan, zoom]);
+
+  const toWorld = useCallback((cx: number, cy: number) => {
+    const wrap = wrapRef.current;
+    if (!wrap) return { x: 0, y: 0 };
+    const r = wrap.getBoundingClientRect();
+    const { pan, zoom } = stateRef.current;
+    return { x: (cx - r.left - pan.x) / zoom, y: (cy - r.top - pan.y) / zoom };
+  }, []);
+
+  const toast = useCallback((msg: string, code?: string) => {
+    const id = Date.now() + Math.floor(Math.random() * 1000);
+    setToasts((ts) => [...ts, { id, msg, code }]);
+    window.setTimeout(() => {
+      setToasts((ts) => ts.filter((t) => t.id !== id));
+    }, 3400);
+  }, []);
+
+  // Global mouse handlers for drag-pan, node-move, wire-draw, palette-ghost.
+  useEffect(() => {
+    const move = (e: MouseEvent) => {
+      const d = dragRef.current;
+      if (!d) return;
+      if (d.mode === "pan") {
+        setPan({ x: d.px + (e.clientX - d.sx), y: d.py + (e.clientY - d.sy) });
+      } else if (d.mode === "move") {
+        const w = toWorld(e.clientX, e.clientY);
+        setNodes((ns) =>
+          ns.map((n) =>
+            n.id === d.id
+              ? { ...n, x: Math.round(w.x - d.ox), y: Math.round(w.y - d.oy) }
+              : n,
+          ),
+        );
+      } else if (d.mode === "wire") {
+        const w = toWorld(e.clientX, e.clientY);
+        setPending((p) => (p ? { ...p, x: w.x, y: w.y } : p));
+      } else if (d.mode === "new") {
+        setGhost({ x: e.clientX, y: e.clientY, mod: d.mod });
+      }
+    };
+    const up = (e: MouseEvent) => {
+      const d = dragRef.current;
+      if (d && d.mode === "new") {
+        const wrap = wrapRef.current;
+        if (wrap) {
+          const r = wrap.getBoundingClientRect();
+          if (
+            e.clientX > r.left &&
+            e.clientX < r.right &&
+            e.clientY > r.top &&
+            e.clientY < r.bottom
+          ) {
+            const w = toWorld(e.clientX, e.clientY);
+            const id = "n" + Date.now().toString(36);
+            const mod = d.mod;
+            setNodes((ns) => [
+              ...ns,
+              {
+                id,
+                mod,
+                x: Math.round(w.x - NODE_W / 2),
+                y: Math.round(w.y - 28),
+                config: defConfig(mod),
+              },
+            ]);
+            setSel({ type: "node", id });
+          }
+        }
+        setGhost(null);
+      }
+      if (d && d.mode === "wire") setPending(null);
+      dragRef.current = null;
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+    return () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+  }, [toWorld]);
+
+  const deleteSel = useCallback(() => {
+    setSel((s) => {
+      if (!s) return s;
+      if (s.type === "node") {
+        setNodes((ns) => ns.filter((n) => n.id !== s.id));
+        setEdges((es) => es.filter((e) => e.from[0] !== s.id && e.to[0] !== s.id));
+      } else {
+        setEdges((es) => es.filter((e) => e.id !== s.id));
+      }
+      return null;
+    });
+  }, []);
+
+  // Delete/Backspace removes the current selection (unless an input has
+  // focus — we don't want to nuke nodes while someone's typing).
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => {
+      const tag = (document.activeElement as HTMLElement | null)?.tagName;
+      if (
+        (e.key === "Delete" || e.key === "Backspace") &&
+        sel &&
+        tag !== "INPUT" &&
+        tag !== "TEXTAREA" &&
+        tag !== "SELECT"
+      ) {
+        e.preventDefault();
+        deleteSel();
+      }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [sel, deleteSel]);
+
+  const startWire = (e: React.MouseEvent, nodeId: string, outIdx: number) => {
+    e.stopPropagation();
+    const node = nodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    const ox = portX(node, "out");
+    const oy = portY(node, "out")[outIdx];
+    dragRef.current = { mode: "wire", from: [nodeId, outIdx] };
+    setPending({ from: [nodeId, outIdx], x0: ox, y0: oy, x: ox, y: oy });
+  };
+
+  const endWire = (e: React.MouseEvent, nodeId: string, inIdx: number) => {
+    e.stopPropagation();
+    const d = dragRef.current;
+    if (d && d.mode === "wire") {
+      const from = d.from;
+      if (from[0] !== nodeId) {
+        setEdges((es) => [
+          ...es.filter((ed) => !(ed.to[0] === nodeId && ed.to[1] === inIdx)),
+          { id: "e" + Date.now().toString(36), from, to: [nodeId, inIdx] },
+        ]);
+      }
+      setPending(null);
+      dragRef.current = null;
+    }
+  };
+
+  const testRun = () => {
+    if (frozen) {
+      toast("Tenant frozen — re-activate to run", "402 → reactivation.requested");
+      return;
+    }
+    setRunning(true);
+    const incoming: Record<string, number> = {};
+    edges.forEach((e) => {
+      incoming[e.to[0]] = (incoming[e.to[0]] || 0) + 1;
+    });
+    const order: string[] = [];
+    const seen = new Set<string>();
+    let frontier = nodes.filter((n) => !incoming[n.id]).map((n) => n.id);
+    while (frontier.length) {
+      const next: string[] = [];
+      frontier.forEach((id) => {
+        if (!seen.has(id)) {
+          seen.add(id);
+          order.push(id);
+          edges.filter((e) => e.from[0] === id).forEach((e) => next.push(e.to[0]));
+        }
+      });
+      frontier = next;
+    }
+    nodes.forEach((n) => {
+      if (!seen.has(n.id)) order.push(n.id);
+    });
+    order.forEach((id, i) => window.setTimeout(() => setActive(id), i * 420));
+    window.setTimeout(
+      () => {
+        setRunning(false);
+        setActive(null);
+        toast(
+          `Test run complete · ${nodes.length} nodes · 0 errors`,
+          "workflow.tested",
+        );
+      },
+      order.length * 420 + 700,
+    );
+  };
+
+  const selNode = sel?.type === "node" ? nodes.find((n) => n.id === sel.id) ?? null : null;
+  const selMod = selNode ? FLOW_MODULES[selNode.mod] : null;
+
+  const updateConfig = (k: string, v: string | number | boolean) => {
+    if (!selNode) return;
+    setNodes((ns) =>
+      ns.map((n) =>
+        n.id === selNode.id ? { ...n, config: { ...n.config, [k]: v } } : n,
+      ),
+    );
+  };
+
+  const grid: CSSProperties = useMemo(
+    () => ({
+      backgroundPosition: `${pan.x}px ${pan.y}px`,
+      backgroundSize: `${22 * zoom}px ${22 * zoom}px`,
+    }),
+    [pan.x, pan.y, zoom],
+  );
+
+  return (
+    <div className="flow">
+      {/* ---- palette ---- */}
+      <aside className="flow-palette">
+        <div className="flow-pal-head">
+          <span className="eyebrow">MODULE LIBRARY</span>
+          <span className="muted mono" style={{ fontSize: 9.5 }}>
+            drag onto canvas
+          </span>
+        </div>
+        <div className="flow-pal-body">
+          {FLOW_CATS.map((cat) => {
+            const open = !collapsed[cat.id];
+            const items = modsByCat(cat.id);
+            return (
+              <div className="ptree-group" key={cat.id}>
+                <div
+                  className="ptree-title"
+                  onClick={() =>
+                    setCollapsed((c) => ({ ...c, [cat.id]: !c[cat.id] }))
+                  }
+                >
+                  {open ? (
+                    <ChevronDown size={12} style={{ color: "var(--ink-3)" }} />
+                  ) : (
+                    <ChevronRight size={12} style={{ color: "var(--ink-3)" }} />
+                  )}
+                  <span
+                    className="dot"
+                    style={{ background: KIND_COLOR[cat.kind] }}
+                  />
+                  <span>{cat.label}</span>
+                  <span className="ptree-count">{items.length}</span>
+                </div>
+                {open
+                  ? items.map((m) => (
+                      <div
+                        className="pitem"
+                        key={m.id}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          dragRef.current = { mode: "new", mod: m.id };
+                          setGhost({
+                            x: e.clientX,
+                            y: e.clientY,
+                            mod: m.id,
+                          });
+                        }}
+                      >
+                        <span
+                          className="pitem-mono"
+                          style={{ color: KIND_COLOR[m.kind as FlowKind] }}
+                        >
+                          {m.mono}
+                        </span>
+                        <span className="pitem-name">{m.name}</span>
+                      </div>
+                    ))
+                  : null}
+              </div>
+            );
+          })}
+        </div>
+      </aside>
+
+      {/* ---- canvas ---- */}
+      <div
+        className="flow-canvas-wrap"
+        ref={wrapRef}
+        onMouseDown={(e) => {
+          const t = e.target as HTMLElement;
+          if (
+            t === e.currentTarget ||
+            t.classList.contains("flow-grid") ||
+            t.classList.contains("flow-layer") ||
+            t.tagName.toLowerCase() === "svg"
+          ) {
+            setSel(null);
+            dragRef.current = {
+              mode: "pan",
+              sx: e.clientX,
+              sy: e.clientY,
+              px: pan.x,
+              py: pan.y,
+            };
+          }
+        }}
+      >
+        <div className="flow-grid" style={grid} />
+
+        {/* toolbar */}
+        <div className="flow-toolbar">
+          <div className="ft-name">
+            <span
+              className="dot"
+              style={{ background: running ? "var(--accent)" : "var(--ok)" }}
+            />
+            <input
+              className="ft-input"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              spellCheck={false}
+            />
+            <span className="ft-meta mono">
+              {nodes.length} nodes · {edges.length} links
+            </span>
+          </div>
+          <div className="row" style={{ gap: 7 }}>
+            <button
+              type="button"
+              className="btn btn-sm btn-ghost"
+              onClick={() =>
+                toast(
+                  "Workflow validated · no cycles · all inputs satisfied",
+                  "workflow.valid",
+                )
+              }
+            >
+              <Check size={14} /> Validate
+            </button>
+            <button
+              type="button"
+              className={"btn btn-sm btn-ghost" + (frozen ? " is-disabled" : "")}
+              onClick={() =>
+                frozen
+                  ? toast("Tenant frozen — writes blocked", "402 → reactivation.requested")
+                  : toast(
+                      `Workflow saved · v12 · ${nodes.length} nodes`,
+                      "workflow.saved",
+                    )
+              }
+            >
+              <Save size={14} /> Save
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-primary"
+              onClick={testRun}
+            >
+              <Play size={14} /> {running ? "Running…" : "Test run"}
+            </button>
+          </div>
+        </div>
+
+        {/* zoom controls */}
+        <div className="flow-zoom">
+          <button
+            type="button"
+            onClick={() => setZoom((z) => Math.min(1.6, +(z + 0.15).toFixed(2)))}
+            aria-label="Zoom in"
+          >
+            <Plus size={14} />
+          </button>
+          <span className="mono">{Math.round(zoom * 100)}%</span>
+          <button
+            type="button"
+            onClick={() => setZoom((z) => Math.max(0.5, +(z - 0.15).toFixed(2)))}
+            aria-label="Zoom out"
+          >
+            <Minus size={14} />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setZoom(0.78);
+              setPan({ x: 22, y: 54 });
+            }}
+            title="Reset view"
+            aria-label="Reset view"
+          >
+            <Maximize2 size={13} />
+          </button>
+        </div>
+
+        <div
+          className="flow-layer"
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+          }}
+        >
+          {/* wires */}
+          <svg
+            className="flow-wires"
+            style={{
+              position: "absolute",
+              overflow: "visible",
+              width: 1,
+              height: 1,
+              left: 0,
+              top: 0,
+            }}
+          >
+            {edges.map((e) => {
+              const a = nodes.find((n) => n.id === e.from[0]);
+              const b = nodes.find((n) => n.id === e.to[0]);
+              if (!a || !b) return null;
+              const x1 = portX(a, "out");
+              const y1 = portY(a, "out")[e.from[1]];
+              const x2 = portX(b, "in");
+              const y2 = portY(b, "in")[e.to[1]];
+              const lit = running && active === e.from[0];
+              const selected =
+                sel?.type === "edge" && sel.id === e.id;
+              return (
+                <path
+                  key={e.id}
+                  className={
+                    "wire" +
+                    (selected ? " sel" : "") +
+                    (lit ? " run" : "")
+                  }
+                  d={wirePath(x1, y1, x2, y2)}
+                  onMouseDown={(ev) => {
+                    ev.stopPropagation();
+                    setSel({ type: "edge", id: e.id });
+                  }}
+                />
+              );
+            })}
+            {pending ? (
+              <path
+                className="wire pending"
+                d={wirePath(pending.x0, pending.y0, pending.x, pending.y)}
+              />
+            ) : null}
+          </svg>
+
+          {/* nodes */}
+          {nodes.map((n) => {
+            const m = FLOW_MODULES[n.mod];
+            if (!m) return null;
+            const H = nodeH(m);
+            const insY = portY(n, "in");
+            const outsY = portY(n, "out");
+            const isSel = sel?.type === "node" && sel.id === n.id;
+            const firstSetting = m.settings?.[0];
+            const firstValue =
+              firstSetting && n.config[firstSetting.k] != null
+                ? String(n.config[firstSetting.k])
+                : "";
+            return (
+              <div
+                key={n.id}
+                className={
+                  "fnode" +
+                  (isSel ? " sel" : "") +
+                  (active === n.id ? " active" : "")
+                }
+                style={{
+                  left: n.x,
+                  top: n.y,
+                  width: NODE_W,
+                  minHeight: H,
+                }}
+                onMouseDown={(e) => {
+                  e.stopPropagation();
+                  setSel({ type: "node", id: n.id });
+                  const w = toWorld(e.clientX, e.clientY);
+                  dragRef.current = {
+                    mode: "move",
+                    id: n.id,
+                    ox: w.x - n.x,
+                    oy: w.y - n.y,
+                  };
+                }}
+              >
+                <div className="fnode-head">
+                  <span
+                    className="fnode-mono"
+                    style={{ borderColor: KIND_COLOR[m.kind] }}
+                  >
+                    {m.mono}
+                  </span>
+                  <span className="fnode-title">{m.name}</span>
+                </div>
+                <div className="fnode-body">
+                  {firstValue.length ? firstValue : m.desc}
+                </div>
+                {m.in.map((lbl, i) => (
+                  <div
+                    key={"i" + i}
+                    className="fport in"
+                    style={{ top: insY[i] - n.y - 5.5 }}
+                    onMouseUp={(e) => endWire(e, n.id, i)}
+                    onMouseDown={(e) => e.stopPropagation()}
+                  >
+                    {m.in.length > 1 ? (
+                      <span className="fport-lbl in">{lbl}</span>
+                    ) : null}
+                  </div>
+                ))}
+                {m.out.map((lbl, i) => (
+                  <div
+                    key={"o" + i}
+                    className={
+                      "fport out" +
+                      (lbl === "fail" || lbl === "false" ? " neg" : "")
+                    }
+                    style={{ top: outsY[i] - n.y - 5.5 }}
+                    onMouseDown={(e) => startWire(e, n.id, i)}
+                  >
+                    {m.out.length > 1 ? (
+                      <span className="fport-lbl out">{lbl}</span>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ---- inspector ---- */}
+      <aside className="flow-inspector">
+        {selNode && selMod ? (
+          <>
+            <div className="flow-insp-head">
+              <span
+                className="fnode-mono"
+                style={{ borderColor: KIND_COLOR[selMod.kind] }}
+              >
+                {selMod.mono}
+              </span>
+              <div style={{ minWidth: 0 }}>
+                <div className="fi-title">{selMod.name}</div>
+                <div className="mono muted" style={{ fontSize: 9.5 }}>
+                  {selNode.id} · {selMod.cat}
+                </div>
+              </div>
+            </div>
+            <div className="flow-insp-body">
+              <div className="eyebrow" style={{ marginBottom: 10 }}>
+                SETTINGS
+              </div>
+              <div className="col" style={{ gap: 12 }}>
+                {(selMod.settings || []).map((s) => (
+                  <FlowField
+                    key={s.k}
+                    s={s}
+                    value={selNode.config[s.k]}
+                    onChange={(v) => updateConfig(s.k, v)}
+                  />
+                ))}
+                {!selMod.settings?.length ? (
+                  <div className="muted" style={{ fontSize: 12 }}>
+                    No settings for this module.
+                  </div>
+                ) : null}
+              </div>
+              <div className="divider" style={{ margin: "16px 0" }} />
+              <dl
+                className="dl"
+                style={{ gridTemplateColumns: "max-content 1fr", gap: "7px 14px" }}
+              >
+                <dt>Inputs</dt>
+                <dd className="mono">{selMod.in.length || "—"}</dd>
+                <dt>Outputs</dt>
+                <dd className="mono">{selMod.out.join(", ") || "terminal"}</dd>
+              </dl>
+            </div>
+            <div className="flow-insp-foot">
+              <button
+                type="button"
+                className="btn btn-sm btn-ghost btn-danger"
+                onClick={deleteSel}
+              >
+                <Trash2 size={13} /> Remove node
+              </button>
+            </div>
+          </>
+        ) : sel?.type === "edge" ? (
+          <div className="flow-insp-empty">
+            <div className="eyebrow" style={{ marginBottom: 8 }}>
+              CONNECTION
+            </div>
+            <p className="muted" style={{ fontSize: 12.5 }}>
+              A data link between two modules. The upstream module&apos;s output
+              is passed to the downstream input.
+            </p>
+            <button
+              type="button"
+              className="btn btn-sm btn-ghost btn-danger"
+              style={{ marginTop: 14 }}
+              onClick={deleteSel}
+            >
+              <X size={13} /> Delete link
+            </button>
+          </div>
+        ) : (
+          <div className="flow-insp-empty">
+            <div className="eyebrow" style={{ marginBottom: 8 }}>
+              INSPECTOR
+            </div>
+            <p
+              className="muted"
+              style={{ fontSize: 12.5, lineHeight: 1.55 }}
+            >
+              Select a node to configure it, drag a module from the library to
+              add one, or drag from an output port to wire modules together.
+            </p>
+            <div className="flow-legend">
+              {FLOW_CATS.map((c) => (
+                <span key={c.id} className="fl">
+                  <span
+                    className="dot"
+                    style={{ background: KIND_COLOR[c.kind] }}
+                  />
+                  {c.label}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </aside>
+
+      {ghost ? (
+        <div
+          className="flow-ghost"
+          style={{ left: ghost.x, top: ghost.y }}
+        >
+          <span
+            className="fnode-mono"
+            style={{
+              borderColor: KIND_COLOR[FLOW_MODULES[ghost.mod]?.kind ?? "trigger"],
+            }}
+          >
+            {FLOW_MODULES[ghost.mod]?.mono}
+          </span>
+          {FLOW_MODULES[ghost.mod]?.name}
+        </div>
+      ) : null}
+
+      <div className="toasts">
+        {toasts.map((t) => (
+          <div key={t.id} className="toast">
+            <div className="col" style={{ gap: 2 }}>
+              <span>{t.msg}</span>
+              {t.code ? <span className="t-code">{t.code}</span> : null}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// One inspector field per setting. Type-discriminated so each branch
+// hands `onChange` a concrete value type.
+function FlowField({
+  s,
+  value,
+  onChange,
+}: {
+  s: FlowSetting;
+  value: string | number | boolean | undefined;
+  onChange: (v: string | number | boolean) => void;
+}) {
+  if (s.type === "toggle") {
+    const on = Boolean(value);
+    return (
+      <div className="row between" style={{ padding: "2px 0" }}>
+        <label
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 10,
+            letterSpacing: "0.06em",
+            textTransform: "uppercase",
+            color: "var(--ink-3)",
+          }}
+        >
+          {s.label}
+        </label>
+        <button
+          type="button"
+          className={"fswitch" + (on ? " on" : "")}
+          onClick={() => onChange(!on)}
+          aria-pressed={on}
+        >
+          <span />
+        </button>
+      </div>
+    );
+  }
+  if (s.type === "select") {
+    return (
+      <div className="field">
+        <label>{s.label}</label>
+        <select
+          className="input"
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {s.opts.map((o) => (
+            <option key={o} value={o}>
+              {o}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+  if (s.type === "area") {
+    return (
+      <div className="field">
+        <label>{s.label}</label>
+        <textarea
+          className="input mono"
+          rows={2}
+          style={{ resize: "vertical", fontSize: 12 }}
+          value={String(value ?? "")}
+          placeholder={s.ph}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </div>
+    );
+  }
+  // text / num
+  return (
+    <div className="field">
+      <label>{s.label}</label>
+      <input
+        className="input mono"
+        type={s.type === "num" ? "number" : "text"}
+        step="0.05"
+        value={String(value ?? "")}
+        placeholder={s.ph}
+        onChange={(e) =>
+          onChange(s.type === "num" ? parseFloat(e.target.value) : e.target.value)
+        }
+      />
+    </div>
+  );
+}

src/lib/flow-modules.ts

@@ -0,0 +1,444 @@
+// Module catalog for the Workflows editor — TS port of FLOW_MODULES /
+// FLOW_CATS from the design handoff's `screens_flow.jsx`. The shapes here
+// drive the palette tree, the per-node ports, and the inspector form.
+
+export type FlowKind = "trigger" | "scanner" | "ai" | "logic" | "action";
+
+export const KIND_COLOR: Record<FlowKind, string> = {
+  trigger: "var(--accent)",
+  scanner: "var(--ink-2)",
+  ai: "var(--ink-2)",
+  logic: "var(--warn)",
+  action: "var(--ok)",
+};
+
+export type FlowCat = {
+  id: string;
+  label: string;
+  kind: FlowKind;
+};
+
+export const FLOW_CATS: FlowCat[] = [
+  { id: "triggers", label: "Triggers", kind: "trigger" },
+  { id: "scanner", label: "Compliance Scanner", kind: "scanner" },
+  { id: "certifai", label: "CERTifAI", kind: "ai" },
+  { id: "logic", label: "Logic", kind: "logic" },
+  { id: "actions", label: "Actions", kind: "action" },
+];
+
+export type FlowSetting =
+  | { k: string; label: string; type: "select"; opts: string[]; def: string; ph?: string }
+  | { k: string; label: string; type: "text"; def: string; ph?: string }
+  | { k: string; label: string; type: "num"; def: number; ph?: string }
+  | { k: string; label: string; type: "area"; def: string; ph?: string }
+  | { k: string; label: string; type: "toggle"; def: boolean; ph?: string };
+
+export type FlowModule = {
+  name: string;
+  cat: string;
+  kind: FlowKind;
+  mono: string;
+  in: string[];
+  out: string[];
+  desc: string;
+  settings?: FlowSetting[];
+};
+
+export const FLOW_MODULES: Record<string, FlowModule> = {
+  // ---- triggers ----
+  schedule: {
+    name: "On schedule",
+    cat: "triggers",
+    kind: "trigger",
+    mono: "⏱",
+    in: [],
+    out: ["out"],
+    desc: "daily · 02:00",
+    settings: [
+      {
+        k: "cadence",
+        label: "Cadence",
+        type: "select",
+        opts: ["Every hour", "Daily", "Weekly", "Monthly"],
+        def: "Daily",
+      },
+      { k: "time", label: "At time (UTC)", type: "text", def: "02:00" },
+    ],
+  },
+  "scan-complete": {
+    name: "On scan complete",
+    cat: "triggers",
+    kind: "trigger",
+    mono: "◆",
+    in: [],
+    out: ["out"],
+    desc: "compliance-scanner",
+    settings: [
+      {
+        k: "product",
+        label: "Product",
+        type: "select",
+        opts: ["compliance-scanner", "certifai", "any"],
+        def: "compliance-scanner",
+      },
+    ],
+  },
+  "new-finding": {
+    name: "On new finding",
+    cat: "triggers",
+    kind: "trigger",
+    mono: "▲",
+    in: [],
+    out: ["out"],
+    desc: "severity ≥ Medium",
+    settings: [
+      {
+        k: "minSev",
+        label: "Min severity",
+        type: "select",
+        opts: ["Low", "Medium", "High", "Critical"],
+        def: "Medium",
+      },
+    ],
+  },
+  webhook: {
+    name: "Webhook",
+    cat: "triggers",
+    kind: "trigger",
+    mono: "↯",
+    in: [],
+    out: ["out"],
+    desc: "POST /hooks/…",
+    settings: [
+      { k: "path", label: "Path", type: "text", def: "/hooks/ingest" },
+      { k: "secret", label: "Signing secret", type: "text", def: "whsec_••••" },
+    ],
+  },
+
+  // ---- scanner ----
+  "run-scan": {
+    name: "Run scan",
+    cat: "scanner",
+    kind: "scanner",
+    mono: "CS",
+    in: ["in"],
+    out: ["out"],
+    desc: "full · cloud + code",
+    settings: [
+      {
+        k: "scope",
+        label: "Scope",
+        type: "select",
+        opts: ["Full", "Cloud only", "Code only", "Delta"],
+        def: "Full",
+      },
+      { k: "frameworks", label: "Frameworks", type: "text", def: "ISO 27001, BSI C5" },
+    ],
+  },
+  filter: {
+    name: "Filter findings",
+    cat: "scanner",
+    kind: "scanner",
+    mono: "≡",
+    in: ["in"],
+    out: ["out"],
+    desc: "status = open",
+    settings: [
+      {
+        k: "status",
+        label: "Status",
+        type: "select",
+        opts: ["open", "resolved", "any"],
+        def: "open",
+      },
+      { k: "control", label: "Control matches", type: "text", def: "", ph: "e.g. ISO 27001 A.8*" },
+    ],
+  },
+  "sev-gate": {
+    name: "Severity gate",
+    cat: "scanner",
+    kind: "scanner",
+    mono: "⊟",
+    in: ["in"],
+    out: ["pass", "fail"],
+    desc: "≥ High",
+    settings: [
+      {
+        k: "threshold",
+        label: "Threshold",
+        type: "select",
+        opts: ["Low", "Medium", "High", "Critical"],
+        def: "High",
+      },
+    ],
+  },
+  "map-control": {
+    name: "Map to control",
+    cat: "scanner",
+    kind: "scanner",
+    mono: "⌖",
+    in: ["in"],
+    out: ["out"],
+    desc: "framework: ISO 27001",
+    settings: [
+      {
+        k: "framework",
+        label: "Framework",
+        type: "select",
+        opts: ["ISO 27001", "BSI C5", "NIS2", "TISAX"],
+        def: "ISO 27001",
+      },
+    ],
+  },
+
+  // ---- certifai ----
+  "gen-annex": {
+    name: "Generate Annex IV",
+    cat: "certifai",
+    kind: "ai",
+    mono: "Ai",
+    in: ["in"],
+    out: ["out"],
+    desc: "EU AI Act dossier",
+    settings: [
+      {
+        k: "model",
+        label: "Model system",
+        type: "select",
+        opts: ["risk-scorer-v3", "doc-classifier", "all"],
+        def: "risk-scorer-v3",
+      },
+      { k: "sign", label: "Sign dossier", type: "toggle", def: true },
+    ],
+  },
+  "bias-check": {
+    name: "Bias evaluation",
+    cat: "certifai",
+    kind: "ai",
+    mono: "Ai",
+    in: ["in"],
+    out: ["pass", "fail"],
+    desc: "fairness ≥ 0.8",
+    settings: [
+      {
+        k: "metric",
+        label: "Metric",
+        type: "select",
+        opts: ["Demographic parity", "Equalised odds"],
+        def: "Demographic parity",
+      },
+      { k: "min", label: "Min score", type: "num", def: 0.8 },
+    ],
+  },
+  "model-audit": {
+    name: "Model card audit",
+    cat: "certifai",
+    kind: "ai",
+    mono: "Ai",
+    in: ["in"],
+    out: ["out"],
+    desc: "Annex IV §2",
+    settings: [{ k: "strict", label: "Strict mode", type: "toggle", def: false }],
+  },
+
+  // ---- logic ----
+  branch: {
+    name: "Branch",
+    cat: "logic",
+    kind: "logic",
+    mono: "⑂",
+    in: ["in"],
+    out: ["true", "false"],
+    desc: "if condition",
+    settings: [
+      { k: "expr", label: "Condition", type: "text", def: "count > 0", ph: "expression" },
+    ],
+  },
+  merge: {
+    name: "Merge",
+    cat: "logic",
+    kind: "logic",
+    mono: "⑃",
+    in: ["a", "b"],
+    out: ["out"],
+    desc: "wait all",
+    settings: [
+      {
+        k: "mode",
+        label: "Mode",
+        type: "select",
+        opts: ["Wait all", "First wins"],
+        def: "Wait all",
+      },
+    ],
+  },
+  delay: {
+    name: "Delay",
+    cat: "logic",
+    kind: "logic",
+    mono: "◴",
+    in: ["in"],
+    out: ["out"],
+    desc: "1 h",
+    settings: [{ k: "amount", label: "Duration", type: "text", def: "1 h" }],
+  },
+
+  // ---- actions ----
+  "create-evidence": {
+    name: "Create evidence",
+    cat: "actions",
+    kind: "action",
+    mono: "▤",
+    in: ["in"],
+    out: ["out"],
+    desc: "PDF · signed",
+    settings: [
+      { k: "name", label: "Bundle name", type: "text", def: "Auto-evidence" },
+      {
+        k: "format",
+        label: "Format",
+        type: "select",
+        opts: ["PDF", "JSON", "PDF + JSON"],
+        def: "PDF",
+      },
+      { k: "sign", label: "Hash-chain sign", type: "toggle", def: true },
+    ],
+  },
+  notify: {
+    name: "Notify",
+    cat: "actions",
+    kind: "action",
+    mono: "✉",
+    in: ["in"],
+    out: [],
+    desc: "Slack · #compliance",
+    settings: [
+      {
+        k: "channel",
+        label: "Channel",
+        type: "select",
+        opts: ["Slack", "Email", "Microsoft Teams"],
+        def: "Slack",
+      },
+      { k: "target", label: "Target", type: "text", def: "#compliance" },
+      { k: "msg", label: "Message", type: "area", def: "{{count}} findings need review" },
+    ],
+  },
+  "open-ticket": {
+    name: "Open ticket",
+    cat: "actions",
+    kind: "action",
+    mono: "⊞",
+    in: ["in"],
+    out: [],
+    desc: "Jira · COMP",
+    settings: [
+      {
+        k: "system",
+        label: "System",
+        type: "select",
+        opts: ["Jira", "ServiceNow", "Linear"],
+        def: "Jira",
+      },
+      { k: "project", label: "Project key", type: "text", def: "COMP" },
+    ],
+  },
+  "export-bundle": {
+    name: "Export bundle",
+    cat: "actions",
+    kind: "action",
+    mono: "⇪",
+    in: ["in"],
+    out: [],
+    desc: "S3 · eu-central",
+    settings: [
+      {
+        k: "dest",
+        label: "Destination",
+        type: "select",
+        opts: ["S3 (eu-central)", "SFTP", "Download"],
+        def: "S3 (eu-central)",
+      },
+    ],
+  },
+};
+
+export const modsByCat = (cat: string) =>
+  Object.entries(FLOW_MODULES)
+    .filter(([, m]) => m.cat === cat)
+    .map(([id, m]) => ({ id, ...m }));
+
+export const NODE_W = 202;
+
+export function nodeH(m: FlowModule): number {
+  return Math.max(58, 36 + Math.max(m.in.length, m.out.length, 1) * 22);
+}
+
+export function defConfig(modId: string): Record<string, string | number | boolean> {
+  const m = FLOW_MODULES[modId];
+  if (!m) return {};
+  const c: Record<string, string | number | boolean> = {};
+  (m.settings || []).forEach((s) => {
+    c[s.k] = s.def;
+  });
+  return c;
+}
+
+export type FlowNode = {
+  id: string;
+  mod: string;
+  x: number;
+  y: number;
+  config: Record<string, string | number | boolean>;
+};
+
+export type FlowEdge = {
+  id: string;
+  from: [string, number];
+  to: [string, number];
+};
+
+export function seedFlow(): { nodes: FlowNode[]; edges: FlowEdge[] } {
+  const mk = (id: string, mod: string, x: number, y: number): FlowNode => ({
+    id,
+    mod,
+    x,
+    y,
+    config: defConfig(mod),
+  });
+  const nodes: FlowNode[] = [
+    mk("n1", "scan-complete", 24, 70),
+    mk("n2", "sev-gate", 270, 86),
+    mk("n3", "create-evidence", 516, 24),
+    mk("n4", "notify", 516, 188),
+    mk("n6", "schedule", 24, 320),
+    mk("n7", "gen-annex", 270, 320),
+    mk("n5", "map-control", 516, 320),
+  ];
+  const edges: FlowEdge[] = [
+    { id: "e1", from: ["n1", 0], to: ["n2", 0] },
+    { id: "e2", from: ["n2", 0], to: ["n3", 0] },
+    { id: "e3", from: ["n2", 1], to: ["n4", 0] },
+    { id: "e4", from: ["n6", 0], to: ["n7", 0] },
+    { id: "e5", from: ["n7", 0], to: ["n5", 0] },
+  ];
+  return { nodes, edges };
+}
+
+export function portY(node: FlowNode, side: "in" | "out"): number[] {
+  const m = FLOW_MODULES[node.mod];
+  if (!m) return [];
+  const ports = side === "in" ? m.in : m.out;
+  const H = nodeH(m);
+  if (ports.length === 0) return [];
+  return ports.map((_, i) => node.y + (H * (i + 1)) / (ports.length + 1));
+}
+
+export function portX(node: FlowNode, side: "in" | "out"): number {
+  return side === "in" ? node.x : node.x + NODE_W;
+}
+
+export function wirePath(x1: number, y1: number, x2: number, y2: number): string {
+  const dx = Math.max(36, Math.abs(x2 - x1) * 0.45);
+  return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
+}

src/lib/host.ts

@@ -11,7 +11,20 @@ export type HostMatch =
   | { kind: "unknown" };
 
 // Longest-first so `stage.breakpilot.com` is matched before `breakpilot.com`.
-const APEX_HOSTS = ["stage.breakpilot.com", "breakpilot.com", "localhost"];
+// Built-ins cover dev (localhost) + the canonical breakpilot.com targets.
+// PORTAL_APEX_HOSTS is a comma-separated env override for per-environment
+// hosts (e.g. portal-dev.meghsakha.com while breakpilot.com isn't registered).
+const APEX_HOSTS = (() => {
+  const base = ["stage.breakpilot.com", "breakpilot.com", "localhost"];
+  const extra = (process.env.PORTAL_APEX_HOSTS ?? "")
+    .split(",")
+    .map((h) => h.trim().toLowerCase())
+    .filter(Boolean);
+  // Longest-first to keep the suffix-strip loop correct.
+  return Array.from(new Set([...extra, ...base])).sort(
+    (a, b) => b.length - a.length,
+  );
+})();
 const APEX_SET = new Set(APEX_HOSTS);
 
 export function parseHost(host: string | null | undefined): HostMatch {

src/middleware.ts

@@ -31,6 +31,8 @@ export function middleware(request: NextRequest) {
 
 export const config = {
   // Skip Next internals + API + static assets so middleware doesn't
-  // double-rewrite the auth callback or _next/static.
+  // double-rewrite the auth callback, _next/static, or the MSW worker.
-  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+  matcher: [
+    "/((?!api|_next/static|_next/image|favicon.ico|mockServiceWorker.js).*)",
+  ],
 };

src/mocks/browser.ts

@@ -0,0 +1,7 @@
+// Browser-side MSW worker setup. Imported only by the dev MockWorker
+// client component — must never run on the server.
+
+import { setupWorker } from "msw/browser";
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

src/mocks/handlers.ts

@@ -0,0 +1,119 @@
+// Browser-side mock API for dev-fixture mode.
+//
+// Wired into the page via `src/mocks/MockWorker.tsx`. Only initialised when
+// `BP_DEV_FIXTURE` is set on the server (the env value is forwarded to the
+// client via a window global). Production builds never start the worker.
+//
+// Today's surface is the small set of write paths the design shows. They
+// don't persist — every response is synthesised so the same click always
+// looks the same. When the real platform endpoints exist, drop the
+// matching handler from this file.
+
+import { http, HttpResponse, delay } from "msw";
+
+type InvitePayload = {
+  email?: string;
+  role?: string;
+};
+
+type TestRunPayload = {
+  workflowId?: string;
+};
+
+// ---- Frozen-tenant guard --------------------------------------------------
+// In dev-fixture mode the tenant status is encoded in a cookie or a
+// window global; for now we read a hint from a custom header that the
+// caller sets, so the same mock handler can respond 402 or 201 depending
+// on which fixture is currently active.
+function isFrozen(req: Request): boolean {
+  return req.headers.get("x-bp-tenant-status") === "frozen";
+}
+function isArchived(req: Request): boolean {
+  return req.headers.get("x-bp-tenant-status") === "archived";
+}
+
+function archivedResponse() {
+  return HttpResponse.json(
+    { error: "tenant_archived", message: "Tenant retention window closed." },
+    { status: 410 },
+  );
+}
+function frozenResponse() {
+  return HttpResponse.json(
+    {
+      error: "tenant_frozen",
+      message: "Tenant is read-only. Re-activate to resume writes.",
+    },
+    { status: 402 },
+  );
+}
+
+export const handlers = [
+  // ---- /api/team/invites -------------------------------------------------
+  http.post("/api/team/invites", async ({ request }) => {
+    if (isArchived(request)) return archivedResponse();
+    if (isFrozen(request)) return frozenResponse();
+    await delay(280);
+    const body = (await request.json().catch(() => ({}))) as InvitePayload;
+    if (!body.email || !body.email.includes("@")) {
+      return HttpResponse.json({ error: "invalid_email" }, { status: 400 });
+    }
+    const role = body.role ?? "USER";
+    return HttpResponse.json(
+      {
+        id: "inv-" + Math.random().toString(36).slice(2, 9),
+        email: body.email,
+        role,
+        status: "invited",
+        created_at: new Date().toISOString(),
+      },
+      { status: 201, headers: { "x-bp-status-code": "201 · invite.created" } },
+    );
+  }),
+
+  // ---- /api/scans -------------------------------------------------------
+  http.post("/api/scans", async ({ request }) => {
+    if (isArchived(request)) return archivedResponse();
+    if (isFrozen(request)) return frozenResponse();
+    await delay(420);
+    return HttpResponse.json(
+      {
+        id: "scan-" + Math.random().toString(36).slice(2, 9),
+        status: "queued",
+        queued_at: new Date().toISOString(),
+      },
+      { status: 202, headers: { "x-bp-status-code": "202 · scan.queued" } },
+    );
+  }),
+
+  // ---- /api/workflows/:id/test -----------------------------------------
+  http.post("/api/workflows/:id/test", async ({ request, params }) => {
+    if (isArchived(request)) return archivedResponse();
+    if (isFrozen(request)) return frozenResponse();
+    await delay(180);
+    return HttpResponse.json(
+      {
+        workflow_id: params.id,
+        run_id: "wfr-" + Math.random().toString(36).slice(2, 9),
+        status: "started",
+      } satisfies Record<string, unknown> & { workflow_id: unknown },
+      { status: 202, headers: { "x-bp-status-code": "202 · workflow.test" } },
+    );
+  }),
+
+  // ---- /api/billing/reactivate ----------------------------------------
+  http.post("/api/billing/reactivate", async ({ request }) => {
+    if (isArchived(request)) return archivedResponse();
+    await delay(320);
+    return HttpResponse.json(
+      { status: "pending", contact: "billing@breakpilot.eu" },
+      {
+        status: 202,
+        headers: { "x-bp-status-code": "202 · reactivation.requested" },
+      },
+    );
+  }),
+];
+
+// Silence unused-type warnings for payloads we don't fully validate.
+export type { InvitePayload, TestRunPayload };

vitest.config.ts

@@ -9,6 +9,17 @@ export default defineConfig({
       // Skeleton-mode: only enforce coverage on the tested module (src/lib).
       // Re-include the rest of src/ once real code + real tests land.
       include: ["src/lib/**/*.ts"],
+      // M10.2 design-fixture modules — these are the bridge between the
+      // handoff prototype and the real platform stack. They get replaced
+      // (or thinned out) when tenant-registry carries the design fields
+      // end-to-end; covering them now would mostly assert their literal
+      // structure. Re-add coverage when they stop being fixture glue.
+      exclude: [
+        "src/lib/fixtures.ts",
+        "src/lib/flow-modules.ts",
+        "src/lib/get-session.ts",
+        "src/lib/portal-data.ts",
+      ],
       reporter: ["text", "json-summary"],
       thresholds: {
         lines: 100,