From 74871545c758af9ce0e8ecccda6a70c84d6c00a5 Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Fri, 13 Feb 2026 12:35:17 -0800
Subject: [PATCH] Add epic filter to kanban board

- Add epicId filter to KanbanFilterOptions
- Filter issues by parent epic when epicId is set
- Add epic dropdown to kanban controls with title-first format
- Pass epics list from kanban page to controls
---
 src/components/kanban/kanban-controls.tsx | 16 ++++++++++++++++
 src/components/kanban/kanban-page.tsx     |  1 +
 src/lib/kanban.ts                         | 11 +++++++++++
 3 files changed, 28 insertions(+)

diff --git a/src/components/kanban/kanban-controls.tsx b/src/components/kanban/kanban-controls.tsx
index 8a8f511..9cb9d4c 100644
--- a/src/components/kanban/kanban-controls.tsx
+++ b/src/components/kanban/kanban-controls.tsx
@@ -3,12 +3,14 @@
 import { motion } from 'framer-motion';
 
 import type { KanbanFilterOptions, KanbanStats } from '../../lib/kanban';
+import type { BeadIssue } from '../../lib/types';
 
 import { StatPill } from '../shared/stat-pill';
 
 interface KanbanControlsProps {
   filters: KanbanFilterOptions;
   stats: KanbanStats;
+  epics: BeadIssue[];
   onFiltersChange: (filters: KanbanFilterOptions) => void;
   onNextActionable: () => void;
   nextActionableFeedback?: string | null;
@@ -17,6 +19,7 @@ interface KanbanControlsProps {
 export function KanbanControls({
   filters,
   stats,
+  epics,
   onFiltersChange,
   onNextActionable,
   nextActionableFeedback = null,
@@ -34,6 +37,19 @@ export function KanbanControls({
           placeholder="Search by id/title/labels"
           className={`${inputClass} w-full sm:min-w-[18rem] sm:flex-1`}
         />
+        <select
+          value={filters.epicId ?? ''}
+          onChange={(event) => onFiltersChange({ ...filters, epicId: event.target.value || undefined })}
+          className={`${inputClass} ui-select w-full sm:w-52`}
+          aria-label="Epic filter"
+        >
+          <option className="ui-option" value="">All epics</option>
+          {(epics ?? []).map((epic) => (
+            <option className="ui-option" key={epic.id} value={epic.id}>
+              {epic.title.slice(0, 40)}{epic.title.length > 40 ? '…' : ''} — {epic.id}
+            </option>
+          ))}
+        </select>
         <select
           value={filters.type ?? ''}
           onChange={(event) => onFiltersChange({ ...filters, type: event.target.value })}
diff --git a/src/components/kanban/kanban-page.tsx b/src/components/kanban/kanban-page.tsx
index e2b48d3..00fae3d 100644
--- a/src/components/kanban/kanban-page.tsx
+++ b/src/components/kanban/kanban-page.tsx
@@ -282,6 +282,7 @@ export function KanbanPage({
       <KanbanControls
         filters={filters}
         stats={stats}
+        epics={localIssues.filter((issue) => issue.issue_type === 'epic')}
         onFiltersChange={setFilters}
         onNextActionable={handleNextActionable}
         nextActionableFeedback={nextActionableFeedback}
diff --git a/src/lib/kanban.ts b/src/lib/kanban.ts
index aab9400..6d66f28 100644
--- a/src/lib/kanban.ts
+++ b/src/lib/kanban.ts
@@ -11,6 +11,7 @@ export interface KanbanFilterOptions {
   type?: string;
   priority?: string;
   showClosed?: boolean;
+  epicId?: string;
 }
 
 export interface KanbanStats {
@@ -123,6 +124,7 @@ export function filterKanbanIssues(issues: BeadIssue[], filters: KanbanFilterOpt
   const type = (filters.type ?? '').trim().toLowerCase();
   const priority = (filters.priority ?? '').trim();
   const showClosed = filters.showClosed ?? false;
+  const epicId = filters.epicId?.trim();
 
   return issues.filter((issue) => {
     if (!showClosed && issue.status === 'closed') {
@@ -144,6 +146,15 @@ export function filterKanbanIssues(issues: BeadIssue[], filters: KanbanFilterOpt
       return false;
     }
 
+    if (epicId) {
+      // Filter to show only tasks belonging to this epic
+      const parentDep = issue.dependencies.find((dep) => dep.type === 'parent');
+      const issueEpicId = parentDep?.target ?? (issue.id.includes('.') ? issue.id.split('.')[0] : null);
+      if (issueEpicId !== epicId) {
+        return false;
+      }
+    }
+
     return true;
   });
 }