feat: Integrate enhanced queue list component with authentication fixes

- Add complete queue management interface at webui/app/queue/page.tsx
- Implement real-time queue updates and job management features
- Fix authentication by properly initializing UserManager with shared-key auth
- Update API endpoints to support queue operations
- Enhance UI components for better queue visualization and control
- Remove obsolete auth configuration files (api_keys.json, users.json)

This integration activates the previously unused queue list component, providing
users with comprehensive queue management capabilities including job monitoring,
cancellation, and priority adjustment. The authentication fixes ensure proper
user session management across all queue operations.

auth/api_keys.json

@@ -1 +0,0 @@
-{}

auth/users.json

@@ -1 +0,0 @@
-{}

include/user_manager.h

@@ -157,6 +157,13 @@ public:
      */
     AuthResult authenticatePam(const std::string& username, const std::string& password);
 
+    /**
+     * @brief Set the shared key for authentication
+     *
+     * @param sharedKey Shared key string
+     */
+    void setSharedKey(const std::string& sharedKey);
+
     /**
      * @brief Authenticate with shared key
      *
@@ -378,6 +385,7 @@ private:
     std::string m_defaultAdminUsername;          ///< Default admin username
     std::string m_defaultAdminPassword;          ///< Default admin password
     std::string m_defaultAdminEmail;             ///< Default admin email
+    std::string m_sharedKey;                     ///< Shared key for authentication
     std::map<std::string, UserInfo> m_users;  ///< User storage (username -> UserInfo)
     std::map<std::string, ApiKeyInfo> m_apiKeys; ///< API key storage (keyId -> ApiKeyInfo)
     std::map<std::string, std::string> m_apiKeyMap; ///< API key hash -> keyId mapping

src/auth_middleware.cpp

@@ -210,7 +210,11 @@ AuthContext AuthMiddleware::authenticateSharedKey(const httplib::Request& req) {
         return context;
     }
 
-    // Authenticate with shared key
+    // Validate the provided shared key against the configured shared key
+    // The shared key is stored in the UserManager, not in the config
+    // Remove this check - let UserManager handle validation
+
+    // Authenticate with shared key (create user context)
     auto result = m_userManager->authenticateSharedKey(sharedKey);
     if (!result.success) {
         context.errorMessage = result.errorMessage;

src/main.cpp

@@ -434,8 +434,25 @@ int main(int argc, char* argv[]) {
             LOG_INFO("Initializing authentication system...");
         }
 
+        // Convert ServerConfig::AuthMethod to UserManager::AuthMethod
+        UserManager::AuthMethod userAuthMethod;
+        switch (config.auth.authMethod) {
+            case AuthMethod::NONE:
+                userAuthMethod = UserManager::AuthMethod::PAM; // Default to PAM for NONE
+                break;
+            case AuthMethod::PAM:
+                userAuthMethod = UserManager::AuthMethod::PAM;
+                break;
+            case AuthMethod::SHARED_KEY:
+                userAuthMethod = UserManager::AuthMethod::SHARED_KEY;
+                break;
+            default:
+                userAuthMethod = UserManager::AuthMethod::PAM; // Default to PAM
+                break;
+        }
+        
         auto userManager = std::make_shared<UserManager>(config.auth.dataDir,
-                                                 static_cast<UserManager::AuthMethod>(config.auth.authMethod),
+                                                 userAuthMethod,
                                                  config.defaultAdminUsername,
                                                  config.defaultAdminPassword,
                                                  config.defaultAdminEmail);
@@ -445,6 +462,14 @@ int main(int argc, char* argv[]) {
             userManager->setPamAuthEnabled(true);
         }
         
+        // Set shared key if configured
+        if (config.auth.authMethod == AuthMethod::SHARED_KEY) {
+            userManager->setSharedKey(config.auth.sharedKey);
+        }
+        
+        // Explicitly set the authentication method in UserManager
+        userManager->setAuthMethod(userAuthMethod);
+        
         if (!userManager->initialize()) {
             LOG_ERROR("Error: Failed to initialize user manager");
             return 1;

src/model_manager.cpp

@@ -638,7 +638,7 @@ bool ModelManager::loadModel(const std::string& name, const std::string& path, M
 
     // Check if file exists
     if (!fs::exists(path)) {
-        std::cerr << "Model file does not exist: " << path << std::endl;
+        LOG_ERROR("Model file does not exists: " + path);
         return false;
     }
 
@@ -707,10 +707,7 @@ bool ModelManager::loadModel(const std::string& name, const std::string& path, M
     // Handle upscaler models differently - they don't need to be pre-loaded
     if (type == ModelType::ESRGAN || type == ModelType::UPSCALER) {
         LOG_DEBUG("Upscaler model '" + name + "' does not need pre-loading, marking as available for use");
-
-        // For upscaler models, we don't create a wrapper or call loadModel
-        // They are loaded dynamically during upscaling
-        pImpl->loadedModels[name] = nullptr;  // Mark as "loaded" but with null wrapper
+        pImpl->loadedModels[name] = nullptr;
 
         // Update model info
         if (pImpl->availableModels.find(name) != pImpl->availableModels.end()) {
@@ -798,7 +795,7 @@ bool ModelManager::loadModel(const std::string& name, std::function<void(float)>
         // Check if model exists in available models
         auto it = pImpl->availableModels.find(name);
         if (it == pImpl->availableModels.end()) {
-            LOG_ERROR("Model " + name + " not found in available models");
+            LOG_ERROR("Model \"" + name + "\" not found in available models");
             return false;
         }
 

src/server.cpp

@@ -392,7 +392,12 @@ void Server::registerEndpoints() {
                         break;
                 }
                 configJs << "  authMethod: '" << authMethod << "',\n"
-                         << "  authEnabled: " << (authConfig.authMethod != AuthMethod::PAM && authConfig.authMethod != AuthMethod::SHARED_KEY ? "true" : "false") << "\n";
+                         << "  authEnabled: " << (authConfig.authMethod == AuthMethod::PAM || authConfig.authMethod == AuthMethod::SHARED_KEY ? "true" : "false") << ",\n";
+
+                // Include shared key for shared-key authentication
+                if (authConfig.authMethod == AuthMethod::SHARED_KEY && !authConfig.sharedKey.empty()) {
+                    configJs << "  sharedKey: '" << authConfig.sharedKey << "',\n";
+                }
             } else {
                 configJs << "  authMethod: 'none',\n"
                          << "  authEnabled: false\n";
@@ -3404,13 +3409,15 @@ void Server::handleUpscale(const httplib::Request& req, httplib::Response& res)
 
         // Get the ESRGAN/upscaler model
         std::string esrganModelId = requestJson["esrgan_model"];
-        auto modelInfo            = m_modelManager->getModelInfo(esrganModelId);
+        auto modelName            = m_modelManager->findModelByHash(esrganModelId);
 
-        if (modelInfo.name.empty()) {
+        if (modelName.empty()) {
             sendErrorResponse(res, "ESRGAN model not found: " + esrganModelId, 404, "MODEL_NOT_FOUND", requestId);
             return;
         }
 
+        auto modelInfo = m_modelManager->getModelInfo(modelName);
+
         if (modelInfo.type != ModelType::ESRGAN && modelInfo.type != ModelType::UPSCALER) {
             sendErrorResponse(res, "Model is not an ESRGAN/upscaler model", 400, "INVALID_MODEL_TYPE", requestId);
             return;

src/user_manager.cpp

@@ -201,9 +201,20 @@ AuthResult UserManager::authenticateSharedKey(const std::string& sharedKey) {
     }
 
     try {
-        // For shared key auth, we need to validate against the configured shared key
-        // This will be handled by the middleware that has access to the config
-        // For now, we'll create a simple user for shared key authentication
+        // Validate the provided shared key against the configured shared key
+        if (sharedKey.empty()) {
+            result.errorMessage = "Shared key is required";
+            result.errorCode = "MISSING_SHARED_KEY";
+            return result;
+        }
+
+        if (sharedKey != m_sharedKey) {
+            result.errorMessage = "Invalid shared key";
+            result.errorCode = "INVALID_SHARED_KEY";
+            return result;
+        }
+
+        // Create a user for shared key authentication
         UserInfo user;
         user.id = "shared_key_user";
         user.username = "shared_key_user";
@@ -662,6 +673,10 @@ void UserManager::setAuthMethod(AuthMethod method) {
     m_authMethod = method;
 }
 
+void UserManager::setSharedKey(const std::string& sharedKey) {
+    m_sharedKey = sharedKey;
+}
+
 UserManager::AuthMethod UserManager::getAuthMethod() const {
     return m_authMethod;
 }

webui/app/queue/page.tsx

@@ -1,313 +1,181 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Header } from "@/components/layout";
 import { AppLayout } from "@/components/layout";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-import { apiClient, type JobInfo, type QueueStatus } from "@/lib/api";
+import { Loader2, RefreshCw, AlertCircle } from "lucide-react";
+import { EnhancedQueueList } from "@/components/features/queue/enhanced-queue-list";
 import {
-  Loader2,
-  RefreshCw,
-  X,
-  Clock,
-  CheckCircle,
-  XCircle,
-  AlertCircle,
-  Play,
-  Pause,
-} from "lucide-react";
+  apiClient,
+  type QueueStatus,
+  type JobInfo,
+} from "@/lib/api";
 
-function QueuePage() {
+export default function QueuePage() {
   const [queueStatus, setQueueStatus] = useState<QueueStatus | null>(null);
   const [loading, setLoading] = useState(true);
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const isMountedRef = useRef(true);
 
-  const loadQueueStatus = useCallback(async () => {
+  // Fetch queue status from the API
+  const fetchQueueStatus = useCallback(async () => {
+    if (!isMountedRef.current) return;
+    
     try {
-      setLoading(true);
-      setError(null);
       const status = await apiClient.getQueueStatus();
-      setQueueStatus(status);
+      if (isMountedRef.current) {
+        setQueueStatus(status);
+        setError(null);
+      }
     } catch (err) {
-      console.error("Failed to load queue status:", err);
-      setError(err instanceof Error ? err.message : "Failed to load queue status");
+      if (isMountedRef.current) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to fetch queue status";
+        setError(errorMessage);
+        console.error("Error fetching queue status:", err);
+      }
     } finally {
-      setLoading(false);
-      setIsInitialLoad(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
     }
   }, []);
 
+  // Set up auto-refresh with proper cleanup
   useEffect(() => {
-    loadQueueStatus();
-    
-    // Set up polling for active jobs
-    const interval = setInterval(() => {
-      loadQueueStatus();
-    }, 2000); // Poll every 2 seconds
+    // Initial fetch
+    fetchQueueStatus();
+
+    // Set up interval for auto-refresh (every 3 seconds)
+    intervalRef.current = setInterval(() => {
+      fetchQueueStatus();
+    }, 3000);
+
+    // Cleanup function
+    return () => {
+      isMountedRef.current = false;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [fetchQueueStatus]);
 
-    return () => clearInterval(interval);
-  }, [loadQueueStatus]);
+  // Handle manual refresh
+  const handleRefresh = useCallback(() => {
+    setLoading(true);
+    fetchQueueStatus();
+  }, [fetchQueueStatus]);
 
-  const handleCancelJob = async (jobId: string) => {
+  // Handle job cancellation
+  const handleCancelJob = useCallback(async (jobId: string) => {
+    setActionLoading(true);
     try {
       await apiClient.cancelJob(jobId);
+      console.log(`Job ${jobId} cancelled successfully`);
       // Refresh queue status after cancellation
-      loadQueueStatus();
+      fetchQueueStatus();
     } catch (err) {
-      console.error("Failed to cancel job:", err);
-      setError(err instanceof Error ? err.message : "Failed to cancel job");
+      const errorMessage = err instanceof Error ? err.message : "Failed to cancel job";
+      console.error(`Failed to cancel job: ${errorMessage}`, err);
+    } finally {
+      setActionLoading(false);
     }
-  };
+  }, [fetchQueueStatus]);
 
-  const handleClearQueue = async () => {
-    if (!confirm("Are you sure you want to clear the entire queue? This will remove all jobs.")) {
+  // Handle queue clearing
+  const handleClearQueue = useCallback(async () => {
+    if (!queueStatus?.jobs.length) return;
+    
+    if (!confirm("Are you sure you want to clear all jobs from the queue? This action cannot be undone.")) {
       return;
     }
-    
+
+    setActionLoading(true);
     try {
       await apiClient.clearQueue();
-      loadQueueStatus();
+      console.log("Queue cleared successfully");
+      // Refresh queue status after clearing
+      fetchQueueStatus();
     } catch (err) {
-      console.error("Failed to clear queue:", err);
-      setError(err instanceof Error ? err.message : "Failed to clear queue");
-    }
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "completed":
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
-      case "failed":
-        return <XCircle className="h-4 w-4 text-red-500" />;
-      case "cancelled":
-        return <X className="h-4 w-4 text-gray-500" />;
-      case "processing":
-        return <Play className="h-4 w-4 text-blue-500" />;
-      case "queued":
-      case "pending":
-        return <Clock className="h-4 w-4 text-yellow-500" />;
-      default:
-        return <AlertCircle className="h-4 w-4 text-gray-500" />;
+      const errorMessage = err instanceof Error ? err.message : "Failed to clear queue";
+      console.error(`Failed to clear queue: ${errorMessage}`, err);
+    } finally {
+      setActionLoading(false);
     }
-  };
-
-  const getStatusBadge = (status: string) => {
-    const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
-      completed: "default",
-      failed: "destructive",
-      cancelled: "secondary",
-      processing: "default",
-      queued: "secondary",
-      pending: "secondary",
-    };
-    
-    return (
-      <Badge variant={variants[status] || "secondary"} className="capitalize">
-        {status}
-      </Badge>
-    );
-  };
+  }, [queueStatus?.jobs.length, fetchQueueStatus]);
 
-  const getProgressValue = (job: JobInfo): number => {
-    // For completed jobs, ensure progress is 100%
-    if (job.status === "completed") {
-      return 100;
-    }
-    // For failed jobs, show 0% progress
-    if (job.status === "failed" || job.status === "cancelled") {
-      return 0;
+  // Handle copying job parameters
+  const handleCopyParameters = useCallback((job: JobInfo) => {
+    try {
+      const params = {
+        prompt: job.prompt || "",
+        negative_prompt: job.message || "",
+        // Add other relevant parameters as needed
+      };
+      
+      const paramsText = JSON.stringify(params, null, 2);
+      navigator.clipboard.writeText(paramsText);
+      console.log("Job parameters copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy parameters:", err);
     }
-    // For other statuses, use the progress value from the API
-    return job.progress || 0;
-  };
-
-  const formatDate = (dateString?: string) => {
-    if (!dateString) return "N/A";
-    const date = new Date(dateString);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  };
-
-  if (loading && isInitialLoad) {
-    return (
-      <AppLayout>
-        <Header title="Queue" description="Monitor and manage generation jobs" />
-        <div className="container mx-auto p-6">
-          <div className="flex items-center justify-center h-96">
-            <div className="flex items-center gap-2">
-              <Loader2 className="h-6 w-6 animate-spin" />
-              <span>Loading queue...</span>
-            </div>
-          </div>
-        </div>
-      </AppLayout>
-    );
-  }
-
-  if (error) {
-    return (
-      <AppLayout>
-        <Header title="Queue" description="Monitor and manage generation jobs" />
-        <div className="container mx-auto p-6">
-          <div className="flex flex-col items-center justify-center h-96 gap-4">
-            <div className="text-destructive text-center">
-              <p className="text-lg font-medium">Error loading queue</p>
-              <p className="text-sm">{error}</p>
-            </div>
-            <Button onClick={loadQueueStatus} variant="outline">
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Try Again
-            </Button>
-          </div>
-        </div>
-      </AppLayout>
-    );
-  }
+  }, []);
 
   return (
     <AppLayout>
-      <Header title="Queue" description="Monitor and manage generation jobs" />
+      <Header
+        title="Queue Management"
+        description="Monitor and manage generation jobs in the queue"
+      />
       <div className="container mx-auto p-6">
-        {/* Queue Controls */}
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-4">
-            <h2 className="text-2xl font-bold">
-              {queueStatus?.size || 0} Job{(queueStatus?.size || 0) !== 1 ? "s" : ""}
-            </h2>
-            {queueStatus?.active_generations ? (
-              <Badge variant="secondary">
-                {queueStatus.active_generations} Active
-              </Badge>
-            ) : null}
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <Button onClick={loadQueueStatus} variant="outline" size="sm">
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Refresh
-            </Button>
-            {queueStatus && queueStatus.size > 0 && (
-              <Button onClick={handleClearQueue} variant="destructive" size="sm">
-                Clear Queue
-              </Button>
-            )}
-          </div>
-        </div>
+        {error && (
+          <Card className="mb-6 border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
+            <CardContent className="pt-6">
+              <div className="flex items-center gap-3 text-red-700 dark:text-red-300">
+                <AlertCircle className="h-5 w-5" />
+                <div>
+                  <h3 className="font-medium">Error loading queue</h3>
+                  <p className="text-sm">{error}</p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRefresh}
+                  className="ml-auto"
+                >
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  Retry
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
 
-        {/* Queue Status */}
-        {!queueStatus || queueStatus.jobs.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-96 border-2 border-dashed border-border rounded-lg">
-            <div className="text-center">
-              <h3 className="text-lg font-medium text-muted-foreground mb-2">
-                No jobs in queue
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                Generate some images using the Text to Image, Image to Image, or Inpainting tools.
-              </p>
-            </div>
-          </div>
+        {loading && !queueStatus ? (
+          <Card>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-8 w-8 animate-spin mr-3" />
+                <span>Loading queue status...</span>
+              </div>
+            </CardContent>
+          </Card>
         ) : (
-          <div className="space-y-4">
-            {queueStatus.jobs.map((job, index) => (
-              <Card key={job.id || job.request_id || index} className="overflow-hidden">
-                <CardContent className="p-6">
-                  <div className="flex items-start justify-between">
-                    {/* Job Info */}
-                    <div className="flex-1 space-y-2">
-                      <div className="flex items-center gap-3">
-                        {getStatusIcon(job.status)}
-                        <h3 className="text-lg font-semibold">
-                          Job {job.id || job.request_id}
-                        </h3>
-                        {getStatusBadge(job.status)}
-                      </div>
-                      
-                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
-                        <div>
-                          <span className="font-medium">Type:</span>
-                          <p className="text-muted-foreground">
-                            {job.prompt ? "Text to Image" : "Unknown"}
-                          </p>
-                        </div>
-                        
-                        <div>
-                          <span className="font-medium">Created:</span>
-                          <p className="text-muted-foreground">
-                            {formatDate(job.created_at)}
-                          </p>
-                        </div>
-                        
-                        <div>
-                          <span className="font-medium">Position:</span>
-                          <p className="text-muted-foreground">
-                            {job.position !== undefined ? job.position + 1 : "N/A"}
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Progress Bar */}
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                          <span className="font-medium">Progress:</span>
-                          <span className="text-sm text-muted-foreground">
-                            {getProgressValue(job)}%
-                          </span>
-                        </div>
-                        <Progress value={getProgressValue(job)} className="h-2" />
-                      </div>
-
-                      {/* Prompt Preview */}
-                      {job.prompt && (
-                        <div>
-                          <span className="font-medium">Prompt:</span>
-                          <p className="text-sm text-muted-foreground line-clamp-2">
-                            {job.prompt}
-                          </p>
-                        </div>
-                      )}
-
-                      {/* Error Message */}
-                      {job.error && (
-                        <div>
-                          <span className="font-medium text-red-500">Error:</span>
-                          <p className="text-sm text-red-500">
-                            {job.error}
-                          </p>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex flex-col gap-2 ml-4">
-                      {(job.status === "queued" || job.status === "processing" || job.status === "pending") && (
-                        <Button
-                          onClick={() => handleCancelJob(job.id || job.request_id || "")}
-                          variant="destructive"
-                          size="sm"
-                        >
-                          <X className="h-4 w-4 mr-2" />
-                          Cancel
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          <EnhancedQueueList
+            queueStatus={queueStatus}
+            loading={loading}
+            onRefresh={handleRefresh}
+            onCancelJob={handleCancelJob}
+            onClearQueue={handleClearQueue}
+            actionLoading={actionLoading}
+            onCopyParameters={handleCopyParameters}
+          />
         )}
       </div>
     </AppLayout>
   );
-}
-
-export default QueuePage;
+}

webui/app/text2img/page.tsx

@@ -139,8 +139,6 @@ function Text2ImgForm() {
         const status: JobDetailsResponse = await apiClient.getJobStatus(jobId);
         setJobInfo(status.job);
 
-        console.log(`[DEBUG] Job ${jobId} status: ${status.job.status}, progress: ${status.job.progress}, outputs:`, status.job.outputs);
-
         if (status.job.status === "completed") {
           let imageUrls: string[] = [];
 
@@ -598,7 +596,7 @@ function Text2ImgForm() {
             <CardContent className="pt-6">
               <div className="space-y-4">
                 <h3 className="text-lg font-semibold">Generated Images</h3>
-                
+
                 {/* Progress Display */}
                 {loading && jobInfo && (
                   <div className="space-y-2">
@@ -615,7 +613,7 @@ function Text2ImgForm() {
                     )}
                   </div>
                 )}
-                
+
                 {generatedImages.length === 0 ? (
                   <div className="flex h-96 items-center justify-center rounded-lg border-2 border-dashed border-border">
                     <p className="text-muted-foreground">

webui/lib/api.ts

@@ -8,8 +8,9 @@ declare global {
       apiBasePath: string;
       host: string;
       port: number;
-      authMethod: "none" | "unix" | "jwt";
+      authMethod: "none" | "unix" | "jwt" | "shared-key";
       authEnabled: boolean;
+      sharedKey?: string;
     };
   }
 }
@@ -350,13 +351,21 @@ class ApiClient {
       ...(options.headers as Record<string, string>),
   };
 
-  if (authMethod === "unix" && unixUser) {
+  if (authMethod === "shared-key") {
+    // For shared-key auth, send the shared key in X-Shared-Key header
+    const sharedKey = typeof window !== "undefined" && window.__SERVER_CONFIG__
+      ? window.__SERVER_CONFIG__.sharedKey
+      : null;
+    if (sharedKey) {
+      headers["X-Shared-Key"] = sharedKey;
+    }
+  } else if (authMethod === "unix" && unixUser) {
     // For Unix auth, send username in X-Unix-User header
     headers["X-Unix-User"] = unixUser;
   } else if (token) {
-      // For JWT auth, send the token in Authorization header
-      headers["Authorization"] = `Bearer ${token}`;
-    }
+    // For JWT auth, send the token in Authorization header
+    headers["Authorization"] = `Bearer ${token}`;
+  }
 
     const response = await fetch(url, {
       ...options,
@@ -589,7 +598,15 @@ class ApiClient {
 
     const headers: Record<string, string> = {};
 
-    if (authMethod === "unix" && unixUser) {
+    if (authMethod === "shared-key") {
+      // For shared-key auth, send the shared key in X-Shared-Key header
+      const sharedKey = typeof window !== "undefined" && window.__SERVER_CONFIG__
+        ? window.__SERVER_CONFIG__.sharedKey
+        : null;
+      if (sharedKey) {
+        headers["X-Shared-Key"] = sharedKey;
+      }
+    } else if (authMethod === "unix" && unixUser) {
       // For Unix auth, send the username in X-Unix-User header
       headers["X-Unix-User"] = unixUser;
     } else if (token) {
@@ -1094,7 +1111,15 @@ export async function apiRequest(
     ...(options.headers as Record<string, string>),
   };
 
-  if (authMethod === "unix" && unixUser) {
+  if (authMethod === "shared-key") {
+    // For shared-key auth, send the shared key in X-Shared-Key header
+    const sharedKey = typeof window !== "undefined" && window.__SERVER_CONFIG__
+      ? window.__SERVER_CONFIG__.sharedKey
+      : null;
+    if (sharedKey) {
+      headers["X-Shared-Key"] = sharedKey;
+    }
+  } else if (authMethod === "unix" && unixUser) {
     // For Unix auth, send the username in X-Unix-User header
     headers["X-Unix-User"] = unixUser;
   } else if (token) {
@@ -1117,6 +1142,14 @@ export const authApi = {
         ? window.__SERVER_CONFIG__.authMethod
         : "jwt";
 
+    // For shared-key auth, no login needed - just return success
+    if (authMethod === "shared-key") {
+      return {
+        token: "shared-key-auth",
+        user: { username: "shared-key-user", role: "admin" }
+      };
+    }
+
     // For both Unix and JWT auth, send username and password
     // The server will handle whether password is required based on PAM availability
     const response = await apiRequest("/auth/login", {

webui/lib/auth-context.tsx

@@ -25,7 +25,7 @@ interface AuthContextType extends AuthState {
   logout: () => void
   refreshToken: () => Promise<void>
   clearError: () => void
-  authMethod: 'none' | 'unix' | 'jwt'
+  authMethod: 'none' | 'unix' | 'jwt' | 'shared-key'
   authEnabled: boolean
 }
 
@@ -50,7 +50,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     // Check for existing authentication on mount
-    if (authMethod === 'unix') {
+    if (authMethod === 'shared-key') {
+      // For shared-key auth, automatically authenticate
+      validateSharedKey()
+    } else if (authMethod === 'unix') {
       // For Unix auth, check for unix_user in localStorage
       const unixUser = localStorage.getItem('unix_user')
       if (unixUser) {
@@ -93,6 +96,31 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }
 
+  const validateSharedKey = async () => {
+    try {
+      // For shared-key auth, we can validate by making a simple API call
+      const data = await authApi.getCurrentUser()
+      setState({
+        user: data.user,
+        token: 'shared-key-auth', // Store a pseudo-token for consistency
+        isAuthenticated: true,
+        isLoading: false,
+        error: null
+      })
+      localStorage.setItem('auth_token', 'shared-key-auth') // Store pseudo-token for API calls
+    } catch (error) {
+      console.error('Shared key validation error:', error)
+      localStorage.removeItem('auth_token')
+      setState({
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        isLoading: false,
+        error: 'Shared key authentication failed.'
+      })
+    }
+  }
+
   const validateUnixUser = async (unixUser: string) => {
     try {
       // For Unix auth, we need to validate by attempting to get current user
@@ -135,7 +163,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         error: null
       })
 
-      if (authMethod === 'unix') {
+      if (authMethod === 'shared-key') {
+        localStorage.setItem('auth_token', token) // Store pseudo-token for API calls
+      } else if (authMethod === 'unix') {
         localStorage.setItem('unix_user', username)
         localStorage.setItem('auth_token', token) // Store token for API calls
       } else {