Skip to content

search filter

Search & Filter Interface Variations


Option A: Header Search Bar (Global)

┌──────────────────────────────────────────────────────────────────────────────┐
│ TC Portal [🔍 Search documentation... ] 👤 │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Sidebar │ Content Area │
│ │ │

Search results dropdown:

┌──────────────────────────────────────────────────────────────────────────────┐
│ TC Portal [🔍 discovery ] 👤 │
├──────────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 📄 Discovery Agent Agent │ │
│ │ ...explores codebases to find patterns... │ │
│ │ ─────────────────────────────────────────────────────── │ │
│ │ 📄 /discovery Command │ │
│ │ Run discovery process for codebase analysis │ │
│ │ ─────────────────────────────────────────────────────── │ │
│ │ 📁 Discovery Phase Epic │ │
│ │ TP-1859: Initial discovery and planning │ │
│ │ ─────────────────────────────────────────────────────── │ │
│ │ [View all 12 results →] │ │
│ └──────────────────────────────────────────────────────────┘ │

Pros: Always accessible, familiar pattern, quick access Cons: Takes header space, dropdown may feel cramped


Option B: Dedicated Search Page

┌──────────────────────────────────────────────────────────────────────────────┐
│ Documentation Search │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 🔍 Search all documentation... │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Filter by type: │
│ [All] [Agents] [Commands] [Skills] [MCP] [Initiatives] [Epics] │
│ │
│ ────────────────────────────────────────────────────────────────────────── │
│ │
│ 12 results for "discovery" │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 📄 Discovery Agent Agent │ │
│ │ │ │
│ │ This agent **explores** codebases to find patterns and understand │ │
│ │ architecture. Use it when you need to quickly **discover** how... │ │
│ │ │ │
│ │ .claude/agents/discovery-agent.md Updated 2d ago │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 📄 /discovery Command │ │
│ │ │ │
│ │ Run **discovery** process for comprehensive codebase analysis... │ │
│ │ │ │
│ │ .claude/commands/discovery.md Updated 1w ago │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘

Pros: Full-featured, room for filters and results, highlighted matches Cons: Requires navigation to search page


Option C: Index Page Inline Filter

┌──────────────────────────────────────────────────────────────────────────────┐
│ Agents [+ Create New Agent] │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ Sort: [▼ Name] [▼ Modified] │
│ │ 🔍 Filter agents... │ │
│ └─────────────────────────────────────┘ │
│ │
│ Showing 8 of 15 agents │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 🤖 Discovery Agent │ │
│ │ Explores codebases to find patterns Updated 2d │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 🤖 Quality Assurance │ │
│ │ Reviews code and runs test suites Updated 1w │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ 🤖 Release Manager │ │
│ │ Handles release process and changelog Updated 3d │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘

Pros: Contextual, filters within current section, simple Cons: Only searches current document type


Option D: Command Palette Style (Cmd+K)

Normal view (no search visible):
┌──────────────────────────────────────────────────────────────────────────────┐
│ TC Portal 👤 │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Content... │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
After pressing Cmd+K:
┌──────────────────────────────────────────────────────────────────────────────┐
│ TC Portal 👤 │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 🔍 discovery_ │ │
│ ├────────────────────────────────────────────────────────┤ │
│ │ 📄 Discovery Agent → agent │ │
│ │ 📄 /discovery → command │ │
│ │ 📁 Discovery Phase → epic │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ + Create "discovery" as new agent │ │
│ │ + Create "discovery" as new command │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ (dimmed background) │
│ │
└──────────────────────────────────────────────────────────────────────────────┘

Pros: Power-user friendly, doesn’t clutter UI, quick access Cons: Hidden, requires keyboard, not discoverable


Option E: Sidebar Search with Results

┌──────────────────────────────────────────────────────────────────────────────┐
│ TC Portal 👤 │
├────────────────────────┬─────────────────────────────────────────────────────┤
│ Documentation │ │
│ │ Content area... │
│ ┌──────────────────┐ │ │
│ │ 🔍 Search... │ │ │
│ └──────────────────┘ │ │
│ │ │
│ ▼ Agents (15) │ │
│ Discovery Agent │ │
│ Quality Assurance │ │
│ Release Manager │ │
│ ... │ │
│ │ │
│ ▶ Commands (23) │ │
│ ▶ Skills (8) │ │
│ ▶ Initiatives (3) │ │
│ │ │
└────────────────────────┴─────────────────────────────────────────────────────┘
When searching:
┌────────────────────────┐
│ 🔍 discov_ │
├────────────────────────┤
│ Results: │
│ │
│ Agents │
│ Discovery Agent │
│ │
│ Commands │
│ /discovery │
│ │
│ Epics │
│ Discovery Phase │
│ │
└────────────────────────┘

Pros: Always visible, grouped by type, integrates with nav Cons: Limited space for results, sidebar may be narrow


Recommendation

Combination: Option A (Header) + Option C (Index Filter)

  1. Global header search for cross-type discovery
  2. Inline filters on index pages for within-type browsing
  3. Optional Cmd+K shortcut for power users (add later)

This matches the spec decision for “client-side filtering” while providing good UX at multiple levels.