feat(nav): link Catalogs from the side menu (chat#1912 row 3)

components/Icon/resolver.tsx

@@ -276,6 +276,9 @@ export const Icons = {
   clock: () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-clock-icon lucide-clock"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>
   ),
+  disc: () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-disc3-icon lucide-disc-3"><circle cx="12" cy="12" r="10"/><path d="M6 12c0-1.7.7-3.2 1.8-4.2"/><circle cx="12" cy="12" r="2"/><path d="M18 12c0 1.7-.7 3.2-1.8 4.2"/></svg>
+  ),
   files: () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-folders-icon lucide-folders"><path d="M5 8h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z"/><path d="M7 8V6a2 2 0 0 1 2-2h2l2 2h6"/></svg>
   ),

components/SideMenu/SideMenu.tsx

@@ -14,6 +14,7 @@ import AgentsNavItem from "../Sidebar/AgentsNavItem";
 import { usePathname } from "next/navigation";
 import TasksNavItem from "../Sidebar/TasksNavItem";
 import FilesNavItem from "../Sidebar/FilesNavItem";
+import CatalogsNavItem from "../Sidebar/CatalogsNavItem";
 
 const SideMenu = ({
   isVisible,
@@ -33,6 +34,7 @@ const SideMenu = ({
   const isAgents = pathname.includes("/agents");
   const isTasks = pathname.includes("/tasks");
   const isFiles = pathname.includes("/files");
+  const isCatalogs = pathname.includes("/catalogs");
 
   const goToItem = (link?: string) => {
     if (isPrepared()) {
@@ -88,6 +90,10 @@ const SideMenu = ({
           </Button>
         )}
         <div className="flex flex-col gap-1 pt-2">
+          <CatalogsNavItem
+            isActive={isCatalogs}
+            onClick={() => goToItem("catalogs")}
+          />
           <AgentsNavItem
             isActive={isAgents}
             onClick={() => goToItem("agents")}

components/Sidebar/CatalogsNavItem.tsx

@@ -0,0 +1,26 @@
+import NavButton from "./NavButton";
+
+export interface CatalogsNavItemProps {
+  isActive: boolean;
+  isExpanded?: boolean;
+  onClick: () => void;
+}
+
+const CatalogsNavItem = ({
+  isActive,
+  isExpanded,
+  onClick,
+}: CatalogsNavItemProps) => {
+  return (
+    <NavButton
+      icon="disc"
+      label="Catalogs"
+      isActive={isActive}
+      isExpanded={isExpanded}
+      onClick={onClick}
+      aria-label="View catalogs"
+    />
+  );
+};
+
+export default CatalogsNavItem;

components/Sidebar/Menu.tsx

@@ -24,6 +24,7 @@ const Menu = ({ isExpanded, isPinned = false, onTogglePin }: MenuProps) => {
   const isAgents = pathname.includes("/agents");
   const isTasks = pathname.includes("/tasks");
   const isFiles = pathname.includes("/files");
+  const isCatalogs = pathname.includes("/catalogs");
 
   const goToItem = (link?: string) => {
     if (isPrepared()) {
@@ -47,6 +48,7 @@ const Menu = ({ isExpanded, isPinned = false, onTogglePin }: MenuProps) => {
         isAgents={isAgents}
         isTasks={isTasks}
         isFiles={isFiles}
+        isCatalogs={isCatalogs}
         onNavigate={goToItem}
       />
 

components/Sidebar/SecondaryNav.tsx

@@ -1,12 +1,14 @@
 import AgentsNavItem from "./AgentsNavItem";
 import TasksNavItem from "./TasksNavItem";
 import FilesNavItem from "./FilesNavItem";
+import CatalogsNavItem from "./CatalogsNavItem";
 
 interface SecondaryNavProps {
   isExpanded: boolean;
   isAgents: boolean;
   isTasks: boolean;
   isFiles: boolean;
+  isCatalogs: boolean;
   onNavigate: (path: string) => void;
 }
 
@@ -15,9 +17,11 @@ const SecondaryNav = ({
   isAgents,
   isTasks,
   isFiles,
+  isCatalogs,
   onNavigate,
 }: SecondaryNavProps) => (
   <div className="flex flex-col gap-1 w-full mt-3">
+    <CatalogsNavItem isActive={isCatalogs} isExpanded={isExpanded} onClick={() => onNavigate("catalogs")} />
     <AgentsNavItem isActive={isAgents} isExpanded={isExpanded} onClick={() => onNavigate("agents")} />
     <TasksNavItem isActive={isTasks} isExpanded={isExpanded} onClick={() => onNavigate("tasks")} />
     <FilesNavItem isActive={isFiles} isExpanded={isExpanded} onClick={() => onNavigate("files")} />

components/Sidebar/__tests__/SecondaryNav.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import SecondaryNav from "@/components/Sidebar/SecondaryNav";
+
+vi.mock("@/components/Agents/useAgentData", () => ({
+  useAgentData: () => ({ prefetchAgents: vi.fn() }),
+}));
+
+const renderNav = (overrides = {}) => {
+  const onNavigate = vi.fn();
+  render(
+    <SecondaryNav
+      isExpanded
+      isAgents={false}
+      isTasks={false}
+      isFiles={false}
+      isCatalogs={false}
+      onNavigate={onNavigate}
+      {...overrides}
+    />,
+  );
+  return { onNavigate };
+};
+
+describe("SecondaryNav", () => {
+  // chat#1912 row 3: Catalogs is the valuation payoff surface and was
+  // reachable only by direct URL, so a customer could not find it from the
+  // app's own navigation. Reporter and quote live on the issue, not here.
+  it("links Catalogs alongside the other tools", () => {
+    renderNav();
+
+    expect(
+      screen.getByRole("button", { name: /view catalogs/i }),
+    ).toBeDefined();
+  });
+
+  it("navigates to the catalogs route when Catalogs is clicked", () => {
+    const { onNavigate } = renderNav();
+
+    fireEvent.click(screen.getByRole("button", { name: /view catalogs/i }));
+
+    expect(onNavigate).toHaveBeenCalledWith("catalogs");
+  });
+
+  it("still links the pre-existing tools", () => {
+    renderNav();
+
+    expect(screen.getByRole("button", { name: /view agents/i })).toBeDefined();
+    expect(screen.getByRole("button", { name: /view tasks/i })).toBeDefined();
+    expect(screen.getByRole("button", { name: /view files/i })).toBeDefined();
+  });
+});