header rekated fixes

frontend/src/pages/Planner/Keywords.tsx

@@ -5,7 +5,6 @@
  */
 
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { Link } from 'react-router-dom';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchKeywords,
@@ -507,20 +506,6 @@ export default function Keywords() {
     };
   }, [keywords, totalCount]);
 
-  // Determine next step action
-  const nextStep = useMemo(() => {
-    if (totalCount === 0) {
-      return { label: 'Import Keywords', path: '/add-keywords', disabled: false };
-    }
-    if (workflowStats.unclustered >= 5) {
-      return { label: 'Auto-Cluster', action: 'cluster', disabled: false };
-    }
-    if (workflowStats.clustered > 0) {
-      return { label: 'Generate Ideas', path: '/planner/ideas', disabled: false };
-    }
-    return { label: 'Add More Keywords', path: '/add-keywords', disabled: false };
-  }, [totalCount, workflowStats]);
-
   // Handle create/edit
   const handleSave = async () => {
     try {
@@ -594,37 +579,8 @@ export default function Keywords() {
     <>
       <PageHeader 
         title="Keywords" 
-        description="Your target search terms organized for content creation"
         badge={{ icon: <ListIcon />, color: 'green' }}
-        breadcrumb="Planner"
-        actions={
-          <div className="flex items-center gap-3">
-            <span className="text-sm text-gray-500 dark:text-gray-400 hidden md:block">
-              {workflowStats.clustered}/{workflowStats.total} clustered
-            </span>
-            {nextStep.path ? (
-              <Link
-                to={nextStep.path}
-                className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded-lg transition-colors"
-              >
-                {nextStep.label}
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </Link>
-            ) : nextStep.action === 'cluster' ? (
-              <button
-                onClick={handleAutoCluster}
-                className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded-lg transition-colors"
-              >
-                {nextStep.label}
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </button>
-            ) : null}
-          </div>
-        }
+        parent="Planner"
       />
       <TablePageTemplate
         columns={pageConfig.columns}
@@ -641,6 +597,19 @@ export default function Keywords() {
           volumeMin: volumeMin,
           volumeMax: volumeMax,
         }}
+        nextAction={selectedIds.length > 0 ? {
+          label: 'Auto-Cluster Selected',
+          message: `${selectedIds.length} selected`,
+          onClick: handleAutoCluster,
+        } : workflowStats.unclustered >= 5 ? {
+          label: 'Auto-Cluster All',
+          message: `${workflowStats.unclustered} unclustered`,
+          onClick: handleAutoCluster,
+        } : workflowStats.clustered > 0 ? {
+          label: 'Generate Ideas',
+          href: '/planner/ideas',
+          message: `${workflowStats.clustered} clustered`,
+        } : undefined}
         onFilterChange={(key, value) => {
           // Normalize value to string, preserving empty strings
           const stringValue = value === null || value === undefined ? '' : String(value);