fix: final adjustements

Author: astandrik

.github/copilot-instructions.md

@@ -19,6 +19,7 @@ This is a React-based monitoring and management interface for YDB clusters. The
 ## Critical Bug Prevention Patterns
 
 ### React Performance (MANDATORY)
+
 - **ALWAYS** use `useMemo` for expensive computations, object/array creation
 - **ALWAYS** use `useCallback` for functions in effect dependencies
 - **ALWAYS** memoize table columns, filtered data, computed values
@@ -27,18 +28,19 @@ This is a React-based monitoring and management interface for YDB clusters. The
 
 ```typescript
 // ✅ REQUIRED patterns
-const displaySegments = useMemo(() => 
-  segments.filter(segment => segment.visible), [segments]
-);
+const displaySegments = useMemo(() => segments.filter((segment) => segment.visible), [segments]);
 const handleClick = useCallback(() => {
   // logic
 }, [dependency]);
 
 // ✅ PREFER direct callbacks over useEffect
-const handleInputChange = useCallback((value: string) => {
-  setSearchTerm(value);
-  onSearchChange?.(value);
-}, [onSearchChange]);
+const handleInputChange = useCallback(
+  (value: string) => {
+    setSearchTerm(value);
+    onSearchChange?.(value);
+  },
+  [onSearchChange],
+);
 
 // ❌ AVOID unnecessary useEffect
 // useEffect(() => {
@@ -47,11 +49,13 @@ const handleInputChange = useCallback((value: string) => {
 ```
 
 ### Memory & Display Safety
+
 - **ALWAYS** provide fallback values: `Number(value) || 0`
 - **NEVER** allow division by zero: `capacity > 0 ? value/capacity : 0`
 - **ALWAYS** dispose Monaco Editor: `return () => editor.dispose();` in useEffect
 
 ### Security & Input Validation
+
 - **NEVER** expose authentication tokens in logs or console
 - **ALWAYS** validate user input before processing
 - **NEVER** skip error handling for async operations
@@ -137,19 +141,17 @@ const handleInputChange = useCallback((value: string) => {
 
 ```typescript
 // ✅ REQUIRED pattern for URL parameters
-const sortColumnSchema = z
-    .enum(['column1', 'column2', 'column3'])
-    .catch('column1');
+const sortColumnSchema = z.enum(['column1', 'column2', 'column3']).catch('column1');
 
 const SortOrderParam: QueryParamConfig<SortOrder[]> = {
-    encode: (value) => value ? encodeURIComponent(JSON.stringify(value)) : undefined,
-    decode: (value) => {
-        try {
-            return value ? JSON.parse(decodeURIComponent(value)) : [];
-        } catch {
-            return [];
-        }
-    },
+  encode: (value) => (value ? encodeURIComponent(JSON.stringify(value)) : undefined),
+  decode: (value) => {
+    try {
+      return value ? JSON.parse(decodeURIComponent(value)) : [];
+    } catch {
+      return [];
+    }
+  },
 };
 ```
 
@@ -159,6 +161,14 @@ const SortOrderParam: QueryParamConfig<SortOrder[]> = {
 - Time parsing: utilities in `src/utils/timeParsers/`
 - Query utilities: `src/utils/query.ts` for SQL/YQL helpers
 
+## Development Commands
+
+```bash
+npm run lint        # Run all linters before committing
+npm run typecheck   # TypeScript type checking
+npm run unused      # Find unused code
+```
+
 ## Before Making Changes
 
 - Run `npm run lint` and `npm run typecheck` before committing
@@ -173,3 +183,10 @@ const SortOrderParam: QueryParamConfig<SortOrder[]> = {
 - `window.api` - Access API methods in browser console
 - `window.ydbEditor` - Monaco editor instance
 - Enable request tracing with `DEV_ENABLE_TRACING_FOR_ALL_REQUESTS`
+
+## Environment Variables
+
+- `REACT_APP_BACKEND` - Backend URL for single-cluster mode
+- `REACT_APP_META_BACKEND` - Meta backend URL for multi-cluster mode
+- `PUBLIC_URL` - Base URL for static assets (use `.` for relative paths)
+- `GENERATE_SOURCEMAP` - Set to `false` for production builds

AGENTS.md

@@ -94,11 +94,13 @@ src/
 ## Critical Bug Prevention Patterns
 
 ### Memory Management
+
 - **ALWAYS** dispose Monaco Editor instances: `return () => editor.dispose();` in useEffect
 - **NEVER** allow memory leaks in long-running components
 - Clear timeouts and intervals in cleanup functions
 
 ### React Performance (MANDATORY)
+
 - **ALWAYS** use `useMemo` for expensive computations and object/array creation
 - **ALWAYS** use `useCallback` for functions passed to dependencies
 - **ALWAYS** memoize table columns, filtered data, and computed values
@@ -107,18 +109,19 @@ src/
 
 ```typescript
 // ✅ REQUIRED patterns
-const displaySegments = useMemo(() => 
-  segments.filter(segment => segment.visible), [segments]
-);
+const displaySegments = useMemo(() => segments.filter((segment) => segment.visible), [segments]);
 const handleClick = useCallback(() => {
   // logic
 }, [dependency]);
 
 // ✅ PREFER direct callbacks over useEffect
-const handleInputChange = useCallback((value: string) => {
-  setSearchTerm(value);
-  onSearchChange?.(value);
-}, [onSearchChange]);
+const handleInputChange = useCallback(
+  (value: string) => {
+    setSearchTerm(value);
+    onSearchChange?.(value);
+  },
+  [onSearchChange],
+);
 
 // ❌ AVOID unnecessary useEffect
 // useEffect(() => {
@@ -127,11 +130,13 @@ const handleInputChange = useCallback((value: string) => {
 ```
 
 ### Display Safety
+
 - **ALWAYS** provide fallback values: `Number(value) || 0`
 - **NEVER** allow division by zero: `capacity > 0 ? value/capacity : 0`
 - **ALWAYS** handle null/undefined data gracefully
 
 ### Security & Input Validation
+
 - **NEVER** expose authentication tokens in logs or console output
 - **ALWAYS** validate user input before processing
 - **NEVER** skip error handling for async operations
@@ -262,6 +267,31 @@ Complex modals use `@ebay/nice-modal-react` library. Simple dialogs use Gravity
 
 Uses React Router v5 hooks (`useHistory`, `useParams`, etc.). Always validate route params exist before using them.
 
+### URL Parameter Management
+
+- **PREFER** `use-query-params` over `redux-location-state` for new development
+- **ALWAYS** use Zod schemas for URL parameter validation with fallbacks
+- Use custom `QueryParamConfig` objects for encoding/decoding complex parameters
+- Use `z.enum([...]).catch(defaultValue)` pattern for safe parsing with fallbacks
+
+```typescript
+// ✅ PREFERRED pattern for URL parameters
+const sortColumnSchema = z.enum(['column1', 'column2', 'column3']).catch('column1');
+
+const SortOrderParam: QueryParamConfig<SortOrder[]> = {
+  encode: (value) => (value ? encodeURIComponent(JSON.stringify(value)) : undefined),
+  decode: (value) => {
+    try {
+      return value ? JSON.parse(decodeURIComponent(value)) : [];
+    } catch {
+      return [];
+    }
+  },
+};
+
+const [urlParam, setUrlParam] = useQueryParam('sort', SortOrderParam);
+```
+
 ### Critical Rules
 
 - **NEVER** call APIs directly - use `window.api.module.method()`
@@ -274,7 +304,6 @@ Uses React Router v5 hooks (`useHistory`, `useParams`, etc.). Always validate ro
 - **ALWAYS** follow i18n naming rules from `i18n-naming-ruleset.md`
 - **ALWAYS** use Zod schemas for URL parameter validation with fallbacks
 - **PREFER** `use-query-params` over `redux-location-state` for new URL parameter handling
-- **PREFER** `use-query-params` over `redux-location-state` for new URL parameter handling
 
 ### Debugging Tips