Feat: add skills space to context engine (#13908)

### What problem does this PR solve?

issue #13714

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:pointer-events-none',
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-bg-base rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-bg-base rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:pointer-events-none',
   {
     variants: {
       side: {

web/src/components/ui/slider.tsx

@@ -17,15 +17,15 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-colors-background-inverse-strong">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-border-button">
+      <SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
     </SliderPrimitive.Track>
 
     <SliderPrimitive.Thumb
       className="
-      block h-5 w-5 rounded-full border-2 border-primary bg-colors-text-core-standard transition-colors ring-offset-background
+      block h-2.5 w-2.5 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors
       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2
-      disabled:pointer-events-none disabled:opacity-50"
+      disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
     />
   </SliderPrimitive.Root>
 ));

web/src/components/ui/spin.tsx

@@ -26,13 +26,16 @@ export const Spin: React.FC<SpinProps> = ({
   className,
   children,
 }) => {
+  // When used without children (standalone), don't show mask background
+  const hasChildren = React.Children.count(children) > 0;
+
   return (
     <div
       className={cn(
         'relative',
         {
           'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-text-primary/40 after:transition-all after:duration-300 h-full w-full':
-            spinning,
+            spinning && hasChildren,
         },
         className,
       )}
@@ -40,7 +43,9 @@ export const Spin: React.FC<SpinProps> = ({
       {spinning && (
         <div
           className={cn(
-            'absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30',
+            hasChildren
+              ? 'absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30'
+              : 'flex items-center justify-center',
             minSizeClasses[size],
           )}
         >