feat: add empty state card component and integrate AI suggestion functionality

- Introduced the EmptyStateCard component to display contextual guidance when columns are empty.
- Enhanced the KanbanBoard and BoardView components to utilize the new EmptyStateCard for improved user experience.
- Added AI suggestion functionality to the empty state configuration, allowing users to generate ideas directly from the backlog column.
- Updated constants to define empty state configurations for various column types.

apps/ui/src/components/views/board-view/constants.ts

@@ -3,6 +3,93 @@ import type { PipelineConfig, FeatureStatusWithPipeline } from '@automaker/types
 
 export type ColumnId = Feature['status'];
 
+/**
+ * Empty state configuration for each column type
+ */
+export interface EmptyStateConfig {
+  title: string;
+  description: string;
+  icon: 'lightbulb' | 'play' | 'clock' | 'check' | 'sparkles';
+  shortcutKey?: string; // Keyboard shortcut label (e.g., 'N', 'A')
+  shortcutHint?: string; // Human-readable shortcut hint
+  primaryAction?: {
+    label: string;
+    actionType: 'ai-suggest' | 'none';
+  };
+  exampleCard?: {
+    title: string;
+    category: string;
+  };
+}
+
+/**
+ * Default empty state configurations per column type
+ */
+export const EMPTY_STATE_CONFIGS: Record<string, EmptyStateConfig> = {
+  backlog: {
+    title: 'Ready for Ideas',
+    description:
+      'Add your first feature idea to get started using the button below, or let AI help generate ideas.',
+    icon: 'lightbulb',
+    shortcutHint: 'Press',
+    primaryAction: {
+      label: 'Use AI Suggestions',
+      actionType: 'ai-suggest',
+    },
+    exampleCard: {
+      title: 'User Authentication',
+      category: 'Core Feature',
+    },
+  },
+  in_progress: {
+    title: 'Nothing in Progress',
+    description: 'Drag a feature from the backlog here or click implement to start working on it.',
+    icon: 'play',
+    exampleCard: {
+      title: 'Implementing feature...',
+      category: 'In Development',
+    },
+  },
+  waiting_approval: {
+    title: 'No Items Awaiting Approval',
+    description: 'Features will appear here after implementation is complete and need your review.',
+    icon: 'clock',
+    exampleCard: {
+      title: 'Ready for Review',
+      category: 'Completed',
+    },
+  },
+  verified: {
+    title: 'No Verified Features',
+    description: 'Approved features will appear here. They can then be completed and archived.',
+    icon: 'check',
+    exampleCard: {
+      title: 'Approved & Ready',
+      category: 'Verified',
+    },
+  },
+  // Pipeline step default configuration
+  pipeline_default: {
+    title: 'Pipeline Step Empty',
+    description: 'Features will flow through this step during the automated pipeline process.',
+    icon: 'sparkles',
+    exampleCard: {
+      title: 'Processing...',
+      category: 'Pipeline',
+    },
+  },
+};
+
+/**
+ * Get empty state config for a column, with fallback for pipeline columns
+ */
+export function getEmptyStateConfig(columnId: string): EmptyStateConfig {
+  if (columnId.startsWith('pipeline_')) {
+    return EMPTY_STATE_CONFIGS.pipeline_default;
+  }
+  return EMPTY_STATE_CONFIGS[columnId] || EMPTY_STATE_CONFIGS.backlog;
+}
+
 export interface Column {
   id: FeatureStatusWithPipeline;
   title: string;