chore: nits & add shadcn alert component

ui/admin/app/components/agent/FirstModelProviderBanner.tsx

@@ -1,7 +1,7 @@
 import { Link } from "@remix-run/react";
 import { $path } from "remix-routes";
 
-import { TypographyP } from "~/components/Typography";
+import { TypographyH3, TypographyP } from "~/components/Typography";
 import { OttoLogo } from "~/components/branding/OttoLogo";
 import { Button } from "~/components/ui/button";
 
@@ -18,9 +18,9 @@ export function FirstModelProviderBanner() {
                         }}
                     />
                     <div className="flex flex-col pl-48">
-                        <TypographyP className="font-semibold text-2xl mb-0.5">
+                        <TypographyH3 className="mb-0.5">
                             Ready to create your first Agent?
-                        </TypographyP>
+                        </TypographyH3>
                         <TypographyP className="text-sm font-light mb-2">
                             You&apos;re almost there! To start creating or using{" "}
                             agents, you&apos;ll need access to a LLM (Large

ui/admin/app/components/model-providers/ModelProviderConfigure.tsx

@@ -4,9 +4,9 @@ import useSWR from "swr";
 import { ModelProvider, ModelProviderConfig } from "~/lib/model/modelProviders";
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
-import { DefaultModelAliasForm } from "~/components/composed/DefaultModelAliasForm";
 import { ModelProviderForm } from "~/components/model-providers/ModelProviderForm";
 import { ModelProviderIcon } from "~/components/model-providers/ModelProviderIcon";
+import { DefaultModelAliasForm } from "~/components/model/shared/DefaultModelAliasForm";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 import {

ui/admin/app/components/model-providers/ModelProviderForm.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Link } from "@remix-run/react";
 import { CircleHelpIcon } from "lucide-react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -18,6 +17,8 @@ import { ControlledInput } from "~/components/form/controlledInputs";
 import { ModelProviderConfigurationLinks } from "~/components/model-providers/constants";
 import { Button } from "~/components/ui/button";
 import { Form } from "~/components/ui/form";
+import { Link } from "~/components/ui/link";
+import { ScrollArea } from "~/components/ui/scroll-area";
 import { Separator } from "~/components/ui/separator";
 import { useAsync } from "~/hooks/useAsync";
 
@@ -157,7 +158,7 @@ export function ModelProviderForm({
         modelProvider.id === "azure-openai-model-provider";
     return (
         <div className="flex flex-col">
-            <div className="flex flex-col gap-4 p-4 max-h-[50vh] overflow-y-auto">
+            <ScrollArea className="h-[50vh] flex flex-col gap-4 p-4">
                 <TypographyH4 className="font-semibold text-md">
                     Required Configuration
                 </TypographyH4>
@@ -192,17 +193,18 @@ export function ModelProviderForm({
                             {ModelProviderConfigurationLinks[
                                 modelProvider.id
                             ] ? (
-                                <Button variant="ghost" size="icon">
-                                    <Link
-                                        to={
-                                            ModelProviderConfigurationLinks[
-                                                modelProvider.id
-                                            ]
-                                        }
-                                    >
-                                        <CircleHelpIcon className="text-muted-foreground" />
-                                    </Link>
-                                </Button>
+                                <Link
+                                    as="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    to={
+                                        ModelProviderConfigurationLinks[
+                                            modelProvider.id
+                                        ]
+                                    }
+                                >
+                                    <CircleHelpIcon className="text-muted-foreground" />
+                                </Link>
                             ) : null}
                         </div>
                         <NameDescriptionForm
@@ -215,7 +217,7 @@ export function ModelProviderForm({
                         />
                     </>
                 ) : null}
-            </div>
+            </ScrollArea>
 
             <div className="flex justify-end px-6 py-4 border-t border-t-secondary">
                 <Button

ui/admin/app/components/model-providers/ModelProviderLists.tsx

@@ -7,7 +7,7 @@ import { ModelProviderConfigure } from "~/components/model-providers/ModelProvid
 import { ModelProviderIcon } from "~/components/model-providers/ModelProviderIcon";
 import { ModelProviderLinks } from "~/components/model-providers/constants";
 import { Badge } from "~/components/ui/badge";
-import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import { Card, CardContent } from "~/components/ui/card";
 
 export function ModelProviderList({
     modelProviders,
@@ -19,8 +19,7 @@ export function ModelProviderList({
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
                 {modelProviders.map((modelProvider) => (
                     <Card key={modelProvider.id}>
-                        <CardHeader className="pb-0 flex flex-row justify-end"></CardHeader>
-                        <CardContent className="flex flex-col items-center gap-4">
+                        <CardContent className="flex flex-col items-center gap-4 pt-6">
                             <Link to={ModelProviderLinks[modelProvider.id]}>
                                 <ModelProviderIcon
                                     modelProvider={modelProvider}

ui/admin/app/components/ui/alert.tsx

@@ -0,0 +1,64 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const alertVariants = cva(
+    "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+);
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn(
+            "mb-1 font-medium leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    >
+        {props.children}
+    </h5>
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

ui/admin/app/routes/_auth.model-providers.tsx

@@ -1,13 +1,14 @@
+import { CircleAlertIcon } from "lucide-react";
 import useSWR, { preload } from "swr";
 
 import { ModelProvider } from "~/lib/model/modelProviders";
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
 import { TypographyH2 } from "~/components/Typography";
-import { DefaultModelAliasFormDialog } from "~/components/composed/DefaultModelAliasForm";
-import { ModelProviderBanner } from "~/components/model-providers/ModelProviderBanner";
 import { ModelProviderList } from "~/components/model-providers/ModelProviderLists";
 import { CommonModelProviderIds } from "~/components/model-providers/constants";
+import { DefaultModelAliasFormDialog } from "~/components/model/shared/DefaultModelAliasForm";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 
 export async function clientLoader() {
     await preload(
@@ -65,7 +66,17 @@ export default function ModelProviders() {
                     <DefaultModelAliasFormDialog disabled={!configured} />
                 </div>
 
-                {configured ? null : <ModelProviderBanner />}
+                {configured ? null : (
+                    <Alert variant="default">
+                        <CircleAlertIcon className="w-4 h-4 !text-warning" />
+                        <AlertTitle>No Model Providers Configured!</AlertTitle>
+                        <AlertDescription>
+                            To use Otto&apos;s features, you&apos;ll need to set
+                            up a Model Provider. Select and configure one below
+                            to get started!
+                        </AlertDescription>
+                    </Alert>
+                )}
 
                 <div className="h-full flex flex-col gap-8 overflow-hidden">
                     <ModelProviderList modelProviders={modelProviders ?? []} />

ui/admin/app/routes/_auth.models.tsx

@@ -10,10 +10,10 @@ import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiServi
 
 import { TypographyH2 } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
-import { DefaultModelAliasFormDialog } from "~/components/composed/DefaultModelAliasForm";
 import { AddModel } from "~/components/model/AddModel";
 import { DeleteModel } from "~/components/model/DeleteModel";
 import { UpdateModelDialog } from "~/components/model/UpdateModel";
+import { DefaultModelAliasFormDialog } from "~/components/model/shared/DefaultModelAliasForm";
 import { Button } from "~/components/ui/button";
 import {
     Tooltip,