Active filters are visually distinct and individually removable

When active filters have no visible representation, users forget which constraints are in play. They see 3 results, assume the directory is empty, and leave — never realizing a price cap or category filter is silently excluding hundreds of listings. When filters lack individual remove buttons, the only escape is a full reset, which destroys the user's other selections and forces them to rebuild. Both failure modes compound: invisible filters produce abandonment, and all-or-nothing removal punishes exploration.

Render each active filter as a labeled chip with an inline remove button, positioned above the result grid so it scans at a glance. See components/ActiveFilters.tsx:

{activeFilters.map(([key, value]) => (
  <button
    key={key}
    onClick={() => onRemoveFilter(key)}
    aria-label={`Remove ${key} filter`}
    className="bg-blue-100 px-3 py-1 rounded-full"
  >
    {key}: {value} ×
  </button>
))}

• ID: directory-search-discovery.facets-filters.active-filters-visible

• Severity: critical

• What to look for: Enumerate all relevant files and Apply multiple filters and examine the UI. Look for a visual indicator of active filters (e.g., a tag, badge, or highlighted filter control). Check whether each active filter has a close/remove button (X icon) or is otherwise individually removable. Apply 2-3 filters, then remove one by one and verify each removal works independently.

• Pass criteria: Active filters are displayed visibly (as tags, badges, or highlighted selections) and each has an individual remove button or action. Clicking the remove button removes only that filter without affecting others.

• Fail criteria: Active filters are not visually displayed (user cannot tell which filters are on), or filters are not individually removable (removing one filter clears all filters, or there's no way to remove a single filter without clearing everything).

• Skip (N/A) when: Directory has fewer than 3 filterable attributes (see Global N/A Rule).

• Detail on fail: "No visual indication of active filters. Applied filters are invisible in the UI." or "Filters have no remove buttons. Only way to clear a filter is to click it again in the filter panel (not immediately obvious)."

• Remediation: Render active filters as removable chips or tags:

  // components/ActiveFilters.tsx
  export function ActiveFilters({ filters, onRemoveFilter }) {
    const activeFilters = Object.entries(filters).filter(([_, v]) => v)
  
    return (
      <div className="flex flex-wrap gap-2">
        {activeFilters.map(([key, value]) => (
          <div key={key} className="bg-blue-100 px-3 py-1 rounded-full flex items-center gap-2">
            <span>{key}: {value}</span>
            <button onClick={() => onRemoveFilter(key)}>×</button>
          </div>
        ))}
      </div>
    )
  }
  

  Show this component prominently above or below the filter panel so users always see which filters are active.