From e6a48ff7c8d390bcf740d921b95754e23431d861 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Wed, 1 Oct 2025 15:24:53 -0500
Subject: [PATCH 1/8] modify colors and improve various components to match
 designs

---
 frontend/components/filter-icon-popover.tsx   |   2 +-
 .../components/knowledge-filter-panel.tsx     | 147 ++++++++----------
 frontend/components/ui/button.tsx             |   2 +-
 frontend/components/ui/multi-select.tsx       | 123 +++++++--------
 frontend/components/ui/slider.tsx             |   6 +-
 frontend/package-lock.json                    |   9 --
 frontend/package.json                         |   1 -
 frontend/src/app/globals.css                  |  66 ++++----
 frontend/tailwind.config.ts                   |   2 -
 9 files changed, 159 insertions(+), 199 deletions(-)

diff --git a/frontend/components/filter-icon-popover.tsx b/frontend/components/filter-icon-popover.tsx
index c0ce416b..72504759 100644
--- a/frontend/components/filter-icon-popover.tsx
+++ b/frontend/components/filter-icon-popover.tsx
@@ -133,7 +133,7 @@ export function FilterIconPopover({
                 type="button"
                 onClick={() => onColorChange(c)}
                 className={cn(
-                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-primary",
+                  "flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-white",
                   colorSwatchClasses[c]
                 )}
                 aria-label={c}
diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 0425fba9..1f558d01 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -3,7 +3,13 @@
 import { useState, useEffect } from "react";
 import { X, Save, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -146,25 +152,6 @@ export function KnowledgeFilterPanel() {
   // Don't render if panel is closed or we don't have any data
   if (!isPanelOpen || !parsedFilterData) return null;
 
-  const selectAllFilters = () => {
-    // Use wildcards instead of listing all specific items
-    setSelectedFilters({
-      data_sources: ["*"],
-      document_types: ["*"],
-      owners: ["*"],
-      connector_types: ["*"],
-    });
-  };
-
-  const clearAllFilters = () => {
-    setSelectedFilters({
-      data_sources: [],
-      document_types: [],
-      owners: [],
-      connector_types: [],
-    });
-  };
-
   const handleSaveConfiguration = async () => {
     if (!name.trim()) return;
     const filterData = {
@@ -238,8 +225,8 @@ export function KnowledgeFilterPanel() {
   };
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border-border/40 z-40 overflow-y-auto">
-      <Card className="h-full rounded-none border-0 shadow-lg">
+    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border z-40 overflow-y-auto">
+      <Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <CardTitle className="text-lg flex items-center gap-2">
@@ -282,13 +269,19 @@ export function KnowledgeFilterPanel() {
                 {formatDate(selectedFilter.created_at)}
               </div>
             )}
+            {createMode && (
+              <div className="space-y-2 text-xs text-right text-muted-foreground">
+                <span className="text-placeholder-foreground">Created</span>{" "}
+                {formatDate(new Date().toISOString())}
+              </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"
+                placeholder="Provide a brief description of your knowledge filter..."
                 rows={3}
               />
             </div>
@@ -301,7 +294,7 @@ export function KnowledgeFilterPanel() {
             </Label>
             <Textarea
               id="search-query"
-              placeholder="e.g., 'financial reports from Q4'"
+              placeholder="Enter your search query..."
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               rows={3}
@@ -311,7 +304,6 @@ export function KnowledgeFilterPanel() {
           {/* Filter Dropdowns */}
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label className="text-sm font-medium">Data Sources</Label>
               <MultiSelect
                 options={(availableFacets.data_sources || []).map((bucket) => ({
                   value: bucket.key,
@@ -322,13 +314,12 @@ export function KnowledgeFilterPanel() {
                 onValueChange={(values) =>
                   handleFilterChange("data_sources", values)
                 }
-                placeholder="Select data sources..."
-                allOptionLabel="All Data Sources"
+                placeholder="Select sources..."
+                allOptionLabel="All sources"
               />
             </div>
 
             <div className="space-y-2">
-              <Label className="text-sm font-medium">Document Types</Label>
               <MultiSelect
                 options={(availableFacets.document_types || []).map(
                   (bucket) => ({
@@ -341,13 +332,12 @@ export function KnowledgeFilterPanel() {
                 onValueChange={(values) =>
                   handleFilterChange("document_types", values)
                 }
-                placeholder="Select document types..."
-                allOptionLabel="All Document Types"
+                placeholder="Select types..."
+                allOptionLabel="All types"
               />
             </div>
 
             <div className="space-y-2">
-              <Label className="text-sm font-medium">Owners</Label>
               <MultiSelect
                 options={(availableFacets.owners || []).map((bucket) => ({
                   value: bucket.key,
@@ -362,7 +352,6 @@ export function KnowledgeFilterPanel() {
             </div>
 
             <div className="space-y-2">
-              <Label className="text-sm font-medium">Sources</Label>
               <MultiSelect
                 options={(availableFacets.connector_types || []).map(
                   (bucket) => ({
@@ -375,33 +364,13 @@ export function KnowledgeFilterPanel() {
                 onValueChange={(values) =>
                   handleFilterChange("connector_types", values)
                 }
-                placeholder="Select sources..."
-                allOptionLabel="All Sources"
+                placeholder="Select connectors..."
+                allOptionLabel="All connectors"
               />
             </div>
 
-            {/* All/None buttons */}
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={selectAllFilters}
-                className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
-              >
-                All
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={clearAllFilters}
-                className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
-              >
-                None
-              </Button>
-            </div>
-
             {/* Result Limit Control - exactly like search page */}
-            <div className="space-y-4 pt-4 border-t border-border/50">
+            <div className="space-y-4">
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <Label className="text-sm font-medium text-nowrap">
@@ -462,39 +431,45 @@ export function KnowledgeFilterPanel() {
                 />
               </div>
             </div>
-
-            {/* Save Configuration Button */}
-            <div className="flex flex-col gap-3 pt-4 border-t border-border/50">
-              <Button
-                onClick={handleSaveConfiguration}
-                disabled={isSaving}
-                className="w-full"
-                size="sm"
-              >
-                {isSaving ? (
-                  <>
-                    <RefreshCw className="h-3 w-3 mr-2 animate-spin" />
-                    Saving...
-                  </>
-                ) : (
-                  <>
-                    <Save className="h-3 w-3 mr-2" />
-                    Save Configuration
-                  </>
-                )}
-              </Button>
-              {!createMode && (
-                <Button
-                  variant="destructive"
-                  className="w-full"
-                  onClick={handleDeleteFilter}
-                >
-                  Delete Filter
-                </Button>
-              )}
-            </div>
           </div>
         </CardContent>
+        <CardFooter className="mt-auto align-bottom justify-end gap-2">
+          {/* Save Configuration Button */}
+          {createMode && (
+            <Button
+              onClick={closePanelOnly}
+              disabled={isSaving}
+              variant="outline"
+              size="sm"
+            >
+              Cancel
+            </Button>
+          )}
+          {!createMode && (
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleDeleteFilter}
+              disabled={isSaving}
+            >
+              Delete Filter
+            </Button>
+          )}
+          <Button
+            onClick={handleSaveConfiguration}
+            disabled={isSaving}
+            size="sm"
+            className="relative"
+          >
+            {isSaving && (
+              <>
+                <RefreshCw className="h-3 w-3 animate-spin" />
+                Saving...
+              </>
+            )}
+            {!isSaving && (createMode ? "Create Filter" : "Update Filter")}
+          </Button>
+        </CardFooter>
       </Card>
     </div>
   );
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index aff33335..b6728df8 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
           "border border-input hover:bg-muted hover:text-accent-foreground disabled:bg-muted disabled:!border-none",
         primary:
           "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
-        warning: "bg-warning text-secondary hover:bg-warning/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
         secondary:
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
         ghost:
diff --git a/frontend/components/ui/multi-select.tsx b/frontend/components/ui/multi-select.tsx
index ce45fd27..a70bdaa5 100644
--- a/frontend/components/ui/multi-select.tsx
+++ b/frontend/components/ui/multi-select.tsx
@@ -1,39 +1,39 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronDown, Check } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import * as React from "react";
+import { ChevronDown, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command"
+} from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
-import { ScrollArea } from "@/components/ui/scroll-area"
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface Option {
-  value: string
-  label: string
-  count?: number
+  value: string;
+  label: string;
+  count?: number;
 }
 
 interface MultiSelectProps {
-  options: Option[]
-  value: string[]
-  onValueChange: (value: string[]) => void
-  placeholder?: string
-  className?: string
-  maxSelection?: number
-  searchPlaceholder?: string
-  showAllOption?: boolean
-  allOptionLabel?: string
+  options: Option[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  maxSelection?: number;
+  searchPlaceholder?: string;
+  showAllOption?: boolean;
+  allOptionLabel?: string;
 }
 
 export function MultiSelect({
@@ -43,60 +43,61 @@ export function MultiSelect({
   placeholder = "Select items...",
   className,
   maxSelection,
-  searchPlaceholder = "Search...",
+  searchPlaceholder = "Search options...",
   showAllOption = true,
-  allOptionLabel = "All"
+  allOptionLabel = "All",
 }: MultiSelectProps) {
-  const [open, setOpen] = React.useState(false)
-  const [searchValue, setSearchValue] = React.useState("")
+  const [open, setOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
 
-  const isAllSelected = value.includes("*")
-  
-  const filteredOptions = options.filter(option =>
+  const isAllSelected = value.includes("*");
+
+  const filteredOptions = options.filter((option) =>
     option.label.toLowerCase().includes(searchValue.toLowerCase())
-  )
+  );
 
   const handleSelect = (optionValue: string) => {
     if (optionValue === "*") {
       // Toggle "All" selection
       if (isAllSelected) {
-        onValueChange([])
+        onValueChange([]);
       } else {
-        onValueChange(["*"])
+        onValueChange(["*"]);
       }
     } else {
-      let newValue: string[]
+      let newValue: string[];
       if (value.includes(optionValue)) {
         // Remove the item
-        newValue = value.filter(v => v !== optionValue && v !== "*")
+        newValue = value.filter((v) => v !== optionValue && v !== "*");
       } else {
         // Add the item and remove "All" if present
-        newValue = [...value.filter(v => v !== "*"), optionValue]
-        
+        newValue = [...value.filter((v) => v !== "*"), optionValue];
+
         // Check max selection limit
         if (maxSelection && newValue.length > maxSelection) {
-          return
+          return;
         }
       }
-      onValueChange(newValue)
+      onValueChange(newValue);
     }
-  }
+  };
 
   const getDisplayText = () => {
     if (isAllSelected) {
-      return allOptionLabel
+      return allOptionLabel;
     }
-    
+
     if (value.length === 0) {
-      return placeholder
+      return placeholder;
     }
-    
+
     // Extract the noun from placeholder (e.g., "Select data sources..." -> "data sources")
-    const noun = placeholder.toLowerCase().replace('select ', '').replace('...', '')
-    return `${value.length} ${noun}`
-  }
-
-
+    const noun = placeholder
+      .toLowerCase()
+      .replace("select ", "")
+      .replace("...", "");
+    return `${value.length} ${noun}`;
+  };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -106,17 +107,15 @@ export function MultiSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-[40px] h-auto text-left",
+            "w-full justify-between h-8 py-0 text-left",
             className
           )}
         >
-          <span className="text-foreground text-sm">
-            {getDisplayText()}
-          </span>
+          <span className="text-foreground text-sm">{getDisplayText()}</span>
           <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
+      <PopoverContent className="p-0" align="start">
         <Command>
           <CommandInput
             placeholder={searchPlaceholder}
@@ -132,16 +131,13 @@ export function MultiSelect({
                   onSelect={() => handleSelect("*")}
                   className="cursor-pointer"
                 >
+                  <span className="flex-1">{allOptionLabel}</span>
                   <Check
                     className={cn(
                       "mr-2 h-4 w-4",
                       isAllSelected ? "opacity-100" : "opacity-0"
                     )}
                   />
-                  <span className="flex-1">{allOptionLabel}</span>
-                  <span className="text-xs text-blue-500 bg-blue-500/10 px-1.5 py-0.5 rounded ml-2">
-                    *
-                  </span>
                 </CommandItem>
               )}
               {filteredOptions.map((option) => (
@@ -149,20 +145,19 @@ export function MultiSelect({
                   key={option.value}
                   onSelect={() => handleSelect(option.value)}
                   className="cursor-pointer"
-                  disabled={isAllSelected}
                 >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value.includes(option.value) ? "opacity-100" : "opacity-0"
-                    )}
-                  />
                   <span className="flex-1">{option.label}</span>
                   {option.count !== undefined && (
                     <span className="text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded ml-2">
                       {option.count}
                     </span>
                   )}
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value.includes(option.value) ? "opacity-100" : "opacity-0"
+                    )}
+                  />
                 </CommandItem>
               ))}
             </ScrollArea>
@@ -170,5 +165,5 @@ export function MultiSelect({
         </Command>
       </PopoverContent>
     </Popover>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/components/ui/slider.tsx b/frontend/components/ui/slider.tsx
index 0ca945b1..3f0f0770 100644
--- a/frontend/components/ui/slider.tsx
+++ b/frontend/components/ui/slider.tsx
@@ -17,10 +17,10 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted/40">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
+      <SliderPrimitive.Range className="absolute h-full bg-muted-foreground" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0b79bb00..58d78031 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,7 +28,6 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.16",
         "@tanstack/react-query": "^5.86.0",
         "ag-grid-community": "^34.2.0",
@@ -2318,14 +2317,6 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
       }
     },
-    "node_modules/@tailwindcss/line-clamp": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
-      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
-      "peerDependencies": {
-        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
-      }
-    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d4bc0a4c..bc9eb72c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,6 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.86.0",
     "ag-grid-community": "^34.2.0",
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 3d929b8b..150d1c56 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -25,27 +25,28 @@
     --muted-foreground: 240 4% 46%;
     --accent: 240 5% 96%;
     --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-amber: 48, 96%, 89%; /* amber-100 #fef3c7 */
-    --accent-amber-foreground: 26, 90%, 37%; /* amber-700 #b45309 */
-    --accent-emerald: 149, 80%, 90%; /* emerald-100 #d1fae5 */
-    --accent-emerald-foreground: 161, 94%, 30%; /* emerald-600 #059669 */
-    --accent-red: 0, 93%, 94%; /* red-100 #fee2e2 */
-    --accent-red-foreground: 0, 72%, 51%; /* red-600 #dc2626 */
-    --accent-indigo: 226, 100%, 94%; /* indigo-100 #e0e7ff */
-    --accent-indigo-foreground: 243, 75%, 59%; /* indigo-600 #4f46e5 */
-    --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 */
+    --accent-amber: 48 96% 89%; /* amber-100 #fef3c7 */
+    --accent-amber-foreground: 26 90% 37%; /* amber-700 #b45309 */
+    --accent-emerald: 149 80% 90%; /* emerald-100 #d1fae5 */
+    --accent-emerald-foreground: 161 94% 30%; /* emerald-600 #059669 */
+    --accent-red: 0 93% 94%; /* red-100 #fee2e2 */
+    --accent-red-foreground: 0 72% 51%; /* red-600 #dc2626 */
+    --accent-indigo: 226 100% 94%; /* indigo-100 #e0e7ff */
+    --accent-indigo-foreground: 243 75% 59%; /* indigo-600 #4f46e5 */
+    --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 */
+
+    --destructive: 0 72% 51%; /* red-600 #dc2626 */
+    --destructive-foreground: 0 0% 100%;
+    --warning: 26 90% 37%; /* amber-700 #b45309 */
+    --warning-foreground: 0 0% 100%;
 
     /* Component Colors */
     --component-icon: #d8598a;
@@ -71,27 +72,28 @@
     --muted-foreground: 240 5% 65%;
     --accent: 240 4% 16%;
     --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-amber: 22, 78%, 26%; /* amber-900 #78350f */
-    --accent-amber-foreground: 46, 97%, 65%; /* amber-300 #fcd34d */
-    --accent-emerald: 164, 86%, 16%; /* emerald-900 #064e3b */
-    --accent-emerald-foreground: 158, 64%, 52%; /* emerald-400 #34d399 */
-    --accent-red: 0, 63%, 31%; /* red-900 #7f1d1d */
-    --accent-red-foreground: 0, 91%, 71%; /* red-400 #f87171 */
-    --accent-indigo: 242, 47%, 34%; /* indigo-900 #312e81 */
-    --accent-indigo-foreground: 234, 89%, 74%; /* indigo-400 #818cf8 */
-    --accent-pink: 336, 69%, 30%; /* pink-900 #831843 */
-    --accent-pink-foreground: 329, 86%, 70%; /* pink-400 #f472b6 */
-    --accent-purple: 274, 66%, 32%; /* purple-900 #4c1d95 */
-    --accent-purple-foreground: 270, 95%, 75%; /* purple-400 #a78bfa */
+    --accent-amber: 22 78% 26%; /* amber-900 #78350f */
+    --accent-amber-foreground: 46 97% 65%; /* amber-300 #fcd34d */
+    --accent-emerald: 164 86% 16%; /* emerald-900 #064e3b */
+    --accent-emerald-foreground: 158 64% 52%; /* emerald-400 #34d399 */
+    --accent-red: 0 63% 31%; /* red-900 #7f1d1d */
+    --accent-red-foreground: 0 91% 71%; /* red-400 #f87171 */
+    --accent-indigo: 242 47% 34%; /* indigo-900 #312e81 */
+    --accent-indigo-foreground: 234 89% 74%; /* indigo-400 #818cf8 */
+    --accent-pink: 336 69% 30%; /* pink-900 #831843 */
+    --accent-pink-foreground: 329 86% 70%; /* pink-400 #f472b6 */
+    --accent-purple: 274 66% 32%; /* purple-900 #4c1d95 */
+    --accent-purple-foreground: 270 95% 75%; /* purple-400 #a78bfa */
+
+    --destructive: 0 84% 60%; /* red-500 #ef4444 */
+    --destructive-foreground: 0 0% 100%;
+    --warning: 46 97% 65%; /* amber-300 #fcd34d */
+    --warning-foreground: 0 0% 0%;
   }
 
   * {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index d2dca200..a65cef05 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -4,7 +4,6 @@ import tailwindcssTypography from "@tailwindcss/typography";
 import { fontFamily } from "tailwindcss/defaultTheme";
 import plugin from "tailwindcss/plugin";
 import tailwindcssAnimate from "tailwindcss-animate";
-import tailwindcssLineClamp from "@tailwindcss/line-clamp";
 
 const config = {
   darkMode: ["class"],
@@ -167,7 +166,6 @@ const config = {
   },
   plugins: [
     tailwindcssAnimate,
-    tailwindcssLineClamp,
     tailwindcssForms({
       strategy: "class",
     }),

From 791bbdaef144797627d03e447e4c3cf568f0d34b Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Wed, 1 Oct 2025 15:36:23 -0500
Subject: [PATCH 2/8] make name field required

---
 .../components/knowledge-filter-panel.tsx     | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 1f558d01..c132c3b2 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { X, Save, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { MultiSelect } from "@/components/ui/multi-select";
 import { Slider } from "@/components/ui/slider";
+import { cn } from "@/lib/utils";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useDeleteFilter } from "@/app/api/mutations/useDeleteFilter";
 import { useUpdateFilter } from "@/app/api/mutations/useUpdateFilter";
@@ -67,6 +68,8 @@ export function KnowledgeFilterPanel() {
   const [isSaving, setIsSaving] = useState(false);
   const [color, setColor] = useState<FilterColor>("zinc");
   const [iconKey, setIconKey] = useState<IconKey>("filter");
+  const [nameError, setNameError] = useState<string | null>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
 
   // Filter configuration states (mirror search page exactly)
   const [query, setQuery] = useState("");
@@ -153,7 +156,11 @@ export function KnowledgeFilterPanel() {
   if (!isPanelOpen || !parsedFilterData) return null;
 
   const handleSaveConfiguration = async () => {
-    if (!name.trim()) return;
+    if (!name.trim()) {
+      setNameError("Name is required");
+      nameInputRef.current?.focus();
+      return;
+    }
     const filterData = {
       query,
       filters: selectedFilters,
@@ -247,7 +254,10 @@ export function KnowledgeFilterPanel() {
           {/* Filter Name and Description */}
           <div className="space-y-3">
             <div className="space-y-2">
-              <Label htmlFor="filter-name">Filter name</Label>
+              <Label htmlFor="filter-name" className="gap-1">
+                Filter name
+                <span className="text-destructive">*</span>
+              </Label>
               <div className="flex items-center gap-2">
                 <FilterIconPopover
                   color={color}
@@ -258,8 +268,17 @@ export function KnowledgeFilterPanel() {
                 <Input
                   id="filter-name"
                   value={name}
-                  onChange={(e) => setName(e.target.value)}
+                  onChange={(e) => {
+                    const v = e.target.value;
+                    setName(v);
+                    if (nameError && v.trim()) {
+                      setNameError(null);
+                    }
+                  }}
+                  required
                   placeholder="Filter name"
+                  ref={nameInputRef}
+                  aria-invalid={!!nameError}
                 />
               </div>
             </div>

From 333ab1abea971957f001b3b0de58928083d84452 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Wed, 1 Oct 2025 15:40:12 -0500
Subject: [PATCH 3/8] remove mono placeholder

---
 frontend/components/ui/textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/ui/textarea.tsx b/frontend/components/ui/textarea.tsx
index e381511e..81833a45 100644
--- a/frontend/components/ui/textarea.tsx
+++ b/frontend/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "primary-input placeholder:font-mono placeholder:text-placeholder-foreground min-h-fit",
+        "primary-input placeholder:text-placeholder-foreground min-h-fit",
         className
       )}
       {...props}

From 25ce16df54c1678680dc9d82ff661ca5fba10604 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Wed, 1 Oct 2025 15:50:31 -0500
Subject: [PATCH 4/8] border styles

---
 frontend/components/knowledge-filter-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index c132c3b2..9db1910f 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -232,7 +232,7 @@ export function KnowledgeFilterPanel() {
   };
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border z-40 overflow-y-auto">
+    <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto">
       <Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">

From f7b9bcf55a1cf70722ecdfcef5e484c014cc4907 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Wed, 1 Oct 2025 15:50:55 -0500
Subject: [PATCH 5/8] imports

---
 frontend/components/knowledge-filter-panel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 9db1910f..a5b575cc 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { X, Save, RefreshCw } from "lucide-react";
+import { X, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -15,7 +15,6 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { MultiSelect } from "@/components/ui/multi-select";
 import { Slider } from "@/components/ui/slider";
-import { cn } from "@/lib/utils";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useDeleteFilter } from "@/app/api/mutations/useDeleteFilter";
 import { useUpdateFilter } from "@/app/api/mutations/useUpdateFilter";

From 5f2fede000a3f48e02ce765139f34821ccd27e59 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 2 Oct 2025 10:26:38 -0500
Subject: [PATCH 6/8] styles

---
 frontend/components/knowledge-filter-list.tsx | 10 +++++----
 .../components/knowledge-filter-panel.tsx     |  3 ++-
 frontend/src/app/knowledge/page.tsx           | 21 ++++++++++---------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/components/knowledge-filter-list.tsx b/frontend/components/knowledge-filter-list.tsx
index bac0e5ca..129e8204 100644
--- a/frontend/components/knowledge-filter-list.tsx
+++ b/frontend/components/knowledge-filter-list.tsx
@@ -66,7 +66,7 @@ export function KnowledgeFilterList({
 
   return (
     <>
-      <div className="flex flex-col gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
+      <div className="flex flex-col gap-2 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
@@ -76,7 +76,7 @@ export function KnowledgeFilterList({
             size="sm"
             onClick={handleCreateNew}
             title="Create New Filter"
-            className="h-8 px-3 text-muted-foreground"
+            className="!h-8 w-8 px-0 text-muted-foreground"
           >
             <Plus className="h-3 w-3" />
           </Button>
@@ -106,12 +106,14 @@ export function KnowledgeFilterList({
               <div className="flex flex-col gap-1 flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   {(() => {
-                    const parsed = parseQueryData(filter.query_data) as ParsedQueryData;
+                    const parsed = parseQueryData(
+                      filter.query_data
+                    ) as ParsedQueryData;
                     const Icon = iconKeyToComponent(parsed.icon);
                     return (
                       <div
                         className={cn(
-                          "flex items-center justify-center w-5 h-5 rounded transition-colors",
+                          "flex items-center justify-center w-5 h-5 rounded flex-shrink-0 transition-colors",
                           filterAccentClasses[parsed.color],
                           parsed.color === "zinc" &&
                             "group-hover:bg-background group-[.active]:bg-background"
diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index a5b575cc..8daa59f7 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -314,8 +314,9 @@ export function KnowledgeFilterPanel() {
               id="search-query"
               placeholder="Enter your search query..."
               value={query}
+              className="font-mono placeholder:font-mono"
               onChange={(e) => setQuery(e.target.value)}
-              rows={3}
+              rows={2}
             />
           </div>
 
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index f43c2065..01d8c8a7 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -64,7 +64,7 @@ function SearchPage() {
   };
 
   // Convert TaskFiles to File format and merge with backend results
-  const taskFilesAsFiles: File[] = taskFiles.map(taskFile => {
+  const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
     return {
       filename: taskFile.filename,
       mimetype: taskFile.mimetype,
@@ -77,11 +77,11 @@ function SearchPage() {
 
   const backendFiles = data as File[];
 
-  const filteredTaskFiles = taskFilesAsFiles.filter(taskFile => {
+  const filteredTaskFiles = taskFilesAsFiles.filter((taskFile) => {
     return (
       taskFile.status !== "active" &&
       !backendFiles.some(
-        backendFile => backendFile.filename === taskFile.filename
+        (backendFile) => backendFile.filename === taskFile.filename
       )
     );
   });
@@ -123,7 +123,7 @@ function SearchPage() {
     {
       field: "size",
       headerName: "Size",
-      valueFormatter: params =>
+      valueFormatter: (params) =>
         params.value ? `${Math.round(params.value / 1024)} KB` : "-",
     },
     {
@@ -133,13 +133,13 @@ function SearchPage() {
     {
       field: "owner",
       headerName: "Owner",
-      valueFormatter: params =>
+      valueFormatter: (params) =>
         params.data?.owner_name || params.data?.owner_email || "—",
     },
     {
       field: "chunkCount",
       headerName: "Chunks",
-      valueFormatter: params => params.data?.chunkCount?.toString() || "-",
+      valueFormatter: (params) => params.data?.chunkCount?.toString() || "-",
     },
     {
       field: "avgScore",
@@ -201,7 +201,7 @@ function SearchPage() {
 
     try {
       // Delete each file individually since the API expects one filename at a time
-      const deletePromises = selectedRows.map(row =>
+      const deletePromises = selectedRows.map((row) =>
         deleteDocumentMutation.mutateAsync({ filename: row.filename })
       );
 
@@ -267,8 +267,9 @@ function SearchPage() {
                   />
                 </div>
               )}
+              <Search className="h-4 w-4" />
               <input
-                className="bg-transparent w-full h-full ml-2 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 font-mono placeholder:font-mono"
                 name="search-query"
                 id="search-query"
                 type="text"
@@ -318,7 +319,7 @@ function SearchPage() {
           rowSelection="multiple"
           rowMultiSelectWithClick={false}
           suppressRowClickSelection={true}
-          getRowId={params => params.data.filename}
+          getRowId={(params) => params.data.filename}
           domLayout="normal"
           onSelectionChanged={onSelectionChanged}
           noRowsOverlayComponent={() => (
@@ -346,7 +347,7 @@ function SearchPage() {
         }? This will remove all chunks and data associated with these documents. This action cannot be undone.
 
 Documents to be deleted:
-${selectedRows.map(row => `• ${row.filename}`).join("\n")}`}
+${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
         confirmText="Delete All"
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}

From 2e6b177f41f420c878786e88eba26298b1c3ebec Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 2 Oct 2025 10:47:35 -0500
Subject: [PATCH 7/8] more styles

---
 frontend/components/knowledge-filter-panel.tsx | 5 ++++-
 frontend/components/ui/slider.tsx              | 2 +-
 frontend/src/app/knowledge/page.tsx            | 7 +++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/components/knowledge-filter-panel.tsx b/frontend/components/knowledge-filter-panel.tsx
index 8daa59f7..6bf9285b 100644
--- a/frontend/components/knowledge-filter-panel.tsx
+++ b/frontend/components/knowledge-filter-panel.tsx
@@ -241,7 +241,10 @@ export function KnowledgeFilterPanel() {
             <Button
               variant="ghost"
               size="sm"
-              onClick={closePanelOnly}
+              onClick={() => {
+                setSelectedFilter(null);
+                closePanelOnly();
+              }}
               className="h-8 w-8 p-0"
             >
               <X className="h-4 w-4" />
diff --git a/frontend/components/ui/slider.tsx b/frontend/components/ui/slider.tsx
index 3f0f0770..bd2d8d80 100644
--- a/frontend/components/ui/slider.tsx
+++ b/frontend/components/ui/slider.tsx
@@ -17,7 +17,7 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
+    <SliderPrimitive.Track className="relative h-[5px] w-full grow overflow-hidden rounded-full bg-muted">
       <SliderPrimitive.Range className="absolute h-full bg-muted-foreground" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 01d8c8a7..04224b86 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -255,7 +255,7 @@ function SearchPage() {
             <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 h-full px-1.5 py-0.5 rounded max-w-[300px] ${
+                  className={`flex items-center gap-1 h-full px-1.5 py-0.5 rounded max-w-[25%] ${
                     filterAccentClasses[parsedFilterData?.color || "zinc"]
                   }`}
                 >
@@ -267,7 +267,10 @@ function SearchPage() {
                   />
                 </div>
               )}
-              <Search className="h-4 w-4" />
+              <Search
+                className="h-4 w-4 ml-2 flex-shrink-0 text-placeholder-foreground"
+                strokeWidth={1.5}
+              />
               <input
                 className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
                 name="search-query"

From 0a75d6437c7f27cd9152b3c6fcb82d0eaff322d5 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 2 Oct 2025 10:52:04 -0500
Subject: [PATCH 8/8] search icon spacing

---
 frontend/src/app/knowledge/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 04224b86..1b8b60ef 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -255,7 +255,7 @@ function SearchPage() {
             <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 h-full px-1.5 py-0.5 rounded max-w-[25%] ${
+                  className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
                     filterAccentClasses[parsedFilterData?.color || "zinc"]
                   }`}
                 >
@@ -268,7 +268,7 @@ function SearchPage() {
                 </div>
               )}
               <Search
-                className="h-4 w-4 ml-2 flex-shrink-0 text-placeholder-foreground"
+                className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
                 strokeWidth={1.5}
               />
               <input