New Columns and columns visibility

frontend/src/config/pages/tasks.config.tsx

@@ -26,6 +26,7 @@ export interface ColumnConfig {
   toggleable?: boolean; // If true, this column will have a toggle button for expanding content
   toggleContentKey?: string; // Key of the field containing content to display when toggled
   toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline", "Generated Content")
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FormFieldConfig {
@@ -115,7 +116,8 @@ export const createTasksPageConfig = (
       {
         key: 'cluster_name',
         label: 'Cluster',
-        sortable: false,
+        sortable: true,
+        sortField: 'cluster_id',
         width: '200px',
         render: (_value: string, row: Task) => row.cluster_name || '-',
       },
@@ -176,6 +178,83 @@ export const createTasksPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'idea_title',
+        label: 'Idea',
+        sortable: true,
+        sortField: 'idea_id',
+        defaultVisible: false,
+        width: '200px',
+        render: (_value: string, row: Task) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {row.idea_title || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'keywords',
+        label: 'Keywords',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'meta_title',
+        label: 'Meta Title',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'meta_description',
+        label: 'Meta Description',
+        sortable: false,
+        defaultVisible: false,
+        width: '250px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'post_url',
+        label: 'Post URL',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => value ? (
+          <a
+            href={value}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 truncate block max-w-[200px]"
+          >
+            {value}
+          </a>
+        ) : (
+          <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
+        ),
+      },
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {