Add Docker badge to UI

pkg/instance/instance.go

@@ -221,14 +221,33 @@ func (i *Process) MarshalJSON() ([]byte, error) {
 	i.mu.RLock()
 	defer i.mu.RUnlock()
 
+	// Determine if docker is enabled for this instance's backend
+	var dockerEnabled bool
+	if i.options != nil {
+		switch i.options.BackendType {
+		case backends.BackendTypeLlamaCpp:
+			if i.globalBackendSettings != nil && i.globalBackendSettings.LlamaCpp.Docker != nil && i.globalBackendSettings.LlamaCpp.Docker.Enabled {
+				dockerEnabled = true
+			}
+		case backends.BackendTypeVllm:
+			if i.globalBackendSettings != nil && i.globalBackendSettings.VLLM.Docker != nil && i.globalBackendSettings.VLLM.Docker.Enabled {
+				dockerEnabled = true
+			}
+		case backends.BackendTypeMlxLm:
+			// MLX does not support docker currently
+		}
+	}
+
 	// Use anonymous struct to avoid recursion
 	type Alias Process
 	return json.Marshal(&struct {
 		*Alias
-		Options *CreateInstanceOptions `json:"options,omitempty"`
+		Options       *CreateInstanceOptions `json:"options,omitempty"`
+		DockerEnabled bool                   `json:"docker_enabled,omitempty"`
 	}{
-		Alias:   (*Alias)(i),
+		Alias:         (*Alias)(i),
-		Options: i.options,
+		Options:       i.options,
+		DockerEnabled: dockerEnabled,
 	})
 }
 

webui/src/components/BackendBadge.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Badge } from "@/components/ui/badge";
 import { BackendType, type BackendTypeValue } from "@/types/instance";
-import { Server } from "lucide-react";
+import { Server, Package } from "lucide-react";
 
 interface BackendBadgeProps {
   backend?: BackendTypeValue;
+  docker?: boolean;
 }
 
-const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
+const BackendBadge: React.FC<BackendBadgeProps> = ({ backend, docker }) => {
   if (!backend) {
     return null;
   }
@@ -39,13 +40,25 @@ const BackendBadge: React.FC<BackendBadgeProps> = ({ backend }) => {
   };
 
   return (
-    <Badge
+    <div className="flex items-center gap-1">
-      variant="outline"
+      <Badge
-      className={`flex items-center gap-1.5 ${getColorClasses()}`}
+        variant="outline"
-    >
+        className={`flex items-center gap-1.5 ${getColorClasses()}`}
-      <Server className="h-3 w-3" />
+      >
-      <span className="text-xs">{getText()}</span>
+        <Server className="h-3 w-3" />
-    </Badge>
+        <span className="text-xs">{getText()}</span>
+      </Badge>
+      {docker && (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1.5 bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900 dark:text-orange-200 dark:border-orange-800"
+          title="Docker enabled"
+        >
+          <Package className="h-3 w-3" />
+          <span className="text-[10px] uppercase tracking-wide">Docker</span>
+        </Badge>
+      )}
+    </div>
   );
 };
 

webui/src/components/InstanceCard.tsx

@@ -66,7 +66,7 @@ function InstanceCard({
             
             {/* Badges row */}
             <div className="flex items-center gap-2 flex-wrap">
-              <BackendBadge backend={instance.options?.backend_type} />
+              <BackendBadge backend={instance.options?.backend_type} docker={instance.docker_enabled} />
               {running && <HealthBadge health={health} />}
             </div>
           </div>

webui/src/types/instance.ts

@@ -23,4 +23,5 @@ export interface Instance {
   name: string;
   status: InstanceStatus;
   options?: CreateInstanceOptions;
+  docker_enabled?: boolean; // indicates backend is running via Docker
 }