refactor(ui): rename view_logs to logs and split request, audit and detail (#44505)

Co-authored-by: Yujong Lee <yujong@berri.ai>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

tests/unit/proxy/auth/test_route_checks.py

@@ -2218,9 +2218,9 @@ def test_proxy_admin_viewer_can_access_audit_logs(route):
 # layer, even though the underlying handlers already gate on PROXY_ADMIN_VIEW_ONLY.
 #
 # Each route below corresponds to a network call made by the Logs page
-# (ui/litellm-dashboard/src/components/view_logs/) — see the comment on each.
+# (ui/litellm-dashboard/src/components/logs/) — see the comment on each.
 ADMIN_VIEWER_LOGS_PAGE_ROUTES = [
-    # Main paginated log list — uiSpendLogsCall in log_filter_logic.tsx & index.tsx
+    # Main paginated log list — uiSpendLogsCall in request/useLogFilterLogic.ts & index.tsx
     "/spend/logs/ui",
     # Single-log detail drawer — fetched on row click in LogDetailsDrawer
     "/spend/logs/ui/abc-request-id",

ui/litellm-dashboard/eslint-suppressions.json

@@ -2266,12 +2266,12 @@
       "count": 1
     }
   },
-  "src/components/view_logs/EvalViewer/EvalViewer.tsx": {
+  "src/components/logs/detail/sections/EvalViewer/EvalViewer.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/view_logs/GuardrailViewer/CompliancePanel.tsx": {
+  "src/components/logs/detail/sections/GuardrailViewer/CompliancePanel.tsx": {
     "no-nested-ternary": {
       "count": 2
     },
@@ -2279,17 +2279,17 @@
       "count": 1
     }
   },
-  "src/components/view_logs/GuardrailViewer/ContentFilterDetails.tsx": {
+  "src/components/logs/detail/sections/GuardrailViewer/ContentFilterDetails.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx": {
+  "src/components/logs/detail/sections/GuardrailViewer/GuardrailViewer.tsx": {
     "no-nested-ternary": {
       "count": 3
     }
   },
-  "src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx": {
+  "src/components/logs/detail/LogDetailsDrawer.tsx": {
     "no-nested-ternary": {
       "count": 2
     },
@@ -2297,22 +2297,22 @@
       "count": 2
     }
   },
-  "src/components/view_logs/LogDetailsDrawer/useKeyboardNavigation.ts": {
+  "src/components/logs/detail/useKeyboardNavigation.ts": {
     "react-hooks/immutability": {
       "count": 2
     }
   },
-  "src/components/view_logs/columns.tsx": {
+  "src/components/logs/types.ts": {
     "local/filename-pascal-case": {
       "count": 1
     }
   },
-  "src/components/view_logs/log_filter_logic.tsx": {
+  "src/components/logs/request/useLogFilterLogic.ts": {
     "local/filename-pascal-case": {
       "count": 1
     }
   },
-  "src/components/view_logs/logs_utils.tsx": {
+  "src/components/logs/request/timeRange.ts": {
     "local/filename-pascal-case": {
       "count": 1
     }

ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCachingRequestsTable.tsx

@@ -11,7 +11,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { LOG_ID_QUERY_PARAM } from "@/components/view_logs/logDetailRouting";
+import { LOG_ID_QUERY_PARAM } from "@/components/logs/request/logDetailRouting";
 import type { paths } from "@/lib/http/schema";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import { uiHref } from "@/utils/uiHref";

ui/litellm-dashboard/src/app/(dashboard)/logs/page.integration.test.tsx

@@ -17,7 +17,7 @@ vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({
   useOrganizations: useOrganizationsMock,
 }));
 
-vi.mock("@/components/view_logs/RequestLogsPanel", () => ({
+vi.mock("@/components/logs/request/RequestLogsPanel", () => ({
   default: function RequestLogsPanelMock() {
     return <div data-testid="request-logs-panel" />;
   },

ui/litellm-dashboard/src/app/(dashboard)/logs/page.test.tsx

@@ -17,13 +17,13 @@ vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({
   useOrganizations: useOrganizationsMock,
 }));
 
-vi.mock("@/components/view_logs/RequestLogsPanel", () => ({
+vi.mock("@/components/logs/request/RequestLogsPanel", () => ({
   default: function RequestLogsPanelMock({ isActive }: { isActive: boolean }) {
     return <div data-testid="request-logs-panel">{isActive ? "active" : "inactive"}</div>;
   },
 }));
 
-vi.mock("@/components/view_logs/AuditLogsPanel", () => ({
+vi.mock("@/components/logs/audit/AuditLogsPanel", () => ({
   default: function AuditLogsPanelMock({ isActive }: { isActive: boolean }) {
     return <div data-testid="audit-logs-panel">{isActive ? "active" : "inactive"}</div>;
   },

ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx

@@ -5,8 +5,8 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import useCan from "@/app/(dashboard)/hooks/useCan";
 import DeletedKeysPage from "@/components/DeletedKeysPage/DeletedKeysPage";
 import DeletedTeamsPage from "@/components/DeletedTeamsPage/DeletedTeamsPage";
-import AuditLogsPanel from "@/components/view_logs/AuditLogsPanel";
-import RequestLogsPanel from "@/components/view_logs/RequestLogsPanel";
+import AuditLogsPanel from "@/components/logs/audit/AuditLogsPanel";
+import RequestLogsPanel from "@/components/logs/request/RequestLogsPanel";
 import { Page, PageTabs, PageTabsList, PageTabsTrigger, PageTabsContent } from "@/components/shared/Page";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 

ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { renderWithProviders, screen, testQueryClient, waitFor, within } from "../../../tests/test-utils";
-import type { LogEntry as SpendLogEntry } from "@/components/view_logs/columns";
+import type { LogEntry as SpendLogEntry } from "@/components/logs/types";
 import { LogViewer } from "./LogViewer";
 
 vi.mock("@/components/networking", async (importOriginal) => {
@@ -11,7 +11,7 @@ vi.mock("@/components/networking", async (importOriginal) => {
   return { ...actual, uiSpendLogsCall: vi.fn() };
 });
 
-vi.mock("@/components/view_logs/LogDetailsDrawer", () => ({
+vi.mock("@/components/logs/detail", () => ({
   LogDetailsDrawer: function LogDetailsDrawerMock({
     open,
     logEntry,

ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx

@@ -5,8 +5,8 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { uiSpendLogsCall } from "@/components/networking";
-import { LogDetailsDrawer } from "@/components/view_logs/LogDetailsDrawer";
-import type { LogEntry as ViewLogsLogEntry } from "@/components/view_logs/columns";
+import { LogDetailsDrawer } from "@/components/logs/detail";
+import type { LogEntry as ViewLogsLogEntry } from "@/components/logs/types";
 import type { LogEntry } from "./mockData";
 
 const actionConfig: Record<

ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.tsx

@@ -3,7 +3,7 @@ import { TriangleAlert } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import RoutingDecisionCard from "@/components/view_logs/LogDetailsDrawer/RoutingDecisionCard";
+import RoutingDecisionCard from "@/components/logs/detail/RoutingDecisionCard";
 import { AutoRouterRoutingTestResult, testAutoRouterRouting } from "../networking";
 import { ComplexityRouterConfigPayload, getHeuristicV2SuccessThresholdError } from "./build_complexity_router_config";
 import { buildAutoRouterRoutingTestRequest } from "./build_auto_router_routing_test_request";

ui/litellm-dashboard/src/components/common_components/simple_table.tsx

@@ -28,7 +28,7 @@ interface SimpleTableProps<T> {
 
 /**
  * Simple table component for forms and settings pages
- * For complex tables with sorting/filtering, use DataTable from view_logs
+ * For complex tables with sorting/filtering, use DataTable from shared/DataTable
  */
 export function SimpleTable<T>({
   data,

ui/litellm-dashboard/src/components/lens/traces/detail/RequestDetail.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 
-import { LogDetailsDrawer } from "../../../view_logs/LogDetailsDrawer";
+import { LogDetailsDrawer } from "../../../logs/detail";
 import { formatCost } from "../list/AgentTracesTable";
 import { DetailGroup } from "./AttributesDetail";
 import { CopyButton } from "../ui/CopyButton";

ui/litellm-dashboard/src/components/lens/traces/detail/useSpanRequestLog.ts

@@ -4,7 +4,7 @@ import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
 import moment from "moment";
 
 import { uiSpendLogsCall } from "../../../networking";
-import type { LogEntry } from "../../../view_logs/columns";
+import type { LogEntry } from "../../../logs/types";
 
 /** Spend-log timestamps are written when the call finishes, so pad the span start on both sides. */
 const LOOKUP_PAD_MINUTES = 30;

ui/litellm-dashboard/src/components/logs/audit/AuditLogDrawer/AuditLogDrawer.test.tsx

@@ -5,7 +5,7 @@ import moment from "moment";
 import { AuditLogDrawer } from "./AuditLogDrawer";
 import { AuditLogEntry } from "../AuditLogsTableColumns";
 
-vi.mock("../../common_components/DefaultProxyAdminTag", () => ({
+vi.mock("../../../common_components/DefaultProxyAdminTag", () => ({
   default: ({ userId }: { userId: string }) => <span>{userId}</span>,
 }));
 

ui/litellm-dashboard/src/components/logs/audit/AuditLogDrawer/AuditLogDrawer.tsx

@@ -2,7 +2,7 @@ import { Check, Copy } from "lucide-react";
 import { useState, useCallback } from "react";
 import moment from "moment";
 import { AuditLogEntry, AUDIT_TABLE_NAME_DISPLAY } from "../AuditLogsTableColumns";
-import DefaultProxyAdminTag from "../../common_components/DefaultProxyAdminTag";
+import DefaultProxyAdminTag from "../../../common_components/DefaultProxyAdminTag";
 import CopyButton from "@/components/shared/CopyButton";
 import { StatusBadge, type StatusTone } from "@/components/shared/table_cells/status_badge";
 import { Button } from "@/components/ui/button";

ui/litellm-dashboard/src/components/logs/audit/AuditLogsPanel.test.tsx

@@ -3,11 +3,11 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { chooseSelectOption } from "../../../tests/test-utils";
+import { chooseSelectOption } from "../../../../tests/test-utils";
 import AuditLogsPanel from "./AuditLogsPanel";
 
-vi.mock("../networking", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../networking")>();
+vi.mock("../../networking", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../networking")>();
   return { ...actual, uiAuditLogsCall: vi.fn() };
 });
 
@@ -16,7 +16,7 @@ vi.mock("@tanstack/react-pacer/debouncer", () => ({
   useDebouncedValue: (value: unknown) => [value, { cancel: vi.fn(), flush: vi.fn() }],
 }));
 
-import { uiAuditLogsCall } from "../networking";
+import { uiAuditLogsCall } from "../../networking";
 
 type AuditLogsParams = NonNullable<Parameters<typeof uiAuditLogsCall>[0]["params"]>;
 

ui/litellm-dashboard/src/components/logs/audit/AuditLogsPanel.tsx

@@ -4,7 +4,7 @@ import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { ColumnFiltersState, OnChangeFn, PaginationState } from "@tanstack/react-table";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
-import { uiAuditLogsCall } from "../networking";
+import { uiAuditLogsCall } from "../../networking";
 import { AuditLogEntry } from "./AuditLogsTableColumns";
 import { AuditLogsTable } from "./AuditLogsTable";
 import { AuditLogDrawer } from "./AuditLogDrawer/AuditLogDrawer";

ui/litellm-dashboard/src/components/logs/audit/AuditLogsTableColumns.tsx

@@ -4,7 +4,7 @@ import { ColumnDef } from "@tanstack/react-table";
 
 import { DateCell, IdCell, IdentityCell, StatusBadge, type StatusTone } from "@/components/shared/table_cells";
 
-import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
+import DefaultProxyAdminTag from "../../common_components/DefaultProxyAdminTag";
 
 export type AuditLogEntry = {
   id: string;

ui/litellm-dashboard/src/components/logs/detail/DrawerHeader.test.tsx

@@ -2,7 +2,7 @@ import { screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 import { render } from "../../../../tests/test-utils";
-import type { LogEntry } from "../columns";
+import type { LogEntry } from "../types";
 import { DrawerHeader } from "./DrawerHeader";
 
 const logEntry = (overrides: Partial<LogEntry>): LogEntry =>

ui/litellm-dashboard/src/components/logs/detail/DrawerHeader.tsx

@@ -4,7 +4,7 @@ import moment from "moment";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../types";
 import { AutoRouterTag } from "@/components/shared/table_cells";
 import { ClassifyTag } from "./ClassifyTag";
 import { SidebarToggle } from "./SidebarToggle";

ui/litellm-dashboard/src/components/logs/detail/LogDetailContent.integration.test.tsx

@@ -2,9 +2,9 @@ import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { GuardrailJumpLink, LogDetailContent } from "./LogDetailContent";
-import type { LogEntry } from "../columns";
+import type { LogEntry } from "../types";
 
-vi.mock("../GuardrailViewer/GuardrailViewer", () => ({
+vi.mock("./sections/GuardrailViewer/GuardrailViewer", () => ({
   default: ({ data }: { data: unknown }) => <div data-testid="guardrail-viewer">{JSON.stringify(data)}</div>,
 }));
 

ui/litellm-dashboard/src/components/logs/detail/LogDetailContent.tsx

@@ -8,11 +8,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../types";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import { PROMPT_CACHE_CREATION_TOOLTIP, PROMPT_CACHE_READ_TOOLTIP } from "@/utils/promptCacheUsage";
-import GuardrailViewer from "../GuardrailViewer/GuardrailViewer";
-import EvalViewer from "../EvalViewer/EvalViewer";
+import GuardrailViewer from "./sections/GuardrailViewer/GuardrailViewer";
+import EvalViewer from "./sections/EvalViewer/EvalViewer";
 import {
   getBatchIdFromRequestId,
   getBatchModels,
@@ -20,9 +20,9 @@ import {
   getReasoningTokens,
   isBatchCallType,
 } from "../batchLogUtils";
-import { CostBreakdownViewer } from "../CostBreakdownViewer";
-import { ConfigInfoMessage } from "../ConfigInfoMessage";
-import { VectorStoreViewer } from "../VectorStoreViewer";
+import { CostBreakdownViewer } from "./sections/CostBreakdownViewer";
+import { ConfigInfoMessage } from "./sections/ConfigInfoMessage";
+import { VectorStoreViewer } from "./sections/VectorStoreViewer";
 import { CREDENTIAL_LABELS } from "../constants";
 import { TruncatedValue } from "./TruncatedValue";
 import { TokenFlow } from "./TokenFlow";
@@ -47,7 +47,7 @@ import {
   FONT_FAMILY_MONO,
   SPACING_XLARGE,
 } from "./constants";
-import { ToolsSection } from "../ToolsSection";
+import { ToolsSection } from "./sections/ToolsSection";
 import { PrettyMessagesView } from "./PrettyMessagesView";
 import { ClassifierAuditView } from "./ClassifierAuditView";
 import { AUTOROUTER_CLASSIFIER_ORIGIN } from "./ClassifyTag";

ui/litellm-dashboard/src/components/logs/detail/LogDetailsDrawer.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { LogDetailsDrawer } from "./LogDetailsDrawer";
 import { sessionSpendLogsCall } from "../../networking";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../types";
 import { AutoRouterModelGroupsProvider } from "@/components/shared/table_cells";
 
 vi.mock("../../networking", () => ({

ui/litellm-dashboard/src/components/logs/detail/LogDetailsDrawer.tsx

@@ -2,10 +2,10 @@ import { useEffect, useMemo, useState } from "react";
 import { Bot, Check, Copy, Sparkles, Wrench } from "lucide-react";
 import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../types";
 import { AutoRouterIcon, useIsAutoRoutedModelGroup } from "@/components/shared/table_cells";
 import { AGENT_CALL_TYPES, MCP_CALL_TYPES } from "../constants";
-import { getEventDisplayName } from "../utils";
+import { getEventDisplayName } from "./eventDisplayName";
 import { ClassifyTag } from "./ClassifyTag";
 import { DrawerHeader } from "./DrawerHeader";
 import { SidebarToggle } from "./SidebarToggle";

ui/litellm-dashboard/src/components/logs/detail/eventDisplayName.ts

@@ -1,4 +1,4 @@
-import { MCP_CALL_TYPES } from "./constants";
+import { MCP_CALL_TYPES } from "../constants";
 
 /**
  * Derive a short, human-readable display name for a log entry.

ui/litellm-dashboard/src/components/logs/detail/sections/CostBreakdownViewer.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen } from "../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../tests/test-utils";
 import { CostBreakdownViewer, CostBreakdown } from "./CostBreakdownViewer";
 
 async function expandCostBreakdown() {

ui/litellm-dashboard/src/components/logs/detail/sections/GuardrailViewer/BedrockGuardrailDetails.test.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import { describe, it, expect } from "vitest";
 import BedrockGuardrailDetails, {
   BedrockGuardrailResponse,
-} from "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
-import { renderWithProviders, screen } from "../../../../tests/test-utils";
+} from "@/components/logs/detail/sections/GuardrailViewer/BedrockGuardrailDetails";
+import { renderWithProviders, screen } from "../../../../../../tests/test-utils";
 import {
   makeAssessment,
   makeBedrockCoverage,
   makeBedrockResponse,
   makeBedrockUsage,
-} from "@/components/view_logs/GuardrailViewer/__tests__/fixtures";
+} from "@/components/logs/detail/sections/GuardrailViewer/__tests__/fixtures";
 
 describe("BedrockGuardrailDetails", () => {
   it("returns null when response is falsy", () => {

ui/litellm-dashboard/src/components/logs/detail/sections/GuardrailViewer/GuardrailViewer.test.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen, waitFor, within } from "../../../../tests/test-utils";
+import { renderWithProviders, screen, waitFor, within } from "../../../../../../tests/test-utils";
 import {
   GuardrailInformation,
   makeBedrockResponse,
   makeEntity,
   makeGuardrailInformation,
-} from "@/components/view_logs/GuardrailViewer/__tests__/fixtures";
-import GuardrailViewer from "@/components/view_logs/GuardrailViewer/GuardrailViewer";
+} from "@/components/logs/detail/sections/GuardrailViewer/__tests__/fixtures";
+import GuardrailViewer from "@/components/logs/detail/sections/GuardrailViewer/GuardrailViewer";
 
 // We will mock child components selectively for some tests to assert prop passthrough,
 // but also run an integration-style render without mocks.
-const PresidioPath = "@/components/view_logs/GuardrailViewer/PresidioDetectedEntities";
-const BedrockPath = "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
+const PresidioPath = "@/components/logs/detail/sections/GuardrailViewer/PresidioDetectedEntities";
+const BedrockPath = "@/components/logs/detail/sections/GuardrailViewer/BedrockGuardrailDetails";
 
 const skippedPreCall: Partial<GuardrailInformation> = {
   guardrail_status: "not_run",
@@ -245,7 +245,7 @@ describe("GuardrailViewer", () => {
       __esModule: true,
       default: ({ entities }: any) => <div data-testid="presidio-mock">presidio {entities?.length}</div>,
     }));
-    const { default: Component } = await import("@/components/view_logs/GuardrailViewer/GuardrailViewer");
+    const { default: Component } = await import("@/components/logs/detail/sections/GuardrailViewer/GuardrailViewer");
 
     const data = makeGuardrailInformation({
       guardrail_provider: undefined,
@@ -264,7 +264,7 @@ describe("GuardrailViewer", () => {
       __esModule: true,
       default: ({ entities }: any) => <div data-testid="presidio-mock">count:{entities?.length}</div>,
     }));
-    const { default: Component } = await import("@/components/view_logs/GuardrailViewer/GuardrailViewer");
+    const { default: Component } = await import("@/components/logs/detail/sections/GuardrailViewer/GuardrailViewer");
 
     const data = makeGuardrailInformation({
       guardrail_provider: "presidio",
@@ -283,7 +283,7 @@ describe("GuardrailViewer", () => {
       __esModule: true,
       default: ({ response }: any) => <div data-testid="bedrock-mock">{response?.action ?? "no-action"}</div>,
     }));
-    const { default: Component } = await import("@/components/view_logs/GuardrailViewer/GuardrailViewer");
+    const { default: Component } = await import("@/components/logs/detail/sections/GuardrailViewer/GuardrailViewer");
 
     const data = makeGuardrailInformation({
       guardrail_provider: "bedrock",

ui/litellm-dashboard/src/components/logs/detail/sections/GuardrailViewer/GuardrailViewer.tsx

@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import PresidioDetectedEntities from "./PresidioDetectedEntities";
 import BedrockGuardrailDetails, {
   BedrockGuardrailResponse,
-} from "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
+} from "@/components/logs/detail/sections/GuardrailViewer/BedrockGuardrailDetails";
 import ContentFilterDetails from "./ContentFilterDetails";
 import CompliancePanel from "./CompliancePanel";
 import { getSpendString } from "@/utils/dataUtils";

ui/litellm-dashboard/src/components/logs/detail/sections/GuardrailViewer/PresidioDetectedEntities.test.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
 import userEvent from "@testing-library/user-event";
-import PresidioDetectedEntities from "@/components/view_logs/GuardrailViewer/PresidioDetectedEntities";
-import { renderWithProviders, screen } from "../../../../tests/test-utils";
-import { makeEntity } from "@/components/view_logs/GuardrailViewer/__tests__/fixtures";
+import PresidioDetectedEntities from "@/components/logs/detail/sections/GuardrailViewer/PresidioDetectedEntities";
+import { renderWithProviders, screen } from "../../../../../../tests/test-utils";
+import { makeEntity } from "@/components/logs/detail/sections/GuardrailViewer/__tests__/fixtures";
 
 describe("PresidioDetectedEntities", () => {
   it("renders null when entities empty", () => {

ui/litellm-dashboard/src/components/logs/detail/sections/GuardrailViewer/__tests__/fixtures.ts

@@ -3,7 +3,7 @@ import type {
   BedrockAssessment,
   BedrockGuardrailCoverage,
   BedrockGuardrailUsage,
-} from "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
+} from "@/components/logs/detail/sections/GuardrailViewer/BedrockGuardrailDetails";
 
 export interface RecognitionMetadata {
   recognizer_name: string;

ui/litellm-dashboard/src/components/logs/detail/sections/ToolsSection/ToolsSection.test.tsx

@@ -7,7 +7,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect } from "vitest";
 import { parseToolsFromLog } from "./utils";
 import { ToolsSection } from "./ToolsSection";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../../../types";
 
 const logWithTools = (toolNames: string[], calledName?: string): LogEntry => ({
   request_id: "render-1",

ui/litellm-dashboard/src/components/logs/detail/sections/ToolsSection/ToolsSection.tsx

@@ -6,7 +6,7 @@
 import { useState } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../../../types";
 import { parseToolsFromLog } from "./utils";
 import { ToolItem } from "./ToolItem";
 

ui/litellm-dashboard/src/components/logs/detail/sections/ToolsSection/utils.test.ts

@@ -4,7 +4,7 @@
 
 import { describe, it, expect } from "vitest";
 import { parseToolsFromLog, hasTools } from "./utils";
-import { LogEntry } from "../columns";
+import { LogEntry } from "../../../types";
 
 describe("ToolsSection utils", () => {
   describe("parseToolsFromLog", () => {

ui/litellm-dashboard/src/components/logs/detail/sections/ToolsSection/utils.ts

@@ -2,7 +2,7 @@
  * Utility functions for parsing and processing tool data from log entries
  */
 
-import { LogEntry } from "../columns";
+import { LogEntry } from "../../../types";
 import { ParsedTool, ToolDefinition, ToolCall } from "./types";
 
 /**

ui/litellm-dashboard/src/components/logs/detail/sections/VectorStoreViewer.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { getProviderLogoAndName } from "../provider_info_helpers";
+import { getProviderLogoAndName } from "../../../provider_info_helpers";
 
 interface VectorStoreContent {
   text: string;

ui/litellm-dashboard/src/components/logs/detail/useKeyboardNavigation.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, renderHook } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import type { LogEntry } from "../columns";
+import type { LogEntry } from "../types";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
 
 const logs = [{ request_id: "first" }, { request_id: "second" }] as LogEntry[];

ui/litellm-dashboard/src/components/logs/detail/useKeyboardNavigation.ts

@@ -1,6 +1,6 @@
 import { useShortcut } from "@/components/shared/useShortcut";
 
-import { LogEntry } from "../columns";
+import { LogEntry } from "../types";
 
 interface UseKeyboardNavigationProps {
   isOpen: boolean;

ui/litellm-dashboard/src/components/logs/request/LogsTableToolbar.tsx

@@ -10,8 +10,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/cva.config";
 
-import { QUICK_SELECT_OPTIONS } from "./constants";
-import { getTimeRangeDisplay } from "./logs_utils";
+import { QUICK_SELECT_OPTIONS } from "../constants";
+import { getTimeRangeDisplay } from "./timeRange";
 
 const DATETIME_LOCAL_FORMAT = "YYYY-MM-DDTHH:mm";
 

ui/litellm-dashboard/src/components/logs/request/RequestLogsFilters.test.tsx

@@ -3,9 +3,9 @@ import userEvent from "@testing-library/user-event";
 import { useState } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { chooseSelectOption, renderWithProviders, testQueryClient } from "../../../tests/test-utils";
-import { ERROR_CODE_OPTIONS } from "./constants";
-import { LOG_FILTER_IDS } from "./log_filter_logic";
+import { chooseSelectOption, renderWithProviders, testQueryClient } from "../../../../tests/test-utils";
+import { ERROR_CODE_OPTIONS } from "../constants";
+import { LOG_FILTER_IDS } from "./useLogFilterLogic";
 import { RequestLogsFilters } from "./RequestLogsFilters";
 
 vi.mock("@/app/(dashboard)/hooks/keys/useKeyAliases", () => ({

ui/litellm-dashboard/src/components/logs/request/RequestLogsFilters.tsx

@@ -20,9 +20,9 @@ import {
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
-import type { Team } from "../key_team_helpers/key_list";
-import { CREDENTIAL_LABELS, ERROR_CODE_OPTIONS } from "./constants";
-import { LOG_FILTER_IDS, type LogsWindow } from "./log_filter_logic";
+import type { Team } from "../../key_team_helpers/key_list";
+import { CREDENTIAL_LABELS, ERROR_CODE_OPTIONS } from "../constants";
+import { LOG_FILTER_IDS, type LogsWindow } from "./useLogFilterLogic";
 
 const ALL_VALUE = "all";
 

ui/litellm-dashboard/src/components/logs/request/RequestLogsPanel.test.tsx

@@ -5,12 +5,12 @@ import moment from "moment";
 import { NuqsTestingAdapter, type UrlUpdateEvent } from "nuqs/adapters/testing";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { render, renderWithProviders, testQueryClient } from "../../../tests/test-utils";
-import type { LogEntry } from "./columns";
+import { render, renderWithProviders, testQueryClient } from "../../../../tests/test-utils";
+import type { LogEntry } from "../types";
 import RequestLogsPanel from "./RequestLogsPanel";
 
-vi.mock("../networking", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../networking")>();
+vi.mock("../../networking", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../networking")>();
   return {
     ...actual,
     uiSpendLogsCall: vi.fn(),
@@ -22,7 +22,7 @@ vi.mock("@/components/key_team_helpers/filter_helpers", () => ({
   fetchAllTeams: vi.fn().mockResolvedValue([]),
 }));
 
-vi.mock("./LogDetailsDrawer", () => ({
+vi.mock("../detail", () => ({
   LogDetailsDrawer: function LogDetailsDrawerMock({
     open,
     logEntry,
@@ -61,7 +61,7 @@ vi.mock("@tanstack/react-pacer/debouncer", () => ({
 
 import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
 import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
-import { uiSpendLogsCall } from "../networking";
+import { uiSpendLogsCall } from "../../networking";
 
 const logEntry = (overrides: Partial<LogEntry>): LogEntry => ({
   request_id: "req-1",

ui/litellm-dashboard/src/components/logs/request/RequestLogsPanel.tsx

@@ -10,10 +10,10 @@ import { DEFAULT_PAGE_SIZE_OPTIONS } from "@/components/shared/DataTable";
 import { Button } from "@/components/ui/button";
 import { AutoRouterModelGroupsProvider } from "@/components/shared/table_cells";
 import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants";
-import type { KeyResponse } from "../key_team_helpers/key_list";
-import { keyInfoV1Call, uiSpendLogsCall } from "../networking";
-import KeyInfoView from "../templates/key_info_view";
-import type { LogEntry } from "./columns";
+import type { KeyResponse } from "../../key_team_helpers/key_list";
+import { keyInfoV1Call, uiSpendLogsCall } from "../../networking";
+import KeyInfoView from "../../templates/key_info_view";
+import type { LogEntry } from "../types";
 import {
   DEFAULT_LOGS_SORTING,
   formatLogsWindow,
@@ -21,9 +21,9 @@ import {
   LOG_FILTER_IDS,
   type PaginatedResponse,
   useLogFilterLogic,
-} from "./log_filter_logic";
+} from "./useLogFilterLogic";
 import { useLogDetailRouting } from "./logDetailRouting";
-import { LogDetailsDrawer } from "./LogDetailsDrawer";
+import { LogDetailsDrawer } from "../detail";
 import {
   defaultLogsTimeRange,
   type LogsTimeRange,

ui/litellm-dashboard/src/components/logs/request/RequestLogsTable.tsx

@@ -7,10 +7,10 @@ import { useMemo, useState, type ReactNode } from "react";
 import { useUserEmailLookup } from "@/app/(dashboard)/hooks/users/useUsers";
 import { DataTable, DataTableFilterDrawer, DataTableToolbar } from "@/components/shared/DataTable";
 
-import type { Team } from "../key_team_helpers/key_list";
-import type { LogEntry } from "./columns";
-import { CREDENTIAL_LABELS, SPAN_TYPE_LABELS } from "./constants";
-import { LOG_FILTER_IDS, LOG_FILTER_LABELS, type LogsWindow } from "./log_filter_logic";
+import type { Team } from "../../key_team_helpers/key_list";
+import type { LogEntry } from "../types";
+import { CREDENTIAL_LABELS, SPAN_TYPE_LABELS } from "../constants";
+import { LOG_FILTER_IDS, LOG_FILTER_LABELS, type LogsWindow } from "./useLogFilterLogic";
 import { RequestLogsFilters } from "./RequestLogsFilters";
 import { getRequestLogsTableColumns } from "./RequestLogsTableColumns";
 

ui/litellm-dashboard/src/components/logs/request/RequestLogsTableColumns.test.tsx

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from "vitest";
 
 import { DataTable } from "@/components/shared/DataTable";
 
-import type { LogEntry } from "./columns";
+import type { LogEntry } from "../types";
 import { getRequestLogsTableColumns } from "./RequestLogsTableColumns";
 
 const { copyToClipboardMock } = vi.hoisted(() => ({ copyToClipboardMock: vi.fn() }));