@inkeep/agents-manage-ui 0.33.2 → 0.34.1

package/src/components/agent/sidepane/nodes/model-selector.tsx

@@ -39,7 +39,9 @@ export function ModelSelector({
   canClear = true,
 }: ModelSelectorProps) {
   const [open, setOpen] = useState(false);
-  const [showCustomInput, setShowCustomInput] = useState<'openrouter' | 'gateway' | null>(null);
+  const [showCustomInput, setShowCustomInput] = useState<
+    'openrouter' | 'gateway' | 'nim' | 'custom' | null
+  >(null);
   const [customModelInput, setCustomModelInput] = useState('');
 
   const selectedModel = useMemo(() => {
@@ -57,6 +59,14 @@ export function ModelSelector({
         const modelName = value.replace('gateway/', '');
         return { value, label: modelName, prefix: 'gateway/' };
       }
+      if (value.startsWith('nim/')) {
+        const modelName = value.replace('nim/', '');
+        return { value, label: modelName, prefix: 'nim/' };
+      }
+      if (value.startsWith('custom/')) {
+        const modelName = value.replace('custom/', '');
+        return { value, label: modelName, prefix: 'custom/' };
+      }
       return { value, label: `${value} (custom)` };
     }
     return null;
@@ -153,7 +163,9 @@ export function ModelSelector({
                                 if (
                                   modelValue.includes('/') &&
                                   !modelValue.startsWith('openrouter/') &&
-                                  !modelValue.startsWith('gateway/')
+                                  !modelValue.startsWith('gateway/') &&
+                                  !modelValue.startsWith('nim/') &&
+                                  !modelValue.startsWith('custom/')
                                 ) {
                                   // Could be openrouter format, let user decide or add logic here
                                 }
@@ -175,6 +187,20 @@ export function ModelSelector({
                       );
                     })()}
                   </CommandEmpty>
+                  {/* Custom OpenAI-compatible */}
+                  <CommandGroup heading="Custom OpenAI-compatible">
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__custom__"
+                      onSelect={() => {
+                        setShowCustomInput('custom');
+                        setOpen(false);
+                        setCustomModelInput('');
+                      }}
+                    >
+                      Custom OpenAI-compatible ...
+                    </CommandItem>
+                  </CommandGroup>
                   {/* LLM Gateway options */}
                   <CommandGroup heading="LLM Gateway">
                     <CommandItem
@@ -199,6 +225,17 @@ export function ModelSelector({
                     >
                       Vercel AI Gateway ...
                     </CommandItem>
+                    <CommandItem
+                      className="flex items-center justify-between cursor-pointer text-foreground"
+                      value="__nim__"
+                      onSelect={() => {
+                        setShowCustomInput('nim');
+                        setOpen(false);
+                        setCustomModelInput('');
+                      }}
+                    >
+                      NVIDIA NIM ...
+                    </CommandItem>
                   </CommandGroup>
                   {/* Predefined models */}
                   {Object.entries(modelOptions).map(([provider, models]) => (
@@ -236,12 +273,20 @@ export function ModelSelector({
                 <div className="text-sm font-medium">
                   {showCustomInput === 'openrouter'
                     ? 'OpenRouter Model ID'
-                    : 'Vercel AI Gateway Model ID'}
+                    : showCustomInput === 'gateway'
+                      ? 'Vercel AI Gateway Model ID'
+                      : showCustomInput === 'nim'
+                        ? 'NVIDIA NIM Model ID'
+                        : 'Custom Model ID'}
                 </div>
                 <div className="text-xs text-muted-foreground">
                   {showCustomInput === 'openrouter'
                     ? 'Examples: anthropic/claude-3-5-sonnet, meta-llama/llama-3.1-405b-instruct'
-                    : 'Examples: openai/gpt-4o, anthropic/claude-3-5-sonnet'}
+                    : showCustomInput === 'gateway'
+                      ? 'Examples: openai/gpt-4o, anthropic/claude-3-5-sonnet'
+                      : showCustomInput === 'nim'
+                        ? 'Examples: nvidia/llama-3.3-nemotron-super-49b-v1.5, nvidia/nemotron-4-340b-instruct'
+                        : 'Examples: my-custom-model, llama-3-custom, custom-finetuned'}
                 </div>
                 <div className="flex gap-2 items-center">
                   <input
@@ -249,14 +294,24 @@ export function ModelSelector({
                     placeholder={
                       showCustomInput === 'openrouter'
                         ? 'anthropic/claude-3-5-sonnet'
-                        : 'openai/gpt-4o'
+                        : showCustomInput === 'gateway'
+                          ? 'openai/gpt-4o'
+                          : showCustomInput === 'nim'
+                            ? 'nvidia/llama-3.3-nemotron-super-49b-v1.5'
+                            : 'my-custom-model'
                     }
                     value={customModelInput}
                     onChange={(e) => setCustomModelInput(e.target.value)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' && customModelInput.trim()) {
                         const prefix =
-                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                          showCustomInput === 'openrouter'
+                            ? 'openrouter/'
+                            : showCustomInput === 'gateway'
+                              ? 'gateway/'
+                              : showCustomInput === 'nim'
+                                ? 'nim/'
+                                : 'custom/';
                         onValueChange?.(`${prefix}${customModelInput.trim()}`);
                         setShowCustomInput(null);
                         setCustomModelInput('');
@@ -273,7 +328,13 @@ export function ModelSelector({
                     onClick={() => {
                       if (customModelInput.trim()) {
                         const prefix =
-                          showCustomInput === 'openrouter' ? 'openrouter/' : 'gateway/';
+                          showCustomInput === 'openrouter'
+                            ? 'openrouter/'
+                            : showCustomInput === 'gateway'
+                              ? 'gateway/'
+                              : showCustomInput === 'nim'
+                                ? 'nim/'
+                                : 'custom/';
                         onValueChange?.(`${prefix}${customModelInput.trim()}`);
                         setShowCustomInput(null);
                         setCustomModelInput('');

package/src/components/agents/delete-agent-confirmation.tsx

@@ -17,11 +17,10 @@ export function DeleteAgentConfirmation({
   agentName,
   setIsOpen,
 }: DeleteAgentConfirmationProps) {
-  const params = useParams();
-  const { tenantId, projectId } = params as {
+  const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
-  };
+  }>();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async () => {

package/src/components/form/json-schema-builder.tsx

@@ -19,7 +19,6 @@ import {
   fieldsToJsonSchema,
   findFieldById,
   type JsonSchemaStateData,
-  jsonSchemaStore,
   parseFieldsFromJson,
   Types,
   type TypeValues,
@@ -27,6 +26,7 @@ import {
   useJsonSchemaStore,
 } from '@/features/agent/state/json-schema';
 import { cn } from '@/lib/utils';
+import { useDidUpdate } from '@/hooks/use-did-update';
 import { ArrayIcon, BooleanIcon, EnumIcon, NumberIcon, ObjectIcon, StringIcon } from '../../icons';
 
 const INDENT_PX = 24;
@@ -235,18 +235,20 @@ export const JsonSchemaBuilder: FC<{ value: string; onChange: (newValue: string)
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only on mount
   useEffect(() => {
     setFields(parseFieldsFromJson(value));
-    return () => {
-      const root: FieldObject = {
-        id: '__root__',
-        type: 'object',
-        properties: jsonSchemaStore.getState().fields,
-      };
-      const schema = fieldsToJsonSchema(root);
-      const serialized = JSON.stringify(schema, null, 2);
-      onChange(serialized);
-    };
   }, []);
 
+  // Calls only on update to avoid race condition with above useEffect
+  useDidUpdate(() => {
+    const root: FieldObject = {
+      id: '__root__',
+      type: 'object',
+      properties: fields,
+    };
+    const schema = fieldsToJsonSchema(root);
+    const serialized = JSON.stringify(schema, null, 2);
+    onChange(serialized);
+  }, [fields, onChange]);
+
   return (
     <>
       <Table>

package/src/components/projects/delete-project-confirmation.tsx

@@ -20,8 +20,7 @@ export function DeleteProjectConfirmation({
   setIsOpen,
   isOpen,
 }: DeleteProjectConfirmationProps) {
-  const params = useParams();
-  const { tenantId } = params as { tenantId: string };
+  const { tenantId } = useParams<{ tenantId: string }>();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleDelete = async () => {

package/src/components/sidebar-nav/app-sidebar-provider.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { type FC, type ReactNode, useState } from 'react';
+import { AppSidebar } from '@/components/sidebar-nav/app-sidebar';
+import { SidebarProvider } from '@/components/ui/sidebar';
+
+export const AppSidebarProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isSidebarHoverOpen, setIsSidebarHoverOpen] = useState(false);
+  const isOpen = isSidebarOpen || isSidebarHoverOpen;
+
+  return (
+    <SidebarProvider
+      style={{
+        '--sidebar-width': 'calc(var(--spacing) * 62)',
+        '--header-height': 'calc(var(--spacing) * 12)',
+      }}
+      open={isOpen}
+      onOpenChange={setIsSidebarOpen}
+    >
+      <AppSidebar open={isOpen} setOpen={setIsSidebarHoverOpen} />
+      {children}
+    </SidebarProvider>
+  );
+};

package/src/components/sidebar-nav/{sidebar-nav.tsx → app-sidebar.tsx}

@@ -15,7 +15,7 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import type * as React from 'react';
+import { type ComponentProps, type Dispatch, type FC, useCallback } from 'react';
 import { MCPIcon } from '@/components/icons/mcp-icon';
 import { NavGroup } from '@/components/sidebar-nav/nav-group';
 import { ProjectSwitcher } from '@/components/sidebar-nav/project-switcher';
@@ -25,12 +25,11 @@ import {
   SidebarFooter,
   SidebarHeader,
   SidebarMenuButton,
-  SidebarRail,
-  useSidebar,
 } from '@/components/ui/sidebar';
 import { DOCS_BASE_URL } from '@/constants/page-descriptions';
 import { InkeepLogo } from '@/icons';
 import { cn } from '@/lib/utils';
+import { throttle } from '@/lib/utils/throttle';
 import type { NavItemProps } from './nav-item';
 
 const bottomNavItems: NavItemProps[] = [
@@ -47,9 +46,13 @@ const bottomNavItems: NavItemProps[] = [
   },
 ];
 
-export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
+interface AppSidebarProps extends ComponentProps<typeof Sidebar> {
+  open: boolean;
+  setOpen: Dispatch<boolean>;
+}
+
+export const AppSidebar: FC<AppSidebarProps> = ({ open, setOpen, ...props }) => {
   const { tenantId, projectId } = useParams<{ tenantId: string; projectId?: string }>();
-  const { open } = useSidebar();
 
   const topNavItems: NavItemProps[] = projectId
     ? [
@@ -107,8 +110,21 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
         },
       ];
 
+  const handleHover: NonNullable<ComponentProps<'div'>['onMouseEnter']> = useCallback(
+    throttle(200, (event) => {
+      setOpen(event.type === 'mouseenter');
+    }),
+    []
+  );
+
   return (
-    <Sidebar collapsible="icon" variant="inset" {...props}>
+    <Sidebar
+      collapsible="icon"
+      variant="inset"
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHover}
+      {...props}
+    >
       <SidebarHeader>
         <SidebarMenuButton asChild>
           <Link href={`/${tenantId}/projects`}>
@@ -132,7 +148,6 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
           <ProjectSwitcher />
         </SidebarFooter>
       )}
-      <SidebarRail />
     </Sidebar>
   );
-}
+};

package/src/components/sidebar-nav/project-switcher.tsx

@@ -97,7 +97,7 @@ export const ProjectSwitcher: FC = () => {
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />
-        <DropdownMenuItem onSelect={handleCreateProject}>
+        <DropdownMenuItem className="font-mono uppercase" onSelect={handleCreateProject}>
           <Plus />
           Create Project
         </DropdownMenuItem>

package/src/components/theme-toggle.tsx

@@ -14,8 +14,8 @@ import {
 type ThemeValue = 'dark' | 'light' | 'system';
 
 const ThemeMap: Record<ThemeValue, FC<ComponentProps<'svg'>>> = {
-  dark: Moon,
   light: Sun,
+  dark: Moon,
   system: Monitor,
 };
 

package/src/components/traces/filters/agent-filter.tsx

@@ -8,15 +8,15 @@ import { getAllAgentsAction } from '@/lib/actions/agent-full';
 import { FilterTriggerComponent } from './filter-trigger';
 
 interface AgentFilterProps {
-  onSelect: (value: string | undefined) => void;
+  onSelect: (value?: string) => void;
   selectedValue: string | undefined;
 }
 
 export const AgentFilter = ({ onSelect, selectedValue }: AgentFilterProps) => {
-  const { tenantId, projectId } = useParams() as {
+  const { tenantId, projectId } = useParams<{
     tenantId: string;
     projectId: string;
-  };
+  }>();
   const [agentOptions, setAgentOptions] = useState<OptionType[]>([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {

package/src/components/traces/traces-overview.tsx

@@ -31,8 +31,7 @@ interface TracesOverviewProps {
 
 export function TracesOverview({ refreshKey }: TracesOverviewProps) {
   const router = useRouter();
-  const params = useParams();
-  const projectId = params.projectId;
+  const { tenantId, projectId } = useParams();
   const searchParams = useSearchParams();
   const {
     timeRange: selectedTimeRange,
@@ -49,8 +48,8 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
   const { isLoading: isSignozConfigLoading, configError: signozConfigError } = useSignozConfig();
 
   const [selectedAgent, setSelectedAgent] = useState<string | undefined>(undefined);
-  const [searchQuery, setSearchQuery] = useState<string>('');
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
   const [availableSpanNames, setAvailableSpanNames] = useState<string[]>([]);
   const [spanNamesLoading, setSpanNamesLoading] = useState(false);
   const [activityData, setActivityData] = useState<Array<{ date: string; count: number }>>([]);
@@ -397,7 +396,7 @@ export function TracesOverview({ refreshKey }: TracesOverviewProps) {
               Icon={SparklesIcon}
               onClick={() => {
                 const current = new URLSearchParams(searchParams.toString());
-                const href = `/${params.tenantId}/projects/${projectId}/traces/ai-calls?${current.toString()}`;
+                const href = `/${tenantId}/projects/${projectId}/traces/ai-calls?${current.toString()}`;
                 router.push(href);
               }}
             />

package/src/components/ui/dropdown-menu.tsx

@@ -61,7 +61,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/ui/radio-group.tsx

@@ -21,7 +21,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-item"
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary',
         className
       )}
       {...props}
@@ -30,7 +30,7 @@ function RadioGroupItem({
         data-slot="radio-indicator"
         className="flex items-center justify-center"
       >
-        <Circle className="size-2.5 fill-current text-current" />
+        <Circle className="size-2.5 fill-primary text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

package/src/features/agent/domain/serialize.ts

@@ -378,8 +378,8 @@ export function serializeAgentData(
         agent: ExtendedAgent,
         relationshipType: 'canTransferTo' | 'canDelegateTo',
         targetId: string,
-        isExternal: boolean = false,
-        isTeamAgent: boolean = false,
+        isExternal = false,
+        isTeamAgent = false,
         headers?: Record<string, string>,
         relationshipId?: string
       ) => {