@inkeep/agents-manage-ui 0.34.1 → 0.35.1

package/src/app/login/page.tsx

@@ -0,0 +1,266 @@
+'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 { useAuthClient } from '@/lib/auth-client';
+
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const invitationId = searchParams.get('invitation');
+  const authClient = useAuthClient();
+
+  // 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,81 @@
+'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 { useAuthClient } from '@/lib/auth-client';
+
+export default function NoOrganizationPage() {
+  const router = useRouter();
+  const { user } = useAuthSession();
+  const authClient = useAuthClient();
+  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>
+  );
+}

package/src/app/page.tsx

@@ -1,14 +1,110 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+import { useAuthSession } from '@/hooks/use-auth';
+import { getPendingInvitations } from '@/lib/actions/invitations';
+import { getUserOrganizations } from '@/lib/actions/user-organizations';
 import { DEFAULT_TENANT_ID } from '@/lib/runtime-config/defaults';
-import { redirectToProject } from '@/lib/utils/project-redirect';
 
-export const dynamic = 'force-dynamic';
+function HomeContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, session, isLoading, error } = useAuthSession();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const tenantId = process.env.NEXT_PUBLIC_TENANT_ID || DEFAULT_TENANT_ID;
+
+  useEffect(() => {
+    async function handleRedirect() {
+      // Prevent multiple redirects
+      if (isRedirecting) return;
+
+      // Auth disabled - go straight to default tenant
+      if (!isLoading && error?.status === 404 && !user) {
+        setIsRedirecting(true);
+        router.push(`/${tenantId}/projects`);
+        return;
+      }
+
+      // Still loading session
+      if (isLoading) return;
+
+      // Check for invitation in URL
+      const invitationId = searchParams.get('invitation');
+      if (invitationId) {
+        setIsRedirecting(true);
+        router.push(`/accept-invitation/${invitationId}`);
+        return;
+      }
+
+      // Not authenticated - redirect to login
+      if (!user) {
+        setIsRedirecting(true);
+        router.push('/login');
+        return;
+      }
+
+      // Authenticated - find their organization
+      try {
+        const userOrganizations = await getUserOrganizations(user.id);
 
-async function Home() {
-  if (!process.env.TENANT_ID) {
-    console.warn(`TENANT_ID is not set, using default tenantId: ${DEFAULT_TENANT_ID}`);
-  }
-  const tenantId = process.env.TENANT_ID || DEFAULT_TENANT_ID;
-  await redirectToProject(tenantId, 'agents');
+        // No organizations - check for pending invitations
+        if (!userOrganizations || userOrganizations.length === 0) {
+          const pendingInvitations = await getPendingInvitations(user.email);
+
+          if (pendingInvitations.length > 0) {
+            setIsRedirecting(true);
+            router.push(`/accept-invitation/${pendingInvitations[0].id}`);
+            return;
+          }
+
+          // No invitations either - show no-org page
+          setIsRedirecting(true);
+          router.push('/no-organization');
+          return;
+        }
+
+        // Determine which organization to use
+        let organizationId = tenantId;
+
+        if (session?.activeOrganizationId) {
+          organizationId = session.activeOrganizationId;
+        } else if (userOrganizations.length > 0) {
+          organizationId = userOrganizations[0].organizationId;
+        }
+
+        // Redirect to projects page
+        setIsRedirecting(true);
+        router.push(`/${organizationId}/projects`);
+      } catch (error) {
+        console.error(error);
+        setIsRedirecting(true);
+        router.push('/login');
+      }
+    }
+
+    handleRedirect();
+  }, [user, session, isLoading, error, isRedirecting, tenantId, searchParams, router]);
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="size-4 animate-spin text-muted-foreground" />
+    </div>
+  );
 }
 
-export default Home;
+export default function Home() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-full">
+          <Loader2 className="size-4 animate-spin text-muted-foreground" />
+        </div>
+      }
+    >
+      <HomeContent />
+    </Suspense>
+  );
+}

package/src/components/agent/agent.tsx

@@ -778,6 +778,17 @@ export const Agent: FC<AgentProps> = ({
       }
       return true;
     }
+    
+    // Handle non-validation errors (permission, auth, not found, server errors)
+    const nonValidationErrors = ['forbidden', 'unauthorized', 'not_found', 'internal_server_error', 'bad_request'];
+    if (res.code && nonValidationErrors.includes(res.code)) {
+      toast.error(res.error || 'An error occurred while saving the agent', {
+        closeButton: true,
+      });
+      return false;
+    }
+    
+    // Handle validation errors (422 status - unprocessable_entity)
     try {
       const errorSummary = parseAgentValidationErrors(res.error);
       setErrors(errorSummary);

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -79,15 +79,15 @@ export function ArtifactComponentForm({
           return;
         }
         toast.success('Artifact updated.');
-      } else {
-        const res = await createArtifactComponentAction(tenantId, projectId, payload);
-        if (!res.success) {
-          toast.error(res.error || 'Failed to create artifact');
-          return;
-        }
-        toast.success('Artifact created.');
-        router.push(`/${tenantId}/projects/${projectId}/artifacts`);
+        return;
+      }
+      const res = await createArtifactComponentAction(tenantId, projectId, payload);
+      if (!res.success) {
+        toast.error(res.error || 'Failed to create artifact');
+        return;
       }
+      toast.success('Artifact created.');
+      router.push(`/${tenantId}/projects/${projectId}/artifacts`);
     } catch (error) {
       console.error('Error submitting artifact:', error);
       const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred.';
@@ -98,7 +98,7 @@ export function ArtifactComponentForm({
   return (
     <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="max-w-3xl mx-auto py-4 space-y-8">
           <GenericInput
             control={form.control}
             name="name"
@@ -114,9 +114,8 @@ export function ArtifactComponentForm({
             disabled={!!id}
             isRequired
             description={
-              id
-                ? ''
-                : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
+              !id &&
+              'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
             }
           />
           <GenericTextarea
@@ -133,6 +132,8 @@ export function ArtifactComponentForm({
             label="Properties"
             placeholder="Enter a valid JSON Schema with inPreview flags, or leave empty to save entire tool result..."
             description="Optional: Define specific fields with inPreview flags, or leave empty to capture the complete tool response."
+            uri="custom-json-schema-artifact-component.json"
+            hasInPreview
           />
           <div className="flex w-full justify-between">
             <Button type="submit" disabled={isSubmitting}>

package/src/components/artifact-components/form/validation.ts

@@ -6,8 +6,8 @@ const jsonSchemaValidation = () =>
   z
     .union([z.string(), z.null(), z.undefined()])
     .transform((value, ctx) => {
-      if (!value || value === '' || value === null) {
-        return undefined;
+      if (!value) {
+        return;
       }
 
       try {
@@ -22,7 +22,7 @@ const jsonSchemaValidation = () =>
           });
           return z.NEVER;
         }
-
+        parsed.required ??= [];
         return parsed;
       } catch (error) {
         ctx.addIssue({