diff --git a/javascript/sdppp-comfy.js b/javascript/sdppp-comfy.js
index ba3f6f6..fd483cf 100644
--- a/javascript/sdppp-comfy.js
+++ b/javascript/sdppp-comfy.js
@@ -16,6 +16,23 @@
 			type: 'comfyui'
 		}
 	});
+	socket.on('connect', () => {
+		socket.emit('c_reset_changes');
+		socket.emit('c_reset_instance_name', {
+			name: `(${socket.id.slice(0, 4)}) ${document.title}`
+		})
+	});
+	socket.on('disconnect', () => {
+	});
+	socket.on('connect_error', () => {
+		console.error('sdppp socket connect_error')
+	});
+	socket.on('s_run', () => {
+		document.getElementById('queue-button').click()
+	});
+	socket.on('s_trigger_graph_change', () => {
+		api.dispatchEvent(new CustomEvent("graphChanged"));
+	});
 	api.addEventListener("progress", ({ detail }) => {
 		if (!detail || isNaN(detail.value / detail.max)) return;
 		socket.emit('c_progress', {
@@ -48,28 +65,40 @@
 			])
 		}
 	})
+	const downloadWidgets = new WeakMap();
+	function handleDownloadWidgets(node) {
+		let widget;
+		if (!downloadWidgets.has(node)) {
+			const size = node.size;
+			widget = node.addWidget('button', '', 0, ()=> {
+				if (!Object.keys(documentData || {}).length)
+					location.href = "/extensions/sd-ppp/plugins/sd-ppp_PS.ccx"
+			})
+			downloadWidgets.set(node, widget)
+			node.size = [size[0], Math.max(size[1], node.size[1])];
+		} else {
+			widget = downloadWidgets.get(node)
+		}
+		widget.name = Object.keys(documentData || {}).length ? `current ComfyUI pageid: ${socket.id.slice(0, 4)}` : 'download PS plugin (.ccx)';
+	}
+	function renderNotConnectedBG(node, ctx) {
+		if (node.flags.collapsed) return;
+		const connected = Object.keys(documentData || {}).length;
+		if (!connected)	{
+			ctx.save();
+			ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
+			ctx.fillRect(0, 0, node.size[0], node.size[1]);
+			ctx.fillStyle = "white";
+			ctx.textAlign = "center"
+			ctx.fillText("Photoshop not connected!", node.size[0] / 2, 20);
+			ctx.restore();
+		}
+	}
 	app.registerExtension({
 		name: id,
 		init() {
 		},
 		async setup() {
-			socket.on('connect', () => {
-				socket.emit('c_reset_changes');
-				socket.emit('c_reset_instance_name', {
-					name: document.title
-				})
-			});
-			socket.on('disconnect', () => {
-			});
-			socket.on('connect_error', () => {
-				console.error('sdppp socket connect_error')
-			});
-			socket.on('s_run', () => {
-				document.getElementById('queue-button').click()
-			});
-			socket.on('s_trigger_graph_change', () => {
-				api.dispatchEvent(new CustomEvent("graphChanged"));
-			});
 			setInterval(() => {
 				checkHistoryChanges();
 				// socket.emit('c_get_layers', (data) => {
@@ -78,7 +107,7 @@
 				// 	setLayerStrs = data.set_layer_strs;
 				// })
 				socket.emit('c_reset_instance_name', {
-					name: document.title
+					name: `(${socket.id.slice(0, 4)}) ${document.title}`
 				})
 			}, 2000);
 		},
@@ -87,6 +116,7 @@
 				const onSelected = nodeType.prototype.onSelected;
 				const onMouseEnter = nodeType.prototype.onMouseEnter;
 				const onAdded = nodeType.prototype.onAdded;
+				const onDrawForeground = nodeType.prototype.onDrawForeground;
 				const resetWidget12 = function () {
 					const documentName = this.widgets[0].value
 					this.widgets[1].options.values = !documentData[documentName] ? [] : SDPPPSpeicialIDManager.getSpecialLayerForGet().concat(documentData[documentName].layers.map(layer => layer.name));
@@ -102,6 +132,7 @@
 					if (!this.widgets[0].options.values.length) this.widgets[0].value = ''
 					if (!this.widgets[0].value || this.widgets[0].options.values.indexOf(this.widgets[0].value) == -1) this.widgets[0].value = this.widgets[0].options.values[0];
 					resetWidget12.call(this);
+					handleDownloadWidgets(this);
 				}
 				nodeType.prototype.onSelected = async function (...args) {
 					if (onSelected) await onSelected.call(this, ...args);
@@ -124,8 +155,12 @@
 									this.widgets[0].value = documentKey;
 								}
 							})
-						}		
+						}
 					}
+					getAndRender.call(this);
+				}
+				nodeType.prototype.onDrawForeground = function (ctx, a, b, c) {
+					renderNotConnectedBG(this, ctx);
 				}
 
 			} else if (nodeType.comfyClass === 'Send Images To Photoshop') {
@@ -145,6 +180,7 @@
 					if (!this.widgets[0].options.values.length) this.widgets[0].value = ''
 					if (!this.widgets[0].value || this.widgets[0].options.values.indexOf(this.widgets[0].value) == -1) this.widgets[0].value = this.widgets[0].options.values[0];
 					resetWidget1.call(this);
+					handleDownloadWidgets(this);
 				}
 				nodeType.prototype.onSelected = async function (...args) {
 					if (onSelected) await onSelected.call(this, ...args);
@@ -167,10 +203,13 @@
 									this.widgets[0].value = documentKey;
 								}
 							})
-						}						
+						}
 					}
+					getAndRender.call(this);
+				}
+				nodeType.prototype.onDrawForeground = function (ctx, a, b, c) {
+					renderNotConnectedBG(this, ctx);
 				}
-
 			}
 		}
 	});
diff --git a/photoshop/src/panels/Main.jsx b/photoshop/src/panels/Main.jsx
index b1a95af..7daed70 100644
--- a/photoshop/src/panels/Main.jsx
+++ b/photoshop/src/panels/Main.jsx
@@ -120,10 +120,9 @@ export default class Main extends React.Component {
                                                 autoRunning: e.target.checked ? '' : item.sid
                                             })
                                         }}></sp-checkbox>
-                                        <sp-label class="client-name">{item.name}</sp-label>
+                                        <sp-label class="client-name">{item.progress ? `${item.progress}% - ` : ""}{item.name}</sp-label>
                                     </div>
                                     <div className="client-list-item-right">
-                                        <sp-label class="client-progress">{item.progress ? `${item.progress}%` : ""}</sp-label>
                                         <sp-link onClick={() => { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"}</sp-link>
                                     </div>
                                 </li>
diff --git a/photoshop/src/styles.css b/photoshop/src/styles.css
index b82e506..c91ac4d 100644
--- a/photoshop/src/styles.css
+++ b/photoshop/src/styles.css
@@ -56,6 +56,7 @@
     margin-left: 5px;
     display: flex;
     align-items: center;
+    flex: 2;
 }
 .client-list-item sp-checkbox {
     margin-right: 2px;
@@ -70,6 +71,9 @@
     margin-right: 10px;
     display: flex;
     align-items: center;
+    flex: 1;
+    text-align: right;
+    white-space: nowrap;
 }
 .client-list-item .client-list-item-right sp-link:active {
     color: white;