make filter icon required

frontend/components/filter-icon-popover.tsx

@@ -7,7 +7,6 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import {
-  File,
   Book,
   Scroll,
   Library,
@@ -32,13 +31,13 @@ import {
   ShoppingCart,
   ShoppingBag,
   Check,
-  Plus,
+  Filter,
 } from "lucide-react";
 import { filterAccentClasses } from "./knowledge-filter-panel";
 import { cn } from "@/lib/utils";
 
 const ICON_MAP = {
-  file: File,
+  filter: Filter,
   book: Book,
   scroll: Scroll,
   library: Library,
@@ -87,21 +86,20 @@ const COLORS = [
 export type FilterColor = (typeof COLORS)[number];
 
 const colorSwatchClasses = {
-  zinc: "bg-muted-foreground text-accent-foreground",
+  zinc: "bg-muted-foreground",
-  pink: "bg-accent-pink-foreground text-accent-pink",
+  pink: "bg-accent-pink-foreground",
-  purple: "bg-accent-purple-foreground text-accent-purple",
+  purple: "bg-accent-purple-foreground",
-  indigo: "bg-accent-indigo-foreground text-accent-indigo",
+  indigo: "bg-accent-indigo-foreground",
-  emerald: "bg-accent-emerald-foreground text-accent-emerald",
+  emerald: "bg-accent-emerald-foreground",
-  amber: "bg-accent-amber-foreground text-accent-amber",
+  amber: "bg-accent-amber-foreground",
-  red: "bg-accent-red-foreground text-accent-red",
+  red: "bg-accent-red-foreground",
-  "": "bg-muted-foreground text-accent-foreground",
 };
 
 export interface FilterIconPopoverProps {
   color: FilterColor;
-  iconKey?: IconKey | undefined;
+  iconKey: IconKey;
   onColorChange: (c: FilterColor) => void;
-  onIconChange: (k: IconKey | undefined) => void;
+  onIconChange: (k: IconKey) => void;
   triggerClassName?: string;
 }
 
@@ -118,13 +116,12 @@ export function FilterIconPopover({
       <PopoverTrigger asChild>
         <button
           className={cn(
-            "h-10 w-10 min-w-10 min-h-10 rounded-sm flex items-center justify-center transition-colors",
+            "h-10 w-10 min-w-10 min-h-10 rounded-md flex items-center justify-center transition-colors",
-            filterAccentClasses[color || ""],
+            filterAccentClasses[color],
             triggerClassName
           )}
         >
           {Icon && <Icon className="h-5 w-5" />}
-          {!Icon && <Plus className="h-5 w-5" />}
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-80" align="start">
@@ -136,8 +133,8 @@ export function FilterIconPopover({
                 type="button"
                 onClick={() => onColorChange(c)}
                 className={cn(
-                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors",
+                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-primary",
-                  colorSwatchClasses[c || ""]
+                  colorSwatchClasses[c]
                 )}
                 aria-label={c}
               >
@@ -153,18 +150,10 @@ export function FilterIconPopover({
                 <button
                   key={k}
                   type="button"
-                  onClick={() => {
+                  onClick={() => onIconChange(k as IconKey)}
-                    if (active) {
-                      onIconChange(undefined);
-                    } else {
-                      onIconChange(k as IconKey);
-                    }
-                  }}
                   className={
-                    "h-8 w-8 inline-flex items-center hover:text-foreground justify-center rounded border " +
+                    "h-8 w-8 inline-flex items-center hover:text-foreground justify-center rounded " +
-                    (active
+                    (active ? "bg-muted text-primary" : "text-muted-foreground")
-                      ? "border-muted-foreground text-foreground"
-                      : "border-0 text-muted-foreground")
                   }
                   aria-label={k}
                 >

frontend/components/knowledge-filter-list.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Loader2, Plus, X } from "lucide-react";
+import { Loader2, Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   useGetFiltersSearchQuery,
@@ -25,8 +25,8 @@ interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
-  color?: FilterColor;
+  color: FilterColor;
-  icon?: IconKey;
+  icon: IconKey;
 }
 
 interface KnowledgeFilterListProps {
@@ -106,13 +106,13 @@ export function KnowledgeFilterList({
               <div className="flex flex-col gap-1 flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   {(() => {
-                    const parsed = parseQueryData(filter.query_data);
+                    const parsed = parseQueryData(filter.query_data) as ParsedQueryData;
                     const Icon = iconKeyToComponent(parsed.icon);
                     return (
                       <div
                         className={cn(
                           "flex items-center justify-center w-5 h-5 rounded transition-colors",
-                          filterAccentClasses[parsed.color || ""],
+                          filterAccentClasses[parsed.color],
                           parsed.color === "zinc" &&
                             "group-hover:bg-background group-[.active]:bg-background"
                         )}

frontend/components/knowledge-filter-panel.tsx

@@ -14,7 +14,11 @@ import { useDeleteFilter } from "@/app/api/mutations/useDeleteFilter";
 import { useUpdateFilter } from "@/app/api/mutations/useUpdateFilter";
 import { useCreateFilter } from "@/app/api/mutations/useCreateFilter";
 import { useGetSearchAggregations } from "@/src/app/api/queries/useGetSearchAggregations";
-import { FilterIconPopover, IconKey } from "@/components/filter-icon-popover";
+import {
+  FilterColor,
+  FilterIconPopover,
+  IconKey,
+} from "@/components/filter-icon-popover";
 
 interface FacetBucket {
   key: string;
@@ -28,18 +32,14 @@ interface AvailableFacets {
   connector_types: FacetBucket[];
 }
 
-export const filterAccentClasses: Record<
+export const filterAccentClasses: Record<FilterColor, string> = {
-  "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red" | "",
+  zinc: "bg-muted text-muted-foreground",
-  string
-> = {
-  zinc: "bg-accent text-muted-foreground",
   pink: "bg-accent-pink text-accent-pink-foreground",
   purple: "bg-accent-purple text-accent-purple-foreground",
   indigo: "bg-accent-indigo text-accent-indigo-foreground",
   emerald: "bg-accent-emerald text-accent-emerald-foreground",
   amber: "bg-accent-amber text-accent-amber-foreground",
   red: "bg-accent-red text-accent-red-foreground",
-  "": "bg-accent text-muted-foreground",
 };
 
 export function KnowledgeFilterPanel() {
@@ -59,10 +59,8 @@ export function KnowledgeFilterPanel() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [isSaving, setIsSaving] = useState(false);
-  const [color, setColor] = useState<
+  const [color, setColor] = useState<FilterColor>("zinc");
-    "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red"
+  const [iconKey, setIconKey] = useState<IconKey>("filter");
-  >("zinc");
-  const [iconKey, setIconKey] = useState<IconKey>();
 
   // Filter configuration states (mirror search page exactly)
   const [query, setQuery] = useState("");
@@ -107,8 +105,8 @@ export function KnowledgeFilterPanel() {
       setScoreThreshold(parsedFilterData.scoreThreshold || 0);
       setName(selectedFilter.name);
       setDescription(selectedFilter.description || "");
-      setColor(parsedFilterData.color || "zinc");
+      setColor(parsedFilterData.color);
-      setIconKey(parsedFilterData.icon as IconKey);
+      setIconKey(parsedFilterData.icon);
     }
   }, [selectedFilter, parsedFilterData]);
 
@@ -121,8 +119,8 @@ export function KnowledgeFilterPanel() {
       setScoreThreshold(parsedFilterData.scoreThreshold || 0);
       setName("");
       setDescription("");
-      setColor(parsedFilterData.color || "zinc");
+      setColor(parsedFilterData.color);
-      setIconKey(parsedFilterData.icon as IconKey);
+      setIconKey(parsedFilterData.icon);
     }
   }, [createMode, parsedFilterData]);
 
@@ -268,7 +266,7 @@ export function KnowledgeFilterPanel() {
                   color={color}
                   iconKey={iconKey}
                   onColorChange={setColor}
-                  onIconChange={(k) => setIconKey(k)}
+                  onIconChange={setIconKey}
                 />
                 <Input
                   id="filter-name"

frontend/src/app/chat/page.tsx

@@ -2116,7 +2116,7 @@ function ChatPage() {
                 <div className="flex items-center gap-2 px-4 pt-3 pb-1">
                   <span
                     className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${
-                      filterAccentClasses[parsedFilterData?.color || ""]
+                      filterAccentClasses[parsedFilterData?.color || "zinc"]
                     }`}
                   >
                     @filter:{selectedFilter.name}

frontend/src/app/globals.css

@@ -27,6 +27,8 @@
     --accent-foreground: 0 0% 0%;
     --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 100%;
+    --warning: 48, 96%, 89%;
+    --warning-foreground: 26, 90%, 37%;
     --border: 240 4.8% 95.9%;
     --input: 240 6% 90%;
     --ring: 0 0% 0%;
@@ -49,10 +51,6 @@
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
 
-    /* Warning */
-    --warning: 48 96.6% 76.7%;
-    --warning-foreground: 240 6% 10%;
-
     --radius: 0.5rem;
   }
 
@@ -75,6 +73,8 @@
     --accent-foreground: 0 0% 100%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
+    --warning: 22, 78%, 26%;
+    --warning-foreground: 46, 97%, 65%;
     --border: 240 3.7% 15.9%;
     --input: 240 5% 34%;
     --ring: 0 0% 100%;

frontend/src/app/knowledge/page.tsx

@@ -256,7 +256,7 @@ function SearchPage() {
               {selectedFilter?.name && (
                 <div
                   className={`flex items-center gap-1 h-full px-1.5 py-0.5 rounded max-w-[300px] ${
-                    filterAccentClasses[parsedFilterData?.color || ""]
+                    filterAccentClasses[parsedFilterData?.color || "zinc"]
                   }`}
                 >
                   <span className="truncate">{selectedFilter?.name}</span>

frontend/src/contexts/knowledge-filter-context.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { FilterColor, IconKey } from "@/components/filter-icon-popover";
 import React, {
   createContext,
   type ReactNode,
@@ -27,9 +28,8 @@ export interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
-  // Optional visual metadata for UI
+  color: FilterColor;
-  color?: "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red";
+  icon: IconKey;
-  icon?: string; // lucide icon key we store in the UI mapping
 }
 
 interface KnowledgeFilterContextType {
@@ -54,7 +54,7 @@ export function useKnowledgeFilter() {
   const context = useContext(KnowledgeFilterContext);
   if (context === undefined) {
     throw new Error(
-      "useKnowledgeFilter must be used within a KnowledgeFilterProvider",
+      "useKnowledgeFilter must be used within a KnowledgeFilterProvider"
     );
   }
   return context;
@@ -127,7 +127,7 @@ export function KnowledgeFilterProvider({
       limit: 10,
       scoreThreshold: 0,
       color: "zinc",
-      icon: "Filter",
+      icon: "filter",
     });
     setIsPanelOpen(true);
   };