@inkeep/agents-manage-ui 0.26.1 → 0.26.2

package/src/components/agent/sidepane/nodes/function-tool-node-editor.tsx

@@ -110,7 +110,7 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   );
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <InputField
         ref={(el) => setFieldRef('name', el)}
         id="function-tool-name"
@@ -135,31 +135,29 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
         isRequired
         maxHeight="max-h-32"
       />
+      <div className="space-y-2">
+        <ExpandableTextArea
+          id="function-tool-code"
+          label="Code"
+          value={code}
+          onChange={handleCodeChange}
+          placeholder="Enter function code here..."
+          data-invalid={getFieldError('code') ? '' : undefined}
+          isRequired
+          className="font-mono text-sm data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
+        />
+        <p className="text-xs text-muted-foreground">
+          JavaScript function code to be executed by the tool. The function will receive arguments
+          based on the input schema and should return a result.
+        </p>
 
-      <ExpandableTextArea
-        id="function-tool-code"
-        label="Code"
-        value={code}
-        onChange={handleCodeChange}
-        placeholder="Enter function code here..."
-        data-invalid={getFieldError('code') ? '' : undefined}
-        isRequired
-        className="font-mono text-sm data-invalid:border-red-300 data-invalid:focus-visible:border-red-300 data-invalid:focus-visible:ring-red-300"
-      />
-      <p className="text-sm text-muted-foreground">
-        JavaScript function code to be executed by the tool. The function will receive arguments
-        based on the input schema and should return a result.
-      </p>
-      {getFieldError('code') && <p className="text-sm text-red-600">{getFieldError('code')}</p>}
-
+        {getFieldError('code') && <p className="text-sm text-red-600">{getFieldError('code')}</p>}
+      </div>
       <div className="space-y-2">
         <div className="text-sm font-medium">
           Input Schema <span className="text-red-500">*</span>
         </div>
-        <p className="text-sm text-muted-foreground">
-          JSON schema defining the parameters that the function will receive. This defines the
-          structure and validation rules for the function's input arguments.
-        </p>
+
         <StandaloneJsonEditor
           value={inputSchema}
           onChange={handleInputSchemaChange}
@@ -178,6 +176,10 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   "required": ["param1"]
 }`}
         />
+        <p className="text-xs text-muted-foreground">
+          JSON schema defining the parameters that the function will receive. This defines the
+          structure and validation rules for the function's input arguments.
+        </p>
         {getFieldError('inputSchema') && (
           <p className="text-sm text-red-600">{getFieldError('inputSchema')}</p>
         )}
@@ -185,10 +187,7 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
 
       <div className="space-y-2">
         <div className="text-sm font-medium">Dependencies</div>
-        <p className="text-sm text-muted-foreground">
-          External npm packages that the function code requires. These packages will be installed
-          before executing the function.
-        </p>
+
         <StandaloneJsonEditor
           value={dependencies}
           onChange={handleDependenciesChange}
@@ -197,6 +196,10 @@ export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorP
   "lodash": "^4.17.21"
 }`}
         />
+        <p className="text-xs text-muted-foreground">
+          External npm packages that the function code requires. These packages will be installed
+          before executing the function.
+        </p>
         {getFieldError('dependencies') && (
           <p className="text-sm text-red-600">{getFieldError('dependencies')}</p>
         )}

package/src/components/api-keys/api-key-display.tsx

@@ -38,7 +38,7 @@ export function ApiKeyDisplay({ apiKey, open, onClose }: ApiKeyDisplayProps) {
         </AlertDialogHeader>
         {apiKey && (
           <div className="min-w-0">
-            <div className="space-y-6">
+            <div className="space-y-8">
               <div className="min-w-0">
                 <div className="flex items-center justify-between mb-2">
                   <div className="text-sm font-medium">API Key</div>

package/src/components/api-keys/form/api-key-form.tsx

@@ -95,7 +95,7 @@ export function ApiKeyForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <GenericInput
           control={form.control}
           name="name"

package/src/components/api-keys/form/api-key-update-form.tsx

@@ -122,7 +122,7 @@ export function ApiKeyUpdateForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <GenericInput
           control={form.control}
           name="name"

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

@@ -140,7 +140,7 @@ export function ArtifactComponentForm({
             </Button>
             {id && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Artifact
                 </Button>
               </DialogTrigger>

package/src/components/credentials/views/edit-credential-form.tsx

@@ -199,7 +199,7 @@ export function EditCredentialForm({
               </Button>
             )}
             <DialogTrigger asChild>
-              <Button type="button" variant="secondary">
+              <Button type="button" variant="destructive-outline">
                 Delete Credential
               </Button>
             </DialogTrigger>

package/src/components/credentials/views/generic-auth-form.tsx

@@ -113,7 +113,7 @@ export function GenericAuthForm({
 
   const renderField = (field: FieldConfig) => {
     const isPrivateKey = field.key === 'private_key';
-    const label = `${field.label}${field.required ? ' *' : ''}`;
+    const label = field.label;
 
     if (field.component === 'textarea') {
       return (
@@ -122,6 +122,7 @@ export function GenericAuthForm({
             control={form.control}
             name={field.key}
             label={label}
+            isRequired={field.required}
             placeholder={field.placeholder}
             className={isPrivateKey ? 'font-mono text-sm min-h-[120px]' : 'min-h-[80px]'}
           />
@@ -136,6 +137,7 @@ export function GenericAuthForm({
           control={form.control}
           name={field.key}
           label={label}
+          isRequired={field.required}
           type={field.type}
           placeholder={field.placeholder}
           disabled={loading}
@@ -146,7 +148,7 @@ export function GenericAuthForm({
   };
 
   const renderSection = (section: FormSection, index: number) => (
-    <div key={index} className="space-y-4">
+    <div key={index} className="space-y-8">
       {section.title && (
         <div>
           <h3 className="text-lg font-medium">{section.title}</h3>
@@ -155,7 +157,6 @@ export function GenericAuthForm({
           )}
         </div>
       )}
-
       {section.fields.map(renderField)}
     </div>
   );
@@ -175,10 +176,10 @@ export function GenericAuthForm({
       </div>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
           {formConfig.sections.map(renderSection)}
 
-          <div className="flex gap-3 pt-4">
+          <div className="flex gap-3">
             <Button type="submit" disabled={loading}>
               {loading ? 'Creating Credential...' : 'Create Credential'}
             </Button>

package/src/components/credentials/views/nango-providers-grid.tsx

@@ -15,10 +15,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 interface NangoProvidersGridProps {
   providers: ApiProvider[];
-  error: string | null;
 }
 
-export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps) {
+export function NangoProvidersGrid({ providers }: NangoProvidersGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const { tenantId, projectId } = useParams<{
     tenantId: string;
@@ -85,17 +84,6 @@ export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps
     return providersWithSearchText.filter((provider) => provider.searchText.includes(query));
   }, [providersWithSearchText, searchQuery]);
 
-  if (error) {
-    return (
-      <div className="text-center p-8">
-        <p className="text-destructive">{error}</p>
-        <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
-          Try Again
-        </Button>
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-6">
       {/* Search bar */}

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

@@ -159,7 +159,7 @@ export function DataComponentForm({
             </Button>
             {id && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Component
                 </Button>
               </DialogTrigger>

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -16,6 +16,15 @@ import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
+const StyledTabsTrigger = (props: React.ComponentProps<typeof TabsTrigger>) => {
+  return (
+    <TabsTrigger
+      {...props}
+      className="bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2"
+    />
+  );
+};
+
 interface ComponentPreviewGeneratorProps {
   tenantId: string;
   projectId: string;
@@ -166,15 +175,20 @@ export function ComponentPreviewGenerator({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Component Preview</h3>
+        <div className="space-y-2">
+          <h3 className="text-md font-medium">Component Preview</h3>
           <p className="text-sm text-muted-foreground">
-            Generate a React/Tailwind component based on your schema
+            Generate a React/Tailwind component based on your schema.
           </p>
         </div>
         <div className="flex gap-2">
           {!hasPreview && (
-            <Button onClick={() => generatePreview()} disabled={isGenerating} className="gap-2">
+            <Button
+              onClick={() => generatePreview()}
+              disabled={isGenerating}
+              size="sm"
+              className="gap-2"
+            >
               {isGenerating ? (
                 <>
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -192,7 +206,12 @@ export function ComponentPreviewGenerator({
             <>
               <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant="outline" disabled={isDeleting || isGenerating} className="gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isDeleting || isGenerating}
+                    className="gap-2 font-mono uppercase"
+                  >
                     {isGenerating ? (
                       <>
                         <Loader2 className="h-4 w-4 animate-spin" />
@@ -221,28 +240,27 @@ export function ComponentPreviewGenerator({
                         className="mt-2 min-h-[100px]"
                       />
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex justify-end gap-2">
                       <Button
                         size="sm"
-                        onClick={async () => {
+                        variant="outline"
+                        onClick={() => {
                           setIsPopoverOpen(false);
-                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
-                        disabled={isGenerating}
-                        className="flex-1"
                       >
-                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
+                        Cancel
                       </Button>
                       <Button
                         size="sm"
-                        variant="outline"
-                        onClick={() => {
+                        onClick={async () => {
                           setIsPopoverOpen(false);
+                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
+                        disabled={isGenerating}
                       >
-                        Cancel
+                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
                       </Button>
                     </div>
                   </div>
@@ -267,58 +285,57 @@ export function ComponentPreviewGenerator({
           )}
         </div>
       </div>
-
       {isGenerating && streamingCode && (
         <Streamdown
           isAnimating
           className="[&_[data-code-block-header=true]]:hidden [&_pre]:bg-muted/40!"
         >{`\`\`\`jsx\n${streamingCode}\`\`\``}</Streamdown>
       )}
-
       {isGenerating && !streamingCode && (
         <Card className="p-6">
-          <div className="flex flex-col items-center justify-center space-y-4">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-sm text-muted-foreground">Generating component preview...</p>
+          <div className="flex flex-row items-center justify-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground/70">Generating component preview...</p>
           </div>
         </Card>
       )}
-
       {hasPreview && !isGenerating && isComplete && preview && (
-        <Tabs defaultValue="preview" className="w-full">
-          <TabsList>
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-            <TabsTrigger value="data">Sample Data</TabsTrigger>
-          </TabsList>
-          <TabsContent value="preview">
-            <Card className="p-6">
-              <DynamicComponentRenderer code={previewCode} props={previewData} />
-            </Card>
-          </TabsContent>
-          <TabsContent value="code">
-            <CodeEditor
-              value={previewCode}
-              onChange={(newCode) => {
-                if (!preview) return;
-                const updatedPreview = { ...preview, code: newCode };
-                setPreview(updatedPreview);
-                onPreviewChanged?.(updatedPreview);
-              }}
-              language="jsx"
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-          <TabsContent value="data">
-            <JsonEditor
-              value={stringifiedData}
-              onChange={handleDataChange}
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-        </Tabs>
-      )}
+        <Card className="px-2 py-4 pt-0">
+          <Tabs defaultValue="preview" className="w-full">
+            <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-2">
+              <StyledTabsTrigger value="preview">Preview</StyledTabsTrigger>
+              <StyledTabsTrigger value="code">Code</StyledTabsTrigger>
+              <StyledTabsTrigger value="data">Sample Data</StyledTabsTrigger>
+            </TabsList>
 
+            <TabsContent value="preview">
+              <div className="p-4">
+                <DynamicComponentRenderer code={previewCode} props={previewData} />
+              </div>
+            </TabsContent>
+            <TabsContent value="code">
+              <CodeEditor
+                value={previewCode}
+                onChange={(newCode) => {
+                  if (!preview) return;
+                  const updatedPreview = { ...preview, code: newCode };
+                  setPreview(updatedPreview);
+                  onPreviewChanged?.(updatedPreview);
+                }}
+                language="jsx"
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+            <TabsContent value="data">
+              <JsonEditor
+                value={stringifiedData}
+                onChange={handleDataChange}
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+          </Tabs>
+        </Card>
+      )}
       {!hasPreview && !isGenerating && !isComplete && (
         <InfoCard>
           <p className="text-sm text-muted-foreground">No preview generated</p>

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -272,7 +272,7 @@ export function MCPServerForm({
             </Button>
             {mode === 'update' && tool && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Server
                 </Button>
               </DialogTrigger>

package/src/components/ui/sidebar.tsx

@@ -356,7 +356,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent',
         className
       )}
       {...props}