chore: migrate .cursorrules to .cursor/rules/ format

* chore: add tests for unique index on email and org_id in users table

* chore: choose one status code

* chore: choose one status code

* chore: move unique index test into passwordauthn folder

* chore: moved to existing suite, remove register

* chore: better name for file and vars

* chore: fix var name

* chore: fix var name

* chore: fix var name

.gitignore

@@ -229,5 +229,3 @@ cython_debug/
 pyrightconfig.json
 
 
-# cursor files
-frontend/.cursor/

deploy/docker-swarm/docker-compose.ha.yaml

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

frontend/.cursor/rules/testing-conventions.mdc

@@ -0,0 +1,74 @@
+---
+description: Core testing conventions - imports, rendering, MSW, interactions, queries
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# Testing Conventions
+
+## Imports
+
+Always import from the test harness, never directly from `@testing-library/react`:
+
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+```
+
+## Router
+
+Use the built-in router in `render`:
+
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+
+Only mock `useLocation` / `useParams` if the test depends on their values.
+
+## MSW
+
+Global MSW server runs automatically. Override per-test:
+
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) =>
+    res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+
+Keep large response fixtures in `mocks-server/__mockdata_`.
+
+## Interactions
+
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level events not covered by `userEvent` (e.g., scroll, resize). Wrap in `act(...)` if needed.
+- Always `await` interactions:
+
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+## Timers
+
+No global fake timers. Per-test only, for debounce/throttle:
+
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+
+Prefer accessible queries: `getByRole` > `findByRole` > `getByLabelText` > visible text > `data-testid` (last resort).
+
+## Anti-patterns
+
+- Never import from `@testing-library/react` directly
+- Never use global fake timers
+- Never wrap `render` in `act(...)`
+- Never mock infra dependencies locally (router, react-query)
+- Limit to 3-5 focused tests per file

frontend/.cursor/rules/testing-mock-strategy.mdc

@@ -0,0 +1,54 @@
+---
+description: When to use global vs local mocks in tests
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# Mock Strategy
+
+## Use Global Mocks For
+
+High-frequency dependencies (20+ test files):
+- Core infrastructure: react-router-dom, react-query, antd
+- Browser APIs: ResizeObserver, matchMedia, localStorage
+- Utility libraries: date-fns, lodash
+
+Available global mock files (from jest.config.ts):
+- `uplot` -> `__mocks__/uplotMock.ts`
+
+## Use Local Mocks For
+
+- Business logic dependencies (API endpoints, custom hooks, domain components)
+- Test-specific behavior (different data per test, error scenarios, loading states)
+
+## Decision Tree
+
+```
+Used in 20+ test files?
+  YES -> Global mock
+  NO  -> Business logic or test-specific?
+    YES -> Local mock
+    NO  -> Consider global if usage grows
+```
+
+## Correct Usage
+
+```ts
+// Global mocks are already available - just import
+import { useLocation } from 'react-router-dom';
+
+// Local mocks for business logic
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData),
+}));
+```
+
+## Anti-patterns
+
+```ts
+// Never re-mock globally mocked dependencies locally
+jest.mock('react-router-dom', () => ({ ... }));
+
+// Never put test-specific data in global mocks
+jest.mock('../api/tracesService', () => ({ getTraces: jest.fn(() => specificTestData) }));
+```

frontend/.cursor/rules/testing-type-safety.mdc

@@ -0,0 +1,54 @@
+---
+description: TypeScript type safety requirements for Jest tests
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# TypeScript Type Safety in Tests
+
+All Jest tests must be fully type-safe. Never use `any`.
+
+## Mock Function Typing
+
+```ts
+// Use jest.mocked for module mocks
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+
+// Use jest.MockedFunction for standalone mocks
+const mockFetch = jest.fn() as jest.MockedFunction<(id: number) => Promise<User>>;
+```
+
+## Mock Data
+
+Define interfaces for all mock data:
+
+```ts
+const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+
+const mockProps: ComponentProps = {
+  title: 'Test',
+  data: [mockUser],
+  onSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+};
+```
+
+## Hook Mocking Pattern
+
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */);
+```
+
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## Checklist
+
+- All mock functions use `jest.MockedFunction<T>` or `jest.mocked()`
+- All mock data has proper interfaces
+- No `any` types in test files
+- Component props are typed
+- API response types are defined

frontend/.cursorrules

@@ -1,484 +0,0 @@
-# Persona
-You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
-
-# Auto-detect TypeScript Usage
-Check for TypeScript in the project through tsconfig.json or package.json dependencies.
-Adjust syntax based on this detection.
-
-# TypeScript Type Safety for Jest Tests
-**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
-
-**Type Safety Requirements:**
-- Use proper TypeScript interfaces for all mock data
-- Type all Jest mock functions with `jest.MockedFunction<T>`
-- Use generic types for React components and hooks
-- Define proper return types for mock functions
-- Use `as const` for literal types when needed
-- Avoid `any` type – use proper typing instead
-
-# Unit Testing Focus
-Focus on critical functionality (business logic, utility functions, component behavior)
-Mock dependencies (API calls, external modules) before imports
-Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
-Write maintainable tests with descriptive names grouped in describe blocks
-
-# Global vs Local Mocks
-**Use Global Mocks for:**
-- High-frequency dependencies (20+ test files)
-- Core infrastructure (react-router-dom, react-query, antd)
-- Standard implementations across the app
-- Browser APIs (ResizeObserver, matchMedia, localStorage)
-- Utility libraries (date-fns, lodash)
-
-**Use Local Mocks for:**
-- Business logic dependencies (5-15 test files)
-- Test-specific behavior (different data per test)
-- API endpoints with specific responses
-- Domain-specific components
-- Error scenarios and edge cases
-
-**Global Mock Files Available (from jest.config.ts):**
-- `uplot` → `__mocks__/uplotMock.ts`
-
-# Repo-specific Testing Conventions
-
-## Imports
-Always import from our harness:
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-```
-For API mocks:
-```ts
-import { server, rest } from 'mocks-server/server';
-```
-Do not import directly from `@testing-library/react`.
-
-## Router
-Use the router built into render:
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-Only mock `useLocation` / `useParams` if the test depends on them.
-
-## Hook Mocks
-Pattern:
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */ as any);
-```
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## MSW
-Global MSW server runs automatically.
-Override per-test:
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-Keep large responses in `mocks-server/__mockdata_`.
-
-## Interactions
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
-- Always await interactions:
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-```ts
-// Example: virtualized list scroll (no userEvent helper)
-const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
-scroller.scrollTop = targetScrollTop;
-act(() => { fireEvent.scroll(scroller); });
-```
-
-## Timers
-❌ No global fake timers.
-✅ Per-test only, for debounce/throttle:
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
-Fallback: visible text.
-Last resort: `data-testid`.
-
-# Example Test (using only configured global mocks)
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# Best Practices
-- **Critical Functionality**: Prioritize testing business logic and utilities
-- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
-- **Data Scenarios**: Always test valid, invalid, and edge cases
-- **Descriptive Names**: Make test intent clear
-- **Organization**: Group related tests in describe
-- **Consistency**: Match repo conventions
-- **Edge Cases**: Test null, undefined, unexpected values
-- **Limit Scope**: 3–5 focused tests per file
-- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
-- **No Any**: Enforce type safety
-
-# Example Test
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# TypeScript Type Safety Examples
-
-## Proper Mock Typing
-```ts
-// ✅ GOOD - Properly typed mocks
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-interface ApiResponse<T> {
-  data: T;
-  status: number;
-  message: string;
-}
-
-// Type the mock functions
-const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
-const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
-
-// Mock implementation with proper typing
-mockFetchUser.mockResolvedValue({
-  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
-  status: 200,
-  message: 'Success'
-});
-
-// ❌ BAD - Using any type
-const mockFetchUser = jest.fn() as any; // Don't do this
-```
-
-## React Component Testing with Types
-```ts
-// ✅ GOOD - Properly typed component testing
-interface ComponentProps {
-  title: string;
-  data: User[];
-  onUserSelect: (user: User) => void;
-  isLoading?: boolean;
-}
-
-const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
-  // Component implementation
-};
-
-describe('TestComponent', () => {
-  it('should render with proper props', () => {
-    // Arrange - Type the props properly
-    const mockProps: ComponentProps = {
-      title: 'Test Title',
-      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
-      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-      isLoading: false
-    };
-    
-    // Act
-    render(<TestComponent {...mockProps} />);
-    
-    // Assert
-    expect(screen.getByText('Test Title')).toBeInTheDocument();
-  });
-});
-```
-
-## Hook Testing with Types
-```ts
-// ✅ GOOD - Properly typed hook testing
-interface UseUserDataReturn {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
-const useUserData = (id: number): UseUserDataReturn => {
-  // Hook implementation
-};
-
-describe('useUserData', () => {
-  it('should return user data with proper typing', () => {
-    // Arrange
-    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-    mockFetchUser.mockResolvedValue({
-      data: mockUser,
-      status: 200,
-      message: 'Success'
-    });
-    
-    // Act
-    const { result } = renderHook(() => useUserData(1));
-    
-    // Assert
-    expect(result.current.user).toEqual(mockUser);
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-## Global Mock Type Safety
-```ts
-// ✅ GOOD - Type-safe global mocks
-// In __mocks__/routerMock.ts
-export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
-  pathname: '/traces',
-  search: '',
-  hash: '',
-  state: null,
-  key: 'test-key',
-  ...overrides,
-});
-
-// In test files
-const location = useLocation(); // Properly typed from global mock
-expect(location.pathname).toBe('/traces');
-```
-
-# TypeScript Configuration for Jest
-
-## Required Jest Configuration
-```json
-// jest.config.ts
-{
-  "preset": "ts-jest/presets/js-with-ts-esm",
-  "globals": {
-    "ts-jest": {
-      "useESM": true,
-      "isolatedModules": true,
-      "tsconfig": "<rootDir>/tsconfig.jest.json"
-    }
-  },
-  "extensionsToTreatAsEsm": [".ts", ".tsx"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
-}
-```
-
-## TypeScript Jest Configuration
-```json
-// tsconfig.jest.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": ["jest", "@testing-library/jest-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
-  },
-  "include": [
-    "src/**/*",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "__mocks__/**/*"
-  ]
-}
-```
-
-## Common Type Safety Patterns
-
-### Mock Function Typing
-```ts
-// ✅ GOOD - Proper mock function typing
-const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
-const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
-
-// ❌ BAD - Using any
-const mockApiCall = jest.fn() as any;
-```
-
-### Generic Mock Typing
-```ts
-// ✅ GOOD - Generic mock typing
-interface MockApiResponse<T> {
-  data: T;
-  status: number;
-}
-
-const mockFetchData = jest.fn() as jest.MockedFunction<
-  <T>(endpoint: string) => Promise<MockApiResponse<T>>
->;
-
-// Usage
-mockFetchData<User>('/users').mockResolvedValue({
-  data: { id: 1, name: 'John' },
-  status: 200
-});
-```
-
-### React Testing Library with Types
-```ts
-// ✅ GOOD - Typed testing utilities
-import { render, screen, RenderResult } from '@testing-library/react';
-import { ComponentProps } from 'react';
-
-type TestComponentProps = ComponentProps<typeof TestComponent>;
-
-const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
-  const defaultProps: TestComponentProps = {
-    title: 'Test',
-    data: [],
-    onSelect: jest.fn(),
-    ...props
-  };
-  
-  return render(<TestComponent {...defaultProps} />);
-};
-```
-
-### Error Handling with Types
-```ts
-// ✅ GOOD - Typed error handling
-interface ApiError {
-  message: string;
-  code: number;
-  details?: Record<string, unknown>;
-}
-
-const mockApiError: ApiError = {
-  message: 'API Error',
-  code: 500,
-  details: { endpoint: '/users' }
-};
-
-mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
-```
-
-## Type Safety Checklist
-- [ ] All mock functions use `jest.MockedFunction<T>`
-- [ ] All mock data has proper interfaces
-- [ ] No `any` types in test files
-- [ ] Generic types are used where appropriate
-- [ ] Error types are properly defined
-- [ ] Component props are typed
-- [ ] Hook return types are defined
-- [ ] API response types are defined
-- [ ] Global mocks are type-safe
-- [ ] Test utilities are properly typed
-
-# Mock Decision Tree
-```
-Is it used in 20+ test files?
-├─ YES → Use Global Mock
-│   ├─ react-router-dom
-│   ├─ react-query
-│   ├─ antd components
-│   └─ browser APIs
-│
-└─ NO → Is it business logic?
-    ├─ YES → Use Local Mock
-    │   ├─ API endpoints
-    │   ├─ Custom hooks
-    │   └─ Domain components
-    │
-    └─ NO → Is it test-specific?
-        ├─ YES → Use Local Mock
-        │   ├─ Error scenarios
-        │   ├─ Loading states
-        │   └─ Specific data
-        │
-        └─ NO → Consider Global Mock
-            └─ If it becomes frequently used
-```
-
-# Common Anti-Patterns to Avoid
-
-❌ **Don't mock global dependencies locally:**
-```js
-// BAD - This is already globally mocked
-jest.mock('react-router-dom', () => ({ ... }));
-```
-
-❌ **Don't create global mocks for test-specific data:**
-```js
-// BAD - This should be local
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => specificTestData)
-}));
-```
-
-✅ **Do use global mocks for infrastructure:**
-```js
-// GOOD - Use global mock
-import { useLocation } from 'react-router-dom';
-```
-
-✅ **Do create local mocks for business logic:**
-```js
-// GOOD - Local mock for specific test needs
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData)
-}));
-```

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -10,6 +11,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -28,6 +31,15 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -72,29 +84,40 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const renderFooter = useCallback(
@@ -118,6 +141,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -139,7 +163,24 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="host-metrics-logs-list-container">{renderContent}</div>
+				<div
+					className="host-metrics-logs-list-container"
+					data-log-detail-ignore="true"
+				>
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,6 +13,9 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
+	logs?: ILog[];
+	onNavigateLog?: (log: ILog) => void;
+	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -15,6 +15,8 @@
 		}
 
 		.log-detail-drawer__title-right {
+			display: flex;
+			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -66,6 +68,10 @@
 		margin-bottom: 16px;
 	}
 
+	.log-detail-drawer__content {
+		height: 100%;
+	}
+
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -183,9 +189,115 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-200);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
+	.log-arrows {
+		display: flex;
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 6px;
+		padding: 2px 6px;
+		align-items: center;
+		margin-left: 8px;
+	}
+
+	.log-arrow-btn {
+		padding: 0;
+		min-width: 28px;
+		height: 28px;
+		border-radius: 4px;
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-ink-400);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
+	}
+
+	.log-arrow-btn[disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);
+
+		.log-arrow-btn:hover:not([disabled]) {
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
 }
 
 .lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -252,4 +364,33 @@
 			color: var(--text-ink-300);
 		}
 	}
+
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,8 +32,12 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
+	ArrowDown,
+	ArrowUp,
 	BarChart2,
 	Braces,
+	ChevronDown,
+	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -60,6 +64,9 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
+	logs,
+	onNavigateLog,
+	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -74,6 +81,78 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
+	// Handle clicks outside to close drawer, except on explicitly ignored regions
+	useEffect(() => {
+		const handleClickOutside = (e: MouseEvent): void => {
+			const target = e.target as HTMLElement;
+
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
+				return;
+			}
+
+			// Close the drawer for any other outside click
+			onClose?.(e as any);
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [onClose]);
+
+	// Keyboard navigation - handle up/down arrow keys
+	// Only listen when in OVERVIEW tab
+	useEffect(() => {
+		if (
+			!logs ||
+			!onNavigateLog ||
+			logs.length === 0 ||
+			selectedView !== VIEW_TYPES.OVERVIEW
+		) {
+			return;
+		}
+
+		const handleKeyDown = (e: KeyboardEvent): void => {
+			const currentIndex = logs.findIndex((l) => l.id === log.id);
+			if (currentIndex === -1) {
+				return;
+			}
+
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to previous log
+				if (currentIndex > 0) {
+					const prevLog = logs[currentIndex - 1];
+					onNavigateLog(prevLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(prevLog.id);
+					}
+				}
+			} else if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to next log
+				if (currentIndex < logs.length - 1) {
+					const nextLog = logs[currentIndex + 1];
+					onNavigateLog(nextLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(nextLog.id);
+					}
+				}
+			}
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
+
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -227,32 +306,87 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
+	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
+	const isPrevDisabled =
+		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
+	const isNextDisabled =
+		!logs ||
+		!onNavigateLog ||
+		logs.length === 0 ||
+		currentLogIndex === logs.length - 1;
+
+	type HandleNavigateLogParams = {
+		direction: 'next' | 'previous';
+	};
+
+	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
+		if (!logs || !onNavigateLog || currentLogIndex === -1) {
+			return;
+		}
+		if (direction === 'previous' && !isPrevDisabled) {
+			const prevLog = logs[currentLogIndex - 1];
+			onNavigateLog(prevLog);
+			onScrollToLog?.(prevLog.id);
+		} else if (direction === 'next' && !isNextDisabled) {
+			const nextLog = logs[currentLogIndex + 1];
+			onNavigateLog(nextLog);
+			onScrollToLog?.(nextLog.id);
+		}
+	};
 
 	return (
 		<Drawer
 			width="60%"
-			maskStyle={{ background: 'none' }}
+			mask={false}
+			maskClosable={false}
 			title={
-				<div className="log-detail-drawer__title">
+				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					{showOpenInExplorerBtn && (
-						<div className="log-detail-drawer__title-right">
-							<Button
-								className="open-in-explorer-btn"
-								icon={<Compass size={16} />}
-								onClick={handleOpenInExplorer}
+					<div className="log-detail-drawer__title-right">
+						<div className="log-arrows">
+							<Tooltip
+								title={isPrevDisabled ? '' : 'Move to previous log'}
+								placement="top"
+								mouseLeaveDelay={0}
 							>
-								Open in Explorer
-							</Button>
+								<Button
+									icon={<ChevronUp size={14} />}
+									className="log-arrow-btn log-arrow-btn-up"
+									disabled={isPrevDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
+								/>
+							</Tooltip>
+							<Tooltip
+								title={isNextDisabled ? '' : 'Move to next log'}
+								placement="top"
+								mouseLeaveDelay={0}
+							>
+								<Button
+									icon={<ChevronDown size={14} />}
+									className="log-arrow-btn log-arrow-btn-down"
+									disabled={isNextDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'next' })}
+								/>
+							</Tooltip>
 						</div>
-					)}
+						{showOpenInExplorerBtn && (
+							<div>
+								<Button
+									className="open-in-explorer-btn"
+									icon={<Compass size={16} />}
+									onClick={handleOpenInExplorer}
+								>
+									Open in Explorer
+								</Button>
+							</div>
+						)}
+					</div>
 				</div>
 			}
 			placement="right"
-			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -263,138 +397,164 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__log">
-				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-				</Tooltip>
+			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__log">
+					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+					</Tooltip>
 
-				<div className="log-overflow-shadow">&nbsp;</div>
-			</div>
+					<div className="log-overflow-shadow">&nbsp;</div>
+				</div>
 
-			<div className="tabs-and-search">
-				<Radio.Group
-					className="views-tabs"
-					onChange={handleModeChange}
-					value={selectedView}
-				>
-					<Radio.Button
-						className={
-							// eslint-disable-next-line sonarjs/no-duplicate-string
-							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.OVERVIEW}
+				<div className="tabs-and-search">
+					<Radio.Group
+						className="views-tabs"
+						onChange={handleModeChange}
+						value={selectedView}
 					>
-						<div className="view-title">
-							<Table size={14} />
-							Overview
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
-						value={VIEW_TYPES.JSON}
-					>
-						<div className="view-title">
-							<Braces size={14} />
-							JSON
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.CONTEXT}
-					>
-						<div className="view-title">
-							<TextSelect size={14} />
-							Context
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.INFRAMETRICS}
-					>
-						<div className="view-title">
-							<BarChart2 size={14} />
-							Metrics
-						</div>
-					</Radio.Button>
-				</Radio.Group>
+						<Radio.Button
+							className={
+								// eslint-disable-next-line sonarjs/no-duplicate-string
+								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.OVERVIEW}
+						>
+							<div className="view-title">
+								<Table size={14} />
+								Overview
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.JSON}
+						>
+							<div className="view-title">
+								<Braces size={14} />
+								JSON
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.CONTEXT}
+						>
+							<div className="view-title">
+								<TextSelect size={14} />
+								Context
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.INFRAMETRICS}
+						>
+							<div className="view-title">
+								<BarChart2 size={14} />
+								Metrics
+							</div>
+						</Radio.Button>
+					</Radio.Group>
+
+					<div className="log-detail-drawer__actions">
+						{selectedView === VIEW_TYPES.CONTEXT && (
+							<Tooltip
+								title="Show Filters"
+								placement="topLeft"
+								aria-label="Show Filters"
+							>
+								<Button
+									className="action-btn"
+									icon={<Filter size={16} />}
+									onClick={handleFilterVisible}
+								/>
+							</Tooltip>
+						)}
 
-				<div className="log-detail-drawer__actions">
-					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title="Show Filters"
+							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
 							placement="topLeft"
-							aria-label="Show Filters"
+							aria-label={
+								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+							}
 						>
 							<Button
 								className="action-btn"
-								icon={<Filter size={16} />}
-								onClick={handleFilterVisible}
+								icon={<Copy size={16} />}
+								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 							/>
 						</Tooltip>
-					)}
-
-					<Tooltip
-						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-						placement="topLeft"
-						aria-label={
-							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-						}
-					>
-						<Button
-							className="action-btn"
-							icon={<Copy size={16} />}
-							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+					</div>
+				</div>
+				{isFilterVisible && contextQuery?.builder.queryData[0] && (
+					<div className="log-detail-drawer-query-container">
+						<QuerySearch
+							onChange={(value): void => handleQueryExpressionChange(value, 0)}
+							dataSource={DataSource.LOGS}
+							queryData={contextQuery?.builder.queryData[0]}
+							onRun={handleRunQuery}
 						/>
-					</Tooltip>
-				</div>
-			</div>
-			{isFilterVisible && contextQuery?.builder.queryData[0] && (
-				<div className="log-detail-drawer-query-container">
-					<QuerySearch
-						onChange={(value): void => handleQueryExpressionChange(value, 0)}
-						dataSource={DataSource.LOGS}
-						queryData={contextQuery?.builder.queryData[0]}
-						onRun={handleRunQuery}
+					</div>
+				)}
+
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<Overview
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+						isListViewPanel={isListViewPanel}
+						selectedOptions={options}
+						listViewPanelSelectedFields={listViewPanelSelectedFields}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
-				</div>
-			)}
+				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
-			{selectedView === VIEW_TYPES.OVERVIEW && (
-				<Overview
-					logData={log}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onClickActionItem}
-					isListViewPanel={isListViewPanel}
-					selectedOptions={options}
-					listViewPanelSelectedFields={listViewPanelSelectedFields}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+				{selectedView === VIEW_TYPES.CONTEXT && (
+					<ContextView
+						log={log}
+						filters={filters}
+						contextQuery={contextQuery}
+						isEdit={isEdit}
+					/>
+				)}
+				{selectedView === VIEW_TYPES.INFRAMETRICS && (
+					<InfraMetrics
+						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+						timestamp={log.timestamp.toString()}
+						dataSource={DataSource.LOGS}
+					/>
+				)}
 
-			{selectedView === VIEW_TYPES.CONTEXT && (
-				<ContextView
-					log={log}
-					filters={filters}
-					contextQuery={contextQuery}
-					isEdit={isEdit}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.INFRAMETRICS && (
-				<InfraMetrics
-					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-					timestamp={log.timestamp.toString()}
-					dataSource={DataSource.LOGS}
-				/>
-			)}
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<div className="log-detail-drawer__footer-hint">
+						<div className="log-detail-drawer__footer-hint-content">
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								Use
+							</Typography.Text>
+							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+							<span>/</span>
+							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								to view previous/next log
+							</Typography.Text>
+						</div>
+					</div>
+				)}
+			</div>
 		</Drawer>
 	);
 }

frontend/src/components/Logs/ListLogView/index.tsx

@@ -2,13 +2,11 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -104,12 +102,17 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (log: ILog) => void;
+	onSetActiveLog: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -120,7 +123,8 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	handleChangeSelectedView,
+	isActiveLog,
+	onClearActiveLog,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -129,35 +133,24 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
-	const {
-		activeLog: activeContextLog,
-		onAddToQuery: handleAddToQuery,
-		onSetActiveLog: handleSetActiveContextLog,
-		onClearActiveLog: handleClearActiveContextLog,
-	} = useActiveLog();
-
 	const isDarkMode = useIsDarkMode();
 
-	const handlerClearActiveContextLog = useCallback(
-		(event: React.MouseEvent | React.KeyboardEvent) => {
-			event.preventDefault();
-			event.stopPropagation();
-			handleClearActiveContextLog();
-		},
-		[handleClearActiveContextLog],
-	);
-
 	const handleDetailedView = useCallback(() => {
+		if (isActiveLog) {
+			onClearActiveLog?.();
+			return;
+		}
+
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog]);
+	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			handleSetActiveContextLog(logData);
+			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
 		},
-		[logData, handleSetActiveContextLog],
+		[logData, onSetActiveLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -186,11 +179,7 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={
-					isHighlighted ||
-					activeLog?.id === logData.id ||
-					activeContextLog?.id === logData.id
-				}
+				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -251,15 +240,6 @@ function ListLogView({
 					/>
 				)}
 			</Container>
-			{activeContextLog && (
-				<LogDetail
-					log={activeContextLog}
-					onAddToQuery={handleAddToQuery}
-					selectedTab={VIEW_TYPES.CONTEXT}
-					onClose={handlerClearActiveContextLog}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</>
 	);
 }

frontend/src/components/Logs/RawLogView/index.tsx

@@ -1,19 +1,15 @@
 import {
-	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
-	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerProps, Tooltip } from 'antd';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+import { Tooltip } from 'antd';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -39,7 +35,8 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	handleChangeSelectedView,
+	onSetActiveLog,
+	onClearActiveLog,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -48,15 +45,6 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
-
-	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
-
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -134,34 +122,24 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-			} else {
-				onSetActiveLog(data);
-				setSelectedTab(VIEW_TYPES.OVERVIEW);
+				return;
+			}
+			if (isActiveLog) {
+				onClearActiveLog?.();
+				return;
 			}
-		},
-		[isReadOnly, data, onSetActiveLog, onLogClick],
-	);
 
-	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
-		(
-			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
-		) => {
-			event.preventDefault();
-			event.stopPropagation();
-
-			onClearActiveLog();
-			setSelectedTab(undefined);
+			onSetActiveLog?.(data);
 		},
-		[onClearActiveLog],
+		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			// handleSetActiveContextLog(data);
-			setSelectedTab(VIEW_TYPES.CONTEXT);
-			onSetActiveLog(data);
+
+			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
 		},
 		[data, onSetActiveLog],
 	);
@@ -181,7 +159,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={activeLog?.id === data.id || isActiveLog}
+			$isActiveLog={isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -218,17 +196,6 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
-
-			{selectedTab && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</RawLogViewContainer>
 	);
 }

frontend/src/components/Logs/RawLogView/styles.ts

@@ -45,9 +45,6 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
-	${({ $isActiveLog, $logType }): string =>
-		getActiveLogBackground($isActiveLog, true, $logType)}
-
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -16,6 +17,11 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,6 +12,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,6 +43,15 @@ function EntityLogs({
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getEntityEventsOrLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -62,29 +74,40 @@ function EntityLogs({
 		basePayload,
 	});
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const { data, isLoading, isFetching, isError } = useQuery({
@@ -131,6 +154,7 @@ function EntityLogs({
 					<Virtuoso
 						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -154,7 +178,21 @@ function EntityLogs({
 			)}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container">{renderContent}</div>
+				<div className="entity-logs-list-container" data-log-detail-ignore="true">
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -14,8 +13,9 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -38,10 +38,11 @@ function LiveLogsList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	// get only data from the logs object
 	const formattedLogs: ILog[] = useMemo(
@@ -65,42 +66,56 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs: formattedLogs,
+		virtuosoRef: ref,
+	});
+
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					linesPerRow={options.maxLines}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					fontSize={options.fontSize}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						linesPerRow={options.maxLines}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				</div>
 			);
 		},
 		[
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
 			options.maxLines,
+			options.fontSize,
+			activeLog?.id,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleCloseLogDetail,
+			handleChangeSelectedView,
 		],
 	);
 
@@ -156,6 +171,10 @@ function LiveLogsList({
 								activeLogIndex,
 							}}
 							handleChangeSelectedView={handleChangeSelectedView}
+							logs={formattedLogs}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+							activeLog={activeLog}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -173,14 +192,17 @@ function LiveLogsList({
 				</InfinityWrapperStyled>
 			)}
 
-			{activeLog && (
+			{activeLog && selectedTab && (
 				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
+					selectedTab={selectedTab}
 					log={activeLog}
-					onClose={onClearActiveLog}
+					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={formattedLogs}
+					onNavigateLog={handleSetActiveLog}
+					onScrollToLog={handleScrollToLog}
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -395,7 +395,7 @@ export default function TableViewActions(
 								onOpenChange={setIsOpen}
 								arrow={false}
 								content={
-									<div>
+									<div data-log-detail-ignore="true">
 										<Button
 											className="more-filter-actions"
 											type="text"
@@ -481,7 +481,7 @@ export default function TableViewActions(
 							onOpenChange={setIsOpen}
 							arrow={false}
 							content={
-								<div>
+								<div data-log-detail-ignore="true">
 									<Button
 										className="more-filter-actions"
 										type="text"

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -7,6 +7,7 @@ import {
 	useMemo,
 } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -22,22 +23,27 @@ interface TableRowProps {
 	tableColumns: ColumnsType<Record<string, unknown>>;
 	index: number;
 	log: Record<string, unknown>;
-	handleSetActiveContextLog: (log: ILog) => void;
-	onShowLogDetails: (log: ILog) => void;
+	onShowLogDetails?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 }
 
 export default function TableRow({
 	tableColumns,
 	index,
 	log,
-	handleSetActiveContextLog,
 	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
+	isActiveLog,
+	onClearActiveLog,
 }: TableRowProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -52,21 +58,31 @@ export default function TableRow({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			if (!handleSetActiveContextLog || !currentLog) {
+			if (!currentLog) {
 				return;
 			}
 
-			handleSetActiveContextLog(currentLog);
+			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
 		},
-		[currentLog, handleSetActiveContextLog],
+		[currentLog, onShowLogDetails],
 	);
 
 	const handleShowLogDetails = useCallback(() => {
-		if (!onShowLogDetails || !currentLog) {
+		if (!currentLog) {
 			return;
 		}
-		onShowLogDetails(currentLog);
-	}, [currentLog, onShowLogDetails]);
+
+		// If this log is already active, close the detail drawer
+		if (isActiveLog && onClearActiveLog) {
+			onClearActiveLog();
+			return;
+		}
+
+		// Otherwise, open the detail drawer for this log
+		if (onShowLogDetails) {
+			onShowLogDetails(currentLog);
+		}
+	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
 
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -4,7 +4,6 @@ import {
 	TableVirtuoso,
 	TableVirtuosoHandle,
 } from 'react-virtuoso';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -58,26 +57,40 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
-		ref,
-	): JSX.Element | null {
-		const {
-			activeLog: activeContextLog,
-			onSetActiveLog: handleSetActiveContextLog,
-			onClearActiveLog: handleClearActiveContextLog,
-			onAddToQuery: handleAddToQuery,
-		} = useActiveLog();
-		const {
-			activeLog,
+		{
+			isLoading,
+			tableViewProps,
+			infitiyTableProps,
 			onSetActiveLog,
 			onClearActiveLog,
-			onAddToQuery,
-		} = useActiveLog();
+			activeLog,
+		},
+		ref,
+	): JSX.Element | null {
+		const { activeLog: activeContextLog } = useActiveLog();
+
+		const onSetActiveLogExpand = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log);
+			},
+			[onSetActiveLog],
+		);
+
+		const onSetActiveLogContext = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
+			},
+			[onSetActiveLog],
+		);
+
+		const onCloseActiveLog = useCallback(() => {
+			onClearActiveLog?.();
+		}, [onClearActiveLog]);
 
 		const { dataSource, columns } = useTableView({
 			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: handleSetActiveContextLog,
+			onClickExpand: onSetActiveLogExpand,
+			onOpenLogsContext: onSetActiveLogContext,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -98,27 +111,32 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					handleSetActiveContextLog={handleSetActiveContextLog}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
-				handleSetActiveContextLog,
 				tableColumns,
-				tableViewProps.fontSize,
-				tableViewProps.logs,
 				onSetActiveLog,
+				tableViewProps.logs,
+				tableViewProps.fontSize,
+				activeLog?.id,
+				onCloseActiveLog,
 			],
 		);
-
 		const tableHeader = useCallback(
 			() => (
 				<tr>
@@ -179,24 +197,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
 				/>
-
-				{activeContextLog && (
-					<LogDetail
-						log={activeContextLog}
-						onClose={handleClearActiveContextLog}
-						onAddToQuery={handleAddToQuery}
-						selectedTab={VIEW_TYPES.CONTEXT}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
-					log={activeLog}
-					onClose={onClearActiveLog}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
 			</>
 		);
 	},

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,5 +1,7 @@
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { UseTableViewProps } from 'components/Logs/TableView/types';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -8,4 +10,11 @@ export type InfinityTableProps = {
 		onEndReached: (index: number) => void;
 	};
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	logs?: ILog[];
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
+	activeLog?: ILog | null;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -4,7 +4,6 @@ import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
@@ -16,8 +15,9 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import APIError from 'types/api/error';
 // interfaces
@@ -55,10 +55,11 @@ function LogsExplorerList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -82,6 +83,12 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
+
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef: ref,
+	});
+
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && logs.length !== 0) {
 			logEvent('Logs Explorer: Data present', {
@@ -94,40 +101,48 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					activeLog={activeLog}
-					fontSize={options.fontSize}
-					linesPerRow={options.maxLines}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						activeLog={activeLog}
+						fontSize={options.fontSize}
+						linesPerRow={options.maxLines}
+						handleChangeSelectedView={handleChangeSelectedView}
+						onClearActiveLog={handleCloseLogDetail}
+					/>
+				</div>
 			);
 		},
 		[
-			activeLog,
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
+			options.fontSize,
 			options.maxLines,
+			activeLog,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleChangeSelectedView,
+			handleCloseLogDetail,
 		],
 	);
 
@@ -153,6 +168,10 @@ function LogsExplorerList({
 					}}
 					infitiyTableProps={{ onEndReached }}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={logs}
+					onSetActiveLog={handleSetActiveLog}
+					onClearActiveLog={handleCloseLogDetail}
+					activeLog={activeLog}
 				/>
 			);
 		}
@@ -199,6 +218,9 @@ function LogsExplorerList({
 		getItemContent,
 		selectedFields,
 		handleChangeSelectedView,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+		activeLog,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -278,14 +300,19 @@ function LogsExplorerList({
 						{renderContent}
 					</InfinityWrapperStyled>
 
-					<LogDetail
-						selectedTab={VIEW_TYPES.OVERVIEW}
-						log={activeLog}
-						onClose={onClearActiveLog}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onAddToQuery}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					{selectedTab && activeLog && (
+						<LogDetail
+							selectedTab={selectedTab}
+							log={activeLog}
+							onClose={handleCloseLogDetail}
+							onAddToQuery={onAddToQuery}
+							onClickActionItem={onAddToQuery}
+							handleChangeSelectedView={handleChangeSelectedView}
+							logs={logs}
+							onNavigateLog={handleSetActiveLog}
+							onScrollToLog={handleScrollToLog}
+						/>
+					)}
 				</>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -466,7 +466,10 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 
-				<div className="logs-explorer-views-type-content">
+				<div
+					className="logs-explorer-views-type-content"
+					data-log-detail-ignore="true"
+				>
 					{showLiveLogs && (
 						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
 					)}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -16,7 +15,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -83,24 +82,24 @@ function LogsPanelComponent({
 		() => logs.map((log) => FlatLogData(log) as RowData),
 		[logs],
 	);
-
 	const {
 		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
 		onAddToQuery,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const handleRow = useCallback(
 		(record: RowData): HTMLAttributes<RowData> => ({
 			onClick: (): void => {
 				const log = logs.find((item) => item.id === record.id);
 				if (log) {
-					onSetActiveLog(log);
+					handleSetActiveLog(log);
 				}
 			},
 		}),
-		[logs, onSetActiveLog],
+		[handleSetActiveLog, logs],
 	);
 
 	const handleRequestData = (newOffset: number): void => {
@@ -132,7 +131,7 @@ function LogsPanelComponent({
 
 	return (
 		<>
-			<div className="logs-table">
+			<div className="logs-table" data-log-detail-ignore="true">
 				<div className="resize-table">
 					<OverlayScrollbar>
 						<ResizeTable
@@ -166,15 +165,19 @@ function LogsPanelComponent({
 					</div>
 				)}
 			</div>
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-				isListViewPanel
-				listViewPanelSelectedFields={widget?.selectedLogFields}
-			/>
+			{selectedTab && activeLog && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					isListViewPanel
+					listViewPanelSelectedFields={widget?.selectedLogFields}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+				/>
+			)}
 		</>
 	);
 }

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import type { UseActiveLog } from 'hooks/logs/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { ILog } from 'types/api/logs/log';
+
+type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
+
+type UseLogDetailHandlersParams = {
+	defaultTab?: SelectedTab;
+};
+
+type UseLogDetailHandlersResult = {
+	activeLog: UseActiveLog['activeLog'];
+	onAddToQuery: UseActiveLog['onAddToQuery'];
+	selectedTab: SelectedTab;
+	handleSetActiveLog: (log: ILog, selectedTab?: SelectedTab) => void;
+	handleCloseLogDetail: () => void;
+};
+
+function useLogDetailHandlers({
+	defaultTab = VIEW_TYPES.OVERVIEW,
+}: UseLogDetailHandlersParams = {}): UseLogDetailHandlersResult {
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
+
+	const handleSetActiveLog = useCallback(
+		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
+			if (activeLog?.id === log.id) {
+				onClearActiveLog();
+				setSelectedTab(undefined);
+				return;
+			}
+			onSetActiveLog(log);
+			setSelectedTab(nextTab ?? defaultTab);
+		},
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
+	);
+
+	const handleCloseLogDetail = useCallback((): void => {
+		onClearActiveLog();
+		setSelectedTab(undefined);
+	}, [onClearActiveLog]);
+
+	return {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	};
+}
+
+export default useLogDetailHandlers;

frontend/src/hooks/logs/useScrollToLog.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+type UseScrollToLogParams = {
+	logs: Array<{ id: string }>;
+	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
+};
+
+function useScrollToLog({
+	logs,
+	virtuosoRef,
+}: UseScrollToLogParams): (logId: string) => void {
+	return useCallback(
+		(logId: string): void => {
+			const logIndex = logs.findIndex(({ id }) => id === logId);
+			if (logIndex !== -1 && virtuosoRef.current) {
+				virtuosoRef.current.scrollToIndex({
+					index: logIndex,
+					align: 'center',
+					behavior: 'smooth',
+				});
+			}
+		},
+		[logs, virtuosoRef],
+	);
+}
+
+export default useScrollToLog;

frontend/src/styles.scss

@@ -567,6 +567,15 @@ body {
 		border: 1px solid var(--bg-vanilla-300);
 	}
 
+	.ant-tooltip {
+		--antd-arrow-background-color: var(--bg-vanilla-100);
+
+		.ant-tooltip-inner {
+			background-color: var(--bg-vanilla-100);
+			color: var(---bg-ink-500);
+		}
+	}
+
 	.ant-dropdown-menu {
 		border: 1px solid var(--bg-vanilla-300);
 		background: var(--bg-vanilla-100);

frontend/src/utils/logs.ts

@@ -9,10 +9,9 @@ export const getDefaultLogBackground = (
 	if (isReadOnly) {
 		return '';
 	}
-	// TODO handle the light mode here
 	return `&:hover {
     background-color: ${
-					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'var(--bg-vanilla-200)'
+					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'
 				};
     }`;
 };
@@ -28,22 +27,38 @@ export const getActiveLogBackground = (
 	if (isDarkMode) {
 		switch (logType) {
 			case LogType.INFO:
-				return `background-color: ${Color.BG_ROBIN_500}10 !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
 			case LogType.WARN:
-				return `background-color: ${Color.BG_AMBER_500}10 !important;`;
+				return `background-color: ${Color.BG_AMBER_500}40 !important;`;
 			case LogType.ERROR:
-				return `background-color: ${Color.BG_CHERRY_500}10 !important;`;
+				return `background-color: ${Color.BG_CHERRY_500}40 !important;`;
 			case LogType.TRACE:
-				return `background-color: ${Color.BG_FOREST_400}10 !important;`;
+				return `background-color: ${Color.BG_FOREST_400}40 !important;`;
 			case LogType.DEBUG:
-				return `background-color: ${Color.BG_AQUA_500}10 !important;`;
+				return `background-color: ${Color.BG_AQUA_500}40 !important;`;
 			case LogType.FATAL:
-				return `background-color: ${Color.BG_SAKURA_500}10 !important;`;
+				return `background-color: ${Color.BG_SAKURA_500}40 !important;`;
 			default:
-				return `background-color: ${Color.BG_SLATE_200} !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
 		}
 	}
-	return `background-color: ${Color.BG_VANILLA_400}!important; color: ${Color.TEXT_SLATE_400} !important;`;
+	// Light mode - use lighter background colors
+	switch (logType) {
+		case LogType.INFO:
+			return `background-color: ${Color.BG_ROBIN_100} !important;`;
+		case LogType.WARN:
+			return `background-color: ${Color.BG_AMBER_100} !important;`;
+		case LogType.ERROR:
+			return `background-color: ${Color.BG_CHERRY_100} !important;`;
+		case LogType.TRACE:
+			return `background-color: ${Color.BG_FOREST_200} !important;`;
+		case LogType.DEBUG:
+			return `background-color: ${Color.BG_AQUA_100} !important;`;
+		case LogType.FATAL:
+			return `background-color: ${Color.BG_SAKURA_100} !important;`;
+		default:
+			return `background-color: ${Color.BG_VANILLA_300} !important;`;
+	}
 };
 
 export const getHightLightedLogBackground = (

tests/integration/src/passwordauthn/06_duplicate_invite.py

@@ -0,0 +1,62 @@
+from http import HTTPStatus
+from typing import Callable
+
+import requests
+
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+from fixtures.types import SigNoz
+
+DUPLICATE_USER_EMAIL = "duplicate@integration.test"
+
+
+def test_duplicate_user_invite_rejected(
+    signoz: SigNoz,
+    get_token: Callable[[str, str], str],
+):
+    """
+    Verify that the unique index on (email, org_id) in the users table prevents
+    creating duplicate users. This invites a new user, accepts the invite, then
+    tries to invite and accept the same email again expecting a failure.
+    """
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    # Step 1: Invite a new user.
+    initial_invite_response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/invite"),
+        json={"email": DUPLICATE_USER_EMAIL, "role": "EDITOR"},
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+    assert initial_invite_response.status_code == HTTPStatus.CREATED
+    initial_invite_token = initial_invite_response.json()["data"]["token"]
+
+    # Step 2: Accept the invite to create the user.
+    initial_accept_response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/invite/accept"),
+        json={"token": initial_invite_token, "password": "password123Z$"},
+        timeout=2,
+    )
+    assert initial_accept_response.status_code == HTTPStatus.CREATED
+
+    # Step 3: Invite the same email again.
+    duplicate_invite_response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/invite"),
+        json={"email": DUPLICATE_USER_EMAIL, "role": "VIEWER"},
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+
+    # The invite creation itself may be rejected if the app checks for existing users.
+    if duplicate_invite_response.status_code != HTTPStatus.CREATED:
+        assert duplicate_invite_response.status_code == HTTPStatus.CONFLICT
+        return
+
+    duplicate_invite_token = duplicate_invite_response.json()["data"]["token"]
+
+    # Step 4: Accept the duplicate invite — should fail due to unique constraint.
+    duplicate_accept_response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/invite/accept"),
+        json={"token": duplicate_invite_token, "password": "password123Z$"},
+        timeout=2,
+    )
+    assert duplicate_accept_response.status_code == HTTPStatus.CONFLICT