feat(ui): add backlog pagination and hide feature for suggestions

apps/ui/src/components/views/board-view.tsx

@@ -379,6 +379,7 @@ export function BoardView() {
     handleForceStopFeature,
     handleStartNextFeatures,
     handleArchiveAllVerified,
+    handleHideFeature,
   } = useBoardActions({
     currentProject,
     features: hookFeatures,
@@ -744,7 +745,15 @@ export function BoardView() {
   });
 
   // Use column features hook
-  const { getColumnFeatures, completedFeatures } = useBoardColumnFeatures({
+  const {
+    getColumnFeatures,
+    completedFeatures,
+    backlogPagination,
+    showMoreBacklog,
+    showAllBacklog,
+    toggleShowOnlyHidden,
+    resetBacklogPagination,
+  } = useBoardColumnFeatures({
     features: hookFeatures,
     runningAutoTasks,
     searchQuery,
@@ -1021,13 +1030,19 @@ export function BoardView() {
             onImplement={handleStartImplementation}
             onViewPlan={(feature) => setViewPlanFeature(feature)}
             onApprovePlan={handleOpenApprovalDialog}
+            onHide={handleHideFeature}
             featuresWithContext={featuresWithContext}
             runningAutoTasks={runningAutoTasks}
             shortcuts={shortcuts}
             onStartNextFeatures={handleStartNextFeatures}
             onShowSuggestions={() => setShowSuggestionsDialog(true)}
             suggestionsCount={suggestionsCount}
             onArchiveAllVerified={() => setShowArchiveAllVerifiedDialog(true)}
+            backlogPagination={backlogPagination}
+            onShowMoreBacklog={showMoreBacklog}
+            onShowAllBacklog={showAllBacklog}
+            onToggleShowOnlyHidden={toggleShowOnlyHidden}
+            onResetBacklogPagination={resetBacklogPagination}
           />
         ) : (
           <GraphView

apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx

@@ -10,6 +10,7 @@ import {
   Eye,
   Wand2,
   Archive,
+  EyeOff,
 } from 'lucide-react';
 
 interface CardActionsProps {
@@ -28,6 +29,7 @@ interface CardActionsProps {
   onComplete?: () => void;
   onViewPlan?: () => void;
   onApprovePlan?: () => void;
+  onHide?: () => void;
 }
 
 export function CardActions({
@@ -46,6 +48,7 @@ export function CardActions({
   onComplete,
   onViewPlan,
   onApprovePlan,
+  onHide,
 }: CardActionsProps) {
   return (
     <div className="flex flex-wrap gap-1.5 -mx-3 -mb-3 px-3 pb-3">
@@ -298,6 +301,22 @@ export function CardActions({
             <Edit className="w-3 h-3 mr-1" />
             Edit
           </Button>
+          {onHide && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs px-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onHide();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`hide-${feature.id}`}
+              title={feature.hidden ? 'Show' : 'Hide'}
+            >
+              <EyeOff className="w-3 h-3" />
+            </Button>
+          )}
           {feature.planSpec?.content && onViewPlan && (
             <Button
               variant="outline"

apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx

@@ -25,6 +25,7 @@ interface KanbanCardProps {
   onComplete?: () => void;
   onViewPlan?: () => void;
   onApprovePlan?: () => void;
+  onHide?: () => void;
   hasContext?: boolean;
   isCurrentAutoTask?: boolean;
   shortcutKey?: string;
@@ -51,6 +52,7 @@ export const KanbanCard = memo(function KanbanCard({
   onComplete,
   onViewPlan,
   onApprovePlan,
+  onHide,
   hasContext,
   isCurrentAutoTask,
   shortcutKey,
@@ -177,6 +179,7 @@ export const KanbanCard = memo(function KanbanCard({
           onComplete={onComplete}
           onViewPlan={onViewPlan}
           onApprovePlan={onApprovePlan}
+          onHide={onHide}
         />
       </CardContent>
     </Card>
@@ -187,5 +190,14 @@ export const KanbanCard = memo(function KanbanCard({
     return <div className="animated-border-wrapper">{cardElement}</div>;
   }
 
+  // Wrap hidden cards with visual indicator (dimmed + grayscale)
+  if (feature.hidden) {
+    return (
+      <div className="opacity-40 grayscale hover:opacity-70 hover:grayscale-[50%] transition-all duration-200">
+        {cardElement}
+      </div>
+    );
+  }
+
   return cardElement;
 });

apps/ui/src/components/views/board-view/components/kanban-column.tsx

@@ -1,6 +1,7 @@
-import { memo } from 'react';
+import { memo, useRef, useState, useEffect } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { cn } from '@/lib/utils';
+import { ChevronUp } from 'lucide-react';
 import type { ReactNode } from 'react';
 
 interface KanbanColumnProps {
@@ -10,11 +11,16 @@ interface KanbanColumnProps {
   count: number;
   children: ReactNode;
   headerAction?: ReactNode;
+  footerAction?: ReactNode;
   opacity?: number;
   showBorder?: boolean;
   hideScrollbar?: boolean;
   /** Custom width in pixels. If not provided, defaults to 288px (w-72) */
   width?: number;
+  /** Called when user clicks the compact bar to scroll to top */
+  onCompact?: () => void;
+  /** Number of currently visible items (used in compact bar label) */
+  visibleCount?: number;
 }
 
 export const KanbanColumn = memo(function KanbanColumn({
@@ -24,12 +30,38 @@ export const KanbanColumn = memo(function KanbanColumn({
   count,
   children,
   headerAction,
+  footerAction,
   opacity = 100,
   showBorder = true,
   hideScrollbar = false,
   width,
+  onCompact,
+  visibleCount,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({ id });
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showCompactBar, setShowCompactBar] = useState(false);
+
+  // Track scroll position to show/hide compact bar
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container || !onCompact) return;
+
+    const handleScroll = () => {
+      // Show compact bar when scrolled more than 100px
+      setShowCompactBar(container.scrollTop > 100);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [onCompact]);
+
+  const handleCompactClick = () => {
+    // Scroll to top
+    scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    // Reset pagination
+    onCompact?.();
+  };
 
   // Use inline style for width if provided, otherwise use default w-72
   const widthStyle = width ? { width: `${width}px`, flexShrink: 0 } : undefined;
@@ -74,6 +106,7 @@ export const KanbanColumn = memo(function KanbanColumn({
 
       {/* Column Content */}
       <div
+        ref={scrollContainerRef}
         className={cn(
           'relative z-10 flex-1 overflow-y-auto p-2 space-y-2.5',
           hideScrollbar &&
@@ -82,7 +115,29 @@ export const KanbanColumn = memo(function KanbanColumn({
           'scroll-smooth'
         )}
       >
+        {/* Compact Bar - appears when scrolled down */}
+        {showCompactBar && onCompact && (
+          <div
+            className={cn(
+              'sticky top-0 z-20 -mx-2 -mt-2 mb-2 px-3 py-2',
+              'flex items-center justify-center gap-2',
+              'bg-primary/10 backdrop-blur-md',
+              'border-b border-primary/20',
+              'cursor-pointer',
+              'hover:bg-primary/20 transition-colors duration-200',
+              'text-xs font-medium text-primary'
+            )}
+            onClick={handleCompactClick}
+            data-testid="compact-bar"
+          >
+            <ChevronUp className="w-3.5 h-3.5" />
+            <span>Compact{visibleCount ? ` (${visibleCount})` : ''}</span>
+            <ChevronUp className="w-3.5 h-3.5" />
+          </div>
+        )}
         {children}
+        {/* Footer Action (e.g., Show More button) */}
+        {footerAction && <div className="pt-1">{footerAction}</div>}
       </div>
 
       {/* Drop zone indicator when dragging over */}

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -859,6 +859,22 @@ export function useBoardActions({
     });
   }, [features, runningAutoTasks, autoMode, updateFeature, persistFeatureUpdate]);
 
+  const handleHideFeature = useCallback(
+    (feature: Feature) => {
+      const newHidden = !feature.hidden;
+      const updates = { hidden: newHidden };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+
+      toast.success(newHidden ? 'Feature hidden' : 'Feature unhidden', {
+        description: newHidden
+          ? `Hidden: ${truncateDescription(feature.description)}`
+          : `Shown: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
   return {
     handleAddFeature,
     handleUpdateFeature,
@@ -879,5 +895,6 @@ export function useBoardActions({
     handleForceStopFeature,
     handleStartNextFeatures,
     handleArchiveAllVerified,
+    handleHideFeature,
   };
 }