feat: add selected-loader LoRA info sidebar

web/comfyui/lora_manager_sidebar.css

@@ -0,0 +1,349 @@
+.lmri-root {
+  --lmri-bg: var(--comfy-menu-bg, #18181b);
+  --lmri-panel: var(--comfy-input-bg, #242428);
+  --lmri-border: var(--border-color, #3a3a40);
+  --lmri-text: var(--fg-color, #f4f4f5);
+  --lmri-muted: var(--descrip-text, #a1a1aa);
+  --lmri-accent: var(--primary-color, #7c3aed);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  background: var(--lmri-bg);
+  color: var(--lmri-text);
+  font: 13px/1.45 Inter, system-ui, sans-serif;
+}
+
+.lmri-root *,
+.lmri-root *::before,
+.lmri-root *::after {
+  box-sizing: border-box;
+}
+
+.lmri-header {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 11px;
+  border-bottom: 1px solid var(--lmri-border);
+  background: color-mix(in srgb, var(--lmri-bg) 94%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.lmri-header h1,
+.lmri-card h2,
+.lmri-notice h3,
+.lmri-empty h3 {
+  margin: 0;
+  color: var(--lmri-text);
+}
+
+.lmri-header h1 {
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.lmri-header p {
+  max-width: 240px;
+  margin: 2px 0 0;
+  overflow: hidden;
+  color: var(--lmri-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lmri-icon-button,
+.lmri-name,
+.lmri-candidate,
+.lmri-button {
+  border: 1px solid var(--lmri-border);
+  color: var(--lmri-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.lmri-icon-button {
+  display: grid;
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 8px;
+  background: var(--lmri-panel);
+}
+
+.lmri-icon-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lmri-name-selector {
+  display: flex;
+  gap: 6px;
+  padding: 10px 12px 2px;
+  overflow-x: auto;
+}
+
+.lmri-name {
+  flex: 0 0 auto;
+  max-width: 190px;
+  padding: 6px 9px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--lmri-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lmri-name.active {
+  border-color: color-mix(in srgb, var(--lmri-accent) 70%, white 10%);
+  background: color-mix(in srgb, var(--lmri-accent) 24%, transparent);
+  color: var(--lmri-text);
+}
+
+.lmri-content {
+  padding: 12px;
+}
+
+.lmri-state,
+.lmri-empty {
+  display: flex;
+  min-height: 230px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--lmri-muted);
+  text-align: center;
+}
+
+.lmri-empty-icon {
+  color: var(--lmri-accent);
+  font-size: 28px;
+}
+
+.lmri-empty p {
+  max-width: 280px;
+  margin: 0;
+}
+
+.lmri-card,
+.lmri-notice {
+  overflow: hidden;
+  border: 1px solid var(--lmri-border);
+  border-radius: 12px;
+  background: var(--lmri-panel);
+  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
+}
+
+.lmri-preview {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  background: #101012;
+}
+
+.lmri-preview img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.lmri-card-body,
+.lmri-notice {
+  padding: 13px;
+}
+
+.lmri-card-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.lmri-card h2 {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.lmri-file-name {
+  margin: 4px 0 0;
+  overflow-wrap: anywhere;
+  color: var(--lmri-muted);
+  font-size: 11px;
+}
+
+.lmri-flags {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #facc15;
+  font-size: 15px;
+}
+
+.lmri-update {
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #166534;
+  color: #dcfce7;
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.lmri-metadata {
+  margin-top: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--lmri-border);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--lmri-bg) 58%, transparent);
+}
+
+.lmri-usage-tips {
+  margin-top: 0;
+}
+
+.lmri-meta-row {
+  display: grid;
+  grid-template-columns: minmax(72px, 0.8fr) minmax(0, 1.5fr);
+  gap: 8px;
+  padding: 3px 0;
+}
+
+.lmri-meta-label {
+  color: var(--lmri-muted);
+}
+
+.lmri-meta-value {
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.lmri-section-title,
+.lmri-copy h3 {
+  margin: 13px 0 6px;
+  color: var(--lmri-muted);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.lmri-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.lmri-pill {
+  max-width: 100%;
+  padding: 4px 7px;
+  overflow: hidden;
+  border: 1px solid var(--lmri-border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--lmri-bg) 56%, transparent);
+  color: var(--lmri-muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+}
+
+.lmri-triggers .lmri-pill {
+  border-color: color-mix(in srgb, var(--lmri-accent) 52%, var(--lmri-border));
+  color: var(--lmri-text);
+}
+
+.lmri-copy p {
+  margin: 0;
+  color: var(--lmri-text);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.lmri-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.lmri-primary-actions {
+  grid-template-columns: 1fr;
+  margin-top: 14px;
+}
+
+.lmri-button {
+  min-width: 0;
+  padding: 7px 8px;
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--lmri-bg) 70%, transparent);
+  text-align: center;
+  text-decoration: none;
+}
+
+.lmri-button:hover,
+.lmri-icon-button:hover:not(:disabled),
+.lmri-candidate:hover {
+  border-color: color-mix(in srgb, var(--lmri-accent) 75%, var(--lmri-border));
+  background: color-mix(in srgb, var(--lmri-accent) 18%, var(--lmri-bg));
+}
+
+.lmri-manager {
+  border-color: color-mix(in srgb, var(--lmri-accent) 68%, var(--lmri-border));
+  background: color-mix(in srgb, var(--lmri-accent) 24%, var(--lmri-bg));
+}
+
+.lmri-civitai-red {
+  border-color: #7f1d1d;
+  color: #fecaca;
+}
+
+.lmri-notice h3 {
+  font-size: 14px;
+}
+
+.lmri-notice p {
+  margin: 7px 0 12px;
+  color: var(--lmri-muted);
+}
+
+.lmri-error {
+  border-color: #7f1d1d;
+}
+
+.lmri-candidates {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lmri-candidate {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 8px 9px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--lmri-bg) 65%, transparent);
+  text-align: left;
+}
+
+.lmri-candidate span {
+  color: var(--lmri-muted);
+  font-size: 10px;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 360px) {
+  .lmri-actions {
+    grid-template-columns: 1fr;
+  }
+}

web/comfyui/lora_manager_sidebar.js

@@ -0,0 +1,697 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+
+import {
+  buildExternalLinks,
+  cleanLoraName,
+  extractLoraNames,
+  getSelectedGraphNodes,
+  loraSearchTerm,
+  matchModelItems,
+  normalizeLoraIdentifier,
+  normalizeUsageTips,
+} from "./lora_manager_sidebar_utils.js";
+
+const TAB_ID = "lm-remote-lora-info";
+const COMMAND_ID = "LMRemote.OpenLoraInfo";
+const AUTO_OPEN_SETTING = "LMRemote.LoraInfo.AutoOpen";
+const STYLE_ID = "lm-remote-lora-info-style";
+const NODE_SELECTION_HOOK = Symbol.for("lmRemote.loraInfo.nodeSelectionHook");
+const CANVAS_SELECTION_HOOK = Symbol.for("lmRemote.loraInfo.canvasSelectionHook");
+
+let sidebarRoot = null;
+let selectedNode = null;
+let selectedNames = [];
+let activeName = "";
+let selectionSignature = "";
+let lookupState = { status: "idle" };
+let lookupGeneration = 0;
+let lookupController = null;
+let monitorTimer = null;
+
+function createElement(tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text != null) element.textContent = String(text);
+  return element;
+}
+
+function ensureStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+  const link = document.createElement("link");
+  link.id = STYLE_ID;
+  link.rel = "stylesheet";
+  link.href = new URL("./lora_manager_sidebar.css", import.meta.url).href;
+  document.head.appendChild(link);
+}
+
+function selectedNodeLabel() {
+  if (!selectedNode) return "";
+  return (
+    selectedNode.title ||
+    selectedNode.comfyClass ||
+    selectedNode.type ||
+    `Node ${selectedNode.id ?? ""}`
+  );
+}
+
+function makeExternalLink(label, url, extraClass = "") {
+  const link = createElement(
+    "a",
+    `lmri-button lmri-link ${extraClass}`.trim(),
+    label
+  );
+  link.href = url;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  return link;
+}
+
+function managerSearchUrl(name) {
+  return `/loras?search=${encodeURIComponent(loraSearchTerm(name) || name)}`;
+}
+
+function safePreviewUrl(value) {
+  if (!value) return "";
+  try {
+    const parsed = new URL(String(value), window.location.origin);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.href;
+    }
+  } catch {
+    return "";
+  }
+  return "";
+}
+
+function toDisplayList(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item).trim()).filter(Boolean);
+  }
+  if (value && typeof value === "object") {
+    return Object.entries(value)
+      .filter(([, enabled]) => Boolean(enabled))
+      .map(([name]) => name);
+  }
+  return [];
+}
+
+function appendPills(container, values, className = "") {
+  const unique = Array.from(new Set(values.filter(Boolean)));
+  if (!unique.length) return;
+  const pills = createElement("div", `lmri-pills ${className}`.trim());
+  unique.forEach((value) => {
+    pills.appendChild(createElement("span", "lmri-pill", value));
+  });
+  container.appendChild(pills);
+}
+
+function appendMetaRow(container, label, value) {
+  if (value == null || value === "") return;
+  const row = createElement("div", "lmri-meta-row");
+  row.append(
+    createElement("span", "lmri-meta-label", label),
+    createElement("span", "lmri-meta-value", value)
+  );
+  container.appendChild(row);
+}
+
+function formatFileSize(value) {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let size = bytes;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit += 1;
+  }
+  return `${size.toFixed(unit > 1 ? 1 : 0)} ${units[unit]}`;
+}
+
+function appendSearchActions(container, query, model = null) {
+  const links = buildExternalLinks(query, model);
+  const actions = createElement("div", "lmri-actions");
+  actions.append(
+    makeExternalLink("Civitai", links.civitai, "lmri-civitai"),
+    makeExternalLink("Civitai Red", links.civitaiRed, "lmri-civitai-red"),
+    makeExternalLink("CivArchive", links.civArchive, "lmri-archive")
+  );
+  container.appendChild(actions);
+}
+
+function renderEmpty(content) {
+  const empty = createElement("div", "lmri-empty");
+  empty.append(
+    createElement("i", "pi pi-info-circle lmri-empty-icon"),
+    createElement("h3", "", "Select a LoRA loader"),
+    createElement(
+      "p",
+      "",
+      "Select any node with a LoRA name, LoRA stack, or <lora:name:strength> value."
+    )
+  );
+  content.appendChild(empty);
+}
+
+function renderLoading(content) {
+  const loading = createElement("div", "lmri-state");
+  loading.append(
+    createElement("i", "pi pi-spin pi-spinner"),
+    createElement("span", "", `Looking up ${activeName}…`)
+  );
+  content.appendChild(loading);
+}
+
+function renderMissing(content) {
+  const panel = createElement("section", "lmri-notice");
+  panel.append(
+    createElement("h3", "", "No LoRA Manager card found"),
+    createElement(
+      "p",
+      "",
+      `“${activeName}” is selected, but it is not indexed by the remote LoRA Manager.`
+    )
+  );
+  panel.appendChild(
+    makeExternalLink(
+      "Search LoRA Manager",
+      managerSearchUrl(activeName),
+      "lmri-manager"
+    )
+  );
+  appendSearchActions(panel, activeName);
+  content.appendChild(panel);
+}
+
+function renderError(content) {
+  const panel = createElement("section", "lmri-notice lmri-error");
+  panel.append(
+    createElement("h3", "", "LoRA Manager unavailable"),
+    createElement(
+      "p",
+      "",
+      lookupState.message || "The remote Manager did not answer this lookup."
+    )
+  );
+  const retry = createElement("button", "lmri-button", "Try again");
+  retry.type = "button";
+  retry.addEventListener("click", () => lookupActiveName());
+  panel.appendChild(retry);
+  appendSearchActions(panel, activeName);
+  content.appendChild(panel);
+}
+
+function useResolvedCandidate(model) {
+  lookupGeneration += 1;
+  lookupController?.abort();
+  lookupState = { status: "found", model };
+  renderSidebar();
+}
+
+function renderAmbiguous(content) {
+  const panel = createElement("section", "lmri-notice");
+  panel.append(
+    createElement("h3", "", "Choose the matching LoRA"),
+    createElement(
+      "p",
+      "",
+      "More than one Manager card has this filename. Pick the folder used by the node."
+    )
+  );
+
+  const candidates = createElement("div", "lmri-candidates");
+  (lookupState.candidates || []).forEach((model) => {
+    const button = createElement("button", "lmri-candidate");
+    button.type = "button";
+    const title = model.model_name || model.file_name || "Unnamed LoRA";
+    const path = [model.folder, model.file_name].filter(Boolean).join("/");
+    button.append(
+      createElement("strong", "", title),
+      createElement("span", "", path || model.file_path || "")
+    );
+    button.addEventListener("click", () => useResolvedCandidate(model));
+    candidates.appendChild(button);
+  });
+  panel.appendChild(candidates);
+  appendSearchActions(panel, activeName);
+  content.appendChild(panel);
+}
+
+function renderModelCard(content, model) {
+  const card = createElement("article", "lmri-card");
+  const previewUrl = safePreviewUrl(model.preview_url);
+  if (previewUrl) {
+    const preview = createElement("div", "lmri-preview");
+    const image = document.createElement("img");
+    image.src = previewUrl;
+    image.alt = `Preview for ${model.model_name || activeName}`;
+    image.loading = "lazy";
+    image.addEventListener("error", () => preview.remove());
+    preview.appendChild(image);
+    card.appendChild(preview);
+  }
+
+  const body = createElement("div", "lmri-card-body");
+  const heading = createElement("div", "lmri-card-heading");
+  const titleGroup = createElement("div", "");
+  titleGroup.append(
+    createElement("h2", "", model.model_name || model.file_name || activeName),
+    createElement(
+      "p",
+      "lmri-file-name",
+      [model.folder, model.file_name].filter(Boolean).join("/") ||
+        model.file_path ||
+        activeName
+    )
+  );
+  heading.appendChild(titleGroup);
+
+  const flags = createElement("div", "lmri-flags");
+  if (model.favorite) flags.appendChild(createElement("span", "", "★"));
+  if (model.update_available) {
+    flags.appendChild(createElement("span", "lmri-update", "Update"));
+  }
+  if (flags.childNodes.length) heading.appendChild(flags);
+  body.appendChild(heading);
+
+  const metadata = createElement("div", "lmri-metadata");
+  appendMetaRow(metadata, "Base model", model.base_model);
+  appendMetaRow(metadata, "Type", model.sub_type);
+  appendMetaRow(metadata, "Version", model.civitai?.name);
+  appendMetaRow(metadata, "Size", formatFileSize(model.file_size));
+  appendMetaRow(
+    metadata,
+    "Used",
+    Number.isFinite(Number(model.usage_count))
+      ? `${Number(model.usage_count)} times`
+      : ""
+  );
+  if (model.sha256) {
+    const hash = String(model.sha256);
+    appendMetaRow(metadata, "SHA256", hash.length > 16 ? `${hash.slice(0, 16)}…` : hash);
+    metadata.lastElementChild?.querySelector(".lmri-meta-value")?.setAttribute(
+      "title",
+      hash
+    );
+  }
+  body.appendChild(metadata);
+
+  const trainedWords = toDisplayList(model.civitai?.trainedWords);
+  if (trainedWords.length) {
+    body.appendChild(createElement("h3", "lmri-section-title", "Trigger words"));
+    appendPills(body, trainedWords, "lmri-triggers");
+  }
+
+  const tags = [
+    ...toDisplayList(model.tags),
+    ...toDisplayList(model.auto_tags),
+  ];
+  if (tags.length) {
+    body.appendChild(createElement("h3", "lmri-section-title", "Tags"));
+    appendPills(body, tags);
+  }
+
+  const usageTips = normalizeUsageTips(model.usage_tips);
+  if (usageTips.length) {
+    const section = createElement("section", "lmri-copy");
+    section.appendChild(createElement("h3", "", "Usage tips"));
+    const values = createElement("div", "lmri-metadata lmri-usage-tips");
+    usageTips.forEach((tip) => appendMetaRow(values, tip.label, tip.value));
+    section.appendChild(values);
+    body.appendChild(section);
+  }
+  if (model.notes) {
+    const section = createElement("section", "lmri-copy");
+    section.append(
+      createElement("h3", "", "Manager notes"),
+      createElement("p", "", model.notes)
+    );
+    body.appendChild(section);
+  }
+
+  const actions = createElement("div", "lmri-actions lmri-primary-actions");
+  actions.appendChild(
+    makeExternalLink(
+      "Open Manager card",
+      managerSearchUrl(model.file_name || activeName),
+      "lmri-manager"
+    )
+  );
+  body.appendChild(actions);
+  appendSearchActions(body, activeName, model);
+  card.appendChild(body);
+  content.appendChild(card);
+}
+
+function renderSidebar() {
+  if (!sidebarRoot) return;
+  sidebarRoot.replaceChildren();
+
+  const header = createElement("header", "lmri-header");
+  const heading = createElement("div", "");
+  heading.append(
+    createElement("h1", "", "LoRA Info"),
+    createElement("p", "", selectedNodeLabel() || "Selected node")
+  );
+  const refresh = createElement("button", "lmri-icon-button");
+  refresh.type = "button";
+  refresh.title = "Refresh LoRA Manager card";
+  refresh.setAttribute("aria-label", refresh.title);
+  refresh.appendChild(createElement("i", "pi pi-refresh"));
+  refresh.disabled = !activeName || lookupState.status === "loading";
+  refresh.addEventListener("click", () => lookupActiveName());
+  header.append(heading, refresh);
+  sidebarRoot.appendChild(header);
+
+  if (selectedNames.length > 1) {
+    const selector = createElement("div", "lmri-name-selector");
+    selectedNames.forEach((name) => {
+      const button = createElement(
+        "button",
+        normalizeLoraIdentifier(name) === normalizeLoraIdentifier(activeName)
+          ? "lmri-name active"
+          : "lmri-name",
+        loraSearchTerm(name) || name
+      );
+      button.type = "button";
+      button.title = name;
+      button.addEventListener("click", () => {
+        if (normalizeLoraIdentifier(name) === normalizeLoraIdentifier(activeName)) {
+          return;
+        }
+        activeName = name;
+        lookupActiveName();
+      });
+      selector.appendChild(button);
+    });
+    sidebarRoot.appendChild(selector);
+  }
+
+  const content = createElement("main", "lmri-content");
+  sidebarRoot.appendChild(content);
+  if (!activeName) {
+    renderEmpty(content);
+  } else if (lookupState.status === "loading") {
+    renderLoading(content);
+  } else if (lookupState.status === "found") {
+    renderModelCard(content, lookupState.model);
+  } else if (lookupState.status === "ambiguous") {
+    renderAmbiguous(content);
+  } else if (lookupState.status === "missing") {
+    renderMissing(content);
+  } else if (lookupState.status === "error") {
+    renderError(content);
+  } else {
+    renderLoading(content);
+  }
+}
+
+async function responseError(response) {
+  try {
+    const payload = await response.json();
+    return payload.error || `Request failed with HTTP ${response.status}`;
+  } catch {
+    return `Request failed with HTTP ${response.status}`;
+  }
+}
+
+async function fallbackListLookup(name, signal) {
+  const term = loraSearchTerm(name);
+  const params = new URLSearchParams({
+    page: "1",
+    page_size: "100",
+    search: term,
+    fuzzy_search: "true",
+  });
+  const response = await api.fetchApi(`/lm/loras/list?${params}`, { signal });
+  if (!response.ok) throw new Error(await responseError(response));
+  const payload = await response.json();
+  const result = matchModelItems(name, payload.items);
+  return {
+    success: true,
+    query: name,
+    ...result,
+  };
+}
+
+async function resolveManagerCard(name, signal) {
+  const response = await api.fetchApi(
+    `/lm/loras/resolve?name=${encodeURIComponent(name)}`,
+    { signal }
+  );
+  if (response.status === 404) {
+    return fallbackListLookup(name, signal);
+  }
+  if (!response.ok) throw new Error(await responseError(response));
+  const result = await response.json();
+  if (result?.success && !result.found && !result.ambiguous) {
+    try {
+      return await fallbackListLookup(name, signal);
+    } catch (error) {
+      if (error?.name === "AbortError") throw error;
+    }
+  }
+  return result;
+}
+
+async function lookupActiveName() {
+  const name = cleanLoraName(activeName);
+  if (!name) return;
+
+  const generation = ++lookupGeneration;
+  lookupController?.abort();
+  lookupController = new AbortController();
+  lookupState = { status: "loading" };
+  renderSidebar();
+
+  try {
+    const result = await resolveManagerCard(name, lookupController.signal);
+    if (generation !== lookupGeneration) return;
+
+    if (!result?.success) {
+      throw new Error(result?.error || "The Manager lookup failed.");
+    }
+    if (result.found && result.model) {
+      lookupState = { status: "found", model: result.model };
+    } else if (result.ambiguous && result.candidates?.length) {
+      lookupState = {
+        status: "ambiguous",
+        candidates: result.candidates,
+      };
+    } else {
+      lookupState = { status: "missing" };
+    }
+  } catch (error) {
+    if (error?.name === "AbortError" || generation !== lookupGeneration) return;
+    lookupState = {
+      status: "error",
+      message: error instanceof Error ? error.message : String(error),
+    };
+  }
+  renderSidebar();
+}
+
+function autoOpenEnabled() {
+  return app.extensionManager?.setting?.get?.(AUTO_OPEN_SETTING) !== false;
+}
+
+function unwrapValue(value) {
+  return value && typeof value === "object" && "value" in value
+    ? value.value
+    : value;
+}
+
+function activeSidebarId(manager, sidebar) {
+  return unwrapValue(
+    sidebar?.activeSidebarTabId ?? manager?.activeSidebarTabId
+  );
+}
+
+function openSidebarTab() {
+  const manager = app.extensionManager;
+  if (!manager) return false;
+  const sidebar = manager.sidebarTab || manager;
+  if (activeSidebarId(manager, sidebar) === TAB_ID) return true;
+
+  if (typeof manager.setActiveSidebarTab === "function") {
+    manager.setActiveSidebarTab(TAB_ID);
+    if (activeSidebarId(manager, sidebar) === TAB_ID) return true;
+  }
+
+  if (sidebar && "activeSidebarTabId" in sidebar) {
+    try {
+      const current = sidebar.activeSidebarTabId;
+      if (current && typeof current === "object" && "value" in current) {
+        current.value = TAB_ID;
+      } else {
+        sidebar.activeSidebarTabId = TAB_ID;
+      }
+    } catch {
+      // Some frontend versions expose a readonly store property.
+    }
+    if (activeSidebarId(manager, sidebar) === TAB_ID) return true;
+  }
+
+  if (typeof sidebar?.toggleSidebarTab === "function") {
+    sidebar.toggleSidebarTab(TAB_ID);
+    return true;
+  }
+  if (typeof manager.toggleSidebarTab === "function") {
+    manager.toggleSidebarTab(TAB_ID);
+    return true;
+  }
+  if (typeof manager.command?.execute === "function") {
+    manager.command.execute(`Workspace.ToggleSidebarTab.${TAB_ID}`);
+    return true;
+  }
+  return false;
+}
+
+function updateSelection({ autoOpen = false, force = false } = {}) {
+  const nodes = getSelectedGraphNodes(app.canvas);
+  const node = nodes.length === 1 ? nodes[0] : null;
+  const names = node ? extractLoraNames(node) : [];
+  const signature = `${node?.id ?? ""}|${names
+    .map(normalizeLoraIdentifier)
+    .join("|")}`;
+
+  if (!force && signature === selectionSignature) {
+    if (autoOpen && names.length && autoOpenEnabled()) openSidebarTab();
+    return;
+  }
+
+  selectionSignature = signature;
+  selectedNode = node;
+  selectedNames = names;
+  const currentStillExists = names.some(
+    (name) =>
+      normalizeLoraIdentifier(name) === normalizeLoraIdentifier(activeName)
+  );
+  activeName = currentStillExists ? activeName : names[0] || "";
+
+  lookupGeneration += 1;
+  lookupController?.abort();
+  lookupState = { status: activeName ? "loading" : "idle" };
+  renderSidebar();
+
+  if (activeName) {
+    if (autoOpen && autoOpenEnabled()) openSidebarTab();
+    lookupActiveName();
+  }
+}
+
+function chainCanvasSelection() {
+  const canvas = app.canvas;
+  if (!canvas || canvas[CANVAS_SELECTION_HOOK]) return;
+  canvas[CANVAS_SELECTION_HOOK] = true;
+
+  const previous = canvas.onSelectionChange;
+  canvas.onSelectionChange = function (...args) {
+    const result =
+      typeof previous === "function" ? previous.apply(this, args) : undefined;
+    queueMicrotask(() => updateSelection({ autoOpen: true }));
+    return result;
+  };
+}
+
+function chainNodeSelection(nodeType) {
+  const prototype = nodeType?.prototype;
+  if (!prototype || prototype[NODE_SELECTION_HOOK]) return;
+  prototype[NODE_SELECTION_HOOK] = true;
+
+  const previous = prototype.onSelected;
+  prototype.onSelected = function (...args) {
+    const result =
+      typeof previous === "function" ? previous.apply(this, args) : undefined;
+    queueMicrotask(() => updateSelection({ autoOpen: true }));
+    return result;
+  };
+}
+
+function registerSidebarTab() {
+  const manager = app.extensionManager;
+  const sidebar = manager?.sidebarTab;
+  const tabs =
+    sidebar?.sidebarTabs?.value ??
+    sidebar?.sidebarTabs ??
+    manager?.getSidebarTabs?.() ??
+    [];
+  if (Array.isArray(tabs) && tabs.some((tab) => tab.id === TAB_ID)) return;
+
+  const specification = {
+    id: TAB_ID,
+    icon: "pi pi-id-card",
+    title: "LoRA Info",
+    tooltip: "LoRA Manager card and Civitai links for the selected loader",
+    type: "custom",
+    render(container) {
+      ensureStyles();
+      container.style.height = "100%";
+      container.style.minHeight = "0";
+      sidebarRoot = createElement("div", "lmri-root");
+      container.replaceChildren(sidebarRoot);
+      renderSidebar();
+      updateSelection({ force: true });
+    },
+    destroy() {
+      lookupGeneration += 1;
+      lookupController?.abort();
+      sidebarRoot?.remove();
+      sidebarRoot = null;
+      lookupState = { status: "idle" };
+    },
+  };
+
+  if (typeof manager?.registerSidebarTab === "function") {
+    manager.registerSidebarTab(specification);
+  } else if (typeof sidebar?.registerSidebarTab === "function") {
+    sidebar.registerSidebarTab(specification);
+  } else {
+    console.error(
+      "[LM-Remote] This ComfyUI frontend does not support custom sidebar tabs."
+    );
+  }
+}
+
+app.registerExtension({
+  name: "LoraManager.RemoteLoraInfoSidebar",
+  settings: [
+    {
+      id: AUTO_OPEN_SETTING,
+      name: "Open LoRA Info when selecting a LoRA loader",
+      type: "boolean",
+      defaultValue: true,
+      category: ["LM Remote", "LoRA Info", "Auto-open"],
+    },
+  ],
+  commands: [
+    {
+      id: COMMAND_ID,
+      label: "Open LoRA Info",
+      icon: "pi pi-id-card",
+      function: () => {
+        updateSelection({ force: true });
+        openSidebarTab();
+      },
+    },
+  ],
+  getSelectionToolboxCommands(selectedItem) {
+    return extractLoraNames(selectedItem).length ? [COMMAND_ID] : [];
+  },
+  beforeRegisterNodeDef(nodeType) {
+    chainNodeSelection(nodeType);
+  },
+  setup() {
+    ensureStyles();
+    registerSidebarTab();
+    chainCanvasSelection();
+    updateSelection();
+    if (monitorTimer == null) {
+      monitorTimer = window.setInterval(() => {
+        chainCanvasSelection();
+        updateSelection();
+      }, 500);
+    }
+  },
+});

web/comfyui/lora_manager_sidebar_utils.js

@@ -0,0 +1,392 @@
+const WEIGHT_EXTENSION = /\.(?:safetensors|ckpt|pt|pth|bin)$/i;
+const LORA_SYNTAX = /<lora:([^:>]+)(?::[^>]*)?>/gi;
+const DISABLED_VALUES = new Set([
+  "",
+  "none",
+  "null",
+  "disabled",
+  "select a lora",
+  "select lora",
+]);
+
+export function cleanLoraName(value) {
+  if (typeof value !== "string") return "";
+
+  const trimmed = value.trim().replace(/^["']|["']$/g, "");
+  const exactSyntax = /^<lora:([^:>]+)(?::[^>]*)?>$/i.exec(trimmed);
+  const name = (exactSyntax?.[1] || trimmed)
+    .replace(/\\/g, "/")
+    .replace(/\/{2,}/g, "/")
+    .replace(/^\.\//, "")
+    .trim();
+
+  if (DISABLED_VALUES.has(name.toLowerCase())) return "";
+  return name;
+}
+
+export function normalizeLoraIdentifier(value) {
+  return cleanLoraName(value)
+    .replace(WEIGHT_EXTENSION, "")
+    .replace(/^\/+|\/+$/g, "")
+    .toLowerCase();
+}
+
+export function loraSearchTerm(value) {
+  const clean = cleanLoraName(value);
+  const basename = clean.replace(/\\/g, "/").split("/").pop() || clean;
+  return basename.replace(WEIGHT_EXTENSION, "").trim();
+}
+
+function formatUsageTipLabel(value) {
+  return String(value)
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .replace(/^./, (letter) => letter.toUpperCase());
+}
+
+function formatUsageTipValue(value) {
+  if (value == null) return "";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+export function normalizeUsageTips(value) {
+  let parsed = value;
+  if (typeof value === "string") {
+    const text = value.trim();
+    if (!text || text === "{}" || text === "[]" || text === "null") return [];
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return [{ label: "Note", value: text }];
+    }
+  }
+
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return [];
+  return Object.entries(parsed)
+    .map(([key, entry]) => ({
+      label: formatUsageTipLabel(key),
+      value: formatUsageTipValue(entry),
+    }))
+    .filter((entry) => entry.value !== "");
+}
+
+export function extractLoraSyntax(value) {
+  if (typeof value !== "string") return [];
+  const names = [];
+  LORA_SYNTAX.lastIndex = 0;
+  for (const match of value.matchAll(LORA_SYNTAX)) {
+    const name = cleanLoraName(match[1]);
+    if (name) names.push(name);
+  }
+  return names;
+}
+
+function isEnabledEntry(entry) {
+  if (!entry || typeof entry !== "object") return true;
+  return entry.active !== false && entry.enabled !== false && entry.on !== false;
+}
+
+function collectStructuredNames(value, output, allowObjectKeys = false) {
+  if (typeof value === "string") {
+    const syntaxNames = extractLoraSyntax(value);
+    if (syntaxNames.length) {
+      output.push(...syntaxNames);
+    } else {
+      const name = cleanLoraName(value);
+      if (name) output.push(name);
+    }
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collectStructuredNames(entry, output, true));
+    return;
+  }
+
+  if (!value || typeof value !== "object" || !isEnabledEntry(value)) return;
+
+  const namedValue =
+    value.name ??
+    value.lora_name ??
+    value.loraName ??
+    value.lora ??
+    value.path ??
+    value.file;
+  if (typeof namedValue === "string") {
+    collectStructuredNames(namedValue, output);
+    return;
+  }
+
+  const nested = value.loras ?? value.items ?? value.values;
+  if (Array.isArray(nested) || (nested && typeof nested === "object")) {
+    collectStructuredNames(nested, output, true);
+  }
+
+  if (!allowObjectKeys) return;
+  for (const [key, entry] of Object.entries(value)) {
+    if (WEIGHT_EXTENSION.test(key) && entry !== false && entry !== 0) {
+      collectStructuredNames(key, output);
+    }
+    if (!entry || typeof entry !== "object" || !isEnabledEntry(entry)) continue;
+    const entryName =
+      entry.name ??
+      entry.lora_name ??
+      entry.loraName ??
+      entry.lora ??
+      entry.path ??
+      entry.file;
+    if (typeof entryName === "string") {
+      collectStructuredNames(entryName, output);
+    } else if (WEIGHT_EXTENSION.test(key)) {
+      collectStructuredNames(key, output);
+    }
+  }
+}
+
+function normalizeWidgetName(name) {
+  return String(name || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
+}
+
+function loraSlotIndex(name) {
+  const normalized = normalizeWidgetName(name);
+  const patterns = [
+    /^lora_?(\d+)(?:_(?:name|path|file|text))?$/,
+    /^lora_(?:name|path|file)(?:_text)?_?(\d+)$/,
+  ];
+  for (const pattern of patterns) {
+    const match = pattern.exec(normalized);
+    if (match) return String(Number(match[1]));
+  }
+  return null;
+}
+
+function isLoraSelectorName(name) {
+  const normalized = normalizeWidgetName(name);
+  return (
+    /^(?:lora|loras|lora_name|lora_path|lora_file)$/.test(normalized) ||
+    loraSlotIndex(normalized) !== null ||
+    /^lora.*_(?:name|path|file)$/.test(normalized)
+  );
+}
+
+function isFalseLike(value) {
+  return (
+    value === false ||
+    value === 0 ||
+    ["0", "false", "off", "disabled", "no"].includes(
+      String(value || "").trim().toLowerCase()
+    )
+  );
+}
+
+function isLoraSlotEnabled(widgetName, widgetsByName) {
+  const slot = loraSlotIndex(widgetName);
+  if (slot === null) return true;
+  const companionNames = [
+    `enabled_${slot}`,
+    `enable_${slot}`,
+    `lora_enabled_${slot}`,
+    `lora_${slot}_enabled`,
+  ];
+  for (const name of companionNames) {
+    if (widgetsByName.has(name)) {
+      return !isFalseLike(widgetsByName.get(name)?.value);
+    }
+  }
+  return true;
+}
+
+function shouldReadLoraSlot(widgetName, widgetsByName) {
+  const slot = loraSlotIndex(widgetName);
+  if (slot === null) return true;
+
+  const count = Number(widgetsByName.get("lora_count")?.value);
+  if (Number.isFinite(count) && Number(slot) > count) return false;
+
+  const normalized = normalizeWidgetName(widgetName);
+  const inputMode = String(widgetsByName.get("input_mode")?.value || "")
+    .trim()
+    .toLowerCase();
+  const isTextSelector = normalized === `lora_name_text_${slot}`;
+  const isDropdownSelector = normalized === `lora_name_${slot}`;
+
+  if (inputMode === "text" && isDropdownSelector) {
+    return !widgetsByName.has(`lora_name_text_${slot}`);
+  }
+  if (inputMode && inputMode !== "text" && isTextSelector) {
+    return !widgetsByName.has(`lora_name_${slot}`);
+  }
+  return true;
+}
+
+export function extractLoraNames(node) {
+  if (!node || typeof node !== "object") return [];
+
+  const output = [];
+  const descriptor = [
+    node.comfyClass,
+    node.type,
+    node.title,
+    node.constructor?.comfyClass,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const isLoraNode = /lora/i.test(descriptor);
+
+  const hasManagerWidget = node.lorasWidget?.value != null;
+  if (hasManagerWidget) {
+    collectStructuredNames(node.lorasWidget.value, output, true);
+  }
+
+  const widgets = node.widgets || [];
+  const widgetsByName = new Map(
+    widgets.map((widget) => [normalizeWidgetName(widget?.name), widget])
+  );
+
+  for (const widget of hasManagerWidget ? [] : widgets) {
+    const widgetName = String(widget?.name || "");
+    const value = widget?.value;
+    const slotEnabled =
+      shouldReadLoraSlot(widgetName, widgetsByName) &&
+      isLoraSlotEnabled(widgetName, widgetsByName);
+    const syntaxNames = slotEnabled ? extractLoraSyntax(value) : [];
+    if (syntaxNames.length) output.push(...syntaxNames);
+
+    if (isLoraSelectorName(widgetName)) {
+      if (slotEnabled) collectStructuredNames(value, output, true);
+    } else if (
+      isLoraNode &&
+      /^(?:text|lora_syntax|lora_code)$/i.test(widgetName)
+    ) {
+      output.push(...syntaxNames);
+    } else if (
+      isLoraNode &&
+      typeof value === "string" &&
+      WEIGHT_EXTENSION.test(cleanLoraName(value))
+    ) {
+      collectStructuredNames(value, output);
+    }
+  }
+
+  const seen = new Set();
+  return output.filter((value) => {
+    const key = normalizeLoraIdentifier(value);
+    if (!key || seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+export function getSelectedGraphNodes(canvas) {
+  if (!canvas) return [];
+
+  const selectedItems = canvas.selectedItems;
+  if (selectedItems && typeof selectedItems.values === "function") {
+    return Array.from(selectedItems.values()).filter(
+      (item) => item && (item.widgets || item.comfyClass || item.type)
+    );
+  }
+
+  return Object.values(canvas.selected_nodes || {}).filter(Boolean);
+}
+
+function aliasesForModel(model) {
+  const fileName = cleanLoraName(model?.file_name || "");
+  const modelName = cleanLoraName(model?.model_name || "");
+  const folder = String(model?.folder || "")
+    .replace(/\\/g, "/")
+    .replace(/^\/+|\/+$/g, "");
+  const relativePath = folder && fileName ? `${folder}/${fileName}` : fileName;
+  const filePath = cleanLoraName(model?.file_path || "");
+
+  return {
+    fileName: normalizeLoraIdentifier(fileName),
+    modelName: normalizeLoraIdentifier(modelName),
+    relativePath: normalizeLoraIdentifier(relativePath),
+    filePath: normalizeLoraIdentifier(filePath),
+  };
+}
+
+function matchScore(query, model) {
+  const normalized = normalizeLoraIdentifier(query);
+  if (!normalized) return 0;
+
+  const basename = normalized.split("/").pop();
+  const hasPath = normalized.includes("/");
+  const aliases = aliasesForModel(model);
+
+  if (hasPath) {
+    if (aliases.relativePath === normalized) return 100;
+    if (
+      aliases.filePath === normalized ||
+      aliases.filePath.endsWith(`/${normalized}`)
+    ) {
+      return 95;
+    }
+    return 0;
+  }
+
+  if (aliases.fileName.split("/").pop() === basename) return 90;
+  if (aliases.modelName === normalized) return 85;
+  return 0;
+}
+
+export function matchModelItems(query, items) {
+  let bestScore = 0;
+  let candidates = [];
+
+  for (const item of Array.isArray(items) ? items : []) {
+    const score = matchScore(query, item);
+    if (!score) continue;
+    if (score > bestScore) {
+      bestScore = score;
+      candidates = [item];
+    } else if (score === bestScore) {
+      candidates.push(item);
+    }
+  }
+
+  return {
+    found: candidates.length === 1,
+    ambiguous: candidates.length > 1,
+    model: candidates.length === 1 ? candidates[0] : null,
+    candidates,
+  };
+}
+
+function exactCivitaiUrl(host, model) {
+  const modelId = model?.civitai?.modelId;
+  const versionId = model?.civitai?.id;
+  if (!modelId) return null;
+  const version = versionId
+    ? `?modelVersionId=${encodeURIComponent(String(versionId))}`
+    : "";
+  return `https://${host}/models/${encodeURIComponent(String(modelId))}${version}`;
+}
+
+export function buildExternalLinks(query, model = null) {
+  const term =
+    loraSearchTerm(model?.model_name || query) || loraSearchTerm(query);
+  const encodedTerm = encodeURIComponent(term);
+  const archiveTerm = String(model?.sha256 || term);
+
+  return {
+    civitai:
+      exactCivitaiUrl("civitai.com", model) ||
+      `https://civitai.com/search/models?query=${encodedTerm}`,
+    civitaiRed:
+      exactCivitaiUrl("civitai.red", model) ||
+      `https://civitai.red/search/models?query=${encodedTerm}`,
+    civArchive: `https://civarchive.com/search?q=${encodeURIComponent(archiveTerm)}`,
+  };
+}