update accent colors, add first pass at color and icon selector for filters

frontend/components/filter-icon-popover.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import React, { type SVGProps } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Filter as FilterIcon,
+  Star,
+  Book,
+  FileText,
+  Folder,
+  Globe,
+  Calendar,
+  User,
+  Users,
+  Tag,
+  Briefcase,
+  Building2,
+  Cog,
+  Database,
+  Cpu,
+  Bot,
+  MessageSquare,
+  Search,
+  Shield,
+  Lock,
+  Key,
+  Link,
+  Mail,
+  Phone,
+  Check,
+} from "lucide-react";
+import { filterAccentClasses } from "./knowledge-filter-panel";
+
+const ICON_MAP = {
+  Filter: FilterIcon,
+  Star,
+  Book,
+  FileText,
+  Folder,
+  Globe,
+  Calendar,
+  User,
+  Users,
+  Tag,
+  Briefcase,
+  Building2,
+  Cog,
+  Database,
+  Cpu,
+  Bot,
+  MessageSquare,
+  Search,
+  Shield,
+  Lock,
+  Key,
+  Link,
+  Mail,
+  Phone,
+} as const;
+
+export type IconKey = keyof typeof ICON_MAP;
+
+function iconKeyToComponent(
+  key: string
+): React.ComponentType<SVGProps<SVGSVGElement>> {
+  return (
+    (ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>)[
+      key
+    ] || FilterIcon
+  );
+}
+
+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",
+  "": "bg-muted-foreground",
+};
+
+export interface FilterIconPopoverProps {
+  color: FilterColor;
+  iconKey: IconKey | string;
+  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
+          type="button"
+          variant="outline"
+          size="icon"
+          className={"h-8 w-8 p-0 " + (triggerClassName || "")}
+        >
+          <span
+            className={
+              filterAccentClasses[color || ""] +
+              " inline-flex items-center justify-center rounded h-6 w-6"
+            }
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="start">
+        <div className="space-y-3">
+          <div className="grid grid-cols-7 items-center gap-2">
+            {COLORS.map((c) => (
+              <button
+                key={c}
+                type="button"
+                onClick={() => onColorChange(c)}
+                className={
+                    
+                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors " +
+                  colorSwatchClasses[c || ""]
+                }
+                aria-label={c}
+              >
+                {c === color && <Check className="h-3.5 w-3.5" />}
+              </button>
+            ))}
+          </div>
+          <div className="text-xs font-medium text-muted-foreground mt-2">
+            Icon
+          </div>
+          <div className="grid grid-cols-6 gap-2">
+            {(Object.keys(ICON_MAP) as IconKey[]).map((k) => {
+              const OptIcon = ICON_MAP[k];
+              const active = iconKey === k;
+              return (
+                <button
+                  key={k}
+                  type="button"
+                  onClick={() => onIconChange(k)}
+                  className={
+                    "h-8 w-8 inline-flex items-center justify-center rounded border " +
+                    (active ? "border-foreground" : "border-border")
+                  }
+                  aria-label={k}
+                >
+                  <OptIcon className="h-4 w-4" />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

frontend/components/knowledge-filter-list.tsx

@@ -2,24 +2,73 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import {
-
+  Filter as FilterIcon,
-import { Label } from "@/components/ui/label";
+  Loader2,
-import { Textarea } from "@/components/ui/textarea";
+  Plus,
-import { Filter, Loader2, Plus, Save, X } from "lucide-react";
+  X,
+  Star,
+  Book,
+  FileText,
+  Folder,
+  Globe,
+  Calendar,
+  User,
+  Users,
+  Tag,
+  Briefcase,
+  Building2,
+  Cog,
+  Database,
+  Cpu,
+  Bot,
+  MessageSquare,
+  Search,
+  Shield,
+  Lock,
+  Key,
+  Link,
+  Mail,
+  Phone,
+} 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 {
+import type { SVGProps } from "react";
-  Dialog,
+
-  DialogContent,
+const ICON_MAP = {
-  DialogDescription,
+  Filter: FilterIcon,
-  DialogHeader,
+  Star,
-  DialogTitle,
+  Book,
-} from "@/components/ui/dialog";
+  FileText,
+  Folder,
+  Globe,
+  Calendar,
+  User,
+  Users,
+  Tag,
+  Briefcase,
+  Building2,
+  Cog,
+  Database,
+  Cpu,
+  Bot,
+  MessageSquare,
+  Search,
+  Shield,
+  Lock,
+  Key,
+  Link,
+  Mail,
+  Phone,
+} as const;
+
+function iconKeyToComponent(key: string): React.ComponentType<SVGProps<SVGSVGElement>> {
+  return (ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>)[key] || FilterIcon;
+}
 
 interface ParsedQueryData {
   query: string;
@@ -30,6 +79,8 @@ interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
+  color?: "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red";
+  icon?: string;
 }
 
 interface KnowledgeFilterListProps {
@@ -42,10 +93,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 +102,12 @@ export function KnowledgeFilterList({
 
   const filters = data || [];
 
-  const createFilterMutation = useCreateFilter();
-
   const handleFilterSelect = (filter: KnowledgeFilter) => {
     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 +116,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 +139,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>
         ) : (
@@ -152,9 +155,33 @@ export function KnowledgeFilterList({
             >
               <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);
-                  </div>
+                    const color = (parsed.color || "zinc") as
+                      | "zinc"
+                      | "pink"
+                      | "purple"
+                      | "indigo"
+                      | "emerald"
+                      | "amber"
+                      | "red";
+                    const Icon = iconKeyToComponent(parsed.icon || "Filter");
+                    const colorMap = {
+                      zinc: "bg-zinc-500/20 text-zinc-500",
+                      pink: "bg-pink-500/20 text-pink-500",
+                      purple: "bg-purple-500/20 text-purple-500",
+                      indigo: "bg-indigo-500/20 text-indigo-500",
+                      emerald: "bg-emerald-500/20 text-emerald-500",
+                      amber: "bg-amber-500/20 text-amber-500",
+                      red: "bg-red-500/20 text-red-500",
+                    } as const;
+                    const colorClasses = colorMap[color];
+                    return (
+                      <div className={`flex items-center justify-center ${colorClasses} w-5 h-5 rounded`}>
+                        <Icon className="h-3 w-3" />
+                      </div>
+                    );
+                  })()}
                   <div className="text-sm font-medium truncate group-hover:text-accent-foreground">
                     {filter.name}
                   </div>
@@ -200,72 +227,7 @@ export function KnowledgeFilterList({
           ))
         )}
       </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,9 @@ 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 { FilterIconPopover } from "@/components/filter-icon-popover";
 
 interface FacetBucket {
   key: string;
@@ -26,6 +28,20 @@ interface AvailableFacets {
   connector_types: FacetBucket[];
 }
 
+export const filterAccentClasses: Record<
+  "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red" | "",
+  string
+> = {
+  zinc: "bg-accent text-accent-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-accent-foreground",
+};
+
 export function KnowledgeFilterPanel() {
   const {
     selectedFilter,
@@ -33,15 +49,20 @@ 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<
+    "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red"
+  >("zinc");
+  const [iconKey, setIconKey] = useState<string>("Filter");
 
   // Filter configuration states (mirror search page exactly)
   const [query, setQuery] = useState("");
@@ -62,7 +83,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 +105,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 || "zinc");
+      setIconKey(parsedFilterData.icon || "Filter");
     }
   }, [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 || "zinc");
+      setIconKey(parsedFilterData.icon || "Filter");
+    }
+  }, [createMode, parsedFilterData]);
+
   // Load available facets using search aggregations hook
   const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
     enabled: isPanelOpen,
@@ -108,8 +145,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 +167,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 +229,7 @@ export function KnowledgeFilterPanel() {
   };
 
   const handleDeleteFilter = async () => {
+    if (!selectedFilter) return;
     const result = await deleteFilterMutation.mutateAsync({
       id: selectedFilter.id,
     });
@@ -238,81 +260,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={(k) => setIconKey(k)}
-                    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 +485,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/globals.css

@@ -32,32 +32,23 @@
     --ring: 0 0% 0%;
     --placeholder-foreground: 240 5% 65%;
 
-    --accent-emerald-foreground: 161.4 93.5% 30.4%;
+    --accent-amber: 48 96% 88%; /* amber-100 #fef3c7 */
-    --accent-pink-foreground: 333.3 71.4% 50.6%;
+    --accent-amber-foreground: 26 90.5% 37.1%; /* amber-700 #b45309 */
-    --accent-amber-foreground: 26 90.5% 37.1%;
+    --accent-emerald: 152 76% 90%; /* emerald-100 #d1fae5 */
-
+    --accent-emerald-foreground: 161.4 93.5% 30.4%; /* emerald-600 #059669 */
-    /* Status Colors */
+    --accent-red: 0 93.5% 94.1%; /* red-100 #fee2e2 */
-    --status-red: #ef4444;
+    --accent-red-foreground: 0 72.2% 50.6%; /* red-600 #dc2626 */
-    --status-yellow: #eab308;
+    --accent-indigo: 226.7 100% 94.9%; /* indigo-100 #e0e7ff */
-    --status-green: #4ade80;
+    --accent-indigo-foreground: 243.4 75.4% 58.6%; /* indigo-600 #4f46e5 */
-    --status-blue: #2563eb;
+    --accent-pink: 320.6 76.1% 95.5%; /* pink-100 #fce7f3 */
+    --accent-pink-foreground: 333.3 71.4% 50.6%; /* pink-600 #db2777 */
+    --accent-purple: 270 100% 95.5%; /* purple-100 #f3e8ff */
+    --accent-purple-foreground: 262.1 83.3% 57.8%; /* 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%;
@@ -89,21 +80,18 @@
     --ring: 0 0% 100%;
     --placeholder-foreground: 240 4% 46%;
 
-    --accent-emerald-foreground: 158.1 64.4% 51.6%;
+    --accent-amber: 23 88% 27%; /* amber-900 #78350f */
-    --accent-pink-foreground: 328.6 85.5% 70.2%;
+    --accent-amber-foreground: 45.9 96.7% 64.5%; /* amber-300 #fcd34d */
-    --accent-amber-foreground: 45.9 96.7% 64.5%;
+    --accent-emerald: 164.3 88% 16.1%; /* emerald-900 #064e3b */
-
+    --accent-emerald-foreground: 156.2 71.6% 66.9%; /* emerald-400 #34d399 */
-    /* Dark mode data type colors */
+    --accent-red: 0 75% 30%; /* red-900 #7f1d1d */
-    --datatype-blue: 211.7 96.4% 78.4%;
+    --accent-red-foreground: 0 93.5% 81.8%; /* red-400 #f87171 */
-    --datatype-blue-foreground: 221.2 83.2% 53.3%;
+    --accent-indigo: 239 46% 34.5%; /* indigo-900 #312e81 */
-    --datatype-yellow: 50.4 97.8% 63.5%;
+    --accent-indigo-foreground: 234.5 89.5% 74.9%; /* indigo-400 #818cf8 */
-    --datatype-yellow-foreground: 40.6 96.1% 40.4%;
+    --accent-pink: 327.4 70.7% 31.4%; /* pink-900 #831843 */
-    --datatype-red: 0 93.5% 81.8%;
+    --accent-pink-foreground: 328.6 85.5% 70.2%; /* pink-400 #f472b6 */
-    --datatype-red-foreground: 0 72.2% 50.6%;
+    --accent-purple: 261.2 67.8% 34.3%; /* purple-900 #4c1d95 */
-    --datatype-emerald: 156.2 71.6% 66.9%;
+    --accent-purple-foreground: 255.1 89.5% 76.3%; /* 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 ?? ""
-                )}`,
+                )}`
               );
             }}
           >
@@ -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 || ""]
+                  }`}
+                >
                   <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/contexts/knowledge-filter-context.tsx

@@ -27,6 +27,9 @@ export interface ParsedQueryData {
   };
   limit: number;
   scoreThreshold: number;
+  // Optional visual metadata for UI
+  color?: "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red";
+  icon?: string; // lucide icon key we store in the UI mapping
 }
 
 interface KnowledgeFilterContextType {
@@ -38,6 +41,9 @@ interface KnowledgeFilterContextType {
   openPanel: () => void;
   closePanel: () => void;
   closePanelOnly: () => void;
+  createMode: boolean;
+  startCreateMode: () => void;
+  endCreateMode: () => void;
 }
 
 const KnowledgeFilterContext = createContext<
@@ -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))",