Add automation routes and enhance header metrics management

- Introduced new routes for Automation Rules and Automation Tasks in the frontend.
- Updated the AppSidebar to include sub-items for Automation navigation.
- Enhanced HeaderMetricsContext to manage credit and page metrics more effectively, ensuring proper merging and clearing of metrics.
- Adjusted AppLayout and TablePageTemplate to maintain credit balance while managing page metrics.

frontend/src/layout/AppLayout.tsx

@@ -224,8 +224,10 @@ const LayoutContent: React.FC = () => {
   }, [isAuthenticated, balance, loadBalance, setMetrics]);
 
   // Update header metrics when balance changes
+  // This sets credit balance which will be merged with page metrics by HeaderMetricsContext
   useEffect(() => {
     if (!isAuthenticated || !balance) {
+      // Clear credit balance but keep page metrics
       setMetrics([]);
       return;
     }
@@ -242,6 +244,7 @@ const LayoutContent: React.FC = () => {
       accentColor = 'purple';
     }
     
+    // Set credit balance (single metric with label "Credits" - HeaderMetricsContext will merge it)
     setMetrics([{
       label: 'Credits',
       value: balance.credits,

frontend/src/layout/AppSidebar.tsx

@@ -163,7 +163,11 @@ const AppSidebar: React.FC = () => {
       workflowItems.push({
         icon: <BoltIcon />,
         name: "Automation",
-        path: "/automation",
+        subItems: [
+          { name: "Dashboard", path: "/automation" },
+          { name: "Rules", path: "/automation/rules" },
+          { name: "Tasks", path: "/automation/tasks" },
+        ],
       });
     }