diff --git a/archon-ui-main/src/components/layout/hooks/useBackendHealth.ts b/archon-ui-main/src/components/layout/hooks/useBackendHealth.ts
index 4851dee89c..e3fcbd9beb 100644
--- a/archon-ui-main/src/components/layout/hooks/useBackendHealth.ts
+++ b/archon-ui-main/src/components/layout/hooks/useBackendHealth.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { callAPIWithETag } from "../../../features/projects/shared/apiWithEtag";
+import { callAPIWithETag } from "../../../features/shared/apiWithEtag";
 import type { HealthResponse } from "../types";
 
 /**
diff --git a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
index 26834e9878..10d30d0629 100644
--- a/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
+++ b/archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
@@ -7,8 +7,8 @@ import { Globe, Loader2, Upload } from "lucide-react";
 import { useId, useState } from "react";
 import { useToast } from "../../ui/hooks/useToast";
 import { Button, Input, Label } from "../../ui/primitives";
-import { cn } from "../../ui/primitives/styles";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../ui/primitives/dialog";
+import { cn } from "../../ui/primitives/styles";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/primitives/tabs";
 import { useCrawlUrl, useUploadDocument } from "../hooks";
 import type { CrawlRequest, UploadMetadata } from "../types";
@@ -145,7 +145,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                 "backdrop-blur-md border-2 font-medium text-sm",
                 activeTab === "crawl"
                   ? "bg-gradient-to-b from-cyan-100/70 via-cyan-50/40 to-white/80 dark:from-cyan-900/40 dark:via-cyan-800/25 dark:to-black/50 border-cyan-400/60 text-cyan-700 dark:text-cyan-300 shadow-[0_0_20px_rgba(34,211,238,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-cyan-300/50 hover:text-cyan-600 dark:hover:text-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)]"
+                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-cyan-300/50 hover:text-cyan-600 dark:hover:text-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)]",
               )}
             >
               {/* Top accent glow for active state */}
@@ -155,10 +155,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                   <div className="-mt-1 h-8 w-full bg-gradient-to-b from-cyan-500/30 to-transparent blur-md" />
                 </div>
               )}
-              <Globe className={cn(
-                "w-5 h-5",
-                activeTab === "crawl" ? "text-cyan-500" : "text-current"
-              )} />
+              <Globe className={cn("w-5 h-5", activeTab === "crawl" ? "text-cyan-500" : "text-current")} />
               <div className="flex flex-col items-start gap-0.5">
                 <span className="font-semibold">Crawl Website</span>
                 <span className="text-xs opacity-80">Scan web pages</span>
@@ -174,7 +171,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                 "backdrop-blur-md border-2 font-medium text-sm",
                 activeTab === "upload"
                   ? "bg-gradient-to-b from-purple-100/70 via-purple-50/40 to-white/80 dark:from-purple-900/40 dark:via-purple-800/25 dark:to-black/50 border-purple-400/60 text-purple-700 dark:text-purple-300 shadow-[0_0_20px_rgba(147,51,234,0.25)]"
-                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-purple-300/50 hover:text-purple-600 dark:hover:text-purple-400 hover:shadow-[0_0_15px_rgba(147,51,234,0.15)]"
+                  : "bg-gradient-to-b from-white/40 via-white/30 to-white/60 dark:from-gray-800/40 dark:via-gray-800/30 dark:to-black/60 border-gray-300/40 dark:border-gray-600/40 text-gray-600 dark:text-gray-300 hover:border-purple-300/50 hover:text-purple-600 dark:hover:text-purple-400 hover:shadow-[0_0_15px_rgba(147,51,234,0.15)]",
               )}
             >
               {/* Top accent glow for active state */}
@@ -184,10 +181,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                   <div className="-mt-1 h-8 w-full bg-gradient-to-b from-purple-500/30 to-transparent blur-md" />
                 </div>
               )}
-              <Upload className={cn(
-                "w-5 h-5",
-                activeTab === "upload" ? "text-purple-500" : "text-current"
-              )} />
+              <Upload className={cn("w-5 h-5", activeTab === "upload" ? "text-purple-500" : "text-current")} />
               <div className="flex flex-col items-start gap-0.5">
                 <span className="font-semibold">Upload Document</span>
                 <span className="text-xs opacity-80">Add local files</span>
@@ -204,7 +198,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
               </Label>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Globe className="h-5 w-5" style={{ color: '#0891b2' }} />
+                  <Globe className="h-5 w-5" style={{ color: "#0891b2" }} />
                 </div>
                 <Input
                   id={urlId}
@@ -222,17 +216,9 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
             </div>
 
             <div className="space-y-6">
-              <KnowledgeTypeSelector
-                value={crawlType}
-                onValueChange={setCrawlType}
-                disabled={isProcessing}
-              />
+              <KnowledgeTypeSelector value={crawlType} onValueChange={setCrawlType} disabled={isProcessing} />
 
-              <LevelSelector
-                value={maxDepth}
-                onValueChange={setMaxDepth}
-                disabled={isProcessing}
-              />
+              <LevelSelector value={maxDepth} onValueChange={setMaxDepth} disabled={isProcessing} />
             </div>
 
             <TagInput
@@ -279,34 +265,31 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
                   disabled={isProcessing}
                   className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed z-10"
                 />
-                <div className={cn(
-                  "relative h-20 rounded-xl border-2 border-dashed transition-all duration-200",
-                  "backdrop-blur-md bg-gradient-to-b from-white/60 via-white/40 to-white/50 dark:from-black/60 dark:via-black/40 dark:to-black/50",
-                  "flex flex-col items-center justify-center gap-2 text-center p-4",
-                  selectedFile
-                    ? "border-purple-400/70 bg-gradient-to-b from-purple-50/60 to-white/60 dark:from-purple-900/20 dark:to-black/50"
-                    : "border-gray-300/60 dark:border-gray-600/60 hover:border-purple-400/50 hover:bg-gradient-to-b hover:from-purple-50/40 hover:to-white/60 dark:hover:from-purple-900/10 dark:hover:to-black/50",
-                  isProcessing && "opacity-50 cursor-not-allowed"
-                )}>
-                  <Upload className={cn(
-                    "w-6 h-6",
-                    selectedFile ? "text-purple-500" : "text-gray-400 dark:text-gray-500"
-                  )} />
+                <div
+                  className={cn(
+                    "relative h-20 rounded-xl border-2 border-dashed transition-all duration-200",
+                    "backdrop-blur-md bg-gradient-to-b from-white/60 via-white/40 to-white/50 dark:from-black/60 dark:via-black/40 dark:to-black/50",
+                    "flex flex-col items-center justify-center gap-2 text-center p-4",
+                    selectedFile
+                      ? "border-purple-400/70 bg-gradient-to-b from-purple-50/60 to-white/60 dark:from-purple-900/20 dark:to-black/50"
+                      : "border-gray-300/60 dark:border-gray-600/60 hover:border-purple-400/50 hover:bg-gradient-to-b hover:from-purple-50/40 hover:to-white/60 dark:hover:from-purple-900/10 dark:hover:to-black/50",
+                    isProcessing && "opacity-50 cursor-not-allowed",
+                  )}
+                >
+                  <Upload
+                    className={cn("w-6 h-6", selectedFile ? "text-purple-500" : "text-gray-400 dark:text-gray-500")}
+                  />
                   <div className="text-sm">
                     {selectedFile ? (
                       <div className="space-y-1">
-                        <p className="font-medium text-purple-700 dark:text-purple-400">
-                          {selectedFile.name}
-                        </p>
+                        <p className="font-medium text-purple-700 dark:text-purple-400">{selectedFile.name}</p>
                         <p className="text-xs text-purple-600 dark:text-purple-400">
                           {Math.round(selectedFile.size / 1024)} KB
                         </p>
                       </div>
                     ) : (
                       <div className="space-y-1">
-                        <p className="font-medium text-gray-700 dark:text-gray-300">
-                          Click to browse or drag & drop
-                        </p>
+                        <p className="font-medium text-gray-700 dark:text-gray-300">Click to browse or drag & drop</p>
                         <p className="text-xs text-gray-500 dark:text-gray-400">
                           PDF, DOC, DOCX, TXT, MD files supported
                         </p>
@@ -317,11 +300,7 @@ export const AddKnowledgeDialog: React.FC<AddKnowledgeDialogProps> = ({
               </div>
             </div>
 
-            <KnowledgeTypeSelector
-              value={uploadType}
-              onValueChange={setUploadType}
-              disabled={isProcessing}
-            />
+            <KnowledgeTypeSelector value={uploadType} onValueChange={setUploadType} disabled={isProcessing} />
 
             <TagInput
               tags={uploadTags}
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
index 71765cd59c..d90c0c7ecf 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
@@ -202,10 +202,7 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
                   <span>{isUrl ? "Web Page" : "Document"}</span>
                 </div>
               </SimpleTooltip>
-              <KnowledgeCardType
-                sourceId={item.source_id}
-                knowledgeType={item.knowledge_type}
-              />
+              <KnowledgeCardType sourceId={item.source_id} knowledgeType={item.knowledge_type} />
             </div>
 
             {/* Actions */}
@@ -300,7 +297,9 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
             </div>
             {/* Right: pills */}
             <div className="flex items-center gap-2">
-              <SimpleTooltip content={`${documentCount} document${documentCount !== 1 ? "s" : ""} indexed - Click to view`}>
+              <SimpleTooltip
+                content={`${documentCount} document${documentCount !== 1 ? "s" : ""} indexed - Click to view`}
+              >
                 <div
                   className="cursor-pointer hover:scale-105 transition-transform"
                   onClick={(e) => {
@@ -321,10 +320,7 @@ export const KnowledgeCard: React.FC<KnowledgeCardProps> = ({
                 content={`${codeExamplesCount} code example${codeExamplesCount !== 1 ? "s" : ""} extracted - ${onViewCodeExamples ? "Click to view" : "No examples available"}`}
               >
                 <div
-                  className={cn(
-                    "transition-transform",
-                    onViewCodeExamples && "cursor-pointer hover:scale-105"
-                  )}
+                  className={cn("transition-transform", onViewCodeExamples && "cursor-pointer hover:scale-105")}
                   onClick={(e) => {
                     e.stopPropagation();
                     if (onViewCodeExamples) {
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
index 5eb4157b04..3334bc0a99 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
@@ -75,7 +75,7 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
 
       // If we're editing an existing tag, remove the original first
       if (originalTagBeingEdited) {
-        newTags = newTags.filter(tag => tag !== originalTagBeingEdited);
+        newTags = newTags.filter((tag) => tag !== originalTagBeingEdited);
       }
 
       // Add the new/modified tag if it doesn't already exist
@@ -84,7 +84,7 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
       }
 
       // Save directly without updating local state first
-      const updatedTags = newTags.filter(tag => tag.trim().length > 0);
+      const updatedTags = newTags.filter((tag) => tag.trim().length > 0);
 
       try {
         await updateMutation.mutateAsync({
@@ -128,7 +128,7 @@ export const KnowledgeCardTags: React.FC<KnowledgeCardTagsProps> = ({ sourceId,
 
       // If we're editing an existing tag, remove the original first
       if (originalTagBeingEdited) {
-        newTags = newTags.filter(tag => tag !== originalTagBeingEdited);
+        newTags = newTags.filter((tag) => tag !== originalTagBeingEdited);
       }
 
       // Add the new/modified tag if it doesn't already exist
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTitle.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTitle.tsx
index 63ee41c17d..a019156c5a 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCardTitle.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCardTitle.tsx
@@ -7,7 +7,7 @@ import { Info } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Input } from "../../ui/primitives";
 import { cn } from "../../ui/primitives/styles";
-import { SimpleTooltip, Tooltip, TooltipTrigger, TooltipContent } from "../../ui/primitives/tooltip";
+import { SimpleTooltip, Tooltip, TooltipContent, TooltipTrigger } from "../../ui/primitives/tooltip";
 import { useUpdateKnowledgeItem } from "../hooks";
 
 // Centralized color class mappings
@@ -23,12 +23,15 @@ const ICON_COLOR_CLASSES: Record<string, string> = {
 
 const TOOLTIP_COLOR_CLASSES: Record<string, string> = {
   cyan: "border-cyan-500/50 shadow-[0_0_15px_rgba(34,211,238,0.5)] dark:border-cyan-400/50 dark:shadow-[0_0_15px_rgba(34,211,238,0.7)]",
-  purple: "border-purple-500/50 shadow-[0_0_15px_rgba(168,85,247,0.5)] dark:border-purple-400/50 dark:shadow-[0_0_15px_rgba(168,85,247,0.7)]",
+  purple:
+    "border-purple-500/50 shadow-[0_0_15px_rgba(168,85,247,0.5)] dark:border-purple-400/50 dark:shadow-[0_0_15px_rgba(168,85,247,0.7)]",
   blue: "border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.5)] dark:border-blue-400/50 dark:shadow-[0_0_15px_rgba(59,130,246,0.7)]",
   pink: "border-pink-500/50 shadow-[0_0_15px_rgba(236,72,153,0.5)] dark:border-pink-400/50 dark:shadow-[0_0_15px_rgba(236,72,153,0.7)]",
   red: "border-red-500/50 shadow-[0_0_15px_rgba(239,68,68,0.5)] dark:border-red-400/50 dark:shadow-[0_0_15px_rgba(239,68,68,0.7)]",
-  yellow: "border-yellow-500/50 shadow-[0_0_15px_rgba(234,179,8,0.5)] dark:border-yellow-400/50 dark:shadow-[0_0_15px_rgba(234,179,8,0.7)]",
-  default: "border-cyan-500/50 shadow-[0_0_15px_rgba(34,211,238,0.5)] dark:border-cyan-400/50 dark:shadow-[0_0_15px_rgba(34,211,238,0.7)]",
+  yellow:
+    "border-yellow-500/50 shadow-[0_0_15px_rgba(234,179,8,0.5)] dark:border-yellow-400/50 dark:shadow-[0_0_15px_rgba(234,179,8,0.7)]",
+  default:
+    "border-cyan-500/50 shadow-[0_0_15px_rgba(34,211,238,0.5)] dark:border-cyan-400/50 dark:shadow-[0_0_15px_rgba(34,211,238,0.7)]",
 };
 
 interface KnowledgeCardTitleProps {
@@ -144,16 +147,16 @@ export const KnowledgeCardTitle: React.FC<KnowledgeCardTitleProps> = ({
           disabled={updateMutation.isPending}
           className={cn(
             "text-base font-semibold bg-transparent border-cyan-400 dark:border-cyan-600",
-            "focus:ring-1 focus:ring-cyan-400 px-2 py-1"
+            "focus:ring-1 focus:ring-cyan-400 px-2 py-1",
           )}
         />
-        {(description && description.trim()) && (
+        {description && description.trim() && (
           <Tooltip delayDuration={200}>
             <TooltipTrigger asChild>
               <Info
                 className={cn(
                   "w-3.5 h-3.5 transition-colors flex-shrink-0 opacity-70 hover:opacity-100 cursor-help",
-                  getIconColorClass()
+                  getIconColorClass(),
                 )}
               />
             </TooltipTrigger>
@@ -173,20 +176,20 @@ export const KnowledgeCardTitle: React.FC<KnowledgeCardTitleProps> = ({
           className={cn(
             "text-base font-semibold text-gray-900 dark:text-white/90 line-clamp-2 cursor-pointer",
             "hover:text-gray-700 dark:hover:text-white transition-colors",
-            updateMutation.isPending && "opacity-50"
+            updateMutation.isPending && "opacity-50",
           )}
           onClick={handleClick}
         >
           {title}
         </h3>
       </SimpleTooltip>
-      {(description && description.trim()) && (
+      {description && description.trim() && (
         <Tooltip delayDuration={200}>
           <TooltipTrigger asChild>
             <Info
               className={cn(
                 "w-3.5 h-3.5 transition-colors flex-shrink-0 opacity-70 hover:opacity-100 cursor-help",
-                getIconColorClass()
+                getIconColorClass(),
               )}
             />
           </TooltipTrigger>
@@ -197,4 +200,4 @@ export const KnowledgeCardTitle: React.FC<KnowledgeCardTitleProps> = ({
       )}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
index 107a8d4a46..ac2f8afedb 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx
@@ -15,10 +15,7 @@ interface KnowledgeCardTypeProps {
   knowledgeType: "technical" | "business";
 }
 
-export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
-  sourceId,
-  knowledgeType,
-}) => {
+export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({ sourceId, knowledgeType }) => {
   const [isEditing, setIsEditing] = useState(false);
   const updateMutation = useUpdateKnowledgeItem();
 
@@ -61,10 +58,7 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
 
   if (isEditing) {
     return (
-      <div
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-      >
+      <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
         <Select
           open={isEditing}
           onOpenChange={(open) => setIsEditing(open)}
@@ -79,7 +73,7 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
               "focus:ring-1 focus:ring-cyan-400",
               isTechnical
                 ? "bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
-                : "bg-pink-100 text-pink-700 dark:bg-pink-500/10 dark:text-pink-400"
+                : "bg-pink-100 text-pink-700 dark:bg-pink-500/10 dark:text-pink-400",
             )}
           >
             <SelectValue>
@@ -109,7 +103,9 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
   }
 
   return (
-    <SimpleTooltip content={`${isTechnical ? "Technical documentation" : "Business/general content"} - Click to change`}>
+    <SimpleTooltip
+      content={`${isTechnical ? "Technical documentation" : "Business/general content"} - Click to change`}
+    >
       <div
         className={cn(
           "flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium cursor-pointer",
@@ -117,7 +113,7 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
           isTechnical
             ? "bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
             : "bg-pink-100 text-pink-700 dark:bg-pink-500/10 dark:text-pink-400",
-          updateMutation.isPending && "opacity-50 cursor-not-allowed"
+          updateMutation.isPending && "opacity-50 cursor-not-allowed",
         )}
         onClick={handleClick}
       >
@@ -126,4 +122,4 @@ export const KnowledgeCardType: React.FC<KnowledgeCardTypeProps> = ({
       </div>
     </SimpleTooltip>
   );
-};
\ No newline at end of file
+};
diff --git a/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx b/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
index 4abbd68985..2d1f6e4ebb 100644
--- a/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
+++ b/archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx
@@ -20,8 +20,10 @@ const TYPES = [
     description: "Code, APIs, dev docs",
     icon: Terminal,
     gradient: {
-      selected: "from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40",
-      unselected: "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
+      selected:
+        "from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40",
+      unselected:
+        "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
     },
     border: {
       selected: "border-cyan-500/60",
@@ -45,8 +47,10 @@ const TYPES = [
     description: "Guides, policies, general",
     icon: Briefcase,
     gradient: {
-      selected: "from-pink-100/60 via-pink-50/30 to-white/70 dark:from-pink-900/30 dark:via-pink-900/15 dark:to-black/40",
-      unselected: "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
+      selected:
+        "from-pink-100/60 via-pink-50/30 to-white/70 dark:from-pink-900/30 dark:via-pink-900/15 dark:to-black/40",
+      unselected:
+        "from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
     },
     border: {
       selected: "border-pink-500/60",
@@ -73,9 +77,7 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
 }) => {
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-900 dark:text-white/90">
-        Knowledge Type
-      </div>
+      <div className="text-sm font-medium text-gray-900 dark:text-white/90">Knowledge Type</div>
       <div className="grid grid-cols-2 gap-4">
         {TYPES.map((type) => {
           const isSelected = value === type.value;
@@ -99,9 +101,11 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
                     ? `${type.border.selected} bg-gradient-to-b ${type.gradient.selected}`
                     : `${type.border.unselected} bg-gradient-to-b ${type.gradient.unselected}`,
                   !disabled && !isSelected && type.border.hover,
-                  !disabled && !isSelected && "hover:shadow-[0_0_15px_rgba(0,0,0,0.05)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.05)]",
+                  !disabled &&
+                    !isSelected &&
+                    "hover:shadow-[0_0_15px_rgba(0,0,0,0.05)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.05)]",
                   isSelected && "shadow-[0_0_20px_rgba(6,182,212,0.15)]",
-                  disabled && "opacity-50 cursor-not-allowed"
+                  disabled && "opacity-50 cursor-not-allowed",
                 )}
                 aria-label={`Select ${type.label}: ${type.description}`}
               >
@@ -115,36 +119,33 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
 
                 {/* Selection indicator */}
                 {isSelected && (
-                  <div className={cn("absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center", type.accent)}>
+                  <div
+                    className={cn(
+                      "absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center",
+                      type.accent,
+                    )}
+                  >
                     <Check className="w-3 h-3 text-white" />
                   </div>
                 )}
 
                 {/* Icon */}
-                <Icon className={cn(
-                  "w-6 h-6",
-                  isSelected
-                    ? type.colors.selected
-                    : type.colors.unselected
-                )} />
+                <Icon className={cn("w-6 h-6", isSelected ? type.colors.selected : type.colors.unselected)} />
 
                 {/* Label */}
-                <div className={cn(
-                  "text-sm font-semibold",
-                  isSelected
-                    ? type.colors.selected
-                    : type.colors.unselected
-                )}>
+                <div
+                  className={cn("text-sm font-semibold", isSelected ? type.colors.selected : type.colors.unselected)}
+                >
                   {type.label}
                 </div>
 
                 {/* Description */}
-                <div className={cn(
-                  "text-xs text-center leading-tight",
-                  isSelected
-                    ? type.colors.description.selected
-                    : type.colors.description.unselected
-                )}>
+                <div
+                  className={cn(
+                    "text-xs text-center leading-tight",
+                    isSelected ? type.colors.description.selected : type.colors.description.unselected,
+                  )}
+                >
                   {type.description}
                 </div>
               </button>
@@ -159,4 +160,4 @@ export const KnowledgeTypeSelector: React.FC<KnowledgeTypeSelectorProps> = ({
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx b/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
index b97ce2b234..42832adb14 100644
--- a/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
+++ b/archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
@@ -19,42 +19,38 @@ const LEVELS = [
     value: "1",
     label: "1",
     description: "Single page only",
-    details: "1-50 pages • Best for: Single articles, specific pages"
+    details: "1-50 pages • Best for: Single articles, specific pages",
   },
   {
     value: "2",
     label: "2",
     description: "Page + immediate links",
-    details: "10-200 pages • Best for: Documentation sections, blogs"
+    details: "10-200 pages • Best for: Documentation sections, blogs",
   },
   {
     value: "3",
     label: "3",
     description: "2 levels deep",
-    details: "50-500 pages • Best for: Entire sites, comprehensive docs"
+    details: "50-500 pages • Best for: Entire sites, comprehensive docs",
   },
   {
     value: "5",
     label: "5",
     description: "Very deep crawling",
-    details: "100-1000+ pages • Warning: May include irrelevant content"
+    details: "100-1000+ pages • Warning: May include irrelevant content",
   },
 ];
 
-export const LevelSelector: React.FC<LevelSelectorProps> = ({
-  value,
-  onValueChange,
-  disabled = false,
-}) => {
+export const LevelSelector: React.FC<LevelSelectorProps> = ({ value, onValueChange, disabled = false }) => {
   const tooltipContent = (
     <div className="space-y-2 text-xs">
       <div className="font-semibold mb-2">Crawl Depth Level Explanations:</div>
       {LEVELS.map((level) => (
         <div key={level.value} className="space-y-1">
-          <div className="font-medium">Level {level.value}: "{level.description}"</div>
-          <div className="text-gray-300 dark:text-gray-400 pl-2">
-            {level.details}
+          <div className="font-medium">
+            Level {level.value}: "{level.description}"
           </div>
+          <div className="text-gray-300 dark:text-gray-400 pl-2">{level.details}</div>
         </div>
       ))}
       <div className="mt-3 pt-2 border-t border-gray-600 dark:border-gray-400">
@@ -76,11 +72,7 @@ export const LevelSelector: React.FC<LevelSelectorProps> = ({
           <Info className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" />
         </SimpleTooltip>
       </div>
-      <div
-        className="grid grid-cols-4 gap-3"
-        role="radiogroup"
-        aria-labelledby="crawl-depth-label"
-      >
+      <div className="grid grid-cols-4 gap-3" role="radiogroup" aria-labelledby="crawl-depth-label">
         {LEVELS.map((level) => {
           const isSelected = value === level.value;
 
@@ -92,64 +84,64 @@ export const LevelSelector: React.FC<LevelSelectorProps> = ({
             >
               <SimpleTooltip content={level.details}>
                 <button
-                type="button"
-                role="radio"
-                aria-checked={isSelected}
-                aria-label={`Level ${level.value}: ${level.description}`}
-                tabIndex={isSelected ? 0 : -1}
-                onClick={() => !disabled && onValueChange(level.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    if (!disabled) onValueChange(level.value);
-                  }
-                }}
-                disabled={disabled}
-                className={cn(
-                  "relative w-full h-16 rounded-xl transition-all duration-200 border-2",
-                  "flex flex-col items-center justify-center gap-1",
-                  "backdrop-blur-md focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2",
-                  isSelected
-                    ? "border-cyan-500/60 bg-gradient-to-b from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40"
-                    : "border-gray-300/50 dark:border-gray-700/50 bg-gradient-to-b from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
-                  !disabled && "hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]",
-                  disabled && "opacity-50 cursor-not-allowed"
-                )}
-              >
-                {/* Top accent glow for selected state */}
-                {isSelected && (
-                  <div className="pointer-events-none absolute inset-x-0 top-0">
-                    <div className="mx-1 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
-                    <div className="-mt-1 h-6 w-full bg-gradient-to-b from-cyan-500/25 to-transparent blur-md" />
-                  </div>
-                )}
+                  type="button"
+                  role="radio"
+                  aria-checked={isSelected}
+                  aria-label={`Level ${level.value}: ${level.description}`}
+                  tabIndex={isSelected ? 0 : -1}
+                  onClick={() => !disabled && onValueChange(level.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      if (!disabled) onValueChange(level.value);
+                    }
+                  }}
+                  disabled={disabled}
+                  className={cn(
+                    "relative w-full h-16 rounded-xl transition-all duration-200 border-2",
+                    "flex flex-col items-center justify-center gap-1",
+                    "backdrop-blur-md focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2",
+                    isSelected
+                      ? "border-cyan-500/60 bg-gradient-to-b from-cyan-100/60 via-cyan-50/30 to-white/70 dark:from-cyan-900/30 dark:via-cyan-900/15 dark:to-black/40"
+                      : "border-gray-300/50 dark:border-gray-700/50 bg-gradient-to-b from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
+                    !disabled && "hover:border-cyan-400/50 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]",
+                    disabled && "opacity-50 cursor-not-allowed",
+                  )}
+                >
+                  {/* Top accent glow for selected state */}
+                  {isSelected && (
+                    <div className="pointer-events-none absolute inset-x-0 top-0">
+                      <div className="mx-1 mt-0.5 h-[2px] rounded-full bg-cyan-500" />
+                      <div className="-mt-1 h-6 w-full bg-gradient-to-b from-cyan-500/25 to-transparent blur-md" />
+                    </div>
+                  )}
 
-                {/* Selection indicator */}
-                {isSelected && (
-                  <div className="absolute -top-1 -right-1 w-5 h-5 bg-cyan-500 rounded-full flex items-center justify-center">
-                    <Check className="w-3 h-3 text-white" />
-                  </div>
-                )}
+                  {/* Selection indicator */}
+                  {isSelected && (
+                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-cyan-500 rounded-full flex items-center justify-center">
+                      <Check className="w-3 h-3 text-white" />
+                    </div>
+                  )}
 
-                {/* Level number */}
-                <div className={cn(
-                  "text-lg font-bold",
-                  isSelected
-                    ? "text-cyan-700 dark:text-cyan-400"
-                    : "text-gray-700 dark:text-gray-300"
-                )}>
-                  {level.label}
-                </div>
+                  {/* Level number */}
+                  <div
+                    className={cn(
+                      "text-lg font-bold",
+                      isSelected ? "text-cyan-700 dark:text-cyan-400" : "text-gray-700 dark:text-gray-300",
+                    )}
+                  >
+                    {level.label}
+                  </div>
 
-                {/* Level description */}
-                <div className={cn(
-                  "text-xs text-center leading-tight",
-                  isSelected
-                    ? "text-cyan-600 dark:text-cyan-400"
-                    : "text-gray-500 dark:text-gray-400"
-                )}>
-                  {level.value === "1" ? "level" : "levels"}
-                </div>
+                  {/* Level description */}
+                  <div
+                    className={cn(
+                      "text-xs text-center leading-tight",
+                      isSelected ? "text-cyan-600 dark:text-cyan-400" : "text-gray-500 dark:text-gray-400",
+                    )}
+                  >
+                    {level.value === "1" ? "level" : "levels"}
+                  </div>
                 </button>
               </SimpleTooltip>
             </motion.div>
@@ -163,4 +155,4 @@ export const LevelSelector: React.FC<LevelSelectorProps> = ({
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/archon-ui-main/src/features/knowledge/components/TagInput.tsx b/archon-ui-main/src/features/knowledge/components/TagInput.tsx
index 6123cd0240..d4cde034d0 100644
--- a/archon-ui-main/src/features/knowledge/components/TagInput.tsx
+++ b/archon-ui-main/src/features/knowledge/components/TagInput.tsx
@@ -28,18 +28,14 @@ export const TagInput: React.FC<TagInputProps> = ({
 
   const addTag = (tag: string) => {
     const trimmedTag = tag.trim();
-    if (
-      trimmedTag &&
-      !tags.includes(trimmedTag) &&
-      tags.length < maxTags
-    ) {
+    if (trimmedTag && !tags.includes(trimmedTag) && tags.length < maxTags) {
       onTagsChange([...tags, trimmedTag]);
       setInputValue("");
     }
   };
 
   const removeTag = (tagToRemove: string) => {
-    onTagsChange(tags.filter(tag => tag !== tagToRemove));
+    onTagsChange(tags.filter((tag) => tag !== tagToRemove));
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -57,8 +53,9 @@ export const TagInput: React.FC<TagInputProps> = ({
     // Handle comma-separated input for backwards compatibility
     if (value.includes(",")) {
       // Collect pasted candidates, trim and filter them
-      const newCandidates = value.split(",")
-        .map(tag => tag.trim())
+      const newCandidates = value
+        .split(",")
+        .map((tag) => tag.trim())
         .filter(Boolean);
 
       // Merge with current tags using Set to dedupe
@@ -78,9 +75,7 @@ export const TagInput: React.FC<TagInputProps> = ({
 
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-900 dark:text-white/90">
-        Tags
-      </div>
+      <div className="text-sm font-medium text-gray-900 dark:text-white/90">Tags</div>
 
       {/* Tag Display */}
       {tags.length > 0 && (
@@ -96,7 +91,7 @@ export const TagInput: React.FC<TagInputProps> = ({
                 "backdrop-blur-md bg-gradient-to-r from-blue-100/80 to-blue-50/60 dark:from-blue-900/40 dark:to-blue-800/30",
                 "border border-blue-300/50 dark:border-blue-700/50",
                 "text-blue-700 dark:text-blue-300",
-                "transition-all duration-200"
+                "transition-all duration-200",
               )}
             >
               <span className="max-w-24 truncate">{tag}</span>
@@ -135,9 +130,11 @@ export const TagInput: React.FC<TagInputProps> = ({
       <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
         <p>Press Enter or comma to add tags • Backspace to remove last tag</p>
         {maxTags && (
-          <p>{tags.length}/{maxTags} tags used</p>
+          <p>
+            {tags.length}/{maxTags} tags used
+          </p>
         )}
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts b/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
index 758fcc3d7c..79e5aea1e0 100644
--- a/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
+++ b/archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
@@ -11,7 +11,6 @@ import { useActiveOperations } from "../progress/hooks";
 import { progressKeys } from "../progress/hooks/useProgressQueries";
 import type { ActiveOperation, ActiveOperationsResponse } from "../progress/types";
 import { knowledgeService } from "../services";
-import { getProviderErrorMessage } from "../utils/providerErrorHandler";
 import type {
   CrawlRequest,
   CrawlStartResponse,
@@ -20,6 +19,7 @@ import type {
   KnowledgeItemsResponse,
   UploadMetadata,
 } from "../types";
+import { getProviderErrorMessage } from "../utils/providerErrorHandler";
 
 // Query keys factory for better organization and type safety
 export const knowledgeKeys = {
@@ -563,18 +563,18 @@ export function useUpdateKnowledgeItem() {
         const currentMetadata = updatedItem.metadata || {};
 
         // Handle title updates
-        if ('title' in updates && typeof updates.title === 'string') {
+        if ("title" in updates && typeof updates.title === "string") {
           updatedItem.title = updates.title;
         }
 
         // Handle tags updates
-        if ('tags' in updates && Array.isArray(updates.tags)) {
+        if ("tags" in updates && Array.isArray(updates.tags)) {
           const newTags = updates.tags as string[];
           (updatedItem as any).tags = newTags;
         }
 
         // Handle knowledge_type updates
-        if ('knowledge_type' in updates && typeof updates.knowledge_type === 'string') {
+        if ("knowledge_type" in updates && typeof updates.knowledge_type === "string") {
           const newType = updates.knowledge_type as "technical" | "business";
           updatedItem.knowledge_type = newType;
         }
@@ -603,18 +603,18 @@ export function useUpdateKnowledgeItem() {
               const currentMetadata = updatedItem.metadata || {};
 
               // Update title if provided
-              if ('title' in updates && typeof updates.title === 'string') {
+              if ("title" in updates && typeof updates.title === "string") {
                 updatedItem.title = updates.title;
               }
 
               // Update tags if provided
-              if ('tags' in updates && Array.isArray(updates.tags)) {
+              if ("tags" in updates && Array.isArray(updates.tags)) {
                 const newTags = updates.tags as string[];
                 updatedItem.tags = newTags;
               }
 
               // Update knowledge_type if provided
-              if ('knowledge_type' in updates && typeof updates.knowledge_type === 'string') {
+              if ("knowledge_type" in updates && typeof updates.knowledge_type === "string") {
                 const newType = updates.knowledge_type as "technical" | "business";
                 updatedItem.knowledge_type = newType;
               }
diff --git a/archon-ui-main/src/features/knowledge/inspector/components/KnowledgeInspector.tsx b/archon-ui-main/src/features/knowledge/inspector/components/KnowledgeInspector.tsx
index 7fe805afbf..58afc9314d 100644
--- a/archon-ui-main/src/features/knowledge/inspector/components/KnowledgeInspector.tsx
+++ b/archon-ui-main/src/features/knowledge/inspector/components/KnowledgeInspector.tsx
@@ -24,7 +24,7 @@ export const KnowledgeInspector: React.FC<KnowledgeInspectorProps> = ({
   item,
   open,
   onOpenChange,
-  initialTab = "documents"
+  initialTab = "documents",
 }) => {
   const [viewMode, setViewMode] = useState<ViewMode>(initialTab);
   const [searchQuery, setSearchQuery] = useState("");
diff --git a/archon-ui-main/src/features/knowledge/progress/services/progressService.ts b/archon-ui-main/src/features/knowledge/progress/services/progressService.ts
index 71734489c8..fc669f3a67 100644
--- a/archon-ui-main/src/features/knowledge/progress/services/progressService.ts
+++ b/archon-ui-main/src/features/knowledge/progress/services/progressService.ts
@@ -3,7 +3,7 @@
  * Uses ETag support for efficient polling
  */
 
-import { callAPIWithETag } from "../../../projects/shared/apiWithEtag";
+import { callAPIWithETag } from "../../../shared/apiWithEtag";
 import type { ActiveOperationsResponse, ProgressResponse } from "../types";
 
 export const progressService = {
diff --git a/archon-ui-main/src/features/knowledge/services/knowledgeService.ts b/archon-ui-main/src/features/knowledge/services/knowledgeService.ts
index 68cb81af66..feb21d72a8 100644
--- a/archon-ui-main/src/features/knowledge/services/knowledgeService.ts
+++ b/archon-ui-main/src/features/knowledge/services/knowledgeService.ts
@@ -3,7 +3,8 @@
  * Handles all knowledge-related API operations using TanStack Query patterns
  */
 
-import { callAPIWithETag, invalidateETagCache } from "../../projects/shared/apiWithEtag";
+import { callAPIWithETag } from "../../shared/apiWithEtag";
+import { APIServiceError } from "../../shared/errors";
 import type {
   ChunksResponse,
   CodeExamplesResponse,
@@ -58,11 +59,6 @@ export const knowledgeService = {
       method: "DELETE",
     });
 
-    // Invalidate cache after deletion
-    invalidateETagCache("/api/knowledge-items");
-    invalidateETagCache("/api/knowledge-items/summary");
-    invalidateETagCache(`/api/knowledge-items/${sourceId}`);
-
     return response;
   },
 
@@ -75,11 +71,6 @@ export const knowledgeService = {
       body: JSON.stringify(updates),
     });
 
-    // Invalidate both list and specific item cache
-    invalidateETagCache("/api/knowledge-items");
-    invalidateETagCache("/api/knowledge-items/summary");
-    invalidateETagCache(`/api/knowledge-items/${sourceId}`);
-
     return response;
   },
 
@@ -92,10 +83,6 @@ export const knowledgeService = {
       body: JSON.stringify(request),
     });
 
-    // Invalidate list cache as new item will be added
-    invalidateETagCache("/api/knowledge-items");
-    invalidateETagCache("/api/knowledge-items/summary");
-
     return response;
   },
 
@@ -107,11 +94,6 @@ export const knowledgeService = {
       method: "POST",
     });
 
-    // Invalidate caches
-    invalidateETagCache("/api/knowledge-items");
-    invalidateETagCache("/api/knowledge-items/summary");
-    invalidateETagCache(`/api/knowledge-items/${sourceId}`);
-
     return response;
   },
 
@@ -148,14 +130,10 @@ export const knowledgeService = {
     });
 
     if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || `HTTP ${response.status}`);
+      const err = await response.json().catch(() => ({}));
+      throw new APIServiceError(err.error || `HTTP ${response.status}`, "HTTP_ERROR", response.status);
     }
 
-    // Invalidate list cache
-    invalidateETagCache("/api/knowledge-items");
-    invalidateETagCache("/api/knowledge-items/summary");
-
     return response.json();
   },
 
@@ -224,7 +202,7 @@ export const knowledgeService = {
    * Search the knowledge base
    */
   async searchKnowledgeBase(options: SearchOptions): Promise<SearchResultsResponse> {
-    return callAPIWithETag("/api/knowledge-items/search", {
+    return callAPIWithETag<SearchResultsResponse>("/api/knowledge-items/search", {
       method: "POST",
       body: JSON.stringify(options),
     });
diff --git a/archon-ui-main/src/features/knowledge/utils/providerErrorHandler.ts b/archon-ui-main/src/features/knowledge/utils/providerErrorHandler.ts
index 8987243c97..655a08fd8c 100644
--- a/archon-ui-main/src/features/knowledge/utils/providerErrorHandler.ts
+++ b/archon-ui-main/src/features/knowledge/utils/providerErrorHandler.ts
@@ -15,20 +15,20 @@ export interface ProviderError extends Error {
  */
 export function parseProviderError(error: unknown): ProviderError {
   const providerError = error as ProviderError;
-  
+
   // Check if this is a structured provider error from backend
-  if (error && typeof error === 'object') {
+  if (error && typeof error === "object") {
     if (error.statusCode || error.status) {
       providerError.statusCode = error.statusCode || error.status;
     }
-    
+
     // Parse backend error structure
-    if (error.message && error.message.includes('detail')) {
+    if (error.message && error.message.includes("detail")) {
       try {
         const parsed = JSON.parse(error.message);
         if (parsed.detail && parsed.detail.error_type) {
           providerError.isProviderError = true;
-          providerError.provider = parsed.detail.provider || 'LLM';
+          providerError.provider = parsed.detail.provider || "LLM";
           providerError.errorType = parsed.detail.error_type;
           providerError.message = parsed.detail.message || error.message;
         }
@@ -37,7 +37,7 @@ export function parseProviderError(error: unknown): ProviderError {
       }
     }
   }
-  
+
   return providerError;
 }
 
@@ -46,26 +46,26 @@ export function parseProviderError(error: unknown): ProviderError {
  */
 export function getProviderErrorMessage(error: unknown): string {
   const parsed = parseProviderError(error);
-  
+
   if (parsed.isProviderError) {
-    const provider = parsed.provider || 'LLM';
-    
+    const provider = parsed.provider || "LLM";
+
     switch (parsed.errorType) {
-      case 'authentication_failed':
+      case "authentication_failed":
         return `Please verify your ${provider} API key in Settings.`;
-      case 'quota_exhausted':
+      case "quota_exhausted":
         return `${provider} quota exhausted. Please check your billing settings.`;
-      case 'rate_limit':
+      case "rate_limit":
         return `${provider} rate limit exceeded. Please wait and try again.`;
       default:
         return `${provider} API error. Please check your configuration.`;
     }
   }
-  
+
   // Handle status codes for non-structured errors
   if (parsed.statusCode === 401) {
     return "Please verify your API key in Settings.";
   }
-  
+
   return parsed.message || "An error occurred.";
-}
\ No newline at end of file
+}
diff --git a/archon-ui-main/src/features/mcp/services/mcpApi.ts b/archon-ui-main/src/features/mcp/services/mcpApi.ts
index 43f375d143..008c800c03 100644
--- a/archon-ui-main/src/features/mcp/services/mcpApi.ts
+++ b/archon-ui-main/src/features/mcp/services/mcpApi.ts
@@ -1,4 +1,4 @@
-import { callAPIWithETag } from "../../projects/shared/apiWithEtag";
+import { callAPIWithETag } from "../../shared/apiWithEtag";
 import type { McpClient, McpServerConfig, McpServerStatus, McpSessionInfo } from "../types";
 
 export const mcpApi = {
diff --git a/archon-ui-main/src/features/projects/components/ProjectCard.tsx b/archon-ui-main/src/features/projects/components/ProjectCard.tsx
index 0ea45c8ab8..b1a82fad75 100644
--- a/archon-ui-main/src/features/projects/components/ProjectCard.tsx
+++ b/archon-ui-main/src/features/projects/components/ProjectCard.tsx
@@ -28,7 +28,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
   onDelete,
 }) => {
   return (
-    <motion.li
+    <motion.div
       tabIndex={0}
       aria-label={`Select project ${project.title}`}
       aria-current={isSelected ? "true" : undefined}
@@ -258,10 +258,16 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
           projectId={project.id}
           projectTitle={project.title}
           isPinned={project.pinned}
-          onPin={(e) => onPin(e, project.id)}
-          onDelete={(e) => onDelete(e, project.id, project.title)}
+          onPin={(e) => {
+            e.stopPropagation();
+            onPin(e, project.id);
+          }}
+          onDelete={(e) => {
+            e.stopPropagation();
+            onDelete(e, project.id, project.title);
+          }}
         />
       </div>
-    </motion.li>
+    </motion.div>
   );
 };
diff --git a/archon-ui-main/src/features/projects/services/projectService.ts b/archon-ui-main/src/features/projects/services/projectService.ts
index 1eb7c81beb..f74675ca72 100644
--- a/archon-ui-main/src/features/projects/services/projectService.ts
+++ b/archon-ui-main/src/features/projects/services/projectService.ts
@@ -3,9 +3,10 @@
  * Focused service for project CRUD operations only
  */
 
+import { callAPIWithETag } from "../../shared/apiWithEtag";
+import { formatZodErrors, ValidationError } from "../../shared/errors";
 import { validateCreateProject, validateUpdateProject } from "../schemas";
-import { formatRelativeTime, formatZodErrors, ValidationError } from "../shared/api";
-import { callAPIWithETag, invalidateETagCache } from "../shared/apiWithEtag";
+import { formatRelativeTime } from "../shared/api";
 import type { CreateProjectRequest, Project, ProjectFeatures, UpdateProjectRequest } from "../types";
 
 export const projectService = {
@@ -93,9 +94,6 @@ export const projectService = {
         body: JSON.stringify(validation.data),
       });
 
-      // Invalidate project list cache after creation
-      invalidateETagCache("/api/projects");
-
       // Project creation response received
       return response;
     } catch (error) {
@@ -129,10 +127,6 @@ export const projectService = {
         body: JSON.stringify(validation.data),
       });
 
-      // Invalidate caches after update
-      invalidateETagCache("/api/projects");
-      invalidateETagCache(`/api/projects/${projectId}`);
-
       // API update response received
 
       // Ensure pinned property is properly handled as boolean
@@ -160,10 +154,6 @@ export const projectService = {
       await callAPIWithETag(`/api/projects/${projectId}`, {
         method: "DELETE",
       });
-
-      // Invalidate caches after deletion
-      invalidateETagCache("/api/projects");
-      invalidateETagCache(`/api/projects/${projectId}`);
     } catch (error) {
       console.error(`Failed to delete project ${projectId}:`, error);
       throw error;
diff --git a/archon-ui-main/src/features/projects/shared/api.ts b/archon-ui-main/src/features/projects/shared/api.ts
index aa36075284..8a928fe603 100644
--- a/archon-ui-main/src/features/projects/shared/api.ts
+++ b/archon-ui-main/src/features/projects/shared/api.ts
@@ -1,121 +1,7 @@
 /**
- * Shared API utilities for project features
- * Common error handling and API calling functions
+ * Shared utilities for project features
  */
 
-// API configuration - use relative URL to go through Vite proxy
-const API_BASE_URL = "/api";
-
-// Error classes
-export class ProjectServiceError extends Error {
-  constructor(
-    message: string,
-    public code?: string,
-    public statusCode?: number,
-  ) {
-    super(message);
-    this.name = "ProjectServiceError";
-  }
-}
-
-export class ValidationError extends ProjectServiceError {
-  constructor(message: string) {
-    super(message, "VALIDATION_ERROR", 400);
-    this.name = "ValidationError";
-  }
-}
-
-export class MCPToolError extends ProjectServiceError {
-  constructor(
-    message: string,
-    public toolName: string,
-  ) {
-    super(message, "MCP_TOOL_ERROR", 500);
-    this.name = "MCPToolError";
-  }
-}
-
-// Helper function to format validation errors
-interface ValidationErrorDetail {
-  path: string[];
-  message: string;
-}
-
-interface ValidationErrorObject {
-  errors: ValidationErrorDetail[];
-}
-
-export function formatValidationErrors(errors: ValidationErrorObject): string {
-  return errors.errors.map((error: ValidationErrorDetail) => `${error.path.join(".")}: ${error.message}`).join(", ");
-}
-
-// Helper to convert Zod errors to ValidationErrorObject format
-export function formatZodErrors(zodError: { issues: Array<{ path: (string | number)[]; message: string }> }): string {
-  const validationErrors: ValidationErrorObject = {
-    errors: zodError.issues.map((issue) => ({
-      path: issue.path.map(String),
-      message: issue.message,
-    })),
-  };
-  return formatValidationErrors(validationErrors);
-}
-
-// Helper function to call FastAPI endpoints directly
-export async function callAPI<T = unknown>(endpoint: string, options: RequestInit = {}): Promise<T> {
-  try {
-    // Remove /api prefix if it exists since API_BASE_URL already includes it
-    const cleanEndpoint = endpoint.startsWith("/api") ? endpoint.substring(4) : endpoint;
-    const response = await fetch(`${API_BASE_URL}${cleanEndpoint}`, {
-      headers: {
-        "Content-Type": "application/json",
-        ...options.headers,
-      },
-      ...options,
-      signal: options.signal ?? AbortSignal.timeout(10000), // 10 second timeout
-    });
-
-    if (!response.ok) {
-      // Try to get error details from response body
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorBody = await response.text();
-        if (errorBody) {
-          const errorJson = JSON.parse(errorBody);
-          errorMessage = errorJson.detail || errorJson.error || errorMessage;
-        }
-      } catch (_e) {
-        // Ignore parse errors, use default message
-      }
-
-      throw new ProjectServiceError(errorMessage, "HTTP_ERROR", response.status);
-    }
-
-    // Handle 204 No Content responses (common for DELETE operations)
-    if (response.status === 204) {
-      return undefined as T;
-    }
-
-    const result = await response.json();
-
-    // Check if response has error field (from FastAPI error format)
-    if (result.error) {
-      throw new ProjectServiceError(result.error, "API_ERROR", response.status);
-    }
-
-    return result as T;
-  } catch (error) {
-    if (error instanceof ProjectServiceError) {
-      throw error;
-    }
-
-    throw new ProjectServiceError(
-      `Failed to call API ${endpoint}: ${error instanceof Error ? error.message : "Unknown error"}`,
-      "NETWORK_ERROR",
-      500,
-    );
-  }
-}
-
 // Utility function for relative time formatting
 export function formatRelativeTime(dateString: string): string {
   const date = new Date(dateString);
diff --git a/archon-ui-main/src/features/projects/shared/apiWithEtag.ts b/archon-ui-main/src/features/projects/shared/apiWithEtag.ts
deleted file mode 100644
index dea78dcdf4..0000000000
--- a/archon-ui-main/src/features/projects/shared/apiWithEtag.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * ETag-aware API client for TanStack Query integration
- * Reduces bandwidth by 70-90% through HTTP 304 responses
- */
-
-import { API_BASE_URL } from "../../../config/api";
-import { ProjectServiceError } from "./api";
-
-// ETag and data cache stores - ensure they're initialized
-const etagCache = typeof Map !== "undefined" ? new Map<string, string>() : null;
-const dataCache = typeof Map !== "undefined" ? new Map<string, unknown>() : null;
-
-// Debug flag for console logging (only in dev or when VITE_SHOW_DEVTOOLS is enabled)
-const ETAG_DEBUG =
-  typeof import.meta !== "undefined" &&
-  (import.meta.env?.DEV === true || import.meta.env?.VITE_SHOW_DEVTOOLS === "true");
-
-/**
- * Build full URL with test environment handling
- * Ensures consistent URL construction for cache keys
- */
-function buildFullUrl(cleanEndpoint: string): string {
-  let fullUrl = `${API_BASE_URL}${cleanEndpoint}`;
-
-  // Only convert to absolute URL in test environment
-  const isTestEnv = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
-
-  if (isTestEnv && !fullUrl.startsWith("http")) {
-    const testHost = "localhost";
-    const testPort = process.env?.ARCHON_SERVER_PORT || "8181";
-    fullUrl = `http://${testHost}:${testPort}${fullUrl}`;
-    if (ETAG_DEBUG) {
-      console.log(`[Test] Converted URL: ${fullUrl}`);
-    }
-  }
-
-  return fullUrl;
-}
-
-// Generate cache key from endpoint and options
-function getCacheKey(endpoint: string, options: RequestInit = {}): string {
-  // Include method in cache key (GET vs POST, etc), normalized to uppercase
-  const method = (options.method || "GET").toUpperCase();
-  return `${method}:${endpoint}`;
-}
-
-/**
- * ETag-aware API call function for JSON APIs
- * Handles 304 Not Modified responses by returning cached data
- *
- * NOTE: This wrapper is designed for JSON-only API calls.
- * For file uploads or FormData requests, use fetch() directly.
- */
-export async function callAPIWithETag<T = unknown>(endpoint: string, options: RequestInit = {}): Promise<T> {
-  try {
-    // Clean endpoint
-    const cleanEndpoint = endpoint.startsWith("/api") ? endpoint.substring(4) : endpoint;
-
-    // Construct the full URL
-    const fullUrl = buildFullUrl(cleanEndpoint);
-
-    const cacheKey = getCacheKey(fullUrl, options);
-    const method = (options.method || "GET").toUpperCase();
-
-    // Get stored ETag for this endpoint
-    const storedEtag = etagCache?.get(cacheKey);
-
-    // Build headers with If-None-Match if we have an ETag
-    const headers: Record<string, string> = {
-      "Content-Type": "application/json",
-      ...((options.headers as Record<string, string>) || {}),
-    };
-
-    // Only add If-None-Match for GET requests
-    if (storedEtag && method === "GET") {
-      headers["If-None-Match"] = storedEtag;
-    }
-
-    // Make the request with timeout
-    const response = await fetch(fullUrl, {
-      ...options,
-      headers,
-      signal: options.signal ?? AbortSignal.timeout(10000), // 10 second timeout
-    });
-
-    // Handle 304 Not Modified - return cached data
-    if (response.status === 304) {
-      const cachedData = dataCache?.get(cacheKey);
-      if (cachedData) {
-        // Console log for debugging
-        if (ETAG_DEBUG) {
-          console.log(`%c[ETag] Cache hit (304) for ${cleanEndpoint}`, "color: #10b981; font-weight: bold");
-        }
-        return cachedData as T;
-      }
-      // Cache miss on 304 - this shouldn't happen but handle gracefully
-      if (ETAG_DEBUG) {
-        console.error(`[ETag] 304 received but no cached data for ${cleanEndpoint}`);
-      }
-      // Clear the stale ETag to prevent this from happening again
-      etagCache?.delete(cacheKey);
-      throw new ProjectServiceError(
-        `Cache miss on 304 response for ${cleanEndpoint}. Please retry the request.`,
-        "CACHE_MISS",
-        304,
-      );
-    }
-
-    // Handle errors
-    if (!response.ok && response.status !== 304) {
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorBody = await response.text();
-        if (errorBody) {
-          const errorJson = JSON.parse(errorBody);
-          // Handle nested error structure from backend {"detail": {"error": "message"}}
-          if (typeof errorJson.detail === "object" && errorJson.detail !== null && "error" in errorJson.detail) {
-            errorMessage = errorJson.detail.error;
-          } else if (errorJson.detail) {
-            errorMessage = errorJson.detail;
-          } else if (errorJson.error) {
-            errorMessage = errorJson.error;
-          }
-        }
-      } catch (_e) {
-        // Ignore parse errors
-      }
-      throw new ProjectServiceError(errorMessage, "HTTP_ERROR", response.status);
-    }
-
-    // Handle 204 No Content (DELETE operations)
-    if (response.status === 204) {
-      // Clear caches for this endpoint on successful deletion
-      etagCache?.delete(cacheKey);
-      dataCache?.delete(cacheKey);
-
-      // Also clear any cached GET for this resource
-      // since the resource no longer exists
-      const getKey = `GET:${fullUrl}`;
-      etagCache?.delete(getKey);
-      dataCache?.delete(getKey);
-
-      return undefined as T;
-    }
-
-    // Parse response data
-    const result = await response.json();
-
-    // Check for API errors
-    if (result.error) {
-      throw new ProjectServiceError(result.error, "API_ERROR", response.status);
-    }
-
-    // Store ETag if present (only for GET requests)
-    const newEtag = response.headers.get("ETag");
-    if (newEtag && method === "GET") {
-      etagCache?.set(cacheKey, newEtag);
-      // Store the data along with ETag
-      dataCache?.set(cacheKey, result);
-      if (ETAG_DEBUG) {
-        console.log(
-          `%c[ETag] Cached new data for ${cleanEndpoint}`,
-          "color: #3b82f6; font-weight: bold",
-          `ETag: ${newEtag.substring(0, 12)}...`,
-        );
-      }
-    }
-
-    return result as T;
-  } catch (error) {
-    if (error instanceof ProjectServiceError) {
-      throw error;
-    }
-
-    throw new ProjectServiceError(
-      `Failed to call API ${endpoint}: ${error instanceof Error ? error.message : "Unknown error"}`,
-      "NETWORK_ERROR",
-      500,
-    );
-  }
-}
-
-/**
- * Clear ETag caches - useful for logout or data refresh
- */
-export function clearETagCache(): void {
-  etagCache?.clear();
-  dataCache?.clear();
-  if (ETAG_DEBUG) {
-    console.debug("[ETag] Cache cleared");
-  }
-}
-
-/**
- * Invalidate specific endpoint cache
- * Useful after mutations that affect specific resources
- */
-export function invalidateETagCache(endpoint: string, method = "GET"): void {
-  const cleanEndpoint = endpoint.startsWith("/api") ? endpoint.substring(4) : endpoint;
-  const fullUrl = buildFullUrl(cleanEndpoint);
-  const normalizedMethod = method.toUpperCase();
-  const cacheKey = `${normalizedMethod}:${fullUrl}`;
-
-  etagCache?.delete(cacheKey);
-  dataCache?.delete(cacheKey);
-  if (ETAG_DEBUG) {
-    console.debug(`[ETag] Cache invalidated for ${cleanEndpoint}`);
-  }
-}
-
-/**
- * Get cache statistics for debugging
- */
-export function getETagCacheStats(): {
-  etagCount: number;
-  dataCacheSize: number;
-  keys: string[];
-} {
-  return {
-    etagCount: etagCache?.size || 0,
-    dataCacheSize: dataCache?.size || 0,
-    keys: etagCache ? Array.from(etagCache.keys()) : [],
-  };
-}
diff --git a/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx b/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
index b116636d79..4c6f221787 100644
--- a/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
+++ b/archon-ui-main/src/features/projects/tasks/components/TaskCard.tsx
@@ -5,9 +5,9 @@ import { useDrag, useDrop } from "react-dnd";
 import { useTaskActions } from "../hooks";
 import type { Assignee, Task, TaskPriority } from "../types";
 import { getOrderColor, getOrderGlow, ItemTypes } from "../utils/task-styles";
+import { TaskPriorityComponent } from ".";
 import { TaskAssignee } from "./TaskAssignee";
 import { TaskCardActions } from "./TaskCardActions";
-import { TaskPriorityComponent } from ".";
 
 export interface TaskCardProps {
   task: Task;
diff --git a/archon-ui-main/src/features/projects/tasks/services/taskService.ts b/archon-ui-main/src/features/projects/tasks/services/taskService.ts
index 5c655179c1..223bdb73d7 100644
--- a/archon-ui-main/src/features/projects/tasks/services/taskService.ts
+++ b/archon-ui-main/src/features/projects/tasks/services/taskService.ts
@@ -3,8 +3,8 @@
  * Focused service for task CRUD operations only
  */
 
-import { formatZodErrors, ValidationError } from "../../shared/api";
-import { callAPIWithETag, invalidateETagCache } from "../../shared/apiWithEtag";
+import { callAPIWithETag } from "../../../shared/apiWithEtag";
+import { formatZodErrors, ValidationError } from "../../../shared/errors";
 
 import { validateCreateTask, validateUpdateTask, validateUpdateTaskStatus } from "../schemas";
 import type { CreateTaskRequest, DatabaseTaskStatus, Task, TaskCounts, UpdateTaskRequest } from "../types";
@@ -52,16 +52,13 @@ export const taskService = {
       // The validation.data already has defaults from schema
       const requestData = validation.data;
 
-      const task = await callAPIWithETag<Task>("/api/tasks", {
+      // Backend returns { message: string, task: Task } for mutations
+      const response = await callAPIWithETag<{ message: string; task: Task }>("/api/tasks", {
         method: "POST",
         body: JSON.stringify(requestData),
       });
 
-      // Invalidate task list cache for the project
-      invalidateETagCache(`/api/projects/${taskData.project_id}/tasks`);
-      invalidateETagCache("/api/tasks/counts");
-
-      return task;
+      return response.task;
     } catch (error) {
       console.error("Failed to create task:", error);
       throw error;
@@ -79,19 +76,13 @@ export const taskService = {
     }
 
     try {
-      const task = await callAPIWithETag<Task>(`/api/tasks/${taskId}`, {
+      // Backend returns { message: string, task: Task } for mutations
+      const response = await callAPIWithETag<{ message: string; task: Task }>(`/api/tasks/${taskId}`, {
         method: "PUT",
         body: JSON.stringify(validation.data),
       });
 
-      // Invalidate related caches
-      // Invalidate the specific project's tasks using the returned task data
-      if (task.project_id) {
-        invalidateETagCache(`/api/projects/${task.project_id}/tasks`);
-      }
-      invalidateETagCache("/api/tasks/counts");
-
-      return task;
+      return response.task;
     } catch (error) {
       console.error(`Failed to update task ${taskId}:`, error);
       throw error;
@@ -113,15 +104,13 @@ export const taskService = {
 
     try {
       // Use the standard update task endpoint with JSON body
-      const task = await callAPIWithETag<Task>(`/api/tasks/${taskId}`, {
+      // Backend returns { message: string, task: Task } for mutations
+      const response = await callAPIWithETag<{ message: string; task: Task }>(`/api/tasks/${taskId}`, {
         method: "PUT",
         body: JSON.stringify({ status }),
       });
 
-      // Invalidate task counts cache when status changes
-      invalidateETagCache("/api/tasks/counts");
-
-      return task;
+      return response.task;
     } catch (error) {
       console.error(`Failed to update task status ${taskId}:`, error);
       throw error;
@@ -136,9 +125,6 @@ export const taskService = {
       await callAPIWithETag<void>(`/api/tasks/${taskId}`, {
         method: "DELETE",
       });
-
-      // Invalidate task counts cache after deletion
-      invalidateETagCache("/api/tasks/counts");
     } catch (error) {
       console.error(`Failed to delete task ${taskId}:`, error);
       throw error;
diff --git a/archon-ui-main/src/features/projects/tasks/services/tests/taskService.test.ts b/archon-ui-main/src/features/projects/tasks/services/tests/taskService.test.ts
new file mode 100644
index 0000000000..13a3f3df8d
--- /dev/null
+++ b/archon-ui-main/src/features/projects/tasks/services/tests/taskService.test.ts
@@ -0,0 +1,391 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { callAPIWithETag } from "../../../../shared/apiWithEtag";
+import type { CreateTaskRequest, DatabaseTaskStatus, Task, UpdateTaskRequest } from "../../types";
+import { taskService } from "../taskService";
+
+// Mock the API call
+vi.mock("../../../../shared/apiWithEtag", () => ({
+  callAPIWithETag: vi.fn(),
+}));
+
+// Mock the validation functions
+vi.mock("../../schemas", () => ({
+  validateCreateTask: vi.fn((data) => ({ success: true, data })),
+  validateUpdateTask: vi.fn((data) => ({ success: true, data })),
+  validateUpdateTaskStatus: vi.fn((data) => ({ success: true, data })),
+}));
+
+describe("taskService", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("createTask", () => {
+    const mockTaskData: CreateTaskRequest = {
+      project_id: "test-project-id",
+      title: "Test Task",
+      description: "Test Description",
+      status: "todo",
+      assignee: "User",
+      task_order: 50,
+      priority: "medium",
+      feature: "test-feature",
+    };
+
+    const mockTask: Task = {
+      id: "task-123",
+      ...mockTaskData,
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-01-01T00:00:00Z",
+    };
+
+    it("should create a task and unwrap the response correctly", async () => {
+      // Backend returns wrapped response
+      const mockResponse = {
+        message: "Task created successfully",
+        task: mockTask,
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.createTask(mockTaskData);
+
+      // Verify the API was called correctly
+      expect(callAPIWithETag).toHaveBeenCalledWith("/api/tasks", {
+        method: "POST",
+        body: JSON.stringify(mockTaskData),
+      });
+
+      // Verify the task is properly unwrapped
+      expect(result).toEqual(mockTask);
+      expect(result).not.toHaveProperty("message");
+    });
+
+    it("should handle API errors properly", async () => {
+      const errorMessage = "Failed to create task";
+      (callAPIWithETag as any).mockRejectedValueOnce(new Error(errorMessage));
+
+      await expect(taskService.createTask(mockTaskData)).rejects.toThrow(errorMessage);
+    });
+  });
+
+  describe("updateTask", () => {
+    const taskId = "task-123";
+    const mockUpdates: UpdateTaskRequest = {
+      title: "Updated Task",
+      description: "Updated Description",
+      status: "doing",
+      priority: "high",
+    };
+
+    const mockUpdatedTask: Task = {
+      id: taskId,
+      project_id: "test-project-id",
+      title: mockUpdates.title!,
+      description: mockUpdates.description!,
+      status: mockUpdates.status as DatabaseTaskStatus,
+      assignee: "User",
+      task_order: 50,
+      priority: mockUpdates.priority!,
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-01-02T00:00:00Z",
+    };
+
+    it("should update a task and unwrap the response correctly", async () => {
+      // Backend returns wrapped response
+      const mockResponse = {
+        message: "Task updated successfully",
+        task: mockUpdatedTask,
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.updateTask(taskId, mockUpdates);
+
+      // Verify the API was called correctly
+      expect(callAPIWithETag).toHaveBeenCalledWith(`/api/tasks/${taskId}`, {
+        method: "PUT",
+        body: JSON.stringify(mockUpdates),
+      });
+
+      // Verify the task is properly unwrapped
+      expect(result).toEqual(mockUpdatedTask);
+      expect(result).not.toHaveProperty("message");
+    });
+
+    it("should handle partial updates correctly", async () => {
+      const partialUpdate: UpdateTaskRequest = {
+        description: "Only updating description",
+      };
+
+      const mockResponse = {
+        message: "Task updated successfully",
+        task: {
+          ...mockUpdatedTask,
+          description: partialUpdate.description!,
+        },
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.updateTask(taskId, partialUpdate);
+
+      expect(callAPIWithETag).toHaveBeenCalledWith(`/api/tasks/${taskId}`, {
+        method: "PUT",
+        body: JSON.stringify(partialUpdate),
+      });
+
+      expect(result.description).toBe(partialUpdate.description);
+    });
+
+    it("should handle API errors properly", async () => {
+      const errorMessage = "Failed to update task";
+      (callAPIWithETag as any).mockRejectedValueOnce(new Error(errorMessage));
+
+      await expect(taskService.updateTask(taskId, mockUpdates)).rejects.toThrow(errorMessage);
+    });
+  });
+
+  describe("updateTaskStatus", () => {
+    const taskId = "task-123";
+    const newStatus: DatabaseTaskStatus = "review";
+
+    const mockUpdatedTask: Task = {
+      id: taskId,
+      project_id: "test-project-id",
+      title: "Test Task",
+      description: "Test Description",
+      status: newStatus,
+      assignee: "User",
+      task_order: 50,
+      priority: "medium",
+      created_at: "2024-01-01T00:00:00Z",
+      updated_at: "2024-01-02T00:00:00Z",
+    };
+
+    it("should update task status and unwrap the response correctly", async () => {
+      // Backend returns wrapped response
+      const mockResponse = {
+        message: "Task updated successfully",
+        task: mockUpdatedTask,
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.updateTaskStatus(taskId, newStatus);
+
+      // Verify the API was called correctly
+      expect(callAPIWithETag).toHaveBeenCalledWith(`/api/tasks/${taskId}`, {
+        method: "PUT",
+        body: JSON.stringify({ status: newStatus }),
+      });
+
+      // Verify the task is properly unwrapped
+      expect(result).toEqual(mockUpdatedTask);
+      expect(result).not.toHaveProperty("message");
+      expect(result.status).toBe(newStatus);
+    });
+
+    it("should handle API errors properly", async () => {
+      const errorMessage = "Failed to update task status";
+      (callAPIWithETag as any).mockRejectedValueOnce(new Error(errorMessage));
+
+      await expect(taskService.updateTaskStatus(taskId, newStatus)).rejects.toThrow(errorMessage);
+    });
+  });
+
+  describe("deleteTask", () => {
+    const taskId = "task-123";
+
+    it("should delete a task successfully", async () => {
+      // DELETE typically returns void/204 No Content
+      (callAPIWithETag as any).mockResolvedValueOnce(undefined);
+
+      await taskService.deleteTask(taskId);
+
+      expect(callAPIWithETag).toHaveBeenCalledWith(`/api/tasks/${taskId}`, {
+        method: "DELETE",
+      });
+    });
+
+    it("should handle API errors properly", async () => {
+      const errorMessage = "Failed to delete task";
+      (callAPIWithETag as any).mockRejectedValueOnce(new Error(errorMessage));
+
+      await expect(taskService.deleteTask(taskId)).rejects.toThrow(errorMessage);
+    });
+  });
+
+  describe("getTasksByProject", () => {
+    const projectId = "project-123";
+    const mockTasks: Task[] = [
+      {
+        id: "task-1",
+        project_id: projectId,
+        title: "Task 1",
+        description: "Description 1",
+        status: "todo",
+        assignee: "User",
+        task_order: 50,
+        priority: "low",
+        created_at: "2024-01-01T00:00:00Z",
+        updated_at: "2024-01-01T00:00:00Z",
+      },
+      {
+        id: "task-2",
+        project_id: projectId,
+        title: "Task 2",
+        description: "Description 2",
+        status: "doing",
+        assignee: "Archon",
+        task_order: 75,
+        priority: "high",
+        created_at: "2024-01-02T00:00:00Z",
+        updated_at: "2024-01-02T00:00:00Z",
+      },
+    ];
+
+    it("should fetch tasks for a project", async () => {
+      // GET endpoints typically return direct arrays
+      (callAPIWithETag as any).mockResolvedValueOnce(mockTasks);
+
+      const result = await taskService.getTasksByProject(projectId);
+
+      expect(callAPIWithETag).toHaveBeenCalledWith(`/api/projects/${projectId}/tasks`);
+      expect(result).toEqual(mockTasks);
+      expect(result).toHaveLength(2);
+    });
+
+    it("should handle empty task list", async () => {
+      (callAPIWithETag as any).mockResolvedValueOnce([]);
+
+      const result = await taskService.getTasksByProject(projectId);
+
+      expect(result).toEqual([]);
+      expect(result).toHaveLength(0);
+    });
+
+    it("should handle API errors properly", async () => {
+      const errorMessage = "Failed to fetch tasks";
+      (callAPIWithETag as any).mockRejectedValueOnce(new Error(errorMessage));
+
+      await expect(taskService.getTasksByProject(projectId)).rejects.toThrow(errorMessage);
+    });
+  });
+
+  describe("Response unwrapping regression tests", () => {
+    it("should preserve all task fields when unwrapping create response", async () => {
+      const fullTaskData: CreateTaskRequest = {
+        project_id: "project-123",
+        title: "Full Task",
+        description: "This is a detailed description that should persist",
+        status: "todo",
+        assignee: "AI IDE Agent",
+        task_order: 100,
+        priority: "critical",
+        feature: "authentication",
+      };
+
+      const fullTask: Task = {
+        id: "task-full",
+        ...fullTaskData,
+        created_at: "2024-01-01T00:00:00Z",
+        updated_at: "2024-01-01T00:00:00Z",
+        // Additional fields that might be added by backend
+        sources: [],
+        code_examples: [],
+      };
+
+      const mockResponse = {
+        message: "Task created successfully",
+        task: fullTask,
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.createTask(fullTaskData);
+
+      // Verify all fields are preserved
+      expect(result.id).toBe("task-full");
+      expect(result.title).toBe(fullTaskData.title);
+      expect(result.description).toBe(fullTaskData.description);
+      expect(result.status).toBe(fullTaskData.status);
+      expect(result.assignee).toBe(fullTaskData.assignee);
+      expect(result.task_order).toBe(fullTaskData.task_order);
+      expect(result.priority).toBe(fullTaskData.priority);
+      expect(result.feature).toBe(fullTaskData.feature);
+      expect(result.sources).toEqual([]);
+      expect(result.code_examples).toEqual([]);
+    });
+
+    it("should preserve description field specifically when updating", async () => {
+      const taskId = "task-desc";
+      const updateWithDescription: UpdateTaskRequest = {
+        description: "This is a new description that must persist after refresh",
+      };
+
+      const updatedTask: Task = {
+        id: taskId,
+        project_id: "project-123",
+        title: "Existing Task",
+        description: updateWithDescription.description!,
+        status: "todo",
+        assignee: "User",
+        task_order: 50,
+        priority: "medium",
+        created_at: "2024-01-01T00:00:00Z",
+        updated_at: "2024-01-02T00:00:00Z",
+      };
+
+      const mockResponse = {
+        message: "Task updated successfully",
+        task: updatedTask,
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.updateTask(taskId, updateWithDescription);
+
+      // Specifically verify description is preserved
+      expect(result.description).toBe("This is a new description that must persist after refresh");
+      expect(result.description).toBe(updateWithDescription.description);
+    });
+
+    it("should handle wrapped response with nested task object correctly", async () => {
+      const taskId = "task-nested";
+      const updates: UpdateTaskRequest = {
+        title: "Updated Title",
+      };
+
+      // Simulate deeply nested response structure
+      const mockResponse = {
+        message: "Task updated successfully",
+        task: {
+          id: taskId,
+          project_id: "project-123",
+          title: updates.title!,
+          description: "Existing description",
+          status: "doing" as DatabaseTaskStatus,
+          assignee: "User",
+          task_order: 50,
+          priority: "medium",
+          created_at: "2024-01-01T00:00:00Z",
+          updated_at: "2024-01-02T00:00:00Z",
+        },
+        metadata: {
+          updated_by: "api",
+          timestamp: "2024-01-02T00:00:00Z",
+        },
+      };
+
+      (callAPIWithETag as any).mockResolvedValueOnce(mockResponse);
+
+      const result = await taskService.updateTask(taskId, updates);
+
+      // Verify we extract only the task, not the wrapper
+      expect(result).toEqual(mockResponse.task);
+      expect(result).not.toHaveProperty("message");
+      expect(result).not.toHaveProperty("metadata");
+    });
+  });
+});
diff --git a/archon-ui-main/src/features/shared/apiWithEtag.test.ts b/archon-ui-main/src/features/shared/apiWithEtag.test.ts
new file mode 100644
index 0000000000..5f67b2f47c
--- /dev/null
+++ b/archon-ui-main/src/features/shared/apiWithEtag.test.ts
@@ -0,0 +1,412 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { callAPIWithETag } from "./apiWithEtag";
+import { APIServiceError } from "./errors";
+
+// Preserve original globals to restore after tests
+const originalAbortSignal = global.AbortSignal as any;
+const originalFetch = global.fetch;
+
+describe("apiWithEtag", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    // Reset fetch to undefined to ensure clean state
+    if (global.fetch) {
+      delete (global as any).fetch;
+    }
+
+    // Mock AbortSignal.timeout for test environment
+    // Note: Production now uses 20s timeout for database performance issues
+    global.AbortSignal = {
+      timeout: vi.fn((_ms: number) => ({
+        aborted: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        reason: undefined,
+      })),
+    } as any;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    // Restore original globals to prevent test pollution
+    global.AbortSignal = originalAbortSignal;
+    if (originalFetch) {
+      global.fetch = originalFetch;
+    } else if (global.fetch) {
+      delete (global as any).fetch;
+    }
+  });
+
+  describe("callAPIWithETag", () => {
+    it("should return data for successful request", async () => {
+      const mockData = { id: "123", name: "Test" };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(mockData),
+        headers: new Headers({ ETag: 'W/"123456"' }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/test-endpoint");
+
+      expect(result).toEqual(mockData);
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining("/test-endpoint"),
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            "Content-Type": "application/json",
+          }),
+        }),
+      );
+    });
+
+    it("should throw APIServiceError for HTTP errors", async () => {
+      const errorResponse = {
+        ok: false,
+        status: 400,
+        text: () => Promise.resolve(JSON.stringify({ detail: "Bad request" })),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(errorResponse);
+
+      const errorPromise = callAPIWithETag("/test-endpoint");
+      await expect(errorPromise).rejects.toThrow(APIServiceError);
+      await expect(errorPromise).rejects.toThrow("Bad request");
+    });
+
+    it("should return undefined for 204 No Content", async () => {
+      const mockResponse = {
+        ok: true,
+        status: 204,
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/test-endpoint", { method: "DELETE" });
+
+      expect(result).toBeUndefined();
+    });
+
+    it("should handle network errors properly", async () => {
+      const networkError = new Error("Network error");
+      global.fetch = vi.fn().mockRejectedValue(networkError);
+
+      await expect(callAPIWithETag("/test-endpoint")).rejects.toThrowError(
+        new APIServiceError("Failed to call API /test-endpoint: Network error", "NETWORK_ERROR", 500),
+      );
+    });
+
+    it("should handle API errors in response body", async () => {
+      const mockData = { error: "Database connection failed" };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(mockData),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      await expect(callAPIWithETag("/test-endpoint")).rejects.toThrowError(
+        new APIServiceError("Database connection failed", "API_ERROR", 200),
+      );
+    });
+
+    it("should handle nested error structure from backend", async () => {
+      const errorResponse = {
+        ok: false,
+        status: 422,
+        text: () =>
+          Promise.resolve(
+            JSON.stringify({
+              detail: { error: "Validation failed" },
+            }),
+          ),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(errorResponse);
+
+      await expect(callAPIWithETag("/test-endpoint")).rejects.toThrowError(
+        new APIServiceError("Validation failed", "HTTP_ERROR", 422),
+      );
+    });
+
+    it("should handle request timeout", async () => {
+      const timeoutError = new Error("Request timeout");
+      timeoutError.name = "AbortError";
+      global.fetch = vi.fn().mockRejectedValue(timeoutError);
+
+      await expect(callAPIWithETag("/test-endpoint")).rejects.toThrowError(
+        new APIServiceError("Failed to call API /test-endpoint: Request timeout", "NETWORK_ERROR", 500),
+      );
+    });
+
+    it("should pass custom headers correctly", async () => {
+      const mockData = { success: true };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(mockData),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      await callAPIWithETag("/test-endpoint", {
+        headers: {
+          Authorization: "Bearer token123",
+          "Custom-Header": "custom-value",
+        },
+      });
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            "Content-Type": "application/json",
+            Authorization: "Bearer token123",
+            "Custom-Header": "custom-value",
+          }),
+        }),
+      );
+    });
+
+    it("should rely on browser cache for 304 handling", async () => {
+      // This test verifies our new approach: we never see 304s
+      // because the browser handles them and returns cached data
+      const mockData = { id: "cached", name: "From Browser Cache" };
+      const mockResponse = {
+        ok: true,
+        status: 200, // Browser converts 304 to 200 with cached data
+        json: () => Promise.resolve(mockData),
+        headers: new Headers({
+          ETag: 'W/"abc123"',
+          // Browser might add this header to indicate cache hit
+          "X-From-Cache": "true",
+        }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/cached-endpoint");
+
+      expect(result).toEqual(mockData);
+      // We just get the data, no special 304 handling needed
+      expect(global.fetch).toHaveBeenCalledOnce();
+    });
+
+    it("should handle data freshness through TanStack Query staleTime", async () => {
+      // This test documents our new mental model:
+      // TanStack Query decides WHEN to fetch (staleTime)
+      // Browser decides HOW to fetch (with ETag headers)
+      // Server decides WHAT to return (fresh data or 304)
+      // We just pass data through
+
+      const freshData = { version: 2, data: "Updated" };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(freshData),
+        headers: new Headers({ ETag: 'W/"new-etag"' }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/api/data");
+
+      expect(result).toEqual(freshData);
+      // No ETag handling in our code - browser does it all
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          headers: expect.not.objectContaining({
+            "If-None-Match": expect.any(String), // We don't add this
+          }),
+        }),
+      );
+    });
+
+    it("should not interfere with browser's HTTP cache mechanism", async () => {
+      // Test that we don't add cache-control headers that would
+      // interfere with browser's natural ETag handling
+      const mockData = { test: "data" };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(mockData),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      await callAPIWithETag("/test", {
+        method: "GET",
+      });
+
+      const [, options] = (global.fetch as any).mock.calls[0];
+
+      // Verify we don't add cache-busting headers
+      expect(options.headers).not.toHaveProperty("Cache-Control");
+      expect(options.headers).not.toHaveProperty("Pragma");
+      expect(options.headers).not.toHaveProperty("If-None-Match");
+      expect(options.headers).not.toHaveProperty("If-Modified-Since");
+    });
+
+    it("should work seamlessly with TanStack Query's caching strategy", async () => {
+      // This test documents how our simplified approach works with TanStack Query:
+      // 1. TanStack Query calls our function when data is stale
+      // 2. We make a simple fetch request
+      // 3. Browser adds If-None-Match if it has cached data
+      // 4. Server returns 200 (new data) or 304 (not modified)
+      // 5. Browser returns data to us (either new or cached)
+      // 6. We return data to TanStack Query
+      // 7. TanStack Query updates its cache
+
+      const mockData = { workflow: "simplified" };
+      const mockResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(mockData),
+        headers: new Headers({ ETag: 'W/"workflow-v1"' }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/api/workflow");
+
+      expect(result).toEqual(mockData);
+      // That's it! No error handling for 304s, no cache management
+      // Just fetch and return
+    });
+
+    it("should allow browser to optimize bandwidth automatically", async () => {
+      // This test verifies that even though we removed explicit ETag handling,
+      // bandwidth optimization still works through browser's HTTP cache
+
+      const mockData = { size: "large", benefit: "bandwidth saved" };
+      const mockResponse = {
+        ok: true,
+        status: 200, // Even if server sent 304, browser gives us 200
+        json: () => Promise.resolve(mockData),
+        headers: new Headers({
+          ETag: 'W/"large-data"',
+          // These headers indicate the browser's cache was used
+          Date: new Date().toUTCString(),
+          Age: "0", // Indicates how long since fetched from origin
+        }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+      const result = await callAPIWithETag("/api/large-payload");
+
+      expect(result).toEqual(mockData);
+      // We get the benefit of 304s without any code complexity
+    });
+
+    it("should handle server errors regardless of caching", async () => {
+      // Verify error handling still works in simplified version
+      const errorResponse = {
+        ok: false,
+        status: 500,
+        text: () =>
+          Promise.resolve(
+            JSON.stringify({
+              detail: "Server error",
+            }),
+          ),
+        headers: new Headers(),
+      };
+
+      global.fetch = vi.fn().mockResolvedValue(errorResponse);
+
+      await expect(callAPIWithETag("/api/error")).rejects.toThrowError(
+        new APIServiceError("Server error", "HTTP_ERROR", 500),
+      );
+    });
+  });
+
+  describe("Browser Cache Integration", () => {
+    it("should demonstrate the complete caching flow", async () => {
+      // This comprehensive test shows the full cycle:
+      // Request 1: Fresh fetch
+      // Request 2: Browser handles ETag/304 transparently
+
+      // First request - no cache
+      const freshData = { count: 1, status: "fresh" };
+      const freshResponse = {
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(freshData),
+        headers: new Headers({
+          ETag: 'W/"v1"',
+          "Cache-Control": "private, must-revalidate",
+        }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValueOnce(freshResponse);
+
+      const result1 = await callAPIWithETag("/api/data");
+      expect(result1).toEqual(freshData);
+
+      // Second request - browser would handle 304 and return cached data
+      // From our perspective, it looks like a normal 200 response
+      const cachedResponse = {
+        ok: true,
+        status: 200, // Browser converts 304 to 200
+        json: () => Promise.resolve(freshData), // Same data from cache
+        headers: new Headers({
+          ETag: 'W/"v1"', // Same ETag
+          "Cache-Control": "private, must-revalidate",
+          "X-Cache": "HIT", // Some CDNs/proxies add this
+        }),
+      };
+
+      global.fetch = vi.fn().mockResolvedValueOnce(cachedResponse);
+
+      const result2 = await callAPIWithETag("/api/data");
+      expect(result2).toEqual(freshData); // Same data, transparently cached
+
+      // Both requests succeed without any special 304 handling
+      expect(result1).toEqual(result2);
+    });
+
+    it("should handle data updates transparently", async () => {
+      // When server data changes, we get new data automatically
+
+      // Request 1: Initial data
+      const v1Data = { version: 1, content: "Original" };
+      global.fetch = vi.fn().mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(v1Data),
+        headers: new Headers({ ETag: 'W/"v1"' }),
+      });
+
+      const result1 = await callAPIWithETag("/api/content");
+      expect(result1).toEqual(v1Data);
+
+      // Data changes on server...
+
+      // Request 2: Updated data (browser sends old ETag, server returns new data)
+      const v2Data = { version: 2, content: "Updated" };
+      global.fetch = vi.fn().mockResolvedValueOnce({
+        ok: true,
+        status: 200, // New data, not 304
+        json: () => Promise.resolve(v2Data),
+        headers: new Headers({ ETag: 'W/"v2"' }), // New ETag
+      });
+
+      const result2 = await callAPIWithETag("/api/content");
+      expect(result2).toEqual(v2Data); // We get fresh data automatically
+
+      // No special handling needed - it just works
+      expect(result2.version).toBeGreaterThan(result1.version);
+    });
+  });
+});
diff --git a/archon-ui-main/src/features/shared/apiWithEtag.ts b/archon-ui-main/src/features/shared/apiWithEtag.ts
new file mode 100644
index 0000000000..eb10b8d964
--- /dev/null
+++ b/archon-ui-main/src/features/shared/apiWithEtag.ts
@@ -0,0 +1,120 @@
+/**
+ * Simple API client for TanStack Query integration
+ *
+ * IMPORTANT: The Fetch API automatically handles ETags and HTTP caching for bandwidth optimization.
+ * We do NOT explicitly handle 304 responses because:
+ * 1. The browser's native HTTP cache handles If-None-Match headers automatically
+ * 2. When server returns 304, fetch returns the cached stored response (typically as 200) and updates cache headers
+ * 3. TanStack Query manages data freshness through staleTime configuration
+ *
+ * This simplification eliminates complex ETag management while maintaining bandwidth efficiency.
+ * For cache control, configure TanStack Query's staleTime/gcTime instead of manual HTTP caching.
+ */
+
+import { API_BASE_URL } from "../../config/api";
+import { APIServiceError } from "./errors";
+
+/**
+ * Build full URL with test environment handling
+ * Ensures consistent URL construction for cache keys
+ */
+function buildFullUrl(cleanEndpoint: string): string {
+  let fullUrl = `${API_BASE_URL}${cleanEndpoint}`;
+
+  // Only convert to absolute URL in test environment
+  const isTestEnv = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+
+  if (isTestEnv && !fullUrl.startsWith("http")) {
+    const testHost = "localhost";
+    const testPort = process.env?.ARCHON_SERVER_PORT || "8181";
+    fullUrl = `http://${testHost}:${testPort}${fullUrl}`;
+  }
+
+  return fullUrl;
+}
+
+/**
+ * Simple API call function for JSON APIs
+ * Browser automatically handles ETags/304s through its HTTP cache
+ *
+ * NOTE: This wrapper is designed for JSON-only API calls.
+ * For file uploads or FormData requests, use fetch() directly.
+ */
+export async function callAPIWithETag<T = unknown>(endpoint: string, options: RequestInit = {}): Promise<T> {
+  try {
+    // Clean endpoint
+    const cleanEndpoint = endpoint.startsWith("/api") ? endpoint.substring(4) : endpoint;
+
+    // Construct the full URL
+    const fullUrl = buildFullUrl(cleanEndpoint);
+
+    // Build headers - merge default Content-Type with provided headers
+    // NOTE: We do NOT add If-None-Match headers; the browser handles ETag revalidation automatically
+    // Also note: Currently assumes headers are passed as plain objects (Record<string, string>)
+    // If we ever need to support Headers instances or [string, string][] tuples,
+    // we should normalize with: new Headers(options.headers), set defaults, then
+    // convert back with Object.fromEntries(headers.entries())
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...((options.headers as Record<string, string>) || {}),
+    };
+
+    // Make the request with timeout
+    // NOTE: Increased to 20s due to database performance issues with large DELETE operations
+    // Root cause: Sequential scan on crawled_pages table when deleting sources with 7K+ rows
+    // takes 13+ seconds. This is a temporary fix until we implement batch deletion.
+    // See: DELETE FROM archon_crawled_pages WHERE source_id = '9529d5dabe8a726a' (7,073 rows)
+    const response = await fetch(fullUrl, {
+      ...options,
+      headers,
+      signal: options.signal ?? AbortSignal.timeout(20000), // 20 second timeout (was 10s)
+    });
+
+    // Handle errors
+    if (!response.ok) {
+      let errorMessage = `HTTP error! status: ${response.status}`;
+      try {
+        const errorBody = await response.text();
+        if (errorBody) {
+          const errorJson = JSON.parse(errorBody);
+          // Handle nested error structure from backend {"detail": {"error": "message"}}
+          if (typeof errorJson.detail === "object" && errorJson.detail !== null && "error" in errorJson.detail) {
+            errorMessage = errorJson.detail.error;
+          } else if (errorJson.detail) {
+            errorMessage = errorJson.detail;
+          } else if (errorJson.error) {
+            errorMessage = errorJson.error;
+          }
+        }
+      } catch (_e) {
+        // Ignore parse errors
+      }
+      throw new APIServiceError(errorMessage, "HTTP_ERROR", response.status);
+    }
+
+    // Handle 204 No Content (DELETE operations)
+    if (response.status === 204) {
+      return undefined as T;
+    }
+
+    // Parse response data
+    const result = await response.json();
+
+    // Check for API errors
+    if (result.error) {
+      throw new APIServiceError(result.error, "API_ERROR", response.status);
+    }
+
+    return result as T;
+  } catch (error) {
+    if (error instanceof APIServiceError) {
+      throw error;
+    }
+
+    throw new APIServiceError(
+      `Failed to call API ${endpoint}: ${error instanceof Error ? error.message : "Unknown error"}`,
+      "NETWORK_ERROR",
+      500,
+    );
+  }
+}
diff --git a/archon-ui-main/src/features/shared/errors.ts b/archon-ui-main/src/features/shared/errors.ts
new file mode 100644
index 0000000000..199220308c
--- /dev/null
+++ b/archon-ui-main/src/features/shared/errors.ts
@@ -0,0 +1,83 @@
+/**
+ * Shared Error Classes and Utilities
+ * Common error handling across all features
+ *
+ * NOTE: We intentionally DO NOT include a NotModifiedError (304) class.
+ * Our architecture relies on the browser's native HTTP cache to handle ETags and 304 responses
+ * transparently. When the server returns 304, the browser automatically serves cached data
+ * and our JavaScript code receives it as a normal 200 response. This simplification means:
+ * - We never see 304 status codes in our application code
+ * - No manual ETag handling is needed
+ * - TanStack Query manages freshness through staleTime, not HTTP status codes
+ *
+ * If you're looking to handle caching, configure TanStack Query's staleTime instead.
+ */
+
+/**
+ * Base API error class for all service errors
+ */
+export class APIServiceError extends Error {
+  constructor(
+    message: string,
+    public code?: string,
+    public statusCode?: number,
+  ) {
+    super(message);
+    this.name = "APIServiceError";
+  }
+}
+
+/**
+ * Validation error for input validation failures
+ */
+export class ValidationError extends APIServiceError {
+  constructor(message: string) {
+    super(message, "VALIDATION_ERROR", 400);
+    this.name = "ValidationError";
+  }
+}
+
+/**
+ * MCP Tool error for Model Context Protocol operations
+ */
+export class MCPToolError extends APIServiceError {
+  constructor(
+    message: string,
+    public toolName: string,
+  ) {
+    super(message, "MCP_TOOL_ERROR", 500);
+    this.name = "MCPToolError";
+  }
+}
+
+/**
+ * Helper types for validation error formatting
+ */
+interface ValidationErrorDetail {
+  path: string[];
+  message: string;
+}
+
+interface ValidationErrorObject {
+  errors: ValidationErrorDetail[];
+}
+
+/**
+ * Format validation errors into a readable string
+ */
+export function formatValidationErrors(errors: ValidationErrorObject): string {
+  return errors.errors.map((error: ValidationErrorDetail) => `${error.path.join(".")}: ${error.message}`).join(", ");
+}
+
+/**
+ * Convert Zod validation errors to a formatted string
+ */
+export function formatZodErrors(zodError: { issues: Array<{ path: (string | number)[]; message: string }> }): string {
+  const validationErrors: ValidationErrorObject = {
+    errors: zodError.issues.map((issue) => ({
+      path: issue.path.map(String),
+      message: issue.message,
+    })),
+  };
+  return formatValidationErrors(validationErrors);
+}