feat(connections-setup): add ConnectionsSetup component

apps/mesh/package.json

@@ -113,8 +113,8 @@
     "marked": "^15.0.6",
     "mesh-plugin-object-storage": "workspace:*",
     "mesh-plugin-private-registry": "workspace:*",
-    "mesh-plugin-user-sandbox": "workspace:*",
     "mesh-plugin-reports": "workspace:*",
+    "mesh-plugin-user-sandbox": "workspace:*",
     "mesh-plugin-workflows": "workspace:*",
     "nanoid": "^5.1.6",
     "pg": "^8.16.3",

apps/mesh/src/web/components/connections-setup/connections-setup.tsx

@@ -0,0 +1,50 @@
+import { useState, useRef } from "react";
+import { SlotCard } from "./slot-card";
+import type { ConnectionSlot } from "./use-slot-resolution";
+
+export interface ConnectionsSetupProps {
+  slots: Record<string, ConnectionSlot>;
+  onComplete: (connections: Record<string, string>) => void;
+}
+
+export function ConnectionsSetup({ slots, onComplete }: ConnectionsSetupProps) {
+  const [completed, setCompleted] = useState<Record<string, string>>({});
+  const wasAllDoneRef = useRef(false);
+
+  const handleSlotComplete = (slotId: string, connectionId: string) => {
+    setCompleted((prev) => {
+      const next = { ...prev };
+      if (connectionId === "") {
+        delete next[slotId];
+      } else {
+        next[slotId] = connectionId;
+      }
+      return next;
+    });
+  };
+
+  const allSlotIds = Object.keys(slots);
+  const allDone =
+    allSlotIds.length > 0 && allSlotIds.every((id) => completed[id]);
+
+  if (allDone && !wasAllDoneRef.current) {
+    wasAllDoneRef.current = true;
+    onComplete(completed);
+  } else if (!allDone) {
+    wasAllDoneRef.current = false;
+  }
+
+  return (
+    <div className="space-y-3">
+      {Object.entries(slots).map(([slotId, slot]) => (
+        <SlotCard
+          key={slotId}
+          slot={slot}
+          onComplete={(connectionId) =>
+            handleSlotComplete(slotId, connectionId)
+          }
+        />
+      ))}
+    </div>
+  );
+}

apps/mesh/src/web/components/connections-setup/index.ts

@@ -0,0 +1,3 @@
+export { ConnectionsSetup } from "./connections-setup";
+export type { ConnectionsSetupProps } from "./connections-setup";
+export type { ConnectionSlot } from "./use-slot-resolution";

apps/mesh/src/web/components/connections-setup/slot-auth-oauth.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { authenticateMcp, useConnectionActions } from "@decocms/mesh-sdk";
+import { useQueryClient } from "@tanstack/react-query";
+import { KEYS } from "@/web/lib/query-keys";
+import { Button } from "@deco/ui/components/button.tsx";
+
+interface SlotAuthOAuthProps {
+  connectionId: string;
+  providerName: string;
+  onAuthed: () => void;
+}
+
+export function SlotAuthOAuth({
+  connectionId,
+  providerName,
+  onAuthed,
+}: SlotAuthOAuthProps) {
+  const [isPending, setIsPending] = useState(false);
+  const actions = useConnectionActions();
+  const queryClient = useQueryClient();
+  const mcpProxyUrl = new URL(`/mcp/${connectionId}`, window.location.origin);
+
+  const handleAuthorize = async () => {
+    setIsPending(true);
+    try {
+      const { token, tokenInfo, error } = await authenticateMcp({
+        connectionId,
+      });
+
+      if (error || !token) {
+        toast.error(`Authorization failed: ${error ?? "Unknown error"}`);
+        return;
+      }
+
+      if (tokenInfo) {
+        try {
+          const response = await fetch(
+            `/api/connections/${connectionId}/oauth-token`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({
+                accessToken: tokenInfo.accessToken,
+                refreshToken: tokenInfo.refreshToken,
+                expiresIn: tokenInfo.expiresIn,
+                scope: tokenInfo.scope,
+                clientId: tokenInfo.clientId,
+                clientSecret: tokenInfo.clientSecret,
+                tokenEndpoint: tokenInfo.tokenEndpoint,
+              }),
+            },
+          );
+          if (!response.ok) {
+            await actions.update.mutateAsync({
+              id: connectionId,
+              data: { connection_token: token },
+            });
+          } else {
+            // Trigger tool re-discovery
+            await actions.update.mutateAsync({ id: connectionId, data: {} });
+          }
+        } catch (err) {
+          console.error("Error saving OAuth token:", err);
+          await actions.update.mutateAsync({
+            id: connectionId,
+            data: { connection_token: token },
+          });
+        }
+      } else {
+        await actions.update.mutateAsync({
+          id: connectionId,
+          data: { connection_token: token },
+        });
+      }
+
+      await queryClient.invalidateQueries({
+        queryKey: KEYS.isMCPAuthenticated(mcpProxyUrl.href, null),
+      });
+
+      toast.success("Authorization successful");
+      onAuthed();
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Authorize Mesh to access {providerName} on your behalf.
+      </p>
+      <Button onClick={handleAuthorize} disabled={isPending} className="w-full">
+        {isPending ? "Authorizing..." : `Authorize with ${providerName}`}
+      </Button>
+    </div>
+  );
+}

apps/mesh/src/web/components/connections-setup/slot-auth-token.tsx

@@ -0,0 +1,71 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useConnectionActions } from "@decocms/mesh-sdk";
+import { Button } from "@deco/ui/components/button.tsx";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@deco/ui/components/form.tsx";
+import { Input } from "@deco/ui/components/input.tsx";
+
+const tokenSchema = z.object({
+  token: z.string().min(1, "Token is required"),
+});
+
+type TokenFormData = z.infer<typeof tokenSchema>;
+
+interface SlotAuthTokenProps {
+  connectionId: string;
+  onAuthed: () => void;
+}
+
+export function SlotAuthToken({ connectionId, onAuthed }: SlotAuthTokenProps) {
+  const actions = useConnectionActions();
+
+  const form = useForm<TokenFormData>({
+    resolver: zodResolver(tokenSchema),
+    defaultValues: { token: "" },
+  });
+
+  const handleSubmit = async (data: TokenFormData) => {
+    await actions.update.mutateAsync({
+      id: connectionId,
+      data: { connection_token: data.token },
+    });
+    // Trigger tool re-discovery
+    await actions.update.mutateAsync({ id: connectionId, data: {} });
+    onAuthed();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-3">
+        <FormField
+          control={form.control}
+          name="token"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>API Token</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="sk-..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          disabled={actions.update.isPending}
+          className="w-full"
+        >
+          {actions.update.isPending ? "Saving..." : "Save token"}
+        </Button>
+      </form>
+    </Form>
+  );
+}