refactor(ui): colocate agents and guardrails views, keeping shared selectors and types (#32728)

* refactor(ui): colocate agents and guardrails views, keeping shared selectors and types

The last two group-1 colocation splits. Both are file-plus-folder combos: the
page view is a top-level file (agents.tsx / guardrails.tsx) sitting beside a
supporting folder of the same name, and part of that folder is shared.

agents: agents/types (imported by the agents hook) stays in @/components/agents;
agents.tsx and the rest of the agents/ folder move into agents/_components (the
view file becomes _components/index.tsx).

guardrails: GuardrailSelector (imported by the Playground, the key edit view,
and the agents add-guardrail form) and types stay in @/components/guardrails;
guardrails.tsx and the other 47 folder files (including the tool_permission,
custom_code, content_filter, and llm_judge subfolders) move into
guardrails/_components.

Moved files' imports of the retained shared files become @/components paths,
other escaping relative imports are absolutized against @/, and moved test
files have their from/vi.mock/vi.importActual paths rewritten to match. Lint
suppressions are re-keyed for moved files only (the staying selector/types keep
their src/components keys). The shared selectors did not move, so their external
consumers are untouched. No behavior change.

* fix(ui): move the orphaned agents/guardrails view tests and drop dead GuardrailItem

Greptile follow-ups on the agents/guardrails colocation:

- agents.tsx and guardrails.tsx moved to their _components/index.tsx, but their
  sibling test files (src/components/agents.test.tsx, guardrails.test.tsx) were
  left behind still importing ./agents and ./guardrails, which broke a full
  vitest run. Move them to the matching _components/index.test.tsx and rewrite
  their view import to ./index, folder mocks to local ./ siblings, and
  networking to @/components/networking.
- Remove the unused GuardrailItem interface and its GuardrailDefinitionLocation
  import from the guardrails view (dead code carried over from before the move;
  state is typed as Guardrail[]).

ui/litellm-dashboard/eslint-metrics.json

@@ -1,5 +1,5 @@
 {
-  "@typescript-eslint/no-explicit-any": 1978,
+  "@typescript-eslint/no-explicit-any": 1977,
   "complexity": 129,
   "local/no-large-inline-object-arg": 512,
   "local/no-long-condition-chain": 233,

ui/litellm-dashboard/eslint-suppressions.json

@@ -1261,7 +1261,7 @@
       "count": 1
     }
   },
-  "src/components/agents.tsx": {
+  "src/app/(dashboard)/agents/_components/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -1269,7 +1269,7 @@
       "count": 1
     }
   },
-  "src/components/agents/add_agent_form.tsx": {
+  "src/app/(dashboard)/agents/_components/add_agent_form.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
@@ -1283,7 +1283,7 @@
       "count": 1
     }
   },
-  "src/components/agents/agent_card_discovery.tsx": {
+  "src/app/(dashboard)/agents/_components/agent_card_discovery.tsx": {
     "react-hooks/refs": {
       "count": 3
     },
@@ -1291,17 +1291,17 @@
       "count": 1
     }
   },
-  "src/components/agents/agent_cost_view.tsx": {
+  "src/app/(dashboard)/agents/_components/agent_cost_view.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/agents/agent_form_fields.tsx": {
+  "src/app/(dashboard)/agents/_components/agent_form_fields.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/agents/agent_info.tsx": {
+  "src/app/(dashboard)/agents/_components/agent_info.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1312,12 +1312,12 @@
       "count": 1
     }
   },
-  "src/components/agents/agent_virtual_keys.tsx": {
+  "src/app/(dashboard)/agents/_components/agent_virtual_keys.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/agents/dynamic_agent_form_fields.tsx": {
+  "src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx": {
     "no-nested-ternary": {
       "count": 2
     }
@@ -1534,27 +1534,27 @@
       "count": 1
     }
   },
-  "src/components/guardrails.tsx": {
+  "src/app/(dashboard)/guardrails/_components/index.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/components/guardrails/GuardrailTestPanel.tsx": {
+  "src/app/(dashboard)/guardrails/_components/GuardrailTestPanel.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/guardrails/GuardrailTestPlayground.tsx": {
+  "src/app/(dashboard)/guardrails/_components/GuardrailTestPlayground.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/guardrails/GuardrailTestResults.tsx": {
+  "src/app/(dashboard)/guardrails/_components/GuardrailTestResults.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/guardrails/TeamGuardrailsTab.tsx": {
+  "src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx": {
     "no-nested-ternary": {
       "count": 2
     },
@@ -1562,7 +1562,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/add_guardrail_form.tsx": {
+  "src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx": {
     "no-nested-ternary": {
       "count": 4
     },
@@ -1573,7 +1573,7 @@
       "count": 2
     }
   },
-  "src/components/guardrails/content_filter/CompetitorIntentConfiguration.tsx": {
+  "src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1581,7 +1581,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/content_filter/ContentCategoryConfiguration.tsx": {
+  "src/app/(dashboard)/guardrails/_components/content_filter/ContentCategoryConfiguration.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
@@ -1589,12 +1589,12 @@
       "count": 1
     }
   },
-  "src/components/guardrails/content_filter/ContentFilterDisplay.tsx": {
+  "src/app/(dashboard)/guardrails/_components/content_filter/ContentFilterDisplay.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/guardrails/content_filter/ContentFilterManager.tsx": {
+  "src/app/(dashboard)/guardrails/_components/content_filter/ContentFilterManager.tsx": {
     "max-params": {
       "count": 2
     },
@@ -1602,7 +1602,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/custom_code/CustomCodeModal.tsx": {
+  "src/app/(dashboard)/guardrails/_components/custom_code/CustomCodeModal.tsx": {
     "no-nested-ternary": {
       "count": 6
     },
@@ -1613,7 +1613,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/edit_guardrail_form.tsx": {
+  "src/app/(dashboard)/guardrails/_components/edit_guardrail_form.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -1624,7 +1624,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/guardrail_info.tsx": {
+  "src/app/(dashboard)/guardrails/_components/guardrail_info.tsx": {
     "max-params": {
       "count": 1
     },
@@ -1635,7 +1635,7 @@
       "count": 3
     }
   },
-  "src/components/guardrails/guardrail_optional_params.tsx": {
+  "src/app/(dashboard)/guardrails/_components/guardrail_optional_params.tsx": {
     "no-nested-ternary": {
       "count": 5
     },
@@ -1643,7 +1643,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/guardrail_provider_fields.tsx": {
+  "src/app/(dashboard)/guardrails/_components/guardrail_provider_fields.tsx": {
     "no-nested-ternary": {
       "count": 5
     },
@@ -1651,7 +1651,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/guardrail_table.tsx": {
+  "src/app/(dashboard)/guardrails/_components/guardrail_table.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1659,7 +1659,7 @@
       "count": 1
     }
   },
-  "src/components/guardrails/tool_permission/ToolPermissionRulesEditor.tsx": {
+  "src/app/(dashboard)/guardrails/_components/tool_permission/ToolPermissionRulesEditor.tsx": {
     "no-restricted-imports": {
       "count": 1
     },

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx

@@ -4,7 +4,7 @@ import MessageManager from "@/components/molecules/message_manager";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import { Button } from "@tremor/react";
 import { CheckCircleFilled, KeyOutlined, RobotOutlined, AppstoreOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import CreatedKeyDisplay from "../shared/CreatedKeyDisplay";
+import CreatedKeyDisplay from "@/components/shared/CreatedKeyDisplay";
 import {
   createAgentCall,
   getAgentCreateMetadata,
@@ -14,19 +14,19 @@ import {
   keyUpdateCall,
   modelAvailableCall,
   AgentCreateInfo,
-} from "../networking";
+} from "@/components/networking";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
-import { Team } from "../key_team_helpers/key_list";
-import TeamDropdown from "../common_components/team_dropdown";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import { Team } from "@/components/key_team_helpers/key_list";
+import TeamDropdown from "@/components/common_components/team_dropdown";
 import AgentFormFields from "./agent_form_fields";
 import AgentCardDiscovery, { DiscoveredAgentCardSelection } from "./agent_card_discovery";
 import { buildDiscoveryRequest, overlayDiscoveredCardParams } from "./agent_discovery_utils";
 import DynamicAgentFormFields, { buildDynamicAgentData } from "./dynamic_agent_form_fields";
 import { getDefaultFormValues, buildAgentDataFromForm } from "./agent_config";
-import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
-import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
-import GuardrailSelector from "../guardrails/GuardrailSelector";
+import MCPServerSelector from "@/components/mcp_server_management/MCPServerSelector";
+import MCPToolPermissions from "@/components/mcp_server_management/MCPToolPermissions";
+import GuardrailSelector from "@/components/guardrails/GuardrailSelector";
 
 const { Step } = Steps;
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx

@@ -2,18 +2,18 @@ import React from "react";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "../../../tests/test-utils";
+import { renderWithProviders } from "@/../tests/test-utils";
 import AgentCardDiscovery from "./agent_card_discovery";
 
-vi.mock("../networking", async () => {
-  const actual = await vi.importActual<any>("../networking");
+vi.mock("@/components/networking", async () => {
+  const actual = await vi.importActual<any>("@/components/networking");
   return {
     ...actual,
     discoverAgentCardCall: vi.fn(),
   };
 });
 
-import { discoverAgentCardCall } from "../networking";
+import { discoverAgentCardCall } from "@/components/networking";
 
 const mockDiscover = discoverAgentCardCall as unknown as ReturnType<typeof vi.fn>;
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.tsx

@@ -11,7 +11,7 @@ import {
   SearchOutlined,
 } from "@ant-design/icons";
 
-import { DiscoveredAgentCard, discoverAgentCardCall } from "../networking";
+import { DiscoveredAgentCard, discoverAgentCardCall } from "@/components/networking";
 import {
   ALLOWED_CAPABILITY_KEYS,
   selectionsFromSavedAgentCard,

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_cost_view.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Title } from "@tremor/react";
 import { Descriptions } from "antd";
-import { Agent } from "./types";
+import { Agent } from "@/components/agents/types";
 
 interface AgentCostViewProps {
   agent: Agent;

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_discovery_utils.ts

@@ -1,4 +1,4 @@
-import { AgentCreateInfo, DiscoveredAgentCard, DiscoveryMode } from "../networking";
+import { AgentCreateInfo, DiscoveredAgentCard, DiscoveryMode } from "@/components/networking";
 
 export interface DiscoveryRequestPlan {
   url: string;

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx

@@ -3,11 +3,11 @@ import { Card, Title, Text, Button as TremorButton, Tab, TabGroup, TabList, TabP
 import { Form, Input, InputNumber, Button as AntButton, Spin, Descriptions, Divider } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
 import { ArrowLeftIcon } from "@heroicons/react/outline";
-import { getAgentInfo, patchAgentCall, getAgentCreateMetadata, AgentCreateInfo } from "../networking";
-import { Agent } from "./types";
-import { KeyResponse } from "../key_team_helpers/key_list";
+import { getAgentInfo, patchAgentCall, getAgentCreateMetadata, AgentCreateInfo } from "@/components/networking";
+import { Agent } from "@/components/agents/types";
+import { KeyResponse } from "@/components/key_team_helpers/key_list";
 import { useKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
-import KeyInfoView from "../templates/key_info_view";
+import KeyInfoView from "@/components/templates/key_info_view";
 import AgentVirtualKeys from "./agent_virtual_keys";
 import AgentFormFields from "./agent_form_fields";
 import DynamicAgentFormFields, { buildDynamicAgentData } from "./dynamic_agent_form_fields";

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_type_utils.ts

@@ -1,5 +1,5 @@
-import { Agent } from "./types";
-import { AgentCreateInfo } from "../networking";
+import { Agent } from "@/components/agents/types";
+import { AgentCreateInfo } from "@/components/networking";
 
 /**
  * Detects the agent type from an agent's litellm_params.

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_virtual_keys.test.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { describe, it, expect, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "../../../tests/test-utils";
+import { renderWithProviders } from "@/../tests/test-utils";
 import AgentVirtualKeys from "./agent_virtual_keys";
-import type { KeyResponse } from "../key_team_helpers/key_list";
+import type { KeyResponse } from "@/components/key_team_helpers/key_list";
 
 const makeKey = (overrides: Partial<KeyResponse>): KeyResponse =>
   ({

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_virtual_keys.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Tooltip, Typography } from "antd";
 import { KeyOutlined } from "@ant-design/icons";
-import { KeyResponse } from "../key_team_helpers/key_list";
+import { KeyResponse } from "@/components/key_team_helpers/key_list";
 
 const { Title, Text } = Typography;
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Form, Input, Select, Collapse } from "antd";
-import { AgentCreateInfo, AgentCredentialFieldMetadata } from "../networking";
+import { AgentCreateInfo, AgentCredentialFieldMetadata } from "@/components/networking";
 import { AGENT_FORM_CONFIG } from "./agent_config";
 import CostConfigFields from "./cost_config_fields";
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/index.test.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 import { render, screen, waitFor, act, fireEvent, within } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import AgentsPanel from "./agents";
-import * as networking from "./networking";
+import AgentsPanel from "./index";
+import * as networking from "@/components/networking";
 
-vi.mock("./networking", () => ({
+vi.mock("@/components/networking", () => ({
   getAgentsList: vi.fn().mockResolvedValue({ agents: [] }),
   deleteAgentCall: vi.fn(),
 }));
 
-vi.mock("./agents/add_agent_form", () => ({
+vi.mock("./add_agent_form", () => ({
   default: () => <div data-testid="add-agent-form" />,
 }));
 
-vi.mock("./agents/agent_info", () => ({
+vi.mock("./agent_info", () => ({
   default: () => <div data-testid="agent-info" />,
 }));
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/index.tsx

@@ -13,15 +13,15 @@ import {
 } from "@tremor/react";
 import { Modal, Alert, Tooltip, Skeleton, Switch } from "antd";
 import { CheckCircleOutlined } from "@ant-design/icons";
-import { getAgentsList, deleteAgentCall } from "./networking";
-import AddAgentForm from "./agents/add_agent_form";
+import { getAgentsList, deleteAgentCall } from "@/components/networking";
+import AddAgentForm from "./add_agent_form";
 import { isAdminRole } from "@/utils/roles";
-import AgentInfoView from "./agents/agent_info";
-import NotificationsManager from "./molecules/notifications_manager";
-import { Agent } from "./agents/types";
-import { Team } from "./key_team_helpers/key_list";
+import AgentInfoView from "./agent_info";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import { Agent } from "@/components/agents/types";
+import { Team } from "@/components/key_team_helpers/key_list";
 import { DateCell, IdCell, MoneyCell, StatusBadge } from "@/components/shared/table_cells";
-import TableIconActionButton from "./common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
+import TableIconActionButton from "@/components/common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
 
 interface AgentsPanelProps {
   accessToken: string | null;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import AgentsPanel from "@/components/agents";
+import AgentsPanel from "./_components";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
 

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/GuardrailTestPanel.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button } from "@tremor/react";
 import { Input, Typography, Tooltip } from "antd";
 import { CopyOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import GuardrailTestResults from "./GuardrailTestResults";
 
 const { TextArea } = Input;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/GuardrailTestPlayground.test.tsx

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import GuardrailTestPlayground from "./GuardrailTestPlayground";
 
-vi.mock("../networking");
+vi.mock("@/components/networking");
 
 Object.defineProperty(window, "matchMedia", {
   writable: true,

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/GuardrailTestPlayground.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { Card, List, Empty, Spin, Input, Typography } from "antd";
 import { ExperimentOutlined, SearchOutlined } from "@ant-design/icons";
 import GuardrailTestPanel from "./GuardrailTestPanel";
-import { applyGuardrail } from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
+import { applyGuardrail } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 interface GuardrailItem {
   guardrail_id?: string;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/GuardrailTestResults.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button, Card } from "@tremor/react";
 import { Typography } from "antd";
 import { CopyOutlined, CheckCircleOutlined, ClockCircleOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { Text } = Typography;
 

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { fireEvent, screen } from "@testing-library/react";
-import { renderWithProviders } from "../../../tests/test-utils";
+import { renderWithProviders } from "@/../tests/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import AddGuardrailForm from "./add_guardrail_form";
 

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx

@@ -1,12 +1,12 @@
 import { Form, Input, Modal, Select, Tag, Typography, Button } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import {
   createGuardrailCall,
   getGuardrailProviderSpecificParams,
   getGuardrailUISettings,
   modelAvailableCall,
-} from "../networking";
+} from "@/components/networking";
 import ContentFilterConfiguration from "./content_filter/ContentFilterConfiguration";
 import {
   choiceToSkipSystemForCreate,

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Card, Typography, Select, Switch, Form, Space, InputNumber } from "antd";
-import { getMajorAirlines } from "../../networking";
+import { getMajorAirlines } from "@/components/networking";
 
 const { Title, Text } = Typography;
 const { Option } = Select;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ContentCategoryConfiguration.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Card, Typography, Select, Table, Tag, Collapse, Button } from "antd";
 import { DeleteOutlined, PlusOutlined, FileTextOutlined } from "@ant-design/icons";
-import { getCategoryYaml } from "../../networking";
+import { getCategoryYaml } from "@/components/networking";
 
 const { Title, Text } = Typography;
 const { Option } = Select;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ContentFilterConfiguration.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Typography, Space, Upload, Card, Button } from "antd";
 import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
-import { validateBlockedWordsFile } from "../../networking";
-import NotificationsManager from "../../molecules/notifications_manager";
+import { validateBlockedWordsFile } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import PatternModal from "./PatternModal";
 import CustomPatternModal from "./CustomPatternModal";
 import KeywordModal from "./KeywordModal";

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/custom_code/CustomCodeModal.tsx

@@ -11,8 +11,8 @@ import {
   UsergroupAddOutlined,
   ExportOutlined,
 } from "@ant-design/icons";
-import { createGuardrailCall, updateGuardrailCall, testCustomCodeGuardrail } from "../../networking";
-import NotificationsManager from "../../molecules/notifications_manager";
+import { createGuardrailCall, updateGuardrailCall, testCustomCodeGuardrail } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { Panel } = Collapse;
 const { TextArea } = Input;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/edit_guardrail_form.tsx

@@ -9,9 +9,9 @@ import {
   type SkipToolMessageChoice,
 } from "./guardrail_info_helpers";
 import { resolveLogoSrc } from "@/lib/assetPaths";
-import { getGuardrailUISettings, getGlobalLitellmHeaderName } from "../networking";
+import { getGuardrailUISettings, getGlobalLitellmHeaderName } from "@/components/networking";
 import PiiConfiguration from "./pii_configuration";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { Title, Text } = Typography;
 const { Option } = Select;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx

@@ -11,7 +11,7 @@ import { Badge, Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, T
 import { Button, Divider, Form, Input, Select, Tooltip } from "antd";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import ContentFilterManager, { formatContentFilterDataForAPI } from "./content_filter/ContentFilterManager";
 import CustomCodeModal, { EditGuardrailData } from "./custom_code/CustomCodeModal";
 import {

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_optional_params.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Form, Select, Typography, Input, Button } from "antd";
-import NumericalInput from "../shared/numerical_input";
+import NumericalInput from "@/components/shared/numerical_input";
 
 const { Title } = Typography;
 

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_provider_fields.tsx

@@ -6,8 +6,8 @@ import {
   populateGuardrailProviderMap,
   shouldRenderContentFilterConfigSettings,
 } from "./guardrail_info_helpers";
-import { getGuardrailProviderSpecificParams } from "../networking";
-import NumericalInput from "../shared/numerical_input";
+import { getGuardrailProviderSpecificParams } from "@/components/networking";
+import NumericalInput from "@/components/shared/numerical_input";
 
 interface GuardrailProviderFieldsProps {
   selectedProvider: string | null;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.test.tsx

@@ -1,7 +1,7 @@
 import GuardrailTable from "./guardrail_table";
 import { render } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import { GuardrailDefinitionLocation } from "./types";
+import { GuardrailDefinitionLocation } from "@/components/guardrails/types";
 describe("GuardrailTable", () => {
   it("should render", () => {
     const { getByText } = render(

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.tsx

@@ -18,7 +18,7 @@ import {
   skipToolMessageToChoice,
 } from "./guardrail_info_helpers";
 import EditGuardrailForm from "./edit_guardrail_form";
-import { Guardrail, GuardrailDefinitionLocation } from "./types";
+import { Guardrail, GuardrailDefinitionLocation } from "@/components/guardrails/types";
 
 interface GuardrailTableProps {
   guardrailsList: Guardrail[];

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/index.test.tsx

@@ -1,19 +1,19 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import GuardrailsPanel from "./guardrails";
-import { getGuardrailsList } from "./networking";
+import GuardrailsPanel from "./index";
+import { getGuardrailsList } from "@/components/networking";
 
-vi.mock("./networking", () => ({
+vi.mock("@/components/networking", () => ({
   getGuardrailsList: vi.fn(),
   deleteGuardrailCall: vi.fn(),
 }));
 
-vi.mock("./guardrails/add_guardrail_form", () => ({
+vi.mock("./add_guardrail_form", () => ({
   __esModule: true,
   default: () => <div>Mock Add Guardrail Form</div>,
 }));
 
-vi.mock("./guardrails/guardrail_table", () => ({
+vi.mock("./guardrail_table", () => ({
   __esModule: true,
   default: ({ guardrailsList, onDeleteClick }: any) => (
     <div>
@@ -30,17 +30,17 @@ vi.mock("./guardrails/guardrail_table", () => ({
   ),
 }));
 
-vi.mock("./guardrails/guardrail_info", () => ({
+vi.mock("./guardrail_info", () => ({
   __esModule: true,
   default: () => <div>Mock Guardrail Info View</div>,
 }));
 
-vi.mock("./guardrails/GuardrailTestPlayground", () => ({
+vi.mock("./GuardrailTestPlayground", () => ({
   __esModule: true,
   default: () => <div>Mock Guardrail Test Playground</div>,
 }));
 
-vi.mock("./guardrails/TeamGuardrailsTab", () => ({
+vi.mock("./TeamGuardrailsTab", () => ({
   TeamGuardrailsTab: () => <div>Mock Team Guardrails Tab</div>,
 }));
 
@@ -48,7 +48,7 @@ vi.mock("@/utils/roles", () => ({
   isAdminRole: vi.fn((role: string) => role === "admin"),
 }));
 
-vi.mock("./guardrails/guardrail_info_helpers", () => ({
+vi.mock("./guardrail_info_helpers", () => ({
   getGuardrailLogoAndName: vi.fn(() => ({
     logo: null,
     displayName: "Test Provider",

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/index.tsx

@@ -1,39 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { Button, Dropdown, Tabs } from "antd";
 import { DownOutlined, PlusOutlined, CodeOutlined } from "@ant-design/icons";
-import { getGuardrailsList, deleteGuardrailCall } from "./networking";
-import AddGuardrailForm from "./guardrails/add_guardrail_form";
-import GuardrailTable from "./guardrails/guardrail_table";
+import { getGuardrailsList, deleteGuardrailCall } from "@/components/networking";
+import AddGuardrailForm from "./add_guardrail_form";
+import GuardrailTable from "./guardrail_table";
 import { isAdminRole } from "@/utils/roles";
-import GuardrailInfoView from "./guardrails/guardrail_info";
-import GuardrailTestPlayground from "./guardrails/GuardrailTestPlayground";
-import NotificationsManager from "./molecules/notifications_manager";
-import { Guardrail, GuardrailDefinitionLocation } from "./guardrails/types";
-import DeleteResourceModal from "./common_components/DeleteResourceModal";
-import { getGuardrailLogoAndName } from "./guardrails/guardrail_info_helpers";
-import { CustomCodeModal } from "./guardrails/custom_code";
-import GuardrailGarden from "./guardrails/guardrail_garden";
-import { TeamGuardrailsTab } from "./guardrails/TeamGuardrailsTab";
+import GuardrailInfoView from "./guardrail_info";
+import GuardrailTestPlayground from "./GuardrailTestPlayground";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import { Guardrail } from "@/components/guardrails/types";
+import DeleteResourceModal from "@/components/common_components/DeleteResourceModal";
+import { getGuardrailLogoAndName } from "./guardrail_info_helpers";
+import { CustomCodeModal } from "./custom_code";
+import GuardrailGarden from "./guardrail_garden";
+import { TeamGuardrailsTab } from "./TeamGuardrailsTab";
 
 interface GuardrailsPanelProps {
   accessToken: string | null;
   userRole?: string;
 }
 
-interface GuardrailItem {
-  guardrail_id?: string;
-  guardrail_name: string | null;
-  litellm_params: {
-    guardrail: string;
-    mode: string;
-    default_on: boolean;
-  };
-  guardrail_info: Record<string, any> | null;
-  created_at?: string;
-  updated_at?: string;
-  guardrail_definition_location: GuardrailDefinitionLocation;
-}
-
 interface GuardrailsResponse {
   guardrails: Guardrail[];
 }

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/pii_components.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { CategoryFilter, QuickActions, PiiEntityList } from "./pii_components";
-import type { PiiEntityCategory } from "./types";
+import type { PiiEntityCategory } from "@/components/guardrails/types";
 
 describe("CategoryFilter", () => {
   it("should render", () => {

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/pii_components.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typography, Select, Button, Checkbox, Tooltip, Tag } from "antd";
 import { CloseOutlined, EyeInvisibleOutlined, StopOutlined, FilterOutlined } from "@ant-design/icons";
-import { PiiEntityCategory } from "./types";
+import { PiiEntityCategory } from "@/components/guardrails/types";
 
 const { Text } = Typography;
 const { Option } = Select;

ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/pii_configuration.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "antd";
 import React, { useState } from "react";
 import { CategoryFilter, PiiEntityList, QuickActions } from "./pii_components";
-import { PiiConfigurationProps } from "./types";
+import { PiiConfigurationProps } from "@/components/guardrails/types";
 
 const { Title, Text } = Typography;
 

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

@@ -1,6 +1,6 @@
 "use client";
 
-import GuardrailsPanel from "@/components/guardrails";
+import GuardrailsPanel from "./_components";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function Guardrails() {

ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx

@@ -127,7 +127,7 @@ vi.mock("@/components/chat_ui/ChatUI", () => ({ default: stub("chat-ui") }));
 vi.mock("@/components/leftnav", () => ({ default: stub("sidebar") }));
 vi.mock("@/app/(dashboard)/old-usage/_components/usage", () => ({ default: stub("usage") }));
 vi.mock("@/components/cache_dashboard", () => ({ default: stub("cache-dashboard") }));
-vi.mock("@/components/guardrails", () => ({ default: stub("guardrails") }));
+vi.mock("@/app/(dashboard)/guardrails/_components", () => ({ default: stub("guardrails") }));
 vi.mock("@/components/prompts", () => ({ default: stub("prompts") }));
 vi.mock("@/components/transform_request", () => ({ default: stub("transform-request") }));
 vi.mock("@/components/mcp_tools", () => ({ MCPServers: stub("mcp-servers") }));