⭐️ Add pages to Navigation

Author: Phinease

…end/app/[locale]/setup/agents/config.tsx …p/[locale]/agents/AgentConfiguration.tsxfrontend/app/[locale]/setup/agents/config.tsx renamed to frontend/app/[locale]/agents/AgentConfiguration.tsx frontend/app/[locale]/setup/agents/config.tsx renamed to frontend/app/[locale]/agents/AgentConfiguration.tsx

@@ -36,7 +36,7 @@ import { configStore } from "@/lib/config";
 import AgentSetupOrchestrator from "./components/AgentSetupOrchestrator";
 import DebugConfig from "./components/DebugConfig";
 
-import "../../i18n";
+import "../i18n";
 
 // Layout Height Constant Configuration
 const LAYOUT_CONFIG: LayoutConfig = AGENT_SETUP_LAYOUT_DEFAULT;

frontend/app/[locale]/agents/AgentsContent.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, {useState, useEffect, useRef} from "react";
+import {motion} from "framer-motion";
+
+import {useSetupFlow} from "@/hooks/useSetupFlow";
+import {
+  ConnectionStatus,
+} from "@/const/modelConfig";
+
+import AgentConfig, {AgentConfigHandle} from "./AgentConfiguration";
+import SaveConfirmModal from "./components/SaveConfirmModal";
+
+interface AgentsContentProps {
+  /** Whether currently saving */
+  isSaving?: boolean;
+  /** Connection status */
+  connectionStatus?: ConnectionStatus;
+  /** Is checking connection */
+  isCheckingConnection?: boolean;
+  /** Check connection callback */
+  onCheckConnection?: () => void;
+  /** Callback to expose connection status */
+  onConnectionStatusChange?: (status: ConnectionStatus) => void;
+  /** Callback to expose saving state */
+  onSavingStateChange?: (isSaving: boolean) => void;
+}
+
+/**
+ * AgentsContent - Main component for agent configuration
+ * Can be used in setup flow or as standalone page
+ */
+export default function AgentsContent({
+  isSaving: externalIsSaving,
+  connectionStatus: externalConnectionStatus,
+  isCheckingConnection: externalIsCheckingConnection,
+  onCheckConnection: externalOnCheckConnection,
+  onConnectionStatusChange,
+  onSavingStateChange,
+}: AgentsContentProps) {
+  const agentConfigRef = useRef<AgentConfigHandle | null>(null);
+  const [showSaveConfirm, setShowSaveConfirm] = useState(false);
+  const pendingNavRef = useRef<null | (() => void)>(null);
+  
+  // Use custom hook for common setup flow logic
+  const {
+    canAccessProtectedData,
+    pageVariants,
+    pageTransition,
+  } = useSetupFlow({
+    requireAdmin: true,
+    externalConnectionStatus,
+    externalIsCheckingConnection,
+    onCheckConnection: externalOnCheckConnection,
+    onConnectionStatusChange,
+    nonAdminRedirect: "/setup/knowledges",
+  });
+
+  const [internalIsSaving, setInternalIsSaving] = useState(false);
+  const isSaving = externalIsSaving ?? internalIsSaving;
+
+  // Update external saving state
+  useEffect(() => {
+    onSavingStateChange?.(isSaving);
+  }, [isSaving, onSavingStateChange]);
+
+  return (
+    <>
+      <motion.div
+        initial="initial"
+        animate="in"
+        exit="out"
+        variants={pageVariants}
+        transition={pageTransition}
+        style={{width: "100%", height: "100%"}}
+      >
+        {canAccessProtectedData ? (
+          <AgentConfig ref={agentConfigRef} canAccessProtectedData={canAccessProtectedData} />
+        ) : null}
+      </motion.div>
+
+      <SaveConfirmModal
+        open={showSaveConfirm}
+        onCancel={async () => {
+          // Reload data from backend to discard changes
+          await agentConfigRef.current?.reloadCurrentAgentData?.();
+          setShowSaveConfirm(false);
+          const go = pendingNavRef.current;
+          pendingNavRef.current = null;
+          if (go) go();
+        }}
+        onSave={async () => {
+          try {
+            setInternalIsSaving(true);
+            await agentConfigRef.current?.saveAllChanges?.();
+            setShowSaveConfirm(false);
+            const go = pendingNavRef.current;
+            pendingNavRef.current = null;
+            if (go) go();
+          } catch (e) {
+            // errors are surfaced by underlying save
+          } finally {
+            setInternalIsSaving(false);
+          }
+        }}
+      />
+    </>
+  );
+}
+

…ts/components/AgentSetupOrchestrator.tsx …ts/components/AgentSetupOrchestrator.tsxfrontend/app/[locale]/setup/agents/components/AgentSetupOrchestrator.tsx renamed to frontend/app/[locale]/agents/components/AgentSetupOrchestrator.tsx frontend/app/[locale]/setup/agents/components/AgentSetupOrchestrator.tsx renamed to frontend/app/[locale]/agents/components/AgentSetupOrchestrator.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { TFunction } from "i18next";
 
-import { App, Modal, Typography, Button } from "antd";
+import { App, Modal, Button } from "antd";
 import { WarningFilled } from "@ant-design/icons";
 
 import { TooltipProvider } from "@/components/ui/tooltip";