Merge pull request #150 from langflow-ai/feat/filters-design-sweep

Customize color and icon for knowledge filters

frontend/components/filter-icon-popover.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { type SVGProps } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Book,
+  Scroll,
+  Library,
+  Map,
+  FileImage,
+  Layers3,
+  Database,
+  Folder,
+  Archive,
+  MessagesSquare,
+  SquareStack,
+  Ghost,
+  Gem,
+  Swords,
+  Bolt,
+  Shield,
+  Hammer,
+  Globe,
+  HardDrive,
+  Upload,
+  Cable,
+  ShoppingCart,
+  ShoppingBag,
+  Check,
+  Filter,
+} from "lucide-react";
+import { filterAccentClasses } from "./knowledge-filter-panel";
+import { cn } from "@/lib/utils";
+
+const ICON_MAP = {
+  filter: Filter,
+  book: Book,
+  scroll: Scroll,
+  library: Library,
+  map: Map,
+  image: FileImage,
+  layers3: Layers3,
+  database: Database,
+  folder: Folder,
+  archive: Archive,
+  messagesSquare: MessagesSquare,
+  squareStack: SquareStack,
+  ghost: Ghost,
+  gem: Gem,
+  swords: Swords,
+  bolt: Bolt,
+  shield: Shield,
+  hammer: Hammer,
+  globe: Globe,
+  hardDrive: HardDrive,
+  upload: Upload,
+  cable: Cable,
+  shoppingCart: ShoppingCart,
+  shoppingBag: ShoppingBag,
+} as const;
+
+export type IconKey = keyof typeof ICON_MAP;
+
+export function iconKeyToComponent(
+  key?: string
+): React.ComponentType<SVGProps<SVGSVGElement>> | undefined {
+  if (!key) return undefined;
+  return (
+    ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>
+  )[key];
+}
+
+const COLORS = [
+  "zinc",
+  "pink",
+  "purple",
+  "indigo",
+  "emerald",
+  "amber",
+  "red",
+] as const;
+export type FilterColor = (typeof COLORS)[number];
+
+const colorSwatchClasses = {
+  zinc: "bg-muted-foreground",
+  pink: "bg-accent-pink-foreground",
+  purple: "bg-accent-purple-foreground",
+  indigo: "bg-accent-indigo-foreground",
+  emerald: "bg-accent-emerald-foreground",
+  amber: "bg-accent-amber-foreground",
+  red: "bg-accent-red-foreground",
+};
+
+export interface FilterIconPopoverProps {
+  color: FilterColor;
+  iconKey: IconKey;
+  onColorChange: (c: FilterColor) => void;
+  onIconChange: (k: IconKey) => void;
+  triggerClassName?: string;
+}
+
+export function FilterIconPopover({
+  color,
+  iconKey,
+  onColorChange,
+  onIconChange,
+  triggerClassName,
+}: FilterIconPopoverProps) {
+  const Icon = iconKeyToComponent(iconKey);
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            "h-10 w-10 min-w-10 min-h-10 rounded-md flex items-center justify-center transition-colors",
+            filterAccentClasses[color],
+            triggerClassName
+          )}
+        >
+          {Icon && <Icon className="h-5 w-5" />}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="start">
+        <div className="space-y-4">
+          <div className="grid grid-cols-7 items-center gap-2">
+            {COLORS.map((c) => (
+              <button
+                key={c}
+                type="button"
+                onClick={() => onColorChange(c)}
+                className={cn(
+                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-primary",
+                  colorSwatchClasses[c]
+                )}
+                aria-label={c}
+              >
+                {c === color && <Check className="h-3.5 w-3.5" />}
+              </button>
+            ))}
+          </div>
+          <div className="grid grid-cols-6 gap-2">
+            {Object.keys(ICON_MAP).map((k: string) => {
+              const OptIcon = ICON_MAP[k as IconKey];
+              const active = iconKey === k;
+              return (
+                <button
+                  key={k}
+                  type="button"
+                  onClick={() => onIconChange(k as IconKey)}
+                  className={
+                    "h-8 w-8 inline-flex items-center hover:text-foreground justify-center rounded " +
+                    (active ? "bg-muted text-primary" : "text-muted-foreground")
+                  }
+                  aria-label={k}
+                >
+                  <OptIcon className="h-4 w-4" />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

frontend/components/knowledge-filter-list.tsx

@@ -2,24 +2,19 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Loader2, Plus } from "lucide-react";
-
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Filter, Loader2, Plus, Save, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   useGetFiltersSearchQuery,
   type KnowledgeFilter,
 } from "@/src/app/api/queries/useGetFiltersSearchQuery";
-import { useCreateFilter } from "@/src/app/api/mutations/useCreateFilter";
+import { useKnowledgeFilter } from "@/src/contexts/knowledge-filter-context";
 import {
-  Dialog,
+  FilterColor,
-  DialogContent,
+  IconKey,
-  DialogDescription,
+  iconKeyToComponent,
-  DialogHeader,
+} from "./filter-icon-popover";
-  DialogTitle,
+import { filterAccentClasses } from "./knowledge-filter-panel";
-} from "@/components/ui/dialog";
 
 interface ParsedQueryData {
   query: string;
@@ -30,6 +25,8 @@ interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
+  color: FilterColor;
+  icon: IconKey;
 }
 
 interface KnowledgeFilterListProps {
@@ -42,10 +39,7 @@ export function KnowledgeFilterList({
   onFilterSelect,
 }: KnowledgeFilterListProps) {
   const [searchQuery] = useState("");
-  const [showCreateModal, setShowCreateModal] = useState(false);
+  const { startCreateMode } = useKnowledgeFilter();
-  const [createName, setCreateName] = useState("");
-  const [createDescription, setCreateDescription] = useState("");
-  const [creating, setCreating] = useState(false);
 
   const { data, isFetching: loading } = useGetFiltersSearchQuery(
     searchQuery,
@@ -54,57 +48,16 @@ export function KnowledgeFilterList({
 
   const filters = data || [];
 
-  const createFilterMutation = useCreateFilter();
-
   const handleFilterSelect = (filter: KnowledgeFilter) => {
+    if (filter.id === selectedFilter?.id) {
+      onFilterSelect(null);
+      return;
+    }
     onFilterSelect(filter);
   };
 
   const handleCreateNew = () => {
-    setShowCreateModal(true);
+    startCreateMode();
-  };
-
-  const handleCreateFilter = async () => {
-    if (!createName.trim()) return;
-
-    setCreating(true);
-    try {
-      // Create a basic filter with wildcards (match everything by default)
-      const defaultFilterData = {
-        query: "",
-        filters: {
-          data_sources: ["*"],
-          document_types: ["*"],
-          owners: ["*"],
-        },
-        limit: 10,
-        scoreThreshold: 0,
-      };
-
-      const result = await createFilterMutation.mutateAsync({
-        name: createName.trim(),
-        description: createDescription.trim(),
-        queryData: JSON.stringify(defaultFilterData),
-      });
-
-      // Select the new filter from API response
-      onFilterSelect(result.filter);
-
-      // Close modal and reset form
-      setShowCreateModal(false);
-      setCreateName("");
-      setCreateDescription("");
-    } catch (error) {
-      console.error("Error creating knowledge filter:", error);
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const handleCancelCreate = () => {
-    setShowCreateModal(false);
-    setCreateName("");
-    setCreateDescription("");
   };
 
   const parseQueryData = (queryData: string): ParsedQueryData => {
@@ -113,7 +66,7 @@ export function KnowledgeFilterList({
 
   return (
     <>
-      <div className="flex flex-col items-center gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
+      <div className="flex flex-col gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
         <div className="flex items-center w-full justify-between pl-3">
           <div className="text-sm font-medium text-muted-foreground">
             Knowledge Filters
@@ -136,7 +89,7 @@ export function KnowledgeFilterList({
             </span>
           </div>
         ) : filters.length === 0 ? (
-          <div className="p-4 text-center text-sm text-muted-foreground">
+          <div className="py-2 px-4 text-sm text-muted-foreground">
             {searchQuery ? "No filters found" : "No saved filters"}
           </div>
         ) : (
@@ -147,32 +100,45 @@ export function KnowledgeFilterList({
               className={cn(
                 "flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
                 selectedFilter?.id === filter.id &&
-                  "bg-accent text-accent-foreground"
+                  "active bg-accent text-accent-foreground"
               )}
             >
               <div className="flex flex-col gap-1 flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <div className="flex items-center justify-center bg-blue-500/20 w-5 h-5 rounded">
+                  {(() => {
-                    <Filter className="h-3 w-3 text-blue-400" />
+                    const parsed = parseQueryData(filter.query_data) as ParsedQueryData;
-                  </div>
+                    const Icon = iconKeyToComponent(parsed.icon);
+                    return (
+                      <div
+                        className={cn(
+                          "flex items-center justify-center w-5 h-5 rounded transition-colors",
+                          filterAccentClasses[parsed.color],
+                          parsed.color === "zinc" &&
+                            "group-hover:bg-background group-[.active]:bg-background"
+                        )}
+                      >
+                        {Icon && <Icon className="h-3 w-3" />}
+                      </div>
+                    );
+                  })()}
                   <div className="text-sm font-medium truncate group-hover:text-accent-foreground">
                     {filter.name}
                   </div>
                 </div>
                 {filter.description && (
-                  <div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70 line-clamp-2">
+                  <div className="text-xs text-muted-foreground line-clamp-2">
                     {filter.description}
                   </div>
                 )}
                 <div className="flex items-center gap-2">
-                  <div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70">
+                  <div className="text-xs text-muted-foreground">
                     {new Date(filter.created_at).toLocaleDateString(undefined, {
                       month: "short",
                       day: "numeric",
                       year: "numeric",
                     })}
                   </div>
-                  <span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm">
+                  <span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm group-hover:bg-background group-[.active]:bg-background transition-colors">
                     {(() => {
                       const dataSources = parseQueryData(filter.query_data)
                         .filters.data_sources;
@@ -183,89 +149,11 @@ export function KnowledgeFilterList({
                   </span>
                 </div>
               </div>
-              {selectedFilter?.id === filter.id && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="px-0"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onFilterSelect(null);
-                  }}
-                >
-                  <X className="h-4 w-4 flex-shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground" />
-                </Button>
-              )}
             </div>
           ))
         )}
       </div>
-      {/* Create Filter Dialog */}
+      {/* Create flow moved to panel create mode */}
-      <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Create a new knowledge filter</DialogTitle>
-            <DialogDescription>
-              Save a reusable filter to quickly scope searches across your
-              knowledge base.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex flex-col gap-2 space-y-2">
-            <div>
-              <Label htmlFor="filter-name" className="font-medium mb-2 gap-1">
-                Name<span className="text-red-400">*</span>
-              </Label>
-              <Input
-                id="filter-name"
-                type="text"
-                placeholder="Enter filter name"
-                value={createName}
-                onChange={(e) => setCreateName(e.target.value)}
-                className="mt-1"
-              />
-            </div>
-            <div>
-              <Label htmlFor="filter-description" className="font-medium mb-2">
-                Description (optional)
-              </Label>
-              <Textarea
-                id="filter-description"
-                placeholder="Brief description of this filter"
-                value={createDescription}
-                onChange={(e) => setCreateDescription(e.target.value)}
-                className="mt-1"
-                rows={3}
-              />
-            </div>
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              onClick={handleCancelCreate}
-              disabled={creating}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleCreateFilter}
-              disabled={!createName.trim() || creating}
-              className="flex items-center gap-2"
-            >
-              {creating ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  Creating...
-                </>
-              ) : (
-                <>
-                  <Save className="h-4 w-4" />
-                  Create Filter
-                </>
-              )}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
     </>
   );
 }

frontend/components/knowledge-filter-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { X, Edit3, Save, RefreshCw } from "lucide-react";
+import { X, Save, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -12,7 +12,13 @@ import { Slider } from "@/components/ui/slider";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 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 {
+  FilterColor,
+  FilterIconPopover,
+  IconKey,
+} from "@/components/filter-icon-popover";
 
 interface FacetBucket {
   key: string;
@@ -26,6 +32,16 @@ interface AvailableFacets {
   connector_types: FacetBucket[];
 }
 
+export const filterAccentClasses: Record<FilterColor, string> = {
+  zinc: "bg-muted 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",
+};
+
 export function KnowledgeFilterPanel() {
   const {
     selectedFilter,
@@ -33,15 +49,18 @@ export function KnowledgeFilterPanel() {
     setSelectedFilter,
     isPanelOpen,
     closePanelOnly,
+    createMode,
+    endCreateMode,
   } = useKnowledgeFilter();
   const deleteFilterMutation = useDeleteFilter();
   const updateFilterMutation = useUpdateFilter();
+  const createFilterMutation = useCreateFilter();
 
-  // Edit mode states
+  const [name, setName] = useState("");
-  const [isEditingMeta, setIsEditingMeta] = useState(false);
+  const [description, setDescription] = useState("");
-  const [editingName, setEditingName] = useState("");
-  const [editingDescription, setEditingDescription] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [color, setColor] = useState<FilterColor>("zinc");
+  const [iconKey, setIconKey] = useState<IconKey>("filter");
 
   // Filter configuration states (mirror search page exactly)
   const [query, setQuery] = useState("");
@@ -62,7 +81,7 @@ export function KnowledgeFilterPanel() {
     connector_types: [],
   });
 
-  // Load current filter data into controls
+  // Load current filter data into controls when a filter is selected
   useEffect(() => {
     if (selectedFilter && parsedFilterData) {
       setQuery(parsedFilterData.query || "");
@@ -84,11 +103,27 @@ export function KnowledgeFilterPanel() {
       setSelectedFilters(processedFilters);
       setResultLimit(parsedFilterData.limit || 10);
       setScoreThreshold(parsedFilterData.scoreThreshold || 0);
-      setEditingName(selectedFilter.name);
+      setName(selectedFilter.name);
-      setEditingDescription(selectedFilter.description || "");
+      setDescription(selectedFilter.description || "");
+      setColor(parsedFilterData.color);
+      setIconKey(parsedFilterData.icon);
     }
   }, [selectedFilter, parsedFilterData]);
 
+  // Initialize defaults when entering create mode
+  useEffect(() => {
+    if (createMode && parsedFilterData) {
+      setQuery(parsedFilterData.query || "");
+      setSelectedFilters(parsedFilterData.filters);
+      setResultLimit(parsedFilterData.limit || 10);
+      setScoreThreshold(parsedFilterData.scoreThreshold || 0);
+      setName("");
+      setDescription("");
+      setColor(parsedFilterData.color);
+      setIconKey(parsedFilterData.icon);
+    }
+  }, [createMode, parsedFilterData]);
+
   // Load available facets using search aggregations hook
   const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
     enabled: isPanelOpen,
@@ -108,8 +143,8 @@ export function KnowledgeFilterPanel() {
     setAvailableFacets(facets);
   }, [aggregations]);
 
-  // Don't render if panel is closed or no filter selected
+  // Don't render if panel is closed or we don't have any data
-  if (!isPanelOpen || !selectedFilter || !parsedFilterData) return null;
+  if (!isPanelOpen || !parsedFilterData) return null;
 
   const selectAllFilters = () => {
     // Use wildcards instead of listing all specific items
@@ -130,58 +165,42 @@ export function KnowledgeFilterPanel() {
     });
   };
 
-  const handleEditMeta = () => {
-    setIsEditingMeta(true);
-  };
-
-  const handleCancelEdit = () => {
-    setIsEditingMeta(false);
-    setEditingName(selectedFilter.name);
-    setEditingDescription(selectedFilter.description || "");
-  };
-
-  const handleSaveMeta = async () => {
-    if (!editingName.trim()) return;
-
-    setIsSaving(true);
-    try {
-      const result = await updateFilterMutation.mutateAsync({
-        id: selectedFilter.id,
-        name: editingName.trim(),
-        description: editingDescription.trim(),
-      });
-
-      if (result.success && result.filter) {
-        setSelectedFilter(result.filter);
-        setIsEditingMeta(false);
-      }
-    } catch (error) {
-      console.error("Error updating filter:", error);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
   const handleSaveConfiguration = async () => {
+    if (!name.trim()) return;
     const filterData = {
       query,
       filters: selectedFilters,
       limit: resultLimit,
       scoreThreshold,
+      color,
+      icon: iconKey,
     };
 
     setIsSaving(true);
     try {
-      const result = await updateFilterMutation.mutateAsync({
+      if (createMode) {
-        id: selectedFilter.id,
+        const result = await createFilterMutation.mutateAsync({
-        queryData: JSON.stringify(filterData),
+          name: name.trim(),
-      });
+          description: description.trim(),
-
+          queryData: JSON.stringify(filterData),
-      if (result.success && result.filter) {
+        });
-        setSelectedFilter(result.filter);
+        if (result.success && result.filter) {
+          setSelectedFilter(result.filter);
+          endCreateMode();
+        }
+      } else if (selectedFilter) {
+        const result = await updateFilterMutation.mutateAsync({
+          id: selectedFilter.id,
+          name: name.trim(),
+          description: description.trim(),
+          queryData: JSON.stringify(filterData),
+        });
+        if (result.success && result.filter) {
+          setSelectedFilter(result.filter);
+        }
       }
     } catch (error) {
-      console.error("Error updating filter configuration:", error);
+      console.error("Error saving knowledge filter:", error);
     } finally {
       setIsSaving(false);
     }
@@ -208,6 +227,7 @@ export function KnowledgeFilterPanel() {
   };
 
   const handleDeleteFilter = async () => {
+    if (!selectedFilter) return;
     const result = await deleteFilterMutation.mutateAsync({
       id: selectedFilter.id,
     });
@@ -238,81 +258,40 @@ export function KnowledgeFilterPanel() {
 
         <CardContent className="space-y-6">
           {/* Filter Name and Description */}
-          <div className="space-y-4">
+          <div className="space-y-3">
-            {isEditingMeta ? (
+            <div className="space-y-2">
-              <div className="space-y-3">
+              <Label htmlFor="filter-name">Filter name</Label>
-                <div className="space-y-2">
+              <div className="flex items-center gap-2">
-                  <Label htmlFor="filter-name">Name</Label>
+                <FilterIconPopover
-                  <Input
+                  color={color}
-                    id="filter-name"
+                  iconKey={iconKey}
-                    value={editingName}
+                  onColorChange={setColor}
-                    onChange={(e) => setEditingName(e.target.value)}
+                  onIconChange={setIconKey}
-                    placeholder="Filter name"
+                />
-                  />
+                <Input
-                </div>
+                  id="filter-name"
-                <div className="space-y-2">
+                  value={name}
-                  <Label htmlFor="filter-description">Description</Label>
+                  onChange={(e) => setName(e.target.value)}
-                  <Textarea
+                  placeholder="Filter name"
-                    id="filter-description"
+                />
-                    value={editingDescription}
-                    onChange={(e) => setEditingDescription(e.target.value)}
-                    placeholder="Optional description"
-                    rows={3}
-                  />
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    onClick={handleSaveMeta}
-                    disabled={!editingName.trim() || isSaving}
-                    size="sm"
-                    className="flex-1"
-                  >
-                    <Save className="h-3 w-3 mr-1" />
-                    {isSaving ? "Saving..." : "Save"}
-                  </Button>
-                  <Button
-                    onClick={handleCancelEdit}
-                    variant="outline"
-                    size="sm"
-                    className="flex-1"
-                  >
-                    Cancel
-                  </Button>
-                </div>
               </div>
-            ) : (
+            </div>
-              <div className="space-y-3">
+            {!createMode && selectedFilter?.created_at && (
-                <div className="flex items-center justify-between">
+              <div className="space-y-2 text-xs text-right text-muted-foreground">
-                  <div className="flex-1">
+                <span className="text-placeholder-foreground">Created</span>{" "}
-                    <h3 className="font-semibold text-lg">
+                {formatDate(selectedFilter.created_at)}
-                      {selectedFilter.name}
-                    </h3>
-                    {selectedFilter.description && (
-                      <p className="text-sm text-muted-foreground mt-1">
-                        {selectedFilter.description}
-                      </p>
-                    )}
-                  </div>
-                  <Button
-                    onClick={handleEditMeta}
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 w-8 p-0"
-                  >
-                    <Edit3 className="h-3 w-3" />
-                  </Button>
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  Created {formatDate(selectedFilter.created_at)}
-                  {selectedFilter.updated_at !== selectedFilter.created_at && (
-                    <span>
-                      {" "}
-                      • Updated {formatDate(selectedFilter.updated_at)}
-                    </span>
-                  )}
-                </div>
               </div>
             )}
+            <div className="space-y-2">
+              <Label htmlFor="filter-description">Description</Label>
+              <Textarea
+                id="filter-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Optional description"
+                rows={3}
+              />
+            </div>
           </div>
 
           {/* Search Query */}
@@ -504,13 +483,15 @@ export function KnowledgeFilterPanel() {
                   </>
                 )}
               </Button>
-              <Button
+              {!createMode && (
-                variant="destructive"
+                <Button
-                className="w-full"
+                  variant="destructive"
-                onClick={handleDeleteFilter}
+                  className="w-full"
-              >
+                  onClick={handleDeleteFilter}
-                Delete Filter
+                >
-              </Button>
+                  Delete Filter
+                </Button>
+              )}
             </div>
           </div>
         </CardContent>

frontend/components/ui/input.tsx

@@ -11,7 +11,7 @@ export interface InputProps
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, inputClassName, icon, type, placeholder, ...props }, ref) => {
     const [hasValue, setHasValue] = React.useState(
-      Boolean(props.value || props.defaultValue),
+      Boolean(props.value || props.defaultValue)
     );
     const [showPassword, setShowPassword] = React.useState(false);
 
@@ -30,7 +30,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <label
         className={cn(
           "relative block h-fit w-full text-sm group",
-          icon ? className : "",
+          icon ? className : ""
         )}
       >
         {icon && (
@@ -43,10 +43,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={type === "password" && showPassword ? "text" : type}
           placeholder={placeholder}
           className={cn(
-            "primary-input !placeholder-transparent",
+            "primary-input",
             icon && "pl-9",
             type === "password" && "!pr-8",
-            icon ? inputClassName : className,
+            icon ? inputClassName : className
           )}
           ref={ref}
           {...props}
@@ -66,18 +66,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             )}
           </button>
         )}
-        <span
-          className={cn(
-            "pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground font-mono",
-            icon ? "left-9" : "left-3",
-            hasValue && "hidden",
-          )}
-        >
-          {placeholder}
-        </span>
       </label>
     );
-  },
+  }
 );
 
 Input.displayName = "Input";

frontend/src/app/api/queries/useGetSearchQuery.ts

@@ -179,7 +179,7 @@ export const useGetSearchQuery = (
 
   const queryResult = useQuery(
     {
-      queryKey: ["search", effectiveQuery],
+      queryKey: ["search", queryData],
       placeholderData: (prev) => prev,
       queryFn: getFiles,
       ...options,

frontend/src/app/chat/page.tsx

@@ -26,6 +26,7 @@ import { useTask } from "@/contexts/task-context";
 import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
 import Nudges from "./nudges";
+import { filterAccentClasses } from "@/components/knowledge-filter-panel";
 
 interface Message {
   role: "user" | "assistant";
@@ -194,7 +195,7 @@ function ChatPage() {
           "Upload failed with status:",
           response.status,
           "Response:",
-          errorText,
+          errorText
         );
         throw new Error("Failed to process document");
       }
@@ -448,7 +449,7 @@ function ChatPage() {
       console.log(
         "Loading conversation with",
         conversationData.messages.length,
-        "messages",
+        "messages"
       );
       // Convert backend message format to frontend Message interface
       const convertedMessages: Message[] = conversationData.messages.map(
@@ -576,7 +577,7 @@ function ChatPage() {
                       ) === "string"
                         ? toolCall.function?.arguments || toolCall.arguments
                         : JSON.stringify(
-                            toolCall.function?.arguments || toolCall.arguments,
+                            toolCall.function?.arguments || toolCall.arguments
                           ),
                     result: toolCall.result,
                     status: "completed",
@@ -595,7 +596,7 @@ function ChatPage() {
           }
 
           return message;
-        },
+        }
       );
 
       setMessages(convertedMessages);
@@ -684,7 +685,7 @@ function ChatPage() {
       console.log(
         "Chat page received file upload error event:",
         filename,
-        error,
+        error
       );
 
       // Replace the last message with error message
@@ -698,37 +699,37 @@ function ChatPage() {
 
     window.addEventListener(
       "fileUploadStart",
-      handleFileUploadStart as EventListener,
+      handleFileUploadStart as EventListener
     );
     window.addEventListener(
       "fileUploaded",
-      handleFileUploaded as EventListener,
+      handleFileUploaded as EventListener
     );
     window.addEventListener(
       "fileUploadComplete",
-      handleFileUploadComplete as EventListener,
+      handleFileUploadComplete as EventListener
     );
     window.addEventListener(
       "fileUploadError",
-      handleFileUploadError as EventListener,
+      handleFileUploadError as EventListener
     );
 
     return () => {
       window.removeEventListener(
         "fileUploadStart",
-        handleFileUploadStart as EventListener,
+        handleFileUploadStart as EventListener
       );
       window.removeEventListener(
         "fileUploaded",
-        handleFileUploaded as EventListener,
+        handleFileUploaded as EventListener
       );
       window.removeEventListener(
         "fileUploadComplete",
-        handleFileUploadComplete as EventListener,
+        handleFileUploadComplete as EventListener
       );
       window.removeEventListener(
         "fileUploadError",
-        handleFileUploadError as EventListener,
+        handleFileUploadError as EventListener
       );
     };
   }, [endpoint, setPreviousResponseIds]);
@@ -755,7 +756,7 @@ function ChatPage() {
   }, [isFilterDropdownOpen]);
 
   const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
-    previousResponseIds[endpoint],
+    previousResponseIds[endpoint]
   );
 
   const handleSSEStream = async (userMessage: Message) => {
@@ -860,7 +861,7 @@ function ChatPage() {
                 console.log(
                   "Received chunk:",
                   chunk.type || chunk.object,
-                  chunk,
+                  chunk
                 );
 
                 // Extract response ID if present
@@ -876,14 +877,14 @@ function ChatPage() {
                   if (chunk.delta.function_call) {
                     console.log(
                       "Function call in delta:",
-                      chunk.delta.function_call,
+                      chunk.delta.function_call
                     );
 
                     // Check if this is a new function call
                     if (chunk.delta.function_call.name) {
                       console.log(
                         "New function call:",
-                        chunk.delta.function_call.name,
+                        chunk.delta.function_call.name
                       );
                       const functionCall: FunctionCall = {
                         name: chunk.delta.function_call.name,
@@ -899,7 +900,7 @@ function ChatPage() {
                     else if (chunk.delta.function_call.arguments) {
                       console.log(
                         "Function call arguments delta:",
-                        chunk.delta.function_call.arguments,
+                        chunk.delta.function_call.arguments
                       );
                       const lastFunctionCall =
                         currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -911,14 +912,14 @@ function ChatPage() {
                           chunk.delta.function_call.arguments;
                         console.log(
                           "Accumulated arguments:",
-                          lastFunctionCall.argumentsString,
+                          lastFunctionCall.argumentsString
                         );
 
                         // Try to parse arguments if they look complete
                         if (lastFunctionCall.argumentsString.includes("}")) {
                           try {
                             const parsed = JSON.parse(
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
                             lastFunctionCall.arguments = parsed;
                             lastFunctionCall.status = "completed";
@@ -926,7 +927,7 @@ function ChatPage() {
                           } catch (e) {
                             console.log(
                               "Arguments not yet complete or invalid JSON:",
-                              e,
+                              e
                             );
                           }
                         }
@@ -959,7 +960,7 @@ function ChatPage() {
                         else if (toolCall.function.arguments) {
                           console.log(
                             "Tool call arguments delta:",
-                            toolCall.function.arguments,
+                            toolCall.function.arguments
                           );
                           const lastFunctionCall =
                             currentFunctionCalls[
@@ -973,7 +974,7 @@ function ChatPage() {
                               toolCall.function.arguments;
                             console.log(
                               "Accumulated tool arguments:",
-                              lastFunctionCall.argumentsString,
+                              lastFunctionCall.argumentsString
                             );
 
                             // Try to parse arguments if they look complete
@@ -982,7 +983,7 @@ function ChatPage() {
                             ) {
                               try {
                                 const parsed = JSON.parse(
-                                  lastFunctionCall.argumentsString,
+                                  lastFunctionCall.argumentsString
                                 );
                                 lastFunctionCall.arguments = parsed;
                                 lastFunctionCall.status = "completed";
@@ -990,7 +991,7 @@ function ChatPage() {
                               } catch (e) {
                                 console.log(
                                   "Tool arguments not yet complete or invalid JSON:",
-                                  e,
+                                  e
                                 );
                               }
                             }
@@ -1022,7 +1023,7 @@ function ChatPage() {
                           console.log(
                             "Error parsing function call on finish:",
                             fc,
-                            e,
+                            e
                           );
                         }
                       }
@@ -1038,12 +1039,12 @@ function ChatPage() {
                   console.log(
                     "🟢 CREATING function call (added):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
 
                   // Try to find an existing pending call to update (created by earlier deltas)
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1052,7 +1053,7 @@ function ChatPage() {
                         (fc) =>
                           fc.status === "pending" &&
                           !fc.id &&
-                          fc.name === (chunk.item.tool_name || chunk.item.name),
+                          fc.name === (chunk.item.tool_name || chunk.item.name)
                       );
                   }
 
@@ -1065,7 +1066,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟢 UPDATED existing pending function call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall: FunctionCall = {
@@ -1083,7 +1084,7 @@ function ChatPage() {
                       currentFunctionCalls.map((fc) => ({
                         id: fc.id,
                         name: fc.name,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1094,7 +1095,7 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args delta (Realtime API):",
-                    chunk.delta,
+                    chunk.delta
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
@@ -1105,7 +1106,7 @@ function ChatPage() {
                     lastFunctionCall.argumentsString += chunk.delta || "";
                     console.log(
                       "Accumulated arguments (Realtime API):",
-                      lastFunctionCall.argumentsString,
+                      lastFunctionCall.argumentsString
                     );
                   }
                 }
@@ -1116,26 +1117,26 @@ function ChatPage() {
                 ) {
                   console.log(
                     "Function args done (Realtime API):",
-                    chunk.arguments,
+                    chunk.arguments
                   );
                   const lastFunctionCall =
                     currentFunctionCalls[currentFunctionCalls.length - 1];
                   if (lastFunctionCall) {
                     try {
                       lastFunctionCall.arguments = JSON.parse(
-                        chunk.arguments || "{}",
+                        chunk.arguments || "{}"
                       );
                       lastFunctionCall.status = "completed";
                       console.log(
                         "Parsed function arguments (Realtime API):",
-                        lastFunctionCall.arguments,
+                        lastFunctionCall.arguments
                       );
                     } catch (e) {
                       lastFunctionCall.arguments = { raw: chunk.arguments };
                       lastFunctionCall.status = "error";
                       console.log(
                         "Error parsing function arguments (Realtime API):",
-                        e,
+                        e
                       );
                     }
                   }
@@ -1149,14 +1150,14 @@ function ChatPage() {
                   console.log(
                     "🔵 UPDATING function call (done):",
                     chunk.item.id,
-                    chunk.item.tool_name || chunk.item.name,
+                    chunk.item.tool_name || chunk.item.name
                   );
                   console.log(
                     "🔵 Looking for existing function calls:",
                     currentFunctionCalls.map((fc) => ({
                       id: fc.id,
                       name: fc.name,
-                    })),
+                    }))
                   );
 
                   // Find existing function call by ID or name
@@ -1164,14 +1165,14 @@ function ChatPage() {
                     (fc) =>
                       fc.id === chunk.item.id ||
                       fc.name === chunk.item.tool_name ||
-                      fc.name === chunk.item.name,
+                      fc.name === chunk.item.name
                   );
 
                   if (functionCall) {
                     console.log(
                       "🔵 FOUND existing function call, updating:",
                       functionCall.id,
-                      functionCall.name,
+                      functionCall.name
                     );
                     // Update existing function call with completion data
                     functionCall.status =
@@ -1194,7 +1195,7 @@ function ChatPage() {
                       "🔴 WARNING: Could not find existing function call to update:",
                       chunk.item.id,
                       chunk.item.tool_name,
-                      chunk.item.name,
+                      chunk.item.name
                     );
                   }
                 }
@@ -1215,7 +1216,7 @@ function ChatPage() {
                       fc.name === chunk.item.name ||
                       fc.name === chunk.item.type ||
                       fc.name.includes(chunk.item.type.replace("_call", "")) ||
-                      chunk.item.type.includes(fc.name),
+                      chunk.item.type.includes(fc.name)
                   );
 
                   if (functionCall) {
@@ -1259,12 +1260,12 @@ function ChatPage() {
                     "🟡 CREATING tool call (added):",
                     chunk.item.id,
                     chunk.item.tool_name || chunk.item.name,
-                    chunk.item.type,
+                    chunk.item.type
                   );
 
                   // Dedupe by id or pending with same name
                   let existing = currentFunctionCalls.find(
-                    (fc) => fc.id === chunk.item.id,
+                    (fc) => fc.id === chunk.item.id
                   );
                   if (!existing) {
                     existing = [...currentFunctionCalls]
@@ -1276,7 +1277,7 @@ function ChatPage() {
                           fc.name ===
                             (chunk.item.tool_name ||
                               chunk.item.name ||
-                              chunk.item.type),
+                              chunk.item.type)
                       );
                   }
 
@@ -1292,7 +1293,7 @@ function ChatPage() {
                       chunk.item.inputs || existing.arguments;
                     console.log(
                       "🟡 UPDATED existing pending tool call with id:",
-                      existing.id,
+                      existing.id
                     );
                   } else {
                     const functionCall = {
@@ -1313,7 +1314,7 @@ function ChatPage() {
                         id: fc.id,
                         name: fc.name,
                         type: fc.type,
-                      })),
+                      }))
                     );
                   }
                 }
@@ -1591,7 +1592,7 @@ function ChatPage() {
 
   const handleForkConversation = (
     messageIndex: number,
-    event?: React.MouseEvent,
+    event?: React.MouseEvent
   ) => {
     // Prevent any default behavior and stop event propagation
     if (event) {
@@ -1656,7 +1657,7 @@ function ChatPage() {
 
   const renderFunctionCalls = (
     functionCalls: FunctionCall[],
-    messageIndex?: number,
+    messageIndex?: number
   ) => {
     if (!functionCalls || functionCalls.length === 0) return null;
 
@@ -2024,7 +2025,7 @@ function ChatPage() {
                         <div className="flex-1 min-w-0">
                           {renderFunctionCalls(
                             message.functionCalls || [],
-                            index,
+                            index
                           )}
                           <MarkdownRenderer chatMessage={message.content} />
                         </div>
@@ -2053,7 +2054,7 @@ function ChatPage() {
                     <div className="flex-1">
                       {renderFunctionCalls(
                         streamingMessage.functionCalls,
-                        messages.length,
+                        messages.length
                       )}
                       <MarkdownRenderer
                         chatMessage={streamingMessage.content}
@@ -2115,9 +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 ${
-                      isFilterHighlighted
+                      filterAccentClasses[parsedFilterData?.color || "zinc"]
-                        ? "bg-blue-500/40 text-blue-300 ring-2 ring-blue-400/50"
-                        : "bg-blue-500/20 text-blue-400"
                     }`}
                   >
                     @filter:{selectedFilter.name}
@@ -2127,7 +2126,7 @@ function ChatPage() {
                         setSelectedFilter(null);
                         setIsFilterHighlighted(false);
                       }}
-                      className="ml-1 hover:bg-blue-500/30 rounded-full p-0.5"
+                      className="ml-1 rounded-full p-0.5"
                     >
                       <X className="h-3 w-3" />
                     </button>
@@ -2196,7 +2195,7 @@ function ChatPage() {
                     const filteredFilters = availableFilters.filter((filter) =>
                       filter.name
                         .toLowerCase()
-                        .includes(filterSearchTerm.toLowerCase()),
+                        .includes(filterSearchTerm.toLowerCase())
                     );
 
                     if (e.key === "Escape") {
@@ -2214,7 +2213,7 @@ function ChatPage() {
                     if (e.key === "ArrowDown") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev < filteredFilters.length - 1 ? prev + 1 : 0,
+                        prev < filteredFilters.length - 1 ? prev + 1 : 0
                       );
                       return;
                     }
@@ -2222,7 +2221,7 @@ function ChatPage() {
                     if (e.key === "ArrowUp") {
                       e.preventDefault();
                       setSelectedFilterIndex((prev) =>
-                        prev > 0 ? prev - 1 : filteredFilters.length - 1,
+                        prev > 0 ? prev - 1 : filteredFilters.length - 1
                       );
                       return;
                     }
@@ -2240,7 +2239,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex],
+                          filteredFilters[selectedFilterIndex]
                         );
                         return;
                       }
@@ -2259,7 +2258,7 @@ function ChatPage() {
                       ) {
                         e.preventDefault();
                         handleFilterSelect(
-                          filteredFilters[selectedFilterIndex],
+                          filteredFilters[selectedFilterIndex]
                         );
                         return;
                       }
@@ -2339,7 +2338,7 @@ function ChatPage() {
                         .filter((filter) =>
                           filter.name
                             .toLowerCase()
-                            .includes(filterSearchTerm.toLowerCase()),
+                            .includes(filterSearchTerm.toLowerCase())
                         )
                         .map((filter, index) => (
                           <button
@@ -2365,7 +2364,7 @@ function ChatPage() {
                       {availableFilters.filter((filter) =>
                         filter.name
                           .toLowerCase()
-                          .includes(filterSearchTerm.toLowerCase()),
+                          .includes(filterSearchTerm.toLowerCase())
                       ).length === 0 &&
                         filterSearchTerm && (
                           <div className="px-2 py-3 text-sm text-muted-foreground">

frontend/src/app/globals.css

@@ -27,41 +27,30 @@
     --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%;
     --placeholder-foreground: 240 5% 65%;
 
-    --accent-emerald-foreground: 161.4 93.5% 30.4%;
+    --accent-amber: 48, 96%, 89%; /* amber-100 #fef3c7 */
-    --accent-pink-foreground: 333.3 71.4% 50.6%;
+    --accent-amber-foreground: 26, 90%, 37%; /* amber-700 #b45309 */
-    --accent-amber-foreground: 26 90.5% 37.1%;
+    --accent-emerald: 149, 80%, 90%; /* emerald-100 #d1fae5 */
-
+    --accent-emerald-foreground: 161, 94%, 30%; /* emerald-600 #059669 */
-    /* Status Colors */
+    --accent-red: 0, 93%, 94%; /* red-100 #fee2e2 */
-    --status-red: #ef4444;
+    --accent-red-foreground: 0, 72%, 51%; /* red-600 #dc2626 */
-    --status-yellow: #eab308;
+    --accent-indigo: 226, 100%, 94%; /* indigo-100 #e0e7ff */
-    --status-green: #4ade80;
+    --accent-indigo-foreground: 243, 75%, 59%; /* indigo-600 #4f46e5 */
-    --status-blue: #2563eb;
+    --accent-pink: 326, 78%, 95%; /* pink-100 #fce7f3 */
+    --accent-pink-foreground: 333, 71%, 51%; /* pink-600 #db2777 */
+    --accent-purple: 269, 100%, 95%; /* purple-100 #f3e8ff */
+    --accent-purple-foreground: 271, 81%, 56%; /* purple-600 #7c3aed */
 
     /* Component Colors */
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
 
-    /* Data Type Colors */
-    --datatype-blue: 221.2 83.2% 53.3%;
-    --datatype-blue-foreground: 214.3 94.6% 92.7%;
-    --datatype-yellow: 40.6 96.1% 40.4%;
-    --datatype-yellow-foreground: 54.9 96.7% 88%;
-    --datatype-red: 0 72.2% 50.6%;
-    --datatype-red-foreground: 0 93.3% 94.1%;
-    --datatype-emerald: 161.4 93.5% 30.4%;
-    --datatype-emerald-foreground: 149.3 80.4% 90%;
-    --datatype-violet: 262.1 83.3% 57.8%;
-    --datatype-violet-foreground: 251.4 91.3% 95.5%;
-
-    /* Warning */
-    --warning: 48 96.6% 76.7%;
-    --warning-foreground: 240 6% 10%;
-
     --radius: 0.5rem;
   }
 
@@ -84,29 +73,25 @@
     --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%;
     --placeholder-foreground: 240 4% 46%;
 
-    --accent-emerald-foreground: 158.1 64.4% 51.6%;
+    --accent-amber: 22, 78%, 26%; /* amber-900 #78350f */
-    --accent-pink-foreground: 328.6 85.5% 70.2%;
+    --accent-amber-foreground: 46, 97%, 65%; /* amber-300 #fcd34d */
-    --accent-amber-foreground: 45.9 96.7% 64.5%;
+    --accent-emerald: 164, 86%, 16%; /* emerald-900 #064e3b */
-
+    --accent-emerald-foreground: 158, 64%, 52%; /* emerald-400 #34d399 */
-    /* Dark mode data type colors */
+    --accent-red: 0, 63%, 31%; /* red-900 #7f1d1d */
-    --datatype-blue: 211.7 96.4% 78.4%;
+    --accent-red-foreground: 0, 91%, 71%; /* red-400 #f87171 */
-    --datatype-blue-foreground: 221.2 83.2% 53.3%;
+    --accent-indigo: 242, 47%, 34%; /* indigo-900 #312e81 */
-    --datatype-yellow: 50.4 97.8% 63.5%;
+    --accent-indigo-foreground: 234, 89%, 74%; /* indigo-400 #818cf8 */
-    --datatype-yellow-foreground: 40.6 96.1% 40.4%;
+    --accent-pink: 336, 69%, 30%; /* pink-900 #831843 */
-    --datatype-red: 0 93.5% 81.8%;
+    --accent-pink-foreground: 329, 86%, 70%; /* pink-400 #f472b6 */
-    --datatype-red-foreground: 0 72.2% 50.6%;
+    --accent-purple: 274, 66%, 32%; /* purple-900 #4c1d95 */
-    --datatype-emerald: 156.2 71.6% 66.9%;
+    --accent-purple-foreground: 270, 95%, 75%; /* purple-400 #a78bfa */
-    --datatype-emerald-foreground: 161.4 93.5% 30.4%;
-    --datatype-violet: 252.5 94.7% 85.1%;
-    --datatype-violet-foreground: 262.1 83.3% 57.8%;
-
-    --warning: 45.9 96.7% 64.5%;
-    --warning-foreground: 240 6% 10%;
   }
 
   * {

frontend/src/app/knowledge/page.tsx

@@ -20,6 +20,7 @@ import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdow
 import { StatusBadge } from "@/components/ui/status-badge";
 import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
 import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
+import { filterAccentClasses } from "@/components/knowledge-filter-panel";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -55,7 +56,7 @@ function SearchPage() {
 
   const { data = [], isFetching } = useGetSearchQuery(
     parsedFilterData?.query || "*",
-    parsedFilterData,
+    parsedFilterData
   );
 
   const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
@@ -80,7 +81,7 @@ function SearchPage() {
     return (
       taskFile.status !== "active" &&
       !backendFiles.some(
-        (backendFile) => backendFile.filename === taskFile.filename,
+        (backendFile) => backendFile.filename === taskFile.filename
       )
     );
   });
@@ -106,8 +107,8 @@ function SearchPage() {
             onClick={() => {
               router.push(
                 `/knowledge/chunks?filename=${encodeURIComponent(
-                  data?.filename ?? "",
+                  data?.filename ?? ""
-                )}`,
+                )}`
               );
             }}
           >
@@ -146,7 +147,7 @@ function SearchPage() {
       initialFlex: 0.5,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
-          <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
+          <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
             {value?.toFixed(2) ?? "-"}
           </span>
         );
@@ -201,7 +202,7 @@ function SearchPage() {
     try {
       // Delete each file individually since the API expects one filename at a time
       const deletePromises = selectedRows.map((row) =>
-        deleteDocumentMutation.mutateAsync({ filename: row.filename }),
+        deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
       await Promise.all(deletePromises);
@@ -209,7 +210,7 @@ function SearchPage() {
       toast.success(
         `Successfully deleted ${selectedRows.length} document${
           selectedRows.length > 1 ? "s" : ""
-        }`,
+        }`
       );
       setSelectedRows([]);
       setShowBulkDeleteDialog(false);
@@ -222,7 +223,7 @@ function SearchPage() {
       toast.error(
         error instanceof Error
           ? error.message
-          : "Failed to delete some documents",
+          : "Failed to delete some documents"
       );
     }
   };
@@ -251,9 +252,13 @@ function SearchPage() {
         {/* Search Input Area */}
         <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
           <form className="flex gap-3">
-            <div className="primary-input min-h-10 !flex items-center flex-nowrap gap-2 focus-within:border-foreground transition-colors !py-0">
+            <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
               {selectedFilter?.name && (
-                <div className="flex items-center gap-1 bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded max-w-[300px]">
+                <div
+                  className={`flex items-center gap-1 h-full px-1.5 py-0.5 rounded max-w-[300px] ${
+                    filterAccentClasses[parsedFilterData?.color || "zinc"]
+                  }`}
+                >
                   <span className="truncate">{selectedFilter?.name}</span>
                   <X
                     aria-label="Remove filter"
@@ -263,7 +268,7 @@ function SearchPage() {
                 </div>
               )}
               <input
-                className="bg-transparent w-full h-full focus:outline-none focus-visible:outline-none placeholder:font-mono"
+                className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none placeholder:font-mono"
                 name="search-query"
                 id="search-query"
                 type="text"

frontend/src/components/ui/status-badge.tsx

@@ -16,27 +16,27 @@ interface StatusBadgeProps {
 const statusConfig = {
   processing: {
     label: "Processing",
-    className: "text-muted-foreground dark:text-muted-foreground ",
+    className: "text-muted-foreground ",
   },
   active: {
     label: "Active",
-    className: "text-emerald-600 dark:text-emerald-400 ",
+    className: "text-accent-emerald-foreground ",
   },
   unavailable: {
     label: "Unavailable",
-    className: "text-red-600 dark:text-red-400 ",
+    className: "text-accent-red-foreground ",
   },
   failed: {
     label: "Failed",
-    className: "text-red-600 dark:text-red-400 ",
+    className: "text-accent-red-foreground ",
   },
   hidden: {
     label: "Hidden",
-    className: "text-zinc-400 dark:text-zinc-500 ",
+    className: "text-muted-foreground ",
   },
   sync: {
     label: "Sync",
-    className: "text-amber-700 dark:text-amber-300 underline",
+    className: "text-accent-amber-foreground underline",
   },
 };
 

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,6 +28,8 @@ export interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
+  color: FilterColor;
+  icon: IconKey;
 }
 
 interface KnowledgeFilterContextType {
@@ -38,6 +41,9 @@ interface KnowledgeFilterContextType {
   openPanel: () => void;
   closePanel: () => void;
   closePanelOnly: () => void;
+  createMode: boolean;
+  startCreateMode: () => void;
+  endCreateMode: () => void;
 }
 
 const KnowledgeFilterContext = createContext<
@@ -48,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;
@@ -66,11 +72,13 @@ export function KnowledgeFilterProvider({
   const [parsedFilterData, setParsedFilterData] =
     useState<ParsedQueryData | null>(null);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [createMode, setCreateMode] = useState(false);
 
   const setSelectedFilter = (filter: KnowledgeFilter | null) => {
     setSelectedFilterState(filter);
 
     if (filter) {
+      setCreateMode(false);
       try {
         const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
         setParsedFilterData(parsed);
@@ -96,6 +104,7 @@ export function KnowledgeFilterProvider({
   };
 
   const closePanel = () => {
+    setCreateMode(false);
     setSelectedFilter(null); // This will also close the panel
   };
 
@@ -103,6 +112,30 @@ export function KnowledgeFilterProvider({
     setIsPanelOpen(false); // Close panel but keep filter selected
   };
 
+  const startCreateMode = () => {
+    // Initialize defaults
+    setCreateMode(true);
+    setSelectedFilterState(null);
+    setParsedFilterData({
+      query: "",
+      filters: {
+        data_sources: ["*"],
+        document_types: ["*"],
+        owners: ["*"],
+        connector_types: ["*"],
+      },
+      limit: 10,
+      scoreThreshold: 0,
+      color: "zinc",
+      icon: "filter",
+    });
+    setIsPanelOpen(true);
+  };
+
+  const endCreateMode = () => {
+    setCreateMode(false);
+  };
+
   const value: KnowledgeFilterContextType = {
     selectedFilter,
     parsedFilterData,
@@ -112,6 +145,9 @@ export function KnowledgeFilterProvider({
     openPanel,
     closePanel,
     closePanelOnly,
+    createMode,
+    startCreateMode,
+    endCreateMode,
   };
 
   return (

frontend/tailwind.config.ts

@@ -109,14 +109,29 @@ const config = {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
-        "accent-emerald-foreground": {
+        "accent-emerald": {
-          DEFAULT: "hsl(var(--accent-emerald-foreground))",
+          DEFAULT: "hsl(var(--accent-emerald))",
+          foreground: "hsl(var(--accent-emerald-foreground))",
         },
-        "accent-pink-foreground": {
+        "accent-pink": {
-          DEFAULT: "hsl(var(--accent-pink-foreground))",
+          DEFAULT: "hsl(var(--accent-pink))",
+          foreground: "hsl(var(--accent-pink-foreground))",
         },
-        "accent-amber-foreground": {
+        "accent-amber": {
-          DEFAULT: "hsl(var(--accent-amber-foreground))",
+          DEFAULT: "hsl(var(--accent-amber))",
+          foreground: "hsl(var(--accent-amber-foreground))",
+        },
+        "accent-purple": {
+          DEFAULT: "hsl(var(--accent-purple))",
+          foreground: "hsl(var(--accent-purple-foreground))",
+        },
+        "accent-indigo": {
+          DEFAULT: "hsl(var(--accent-indigo))",
+          foreground: "hsl(var(--accent-indigo-foreground))",
+        },
+        "accent-red": {
+          DEFAULT: "hsl(var(--accent-red))",
+          foreground: "hsl(var(--accent-red-foreground))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",
@@ -126,33 +141,9 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
-        "status-blue": "var(--status-blue)",
-        "status-green": "var(--status-green)",
-        "status-red": "var(--status-red)",
-        "status-yellow": "var(--status-yellow)",
         "component-icon": "var(--component-icon)",
         "flow-icon": "var(--flow-icon)",
         "placeholder-foreground": "hsl(var(--placeholder-foreground))",
-        "datatype-blue": {
-          DEFAULT: "hsl(var(--datatype-blue))",
-          foreground: "hsl(var(--datatype-blue-foreground))",
-        },
-        "datatype-yellow": {
-          DEFAULT: "hsl(var(--datatype-yellow))",
-          foreground: "hsl(var(--datatype-yellow-foreground))",
-        },
-        "datatype-red": {
-          DEFAULT: "hsl(var(--datatype-red))",
-          foreground: "hsl(var(--datatype-red-foreground))",
-        },
-        "datatype-emerald": {
-          DEFAULT: "hsl(var(--datatype-emerald))",
-          foreground: "hsl(var(--datatype-emerald-foreground))",
-        },
-        "datatype-violet": {
-          DEFAULT: "hsl(var(--datatype-violet))",
-          foreground: "hsl(var(--datatype-violet-foreground))",
-        },
         warning: {
           DEFAULT: "hsl(var(--warning))",
           foreground: "hsl(var(--warning-foreground))",