Add Components V2 route shell

src/flags.ts

@@ -54,4 +54,12 @@ export const ExistingFlags: ConfigFlags = {
     default: true,
     category: "beta",
   },
+
+  ["component-search-v2"]: {
+    name: "Component Search V2",
+    description:
+      "Show the experimental Components V2 page that searches across standard, published, registered, and user component sources, with optional AI rerank.",
+    default: false,
+    category: "beta",
+  },
 };

src/routes/Dashboard/DashboardComponentsV2View.tsx

@@ -0,0 +1,49 @@
+import { type ChangeEvent, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import { BlockStack } from "@/components/ui/layout";
+import { Heading, Paragraph } from "@/components/ui/typography";
+import { TOP_NAV_HEIGHT } from "@/utils/constants";
+
+/**
+ * Experimental Components V2 route shell. Search data sources and result
+ * ranking land in the follow-up PRs in this stack.
+ */
+export const DashboardComponentsV2View = () => {
+  const [query, setQuery] = useState("");
+
+  const handleQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  return (
+    <div
+      className="flex flex-col -mt-4 -mb-6 -mx-8 overflow-hidden"
+      style={{ height: `calc(100vh - ${TOP_NAV_HEIGHT}px)` }}
+    >
+      <div className="shrink-0 px-8 pt-4 pb-4 border-b border-border">
+        <BlockStack gap="3" align="stretch">
+          <BlockStack gap="1">
+            <Heading level={2}>Components V2</Heading>
+            <Paragraph size="sm" tone="subdued">
+              Search across component sources from one experimental dashboard.
+            </Paragraph>
+          </BlockStack>
+          <Input
+            type="search"
+            placeholder="e.g. train_test_split, pandas, clean up my data"
+            value={query}
+            onChange={handleQueryChange}
+            aria-label="Search components"
+            className="flex-1"
+          />
+        </BlockStack>
+      </div>
+      <div className="flex-1 min-h-0 overflow-y-auto px-8 py-4">
+        <Paragraph size="sm" tone="subdued">
+          Component results will appear here.
+        </Paragraph>
+      </div>
+    </div>
+  );
+};

src/routes/Dashboard/DashboardLayout.tsx

@@ -2,6 +2,7 @@ import { Link, Outlet } from "@tanstack/react-router";
 
 import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
 import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
+import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { Icon, type IconName } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Link as UILink } from "@/components/ui/link";
@@ -24,7 +25,7 @@ interface SidebarItem {
   exact?: boolean;
 }
 
-const SIDEBAR_ITEMS: SidebarItem[] = [
+const BASE_SIDEBAR_ITEMS: SidebarItem[] = [
   { to: "/", label: "My Dashboard", icon: "LayoutDashboard", exact: true },
   { to: "/pipelines", label: "My Pipelines", icon: "GitBranch" },
   { to: "/runs", label: "All Runs", icon: "Play" },
@@ -33,6 +34,12 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { to: "/recently-viewed", label: "Recently Viewed", icon: "Clock" },
 ];
 
+const COMPONENTS_V2_ITEM: SidebarItem = {
+  to: "/components-v2",
+  label: "Components V2",
+  icon: "PackageSearch",
+};
+
 const navItemClass = (isActive: boolean) =>
   cn(
     "w-full px-3 py-2 rounded-md text-sm cursor-pointer hover:bg-accent",
@@ -41,6 +48,18 @@ const navItemClass = (isActive: boolean) =>
 
 export function DashboardLayout() {
   const requiresAuthorization = isAuthorizationRequired();
+  const isComponentsV2Enabled = useFlagValue("component-search-v2");
+
+  // Insert the Components V2 entry directly after "Components" when the
+  // beta flag is on. Keeps the nav order intuitive without touching the
+  // base list.
+  const sidebarItems = isComponentsV2Enabled
+    ? [
+        ...BASE_SIDEBAR_ITEMS.slice(0, 4),
+        COMPONENTS_V2_ITEM,
+        ...BASE_SIDEBAR_ITEMS.slice(4),
+      ]
+    : BASE_SIDEBAR_ITEMS;
 
   return (
     <div
@@ -57,7 +76,7 @@ export function DashboardLayout() {
         </div>
 
         <BlockStack gap="1" className="px-3">
-          {SIDEBAR_ITEMS.map((item) => (
+          {sidebarItems.map((item) => (
             <Link
               key={item.to}
               to={item.to}

src/routes/Settings/SettingsLayout.tsx

@@ -1,5 +1,6 @@
 import { Link, Outlet, useRouter } from "@tanstack/react-router";
 
+import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { Button } from "@/components/ui/button";
 import { Icon, type IconName } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
@@ -42,8 +43,19 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   },
 ];
 
+const AGENT_ITEM: SidebarItem = {
+  to: "/settings/agent",
+  label: "Agent Configuration",
+  icon: "Bot",
+  testId: "settings-nav-agent",
+};
+
 export function SettingsLayout() {
   const router = useRouter();
+  const agentSettingsEnabled = useFlagValue("component-search-v2");
+  const sidebarItems = agentSettingsEnabled
+    ? [...SIDEBAR_ITEMS, AGENT_ITEM]
+    : SIDEBAR_ITEMS;
 
   const handleGoBack = () => {
     router.history.back();
@@ -76,7 +88,7 @@ export function SettingsLayout() {
               gap="1"
               className="w-48 shrink-0 border-r border-border pr-4"
             >
-              {SIDEBAR_ITEMS.map((item) => (
+              {sidebarItems.map((item) => (
                 <Link
                   key={item.to}
                   to={item.to}

src/routes/router.ts

@@ -13,9 +13,11 @@ import { AuthorizationResultScreen as HuggingFaceAuthorizationResultScreen } fro
 import { AddSecretView } from "@/components/shared/SecretsManagement/components/AddSecretView";
 import { ReplaceSecretView } from "@/components/shared/SecretsManagement/components/ReplaceSecretView";
 import { SecretsListView } from "@/components/shared/SecretsManagement/components/SecretsListView";
+import { isFlagEnabled } from "@/components/shared/Settings/useFlags";
 import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
 
 import RootLayout from "../components/layout/RootLayout";
+import { DashboardComponentsV2View } from "./Dashboard/DashboardComponentsV2View";
 import { DashboardComponentsView } from "./Dashboard/DashboardComponentsView";
 import { DashboardFavoritesView } from "./Dashboard/DashboardFavoritesView";
 import { DashboardHomeView } from "./Dashboard/DashboardHomeView";
@@ -29,6 +31,7 @@ import NotFoundPage from "./NotFoundPage";
 import PipelineRun from "./PipelineRun";
 import ArtifactPreviewPage from "./PipelineRun/ArtifactPreview";
 import { QuickStartPage } from "./QuickStart";
+import { AgentSettings } from "./Settings/sections/AgentSettings";
 import { BackendSettings } from "./Settings/sections/BackendSettings";
 import { BetaFeaturesSettings } from "./Settings/sections/BetaFeaturesSettings";
 import { PreferencesSettings } from "./Settings/sections/PreferencesSettings";
@@ -57,6 +60,7 @@ export const APP_ROUTES = {
   DASHBOARD_RUNS: "/runs",
   DASHBOARD_PIPELINES: "/pipelines",
   DASHBOARD_COMPONENTS: "/components",
+  DASHBOARD_COMPONENTS_V2: "/components-v2",
   DASHBOARD_FAVORITES: "/favorites",
   DASHBOARD_RECENTLY_VIEWED: "/recently-viewed",
   QUICK_START: QUICK_START_PATH,
@@ -69,6 +73,7 @@ export const APP_ROUTES = {
   SETTINGS_BACKEND: `${SETTINGS_PATH}/backend`,
   SETTINGS_PREFERENCES: `${SETTINGS_PATH}/preferences`,
   SETTINGS_BETA_FEATURES: `${SETTINGS_PATH}/beta-features`,
+  SETTINGS_AGENT: `${SETTINGS_PATH}/agent`,
   SETTINGS_SECRETS: `${SETTINGS_PATH}/secrets`,
   SETTINGS_SECRETS_ADD: `${SETTINGS_PATH}/secrets/add`,
   SETTINGS_SECRETS_REPLACE: `${SETTINGS_PATH}/secrets/$secretId/replace`,
@@ -128,6 +133,17 @@ const dashboardComponentsRoute = createRoute({
   component: DashboardComponentsView,
 });
 
+const dashboardComponentsV2Route = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: "/components-v2",
+  component: DashboardComponentsV2View,
+  beforeLoad: () => {
+    if (!isFlagEnabled("component-search-v2")) {
+      throw redirect({ to: APP_ROUTES.DASHBOARD_COMPONENTS });
+    }
+  },
+});
+
 const dashboardFavoritesRoute = createRoute({
   getParentRoute: () => dashboardRoute,
   path: "/favorites",
@@ -178,6 +194,17 @@ const settingsBetaFeaturesRoute = createRoute({
   component: BetaFeaturesSettings,
 });
 
+const settingsAgentRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: "/agent",
+  component: AgentSettings,
+  beforeLoad: () => {
+    if (!isFlagEnabled("component-search-v2")) {
+      throw redirect({ to: APP_ROUTES.SETTINGS_BACKEND });
+    }
+  },
+});
+
 const settingsSecretsRoute = createRoute({
   getParentRoute: () => settingsLayoutRoute,
   path: "/secrets",
@@ -253,6 +280,7 @@ const settingsRouteTree = settingsLayoutRoute.addChildren([
   settingsBackendRoute,
   settingsPreferencesRoute,
   settingsBetaFeaturesRoute,
+  settingsAgentRoute,
   secretsRouteTree,
 ]);
 
@@ -297,6 +325,7 @@ const dashboardRouteTree = dashboardRoute.addChildren([
   dashboardRunsRoute,
   dashboardPipelinesRoute,
   dashboardComponentsRoute,
+  dashboardComponentsV2Route,
   dashboardFavoritesRoute,
   dashboardRecentlyViewedRoute,
 ]);