merge @executor/ui + @executor/react into packages/react (RhysSullivan#88)

- Merge UI components, hooks, lib, styles from packages/ui
- Merge API client, atoms, provider from packages/clients/react
- Move shared pages and components from apps/local/src/web
- Direct subpath exports: @executor/react/{api,plugins,pages,components,hooks,lib}/*
- No barrel files, no backwards compat shims
- Each app owns its own shell/router, imports pages from package
- Delete packages/ui and packages/clients/react

Author: RhysSullivan

.changeset/config.json

@@ -26,8 +26,6 @@
     "@executor/plugin-keychain",
     "@executor/plugin-mcp",
     "@executor/plugin-onepassword",
-    "@executor/plugin-openapi",
-    "@executor/ui",
-    "@executor/marketing"
+    "@executor/plugin-openapi"
   ]
 }

apps/cloud/package.json

@@ -15,7 +15,6 @@
     "@executor/react": "workspace:*",
     "@executor/sdk": "workspace:*",
     "@executor/storage-postgres": "workspace:*",
-    "@executor/ui": "workspace:*",
     "@tanstack/react-router": "^1.168.10",
     "@workos-inc/node": "^7.0.0",
     "drizzle-orm": "catalog:",

apps/cloud/src/api.ts

@@ -1,5 +1,5 @@
 // ---------------------------------------------------------------------------
-// Cloud API — core handlers from @executor/api + cloud-specific plugins
+// Cloud API — core handlers from @executor/api + cloud-specific plugins + auth
 // ---------------------------------------------------------------------------
 
 import {
@@ -20,16 +20,20 @@ import { GraphqlGroup, GraphqlExtensionService, GraphqlHandlers } from "@executo
 
 import { createTeamExecutor } from "./services/executor";
 import { authenticateRequest } from "./auth/workos";
+import { CloudAuthApi } from "./auth/api";
+import { CloudAuthHandlers } from "./auth/handlers";
+import { AuthContext, UserStoreService } from "./auth/context";
 import type { DrizzleDb } from "./services/db";
 
 // ---------------------------------------------------------------------------
-// Cloud API — core + cloud plugins (no onepassword)
+// Cloud API — core + cloud plugins + cloud auth (no onepassword)
 // ---------------------------------------------------------------------------
 
 const CloudApi = addGroup(OpenApiGroup)
   .add(McpGroup)
   .add(GoogleDiscoveryGroup)
-  .add(GraphqlGroup);
+  .add(GraphqlGroup)
+  .add(CloudAuthApi);
 
 const CloudApiBase = HttpApiBuilder.api(CloudApi).pipe(
   Layer.provide(CoreHandlers),
@@ -38,6 +42,7 @@ const CloudApiBase = HttpApiBuilder.api(CloudApi).pipe(
     McpHandlers,
     GoogleDiscoveryHandlers,
     GraphqlHandlers,
+    CloudAuthHandlers,
   )),
 );
 
@@ -96,13 +101,29 @@ export const createCloudApiHandler = (db: DrizzleDb, encryptionKey: string) => {
         Layer.provideMerge(pluginExtensions),
         Layer.provideMerge(Layer.succeed(ExecutorService, executor)),
         Layer.provideMerge(Layer.succeed(ExecutionEngineService, engine)),
+        Layer.provideMerge(Layer.succeed(AuthContext, {
+          userId: auth.userId,
+          email: auth.email,
+          teamId,
+          name: `${auth.firstName ?? ""} ${auth.lastName ?? ""}`.trim() || null,
+          avatarUrl: auth.avatarUrl,
+        })),
+        Layer.provideMerge(Layer.succeed(UserStoreService, userStore)),
         Layer.provideMerge(HttpServer.layerContext),
       ),
       { middleware: HttpMiddleware.logger },
     );
 
     try {
-      return await handler.handler(request);
+      const response = await handler.handler(request);
+
+      if (auth.refreshedCookie) {
+        const newResponse = new Response(response.body, response);
+        newResponse.headers.append("Set-Cookie", auth.refreshedCookie);
+        return newResponse;
+      }
+
+      return response;
     } finally {
       await Effect.runPromise(executor.close()).catch(() => undefined);
       handler.dispose();

apps/cloud/src/auth/api.ts

@@ -0,0 +1,25 @@
+import { HttpApiEndpoint, HttpApiGroup } from "@effect/platform";
+import { Schema } from "effect";
+
+const AuthUser = Schema.Struct({
+  id: Schema.String,
+  email: Schema.String,
+  name: Schema.NullOr(Schema.String),
+  avatarUrl: Schema.NullOr(Schema.String),
+});
+
+const AuthTeam = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+});
+
+const AuthMeResponse = Schema.Struct({
+  user: AuthUser,
+  team: Schema.NullOr(AuthTeam),
+});
+
+export class CloudAuthApi extends HttpApiGroup.make("cloudAuth")
+  .add(
+    HttpApiEndpoint.get("me")`/auth/me`
+      .addSuccess(AuthMeResponse),
+  ) {}

apps/cloud/src/auth/context.ts

@@ -1,10 +1,18 @@
 import { Context } from "effect";
+import type { makeUserStore } from "@executor/storage-postgres";
 
 export class AuthContext extends Context.Tag("@executor/cloud/AuthContext")<
   AuthContext,
   {
     readonly userId: string;
     readonly teamId: string;
     readonly email: string;
+    readonly name: string | null;
+    readonly avatarUrl: string | null;
   }
 >() {}
+
+export class UserStoreService extends Context.Tag("@executor/cloud/UserStoreService")<
+  UserStoreService,
+  ReturnType<typeof makeUserStore>
+>() {}

apps/cloud/src/auth/handlers.ts

@@ -0,0 +1,34 @@
+import { HttpApiBuilder } from "@effect/platform";
+import { Effect } from "effect";
+
+import { addGroup } from "@executor/api";
+import { CloudAuthApi } from "./api";
+import { AuthContext, UserStoreService } from "./context";
+
+const ApiWithCloudAuth = addGroup(CloudAuthApi);
+
+export const CloudAuthHandlers = HttpApiBuilder.group(
+  ApiWithCloudAuth,
+  "cloudAuth",
+  (handlers) =>
+    handlers.handle("me", () =>
+      Effect.gen(function* () {
+        const auth = yield* AuthContext;
+        const userStore = yield* UserStoreService;
+
+        const team = yield* Effect.tryPromise(() =>
+          userStore.getTeam(auth.teamId),
+        ).pipe(Effect.orDie);
+
+        return {
+          user: {
+            id: auth.userId,
+            email: auth.email,
+            name: auth.name,
+            avatarUrl: auth.avatarUrl,
+          },
+          team: team ? { id: team.id, name: team.name } : null,
+        };
+      }),
+    ),
+);

apps/cloud/src/auth/workos.ts

@@ -48,6 +48,10 @@ export const authenticateWithCode = async (code: string) => {
  * Authenticate a request using the sealed session cookie.
  * Returns user info or null if not authenticated.
  */
+/**
+ * Authenticate a request using the sealed session cookie.
+ * Automatically refreshes expired tokens and returns a new cookie if needed.
+ */
 export const authenticateRequest = async (request: Request) => {
   const cookieHeader = request.headers.get("cookie");
   const sessionData = parseCookie(cookieHeader, COOKIE_NAME);
@@ -60,39 +64,38 @@ export const authenticateRequest = async (request: Request) => {
   });
 
   const result = await session.authenticate();
-  if (!result.authenticated) return null;
-
-  return {
-    userId: result.user.id,
-    email: result.user.email,
-    firstName: result.user.firstName,
-    lastName: result.user.lastName,
-    avatarUrl: result.user.profilePictureUrl,
-    sessionId: result.sessionId,
-  };
-};
-
-/**
- * Refresh the sealed session cookie. Returns new cookie value or null.
- */
-export const refreshSession = async (request: Request) => {
-  const cookieHeader = request.headers.get("cookie");
-  const sessionData = parseCookie(cookieHeader, COOKIE_NAME);
-  if (!sessionData) return null;
 
-  const wos = getWorkOS();
-  const session = wos.userManagement.loadSealedSession({
-    sessionData,
-    cookiePassword: getCookiePassword(),
-  });
-
-  const result = await session.refresh();
-  if (!result.authenticated || !result.sealedSession) return null;
+  if (result.authenticated) {
+    return {
+      userId: result.user.id,
+      email: result.user.email,
+      firstName: result.user.firstName,
+      lastName: result.user.lastName,
+      avatarUrl: result.user.profilePictureUrl,
+      sessionId: result.sessionId,
+      refreshedCookie: undefined as string | undefined,
+    };
+  }
 
-  return {
-    sealedSession: result.sealedSession,
-    cookie: makeSessionCookie(result.sealedSession),
-  };
+  // Token expired — try refreshing
+  if (result.reason === "no_session_cookie_provided") return null;
+
+  try {
+    const refreshed = await session.refresh();
+    if (!refreshed.authenticated || !refreshed.sealedSession) return null;
+
+    return {
+      userId: refreshed.user.id,
+      email: refreshed.user.email,
+      firstName: refreshed.user.firstName,
+      lastName: refreshed.user.lastName,
+      avatarUrl: refreshed.user.profilePictureUrl,
+      sessionId: refreshed.sessionId,
+      refreshedCookie: makeSessionCookie(refreshed.sealedSession),
+    };
+  } catch {
+    return null;
+  }
 };
 
 /**

apps/cloud/src/web/auth.tsx

@@ -1,4 +1,11 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext } from "react";
+import { useAtomValue, Result } from "@effect-atom/atom-react";
+
+import { CloudApiClient } from "./client";
+
+// ---------------------------------------------------------------------------
+// Types (from CloudAuthApi response schema)
+// ---------------------------------------------------------------------------
 
 type AuthUser = {
   id: string;
@@ -12,40 +19,39 @@ type AuthTeam = {
   name: string;
 };
 
+// ---------------------------------------------------------------------------
+// Auth atom — typed query against CloudAuthApi
+// ---------------------------------------------------------------------------
+
+export const authAtom = CloudApiClient.query("cloudAuth", "me", {
+  timeToLive: "5 minutes",
+});
+
+// ---------------------------------------------------------------------------
+// Provider + hook
+// ---------------------------------------------------------------------------
+
 type AuthState =
   | { status: "loading" }
   | { status: "unauthenticated" }
-  | { status: "authenticated"; user: AuthUser; team: AuthTeam };
+  | { status: "authenticated"; user: AuthUser; team: AuthTeam | null };
 
 const AuthContext = createContext<AuthState>({ status: "loading" });
 
 export const useAuth = () => useContext(AuthContext);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [state, setState] = useState<AuthState>({ status: "loading" });
-
-  useEffect(() => {
-    fetch("/auth/me")
-      .then((res) => {
-        if (!res.ok) {
-          setState({ status: "unauthenticated" });
-          return;
-        }
-        return res.json();
-      })
-      .then((data) => {
-        if (data?.user) {
-          setState({
-            status: "authenticated",
-            user: data.user,
-            team: data.team,
-          });
-        }
-      })
-      .catch(() => {
-        setState({ status: "unauthenticated" });
-      });
-  }, []);
+  const result = useAtomValue(authAtom);
+
+  const state: AuthState = Result.match(result, {
+    onInitial: () => ({ status: "loading" as const }),
+    onSuccess: ({ value }) => ({
+      status: "authenticated" as const,
+      user: value.user,
+      team: value.team,
+    }),
+    onFailure: () => ({ status: "unauthenticated" as const }),
+  });
 
   return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;
 };

apps/cloud/src/web/client.tsx

@@ -0,0 +1,22 @@
+import { AtomHttpApi } from "@effect-atom/atom-react";
+import { FetchHttpClient } from "@effect/platform";
+import { addGroup } from "@executor/api";
+import { getBaseUrl } from "@executor/react/api/base-url";
+import { CloudAuthApi } from "../auth/api";
+
+// ---------------------------------------------------------------------------
+// Cloud API client — core API + cloud auth
+// ---------------------------------------------------------------------------
+
+const CloudApi = addGroup(CloudAuthApi);
+
+class CloudApiClient extends AtomHttpApi.Tag<CloudApiClient>()(
+  "CloudApiClient",
+  {
+    api: CloudApi,
+    httpClient: FetchHttpClient.layer,
+    baseUrl: getBaseUrl(),
+  },
+) {}
+
+export { CloudApiClient };

apps/cloud/src/web/main.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "@executor/ui/globals.css";
+import "@executor/react/globals.css";
 import { App } from "./App";
 
 const root = createRoot(document.getElementById("root")!);