From ad7a7b9b00ba98da5dcfd40c8e91f695ec4ca17a Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Fri, 13 Feb 2026 12:51:48 -0800
Subject: [PATCH] Add EpicChipStrip to kanban page with All Epics option and
 hide closed epics

- Move EpicChipStrip to shared components
- Use EpicChipStrip in kanban controls (full width)
- Add 'All Epics' option to show all tasks
- Filter closed epics from selector when 'Show closed' is unchecked
- Update imports in dependency-graph-page.tsx
---
 src/components/kanban/kanban-controls.tsx | 31 +++++++++++++---------
 src/components/shared/epic-chip-strip.tsx | 32 ++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/kanban/kanban-controls.tsx b/src/components/kanban/kanban-controls.tsx
index 9cb9d4c..a0bf0b7 100644
--- a/src/components/kanban/kanban-controls.tsx
+++ b/src/components/kanban/kanban-controls.tsx
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import type { KanbanFilterOptions, KanbanStats } from '../../lib/kanban';
 import type { BeadIssue } from '../../lib/types';
 
+import { EpicChipStrip } from '../shared/epic-chip-strip';
 import { StatPill } from '../shared/stat-pill';
 
 interface KanbanControlsProps {
@@ -27,8 +28,25 @@ export function KanbanControls({
   const inputClass =
     'ui-field rounded-xl px-3 py-2.5 text-sm outline-none transition';
 
+  // Build bead counts map for EpicChipStrip
+  const beadCounts = new Map<string, number>();
+  for (const epic of epics) {
+    // Count non-epic issues that belong to this epic
+    const count = epic.dependencies?.filter(d => d.type === 'parent' && d.target === epic.id).length ?? 0;
+    beadCounts.set(epic.id, count);
+  }
+
   return (
     <section className="grid gap-3">
+      {/* Epic selector - full width like /graph page */}
+      <motion.div layout>
+        <EpicChipStrip
+          epics={epics.filter((epic) => (filters.showClosed ? true : epic.status !== 'closed'))}
+          selectedEpicId={filters.epicId ?? null}
+          beadCounts={beadCounts}
+          onSelect={(epicId) => onFiltersChange({ ...filters, epicId: epicId || undefined })}
+        />
+      </motion.div>
       <motion.div layout className="grid grid-cols-1 gap-2.5 sm:flex sm:flex-wrap sm:items-center">
         <input
           type="search"
@@ -37,19 +55,6 @@ 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/shared/epic-chip-strip.tsx b/src/components/shared/epic-chip-strip.tsx
index d962b0d..f00ca3c 100644
--- a/src/components/shared/epic-chip-strip.tsx
+++ b/src/components/shared/epic-chip-strip.tsx
@@ -67,7 +67,7 @@ export function EpicChipStrip({ epics, selectedEpicId, beadCounts, onSelect }: E
                         Epic
                     </span>
                     <span className="block truncate text-sm font-semibold text-text-strong">
-                        {selectedEpic ? selectedEpic.title : 'Select an epic'}
+                        {selectedEpic ? selectedEpic.title : 'All Epics'}
                     </span>
                 </div>
 
@@ -81,6 +81,36 @@ export function EpicChipStrip({ epics, selectedEpicId, beadCounts, onSelect }: E
             {expanded ? (
                 <div className="mt-2 rounded-2xl border border-white/8 bg-[#0c0e14]/95 p-3 shadow-[0_16px_48px_rgba(0,0,0,0.5)] backdrop-blur-lg animate-fade-in">
                     <div className="grid gap-2 grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
+                        {/* "All Epics" option */}
+                        <button
+                            type="button"
+                            onClick={() => {
+                                onSelect('');
+                                setExpanded(false);
+                            }}
+                            className={`flex flex-col gap-2 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 ${selectedEpicId === null || selectedEpicId === ''
+                                ? 'border-sky-400/40 bg-sky-400/10 ring-1 ring-sky-400/15'
+                                : 'border-white/8 bg-white/[0.03] hover:bg-white/[0.06] hover:border-white/15'
+                                }`}
+                        >
+                            <div className="flex items-center justify-between gap-2 w-full">
+                                <span className="font-mono text-[9px] uppercase tracking-wider text-text-muted/60">all</span>
+                                <div className="flex items-center gap-1.5">
+                                    <div className="flex items-center gap-1 rounded-md bg-white/5 px-1.5 py-0.5">
+                                        <span className="h-1.5 w-1.5 rounded-full bg-sky-400" />
+                                        <span className="text-[9px] font-bold uppercase tracking-wider text-text-muted/70">All</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <p className="text-[12px] font-semibold leading-tight text-text-strong line-clamp-2">
+                                All Epics
+                            </p>
+                            <div className="flex items-center gap-2 mt-1">
+                                <span className="text-[10px] text-text-muted bg-white/5 px-2 py-0.5 rounded-full border border-white/5">
+                                    Show all tasks
+                                </span>
+                            </div>
+                        </button>
                         {epics.map((epic) => {
                             // Determine if this card is the currently selected epic
                             const isSelected = epic.id === selectedEpicId;