---
phase: 25-template-explorer-ui
plan: 02
type: execute
---

<objective>
Add left-hand filter panel with search and category filters, integrate into WelcomeModal.

Purpose: Complete the template explorer with filtering and search capabilities, replace existing template selection.
Output: Fully functional template explorer with sidebar filters, search, and WelcomeModal integration.
</objective>

<execution_context>
~/.claude/get-shit-done/workflows/execute-phase.md
~/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md

**From Plan 01:**
@src/types/quickstart.ts (TemplateMetadata types)
@src/components/quickstart/TemplateCard.tsx
@src/components/quickstart/TemplateExplorerView.tsx

**Integration points:**
@src/components/quickstart/WelcomeModal.tsx

**Existing patterns:**
- Icon-based filter buttons from ModelSearchDialog (Phase 23)
- Search input styling from existing modals
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add sidebar filter panel to TemplateExplorerView</name>
  <files>src/components/quickstart/TemplateExplorerView.tsx</files>
  <action>
Restructure TemplateExplorerView to have a left sidebar with filters:

1. Layout change:
   - Header stays at top (back button + title)
   - Below header: flex row with sidebar (w-48 flex-shrink-0) + main grid area
   - Sidebar has: search input, category filters, tags section

2. Search input:
   - Text input with search icon (magnifying glass)
   - Placeholder: "Search templates..."
   - Filters templates by name and description match
   - Debounce with 200ms delay using useRef/setTimeout pattern

3. Category filters:
   - "All" button (default selected)
   - Category buttons: Product, Style, Composition, Community
   - Use icon buttons similar to provider filter in ModelSearchDialog
   - Single-select (only one category active at a time)
   - Apply bg-blue-500/20 border-blue-500/50 for selected state

4. Tags section (below categories):
   - "Tags" label (text-xs text-neutral-500 uppercase)
   - Show all unique tags from displayed templates
   - Small pill buttons, multi-select
   - Selected tags use blue styling, unselected use neutral

5. Filtering logic:
   - Search: filter by name OR description containing search term (case-insensitive)
   - Category: filter by category match (or all if "All" selected)
   - Tags: filter by ANY tag match (OR logic, inclusive)
   - Apply all filters: search AND category AND tags

6. Empty state:
   - Show "No templates match your filters" message
   - Include button to clear all filters
  </action>
  <verify>npm run build succeeds, filter logic is correct</verify>
  <done>Sidebar with search, category filters, and tag filters working; templates filter correctly; empty state displayed when no matches</done>
</task>

<task type="auto">
  <name>Task 2: Integrate TemplateExplorerView into WelcomeModal</name>
  <files>src/components/quickstart/WelcomeModal.tsx, src/types/quickstart.ts</files>
  <action>
Replace QuickstartTemplatesView with TemplateExplorerView in WelcomeModal:

1. Update QuickstartView type in quickstart.ts:
   - Change "templates" to "explorer" (optional, can keep "templates" for simplicity)

2. In WelcomeModal.tsx:
   - Import TemplateExplorerView (not QuickstartTemplatesView)
   - Replace QuickstartTemplatesView render with TemplateExplorerView
   - Keep same props: onBack, onWorkflowSelected
   - Widen modal for explorer: change max-w-3xl to max-w-4xl to accommodate sidebar

3. The modal should expand to show the new layout comfortably:
   - Explorer has sidebar + grid, needs more horizontal space
   - Consider adding max-h-[80vh] with overflow handling

4. Remove QuickstartTemplatesView.tsx import (keep file for now, can clean up later)
  </action>
  <verify>npm run build succeeds, WelcomeModal shows TemplateExplorerView</verify>
  <done>WelcomeModal uses TemplateExplorerView, modal sized appropriately for sidebar layout</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Template Explorer with cards layout, sidebar filters, search, and category filtering</what-built>
  <how-to-verify>
    1. Run: npm run dev
    2. Open http://localhost:3000
    3. Click "Templates" in the welcome modal
    4. Verify:
       - Templates display in card grid format (not compact buttons)
       - Each card shows name, description, node count, category, tags
       - Left sidebar has search input and filter buttons
       - Search filters templates as you type
       - Category buttons filter by category
       - Tag pills filter by tag (multi-select)
       - Clicking a template loads it into the canvas
       - Modal is wide enough for comfortable browsing
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<verification>
Before declaring phase complete:
- [ ] `npm run build` succeeds
- [ ] `npm test` passes (no broken tests)
- [ ] Template explorer displays in WelcomeModal
- [ ] Search, category, and tag filtering all work
- [ ] Templates can be selected and loaded
</verification>

<success_criteria>

- All tasks completed
- All verification checks pass
- Template explorer replaces old template view
- Filtering works correctly with search, categories, and tags
- UI is responsive and visually consistent
- Phase 25 complete
</success_criteria>

<output>
After completion, create `.planning/phases/25-template-explorer-ui/25-02-SUMMARY.md`
</output>