fix-frontend-3-items-complete

frontend/src/App.tsx

@@ -21,6 +21,7 @@ const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
 const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
 const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage'));
 const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage'));
+const AgentCanvas = React.lazy(() => import('@/pages/front/AgentCanvas'));
 const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));
 
 const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
@@ -45,7 +46,6 @@ const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
 const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
 const Billing = React.lazy(() => import('@/pages/admin/Billing'));
 const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
-const Observability = React.lazy(() => import('@/pages/admin/Observability'));
 const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
 const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
 const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
@@ -113,6 +113,7 @@ const App: React.FC = () => {
           {/* Front Routes (authenticated only) */}
           <Route path="/" element={<FrontLayout />}>
             <Route path="chat" element={<ChatPage />} />
+            <Route path="agent-canvas" element={<AgentCanvas />} />
             <Route path="chat/:id" element={<ChatPage />} />
             <Route path="knowledge" element={<KnowledgePage />} />
             <Route path="market" element={<MarketPage />} />
@@ -152,7 +153,6 @@ const App: React.FC = () => {
             <Route path="tenant" element={<Tenant />} />
             <Route path="billing" element={<Billing />} />
             <Route path="analytics" element={<Analytics />} />
-      <Route path="observability" element={<Observability />} />
             <Route path="knowledge" element={<AdminKnowledge />} />
             <Route path="workflow" element={<AdminWorkflow />} />
             <Route path="storage" element={<AdminStorage />} />

frontend/src/components/layout/FrontLayout.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
+import { useBalance } from '@/hooks/useBalance';
 import './FrontLayout.css';
 
 const navGroups = [
@@ -100,10 +101,14 @@ const FrontLayout: React.FC = () => {
         <nav className="sidebar-nav">
           {!collapsed && balance !== null && (
             <div className="nav-item balance-item">
-              <span className="nav-icon">&#36;</span>
-              <span className="nav-label">余额: &#36; {balance.toFixed(2)}</span>
+              <span className="nav-icon">$</span>
+              <span className="nav-label">余额: $ {balance.toFixed(2)}</span>
             </div>
           )}
+                    <NavLink to="/agent-canvas" className={({ isActive }) => `nav-item ${isActive ? "active" : ""}`} title="Agent 编排">
+            <span className="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/><path d="m4.93 4.93 2.83 2.83m8.48 8.48 2.83 2.83M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83"/></svg></span>
+            {!collapsed && <span className="nav-label">Agent 编排</span>}
+          </NavLink>
           <NavLink to="/" className={({ isActive }) => `nav-item nav-home-link`} end>
             <span className="nav-item-icon">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>