@inkeep/agents-manage-ui 0.34.1 → 0.35.0

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -11,9 +11,16 @@
     "./constants/models": "./src/constants/models.ts",
     "./constants/schema-validation": "./src/constants/schema-validation/index.ts",
     "./schema": "./src/db/schema.ts",
+    "./db/schema": "./src/db/schema.ts",
+    "./auth": "./src/auth/auth.ts",
+    "./auth/schema": "./src/auth/auth-schema.ts",
+    "./auth/validation": "./src/auth/auth-validation-schemas.ts",
+    "./auth/permissions": "./src/auth/permissions.ts",
+    "./db/test-client": "./src/db/test-client.ts",
     "./types": "./src/types/index.ts",
     "./validation": "./src/validation/index.ts",
     "./client-exports": "./src/client-exports.ts",
+    "./credential-stores": "./src/credential-stores/index.ts",
     "./drizzle": "./drizzle/",
     "./utils/schema-conversion": "./src/utils/schema-conversion.ts"
   },
@@ -44,6 +51,7 @@
   "clean-package": "./clean-package.config.json",
   "dependencies": {
     "@electric-sql/pglite": "^0.3.13",
+    "@better-auth/sso": "^1.3.34",
     "@hono/node-server": "^1.14.3",
     "@hono/zod-openapi": "^1.0.2",
     "@modelcontextprotocol/sdk": "^1.17.2",
@@ -61,6 +69,7 @@
     "ai": "5.0.11",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
+    "better-auth": "^1.3.34",
     "dotenv": "^17.2.1",
     "dotenv-expand": "^12.0.3",
     "drizzle-orm": "^0.44.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -33,6 +33,7 @@
     "@ai-sdk/openai": "2.0.11",
     "@ai-sdk/openai-compatible": "^1.0.27",
     "@ai-sdk/react": "2.0.11",
+    "@better-auth/sso": "^1.3.34",
     "@hookform/resolvers": "^5.2.1",
     "@inkeep/agents-ui": "^0.15.2",
     "@lezer/highlight": "^1.2.1",
@@ -62,6 +63,7 @@
     "ai": "^5.0.11",
     "axios": "^1.11.0",
     "axios-retry": "^4.5.0",
+    "better-auth": "^1.3.34",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -92,9 +94,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.34.1",
-    "@inkeep/agents-manage-api": "^0.34.1",
-    "@inkeep/agents-run-api": "^0.34.1"
+    "@inkeep/agents-core": "^0.35.0",
+    "@inkeep/agents-manage-api": "^0.35.0",
+    "@inkeep/agents-run-api": "^0.35.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

package/src/app/accept-invitation/[invitationId]/page.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useAuthSession } from '@/hooks/use-auth';
+import { authClient } from '@/lib/auth-client';
+
+export default function AcceptInvitationPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { user, isLoading: isAuthLoading } = useAuthSession();
+  const invitationId = params.invitationId as string;
+
+  const [invitation, setInvitation] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAccepting, setIsAccepting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // Fetch invitation details (only when authenticated)
+  useEffect(() => {
+    async function fetchInvitation() {
+      if (!invitationId) return;
+      
+      // If not authenticated, don't fetch yet - wait for user to sign in
+      if (!user) {
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const result = await authClient.organization.getInvitation({
+          query: { id: invitationId },
+        });
+
+        if ('error' in result && result.error) {
+          setError(result.error.message || 'Invitation not found');
+          setIsLoading(false);
+          return;
+        }
+
+        if ('data' in result && result.data) {
+          setInvitation(result.data);
+        }
+      } catch {
+        setError('Failed to load invitation');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchInvitation();
+  }, [invitationId, user]);
+
+  const handleAccept = async () => {
+    if (!user) {
+      // Redirect to login with invitation param
+      router.push(`/login?invitation=${invitationId}`);
+      return;
+    }
+
+    setIsAccepting(true);
+    setError(null);
+
+    try {
+      const result = await authClient.organization.acceptInvitation({
+        invitationId,
+      });
+
+      if ('error' in result && result.error) {
+        setError(result.error.message || 'Failed to accept invitation');
+        setIsAccepting(false);
+        return;
+      }
+
+      setSuccess(true);
+
+      // Redirect to the organization after a short delay
+      setTimeout(() => {
+        if (invitation?.organizationId) {
+          router.push(`/${invitation.organizationId}/projects`);
+        } else {
+          router.push('/');
+        }
+      }, 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to accept invitation');
+      setIsAccepting(false);
+    }
+  };
+
+  const handleReject = async () => {
+    setIsAccepting(true);
+    setError(null);
+
+    try {
+      await authClient.organization.rejectInvitation({
+        invitationId,
+      });
+
+      router.push('/');
+    } catch {
+      setError('Failed to reject invitation');
+      setIsAccepting(false);
+    }
+  };
+
+  if (isLoading || isAuthLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="flex flex-col items-center justify-center p-8">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <p className="mt-4 text-sm text-muted-foreground">Loading invitation...</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (error && !invitation) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <XCircle className="h-6 w-6 text-destructive" />
+              <CardTitle>Invalid Invitation</CardTitle>
+            </div>
+            <CardDescription>{error}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => router.push('/')} className="w-full">
+              Go to Dashboard
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-500" />
+              <CardTitle>Invitation Accepted!</CardTitle>
+            </div>
+            <CardDescription>
+              You've successfully joined the organization. Redirecting...
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  // Show simplified view when not authenticated
+  if (!user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Organization Invitation</CardTitle>
+            <CardDescription>
+              You've been invited to join an organization
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="rounded-md bg-blue-500/10 p-3 text-sm text-blue-600 dark:text-blue-400">
+              Sign in to view invitation details and accept.
+            </div>
+
+            <Button
+              onClick={handleAccept}
+              disabled={isAccepting}
+              className="w-full"
+            >
+              {isAccepting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Redirecting...
+                </>
+              ) : (
+                'Sign In to Continue'
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Show full invitation details when authenticated
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Organization Invitation</CardTitle>
+          <CardDescription>
+            You've been invited to join {invitation?.organizationName || 'an organization'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {invitation && (
+            <div className="rounded-lg border bg-muted/50 p-4 space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Organization:</span>
+                <span className="font-medium">{invitation.organizationName}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Role:</span>
+                <span className="font-medium capitalize">{invitation.role}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Invited by:</span>
+                <span className="font-medium">{invitation.inviterEmail}</span>
+              </div>
+            </div>
+          )}
+
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <Button
+              onClick={handleAccept}
+              disabled={isAccepting || !invitation}
+              className="flex-1"
+            >
+              {isAccepting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Accepting...
+                </>
+              ) : (
+                'Accept Invitation'
+              )}
+            </Button>
+            <Button
+              onClick={handleReject}
+              variant="outline"
+              disabled={isAccepting || !invitation}
+              className="flex-1"
+            >
+              Decline
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+

package/src/app/login/page.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useState } from 'react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { authClient } from '@/lib/auth-client';
+
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const invitationId = searchParams.get('invitation');
+
+  // For OAuth, we need the full URL to redirect back to the UI
+  const getFullCallbackURL = () => {
+    if (typeof window === 'undefined') return '/';
+    const baseURL = window.location.origin; // http://localhost:3000
+    // If there's a pending invitation, include it in callback
+    if (invitationId) {
+      return `${baseURL}/?invitation=${invitationId}`;
+    }
+    return `${baseURL}/`;
+  };
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [mode, setMode] = useState<'signin' | 'signup'>('signin');
+
+  // Check for OAuth/SSO errors in URL params (e.g., from provider redirects)
+  const urlError = searchParams.get('error');
+  const urlErrorDescription = searchParams.get('error_description');
+  const initialError = urlError ? `${urlErrorDescription || urlError}`.replace(/_/g, ' ') : null;
+
+  const [error, setError] = useState<string | null>(initialError);
+
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    name: '',
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result =
+        mode === 'signup'
+          ? await authClient.signUp.email({
+              email: formData.email,
+              password: formData.password,
+              name: formData.name,
+            })
+          : await authClient.signIn.email({
+              email: formData.email,
+              password: formData.password,
+            });
+
+      // Check if sign-in/sign-up failed
+      if (result?.error) {
+        setError(result.error.message || (mode === 'signup' ? 'Sign up failed' : 'Sign in failed'));
+        setIsLoading(false);
+        return;
+      }
+
+      // Redirect to invitation page if invitation param exists
+      if (invitationId) {
+        router.push(`/accept-invitation/${invitationId}`);
+      } else {
+        router.push('/');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Authentication failed');
+      setIsLoading(false);
+    }
+  };
+
+  const handleSsoSignIn = async (providerId: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await authClient.signIn.sso({
+        providerId,
+        callbackURL: getFullCallbackURL(),
+      });
+
+      // If we got here without redirecting, something went wrong
+      if (result?.error) {
+        setError(result.error.message || 'SSO sign in failed');
+        setIsLoading(false);
+      }
+    } catch (err) {
+      let errorMessage = 'SSO sign in failed';
+
+      if (err instanceof Error) {
+        errorMessage = err.message;
+      } else if (typeof err === 'object' && err !== null) {
+        const errorObj = err as any;
+        errorMessage = errorObj.message || errorObj.error || errorMessage;
+      }
+
+      setError(errorMessage);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-900">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold">
+            {mode === 'signin' ? 'Sign in' : 'Create account'}
+          </CardTitle>
+          <CardDescription>
+            {mode === 'signin'
+              ? 'Sign in to your account to continue'
+              : 'Create a new account to get started'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {mode === 'signup' && (
+              <div className="space-y-2">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="John Doe"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                required
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••"
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                required
+                disabled={isLoading}
+                minLength={8}
+              />
+              {mode === 'signup' && (
+                <p className="text-xs text-gray-500">Must be at least 8 characters</p>
+              )}
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {mode === 'signin' ? 'Signing in...' : 'Creating account...'}
+                </>
+              ) : mode === 'signin' ? (
+                'Sign in'
+              ) : (
+                'Create account'
+              )}
+            </Button>
+          </form>
+
+          {process.env.NEXT_PUBLIC_AUTH0_DOMAIN && (
+            <>
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Button
+                  variant="outline"
+                  onClick={() => handleSsoSignIn('auth0')}
+                  disabled={isLoading}
+                  className="w-full"
+                >
+                  <Image
+                    src="/assets/inkeep-icons/icon-blue.svg"
+                    alt="Inkeep"
+                    width={16}
+                    height={16}
+                    className="mr-2"
+                  />
+                  Inkeep
+                </Button>
+              </div>
+            </>
+          )}
+
+          <div className="text-center text-sm">
+            {mode === 'signin' ? (
+              <>
+                Don't have an account?{' '}
+                <button
+                  type="button"
+                  onClick={() => setMode('signup')}
+                  className="text-primary underline underline-offset-4 hover:text-primary/80"
+                  disabled={isLoading}
+                >
+                  Sign up
+                </button>
+              </>
+            ) : (
+              <>
+                Already have an account?{' '}
+                <button
+                  type="button"
+                  onClick={() => setMode('signin')}
+                  className="text-primary underline underline-offset-4 hover:text-primary/80"
+                  disabled={isLoading}
+                >
+                  Sign in
+                </button>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense
+      fallback={<div className="flex min-h-screen items-center justify-center">Loading...</div>}
+    >
+      <LoginForm />
+    </Suspense>
+  );
+}

package/src/app/no-organization/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useAuthSession } from '@/hooks/use-auth';
+import { authClient } from '@/lib/auth-client';
+
+export default function NoOrganizationPage() {
+  const router = useRouter();
+  const { user } = useAuthSession();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+    await authClient.signOut();
+    router.push('/login');
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-900">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>No Organization Access</CardTitle>
+          <CardDescription>You are not a member of any organization</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="rounded-md bg-yellow-50 p-4 dark:bg-yellow-900/20">
+            <div className="flex">
+              <div className="shrink-0">
+                <svg
+                  className="h-5 w-5 text-yellow-400"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <h3 className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                  Access Required
+                </h3>
+                <div className="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
+                  {isSigningOut ? (
+                    <p>Signing out...</p>
+                  ) : (
+                    <>
+                      <p>Your account ({user?.email}) is not associated with any organization.</p>
+                      <p className="mt-2">
+                        Please contact your organization administrator to request access.
+                      </p>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Button 
+              onClick={handleSignOut} 
+              variant="outline" 
+              className="w-full"
+              disabled={isSigningOut}
+            >
+              {isSigningOut ? 'Signing out...' : 'Sign Out'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}