fix(widgets): persist LoRA entry selection and active tab across save/load

vue-widgets/src/components/LoraInfoWidget.vue

@@ -97,6 +97,12 @@ interface LoraInfoWidget {
   value?: unknown
   onSetValue?: (v: unknown) => void
   callback?: unknown
+  options?: {
+    getValue?: () => LoraInfoWidgetValue
+    setValue?: (v: unknown) => void
+  }
+  node?: { widgets?: Array<{ id?: string }>; widgets_values?: Array<unknown> }
+  id?: string
   _setLoraInfo?: (data: { name: string; notes: string; filePath: string; activeTab?: string } | null) => void
   __pendingLoraInfo?: { name: string; notes: string; filePath: string; activeTab?: string } | null
 }
@@ -267,38 +273,59 @@ function onWheel(event: WheelEvent) {
 }
 
 onMounted(() => {
-  // Persist tab state along with other widget data
-  props.widget.serializeValue = async (): Promise<LoraInfoWidgetValue> => ({
+  // Build current state snapshot for serialization
+  const buildValue = (): LoraInfoWidgetValue => ({
     name: loraName.value,
     notes: notes.value,
     filePath: filePath.value,
     activeTab: activeTab.value,
   })
 
-  // Handle external value updates (e.g., loading workflow, paste)
-  props.widget.onSetValue = (v: unknown) => {
+  // Set value from external source (workflow load, paste, etc.)
+  const applyValue = (v: unknown) => {
     if (v && typeof v === 'object') {
       const data = v as LoraInfoWidgetValue
+      // Set activeTab before filePath so the filePath watcher sees the correct tab
+      // and triggers fetchDescription() when restoring description tab
+      if (data.activeTab !== undefined) activeTab.value = data.activeTab
       if (data.name !== undefined) loraName.value = data.name
       if (data.notes !== undefined) {
         notes.value = data.notes
         originalNotes.value = data.notes
       }
       if (data.filePath !== undefined) filePath.value = data.filePath
-      if (data.activeTab !== undefined) activeTab.value = data.activeTab
     }
   }
 
-  // Restore from saved value if exists (for workflow loading)
-  if (props.widget.value && typeof props.widget.value === 'object') {
-    const data = props.widget.value as LoraInfoWidgetValue
-    if (data.name !== undefined) loraName.value = data.name
-    if (data.notes !== undefined) {
-      notes.value = data.notes
-      originalNotes.value = data.notes
+  // ComponentWidgetImpl.value getter/setter delegates to options.getValue/options.setValue.
+  // These must be set for workflow JSON persistence (LGraphNode.serialize/configure) to work.
+  props.widget.options.getValue = buildValue
+  props.widget.options.setValue = applyValue
+
+  // Also set serializeValue for prompt/API serialization path (executionUtil.ts)
+  props.widget.serializeValue = async () => buildValue()
+
+  // Handle external value updates (e.g., loading workflow, paste)
+  props.widget.onSetValue = applyValue
+
+  // Restore from saved value. Because configure() may call widget.value = data
+  // before onMounted fires (and before options.setValue is assigned), we check
+  // widgets_values directly in case the value was already pushed.
+  const widgetIndex = props.widget.node?.widgets?.findIndex(
+    (w: { id?: string }) => w.id === props.widget.id
+  )
+  let restored = false
+  if (widgetIndex !== undefined && widgetIndex >= 0) {
+    const savedValue = props.widget.node?.widgets_values?.[widgetIndex]
+    if (savedValue && typeof savedValue === 'object') {
+      applyValue(savedValue)
+      restored = true
     }
-    if (data.filePath !== undefined) filePath.value = data.filePath
-    if (data.activeTab !== undefined) activeTab.value = data.activeTab
+  }
+  // Fallback: if configure() ran after onMounted, widget.value (via options.getValue)
+  // already has the saved data. Only use this path if the widgets_values lookup didn't restore.
+  if (!restored && props.widget.value && typeof props.widget.value === 'object') {
+    applyValue(props.widget.value)
   }
 
   // Expose setLoraInfo on the widget object for external callers (e.g., lora_info.js).

web/comfyui/loras_widget.js

@@ -711,7 +711,11 @@ export function addLorasWidget(node, name, opts, callback) {
   // Create widget with new DOM Widget API
   const widget = node.addDOMWidget(name, "custom", container, {
     getValue: function() {
-      return widgetValue;
+      return widgetValue.map(lora => {
+        const entry = { ...lora };
+        entry.selected = lora.name === selectedLora;
+        return entry;
+      });
     },
     setValue: function(v) {
       // Remove duplicates by keeping the last occurrence of each lora name
@@ -738,6 +742,15 @@ export function addLorasWidget(node, name, opts, callback) {
       });
 
       widgetValue = updatedValue;
+
+      // Restore selection state when loading a saved workflow
+      if (!selectedLora) {
+        const selectedEntry = updatedValue.find(lora => lora.selected);
+        if (selectedEntry) {
+          selectedLora = selectedEntry.name;
+        }
+      }
+
       renderLoras(widgetValue, widget);
     },
     hideOnZoom: true,

web/comfyui/utils.js

@@ -438,6 +438,7 @@ export function mergeLoras(lorasText, lorasArr) {
         active: lora.active !== undefined ? lora.active : true,
         expanded: lora.expanded !== undefined ? lora.expanded : false,
         clipStrength: lora.clipStrength !== undefined ? lora.clipStrength : parsedLoras[lora.name].clipStrength,
+        selected: !!lora.selected,
       });
       usedNames.add(lora.name);
     }
@@ -451,6 +452,7 @@ export function mergeLoras(lorasText, lorasArr) {
         strength: parsedLoras[name].strength,
         active: true,
         clipStrength: parsedLoras[name].clipStrength,
+        selected: false,
       });
     }
   }

web/comfyui/vue-widgets/lora-manager-widgets.js

@@ -2224,7 +2224,7 @@ to { transform: rotate(360deg);
   resize: vertical !important;
 }
 
-.lora-info-widget[data-v-a65e9027] {
+.lora-info-widget[data-v-41af3987] {
   padding: 12px;
   background: rgba(40, 44, 52, 0.6);
   border-radius: 4px;
@@ -2240,45 +2240,45 @@ to { transform: rotate(360deg);
    determined solely by CSS — not by descendant content. This breaks the
    feedback loop where content grows → ResizeObserver resizes → content
    reflows → repeat. Same technique used by tags_widget.js + lm_styles.css. */
-.lora-info-widget.lm-vue-node[data-v-a65e9027] {
+.lora-info-widget.lm-vue-node[data-v-41af3987] {
   contain: layout size;
 }
 
 /* ── Tab bar ── */
-.lora-info-tabs[data-v-a65e9027] {
+.lora-info-tabs[data-v-41af3987] {
   display: flex;
   gap: 0;
   margin-bottom: 10px;
   border-bottom: 1px solid var(--border-color, #444);
   flex-shrink: 0;
 }
-.lora-info-tab[data-v-a65e9027] {
+.lora-info-tab[data-v-41af3987] {
   flex: 1;
   text-align: center;
   cursor: pointer;
   padding: 6px 0;
   position: relative;
 }
-.lora-info-tab-input[data-v-a65e9027] {
+.lora-info-tab-input[data-v-41af3987] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }
-.lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab-label[data-v-41af3987] {
   font-size: 12px;
   font-weight: 500;
   color: var(--fg-color, #fff);
   opacity: 0.5;
   transition: opacity 0.15s;
 }
-.lora-info-tab:hover .lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab:hover .lora-info-tab-label[data-v-41af3987] {
   opacity: 0.75;
 }
-.lora-info-tab.active .lora-info-tab-label[data-v-a65e9027] {
+.lora-info-tab.active .lora-info-tab-label[data-v-41af3987] {
   opacity: 1;
 }
-.lora-info-tab.active[data-v-a65e9027]::after {
+.lora-info-tab.active[data-v-41af3987]::after {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -2290,16 +2290,16 @@ to { transform: rotate(360deg);
 }
 
 /* ── Tab content ── */
-.tab-content[data-v-a65e9027] {
+.tab-content[data-v-41af3987] {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
-.notes-tab[data-v-a65e9027] {
+.notes-tab[data-v-41af3987] {
   display: flex;
   flex-direction: column;
 }
-.description-tab[data-v-a65e9027] {
+.description-tab[data-v-41af3987] {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -2307,12 +2307,12 @@ to { transform: rotate(360deg);
 }
 
 /* ── Info fields (shared) ── */
-.info-field[data-v-a65e9027] {
+.info-field[data-v-41af3987] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.info-label[data-v-a65e9027] {
+.info-label[data-v-41af3987] {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -2320,18 +2320,18 @@ to { transform: rotate(360deg);
   color: var(--fg-color, #fff);
   opacity: 0.6;
 }
-.lora-filename[data-v-a65e9027] {
+.lora-filename[data-v-41af3987] {
   font-size: 13px;
   font-weight: 500;
   color: var(--fg-color, #fff);
   word-break: break-all;
   margin-bottom: 8px;
 }
-.notes-field[data-v-a65e9027] {
+.notes-field[data-v-41af3987] {
   flex: 1;
   min-height: 0;
 }
-.lora-notes[data-v-a65e9027] {
+.lora-notes[data-v-41af3987] {
   width: 100%;
   flex: 1;
   min-height: 60px;
@@ -2346,14 +2346,14 @@ to { transform: rotate(360deg);
   font-family: inherit;
   outline: none;
 }
-.lora-notes[data-v-a65e9027]:focus {
+.lora-notes[data-v-41af3987]:focus {
   border-color: var(--comfy-input-border, #444);
 }
-.lora-notes[data-v-a65e9027]:disabled {
+.lora-notes[data-v-41af3987]:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
-.save-btn[data-v-a65e9027] {
+.save-btn[data-v-41af3987] {
   width: 100%;
   margin-top: 8px;
   padding: 6px 12px;
@@ -2367,11 +2367,11 @@ to { transform: rotate(360deg);
   box-sizing: border-box;
   flex-shrink: 0;
 }
-.save-btn[data-v-a65e9027]:hover:not(:disabled) {
+.save-btn[data-v-41af3987]:hover:not(:disabled) {
   background: rgba(66, 153, 225, 0.25);
   border-color: rgba(66, 153, 225, 0.6);
 }
-.save-btn[data-v-a65e9027]:disabled {
+.save-btn[data-v-41af3987]:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   background: rgba(66, 153, 225, 0.05);
@@ -2379,7 +2379,7 @@ to { transform: rotate(360deg);
 }
 
 /* ── Description states ── */
-.description-state[data-v-a65e9027] {
+.description-state[data-v-41af3987] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2391,22 +2391,22 @@ to { transform: rotate(360deg);
   min-height: 0;
   flex-shrink: 0;
 }
-.description-state.error[data-v-a65e9027] {
+.description-state.error[data-v-41af3987] {
   opacity: 0.7;
   color: #f87171;
 }
 
 /* ── Description content ── */
-.description-content[data-v-a65e9027] {
+.description-content[data-v-41af3987] {
   min-height: 0;
 }
-.description-section[data-v-a65e9027] {
+.description-section[data-v-41af3987] {
   margin-bottom: 14px;
 }
-.description-section[data-v-a65e9027]:last-child {
+.description-section[data-v-41af3987]:last-child {
   margin-bottom: 0;
 }
-.description-text[data-v-a65e9027] {
+.description-text[data-v-41af3987] {
   padding: 8px 0;
   font-size: 12px;
   line-height: 1.5;
@@ -2414,41 +2414,41 @@ to { transform: rotate(360deg);
   opacity: 0.85;
   word-break: break-word;
 }
-.description-text[data-v-a65e9027] p {
+.description-text[data-v-41af3987] p {
   margin: 0 0 8px 0;
 }
-.description-text[data-v-a65e9027] p:last-child {
+.description-text[data-v-41af3987] p:last-child {
   margin-bottom: 0;
 }
-.description-text[data-v-a65e9027] a {
+.description-text[data-v-41af3987] a {
   color: rgba(66, 153, 225, 0.9);
 }
-.description-text[data-v-a65e9027] ul,
-.description-text[data-v-a65e9027] ol {
+.description-text[data-v-41af3987] ul,
+.description-text[data-v-41af3987] ol {
   padding-left: 20px;
   margin: 4px 0;
 }
-.description-text[data-v-a65e9027] h1,
-.description-text[data-v-a65e9027] h2,
-.description-text[data-v-a65e9027] h3 {
+.description-text[data-v-41af3987] h1,
+.description-text[data-v-41af3987] h2,
+.description-text[data-v-41af3987] h3 {
   font-size: 13px;
   margin: 10px 0 4px 0;
   font-weight: 600;
   opacity: 0.95;
 }
-.description-text[data-v-a65e9027] code {
+.description-text[data-v-41af3987] code {
   background: rgba(255, 255, 255, 0.08);
   padding: 1px 4px;
   border-radius: 3px;
   font-size: 11px;
 }
-.description-text[data-v-a65e9027] img {
+.description-text[data-v-41af3987] img {
   max-width: 100%;
   border-radius: 4px;
 }
 
 /* ── Placeholder (shared) ── */
-.placeholder[data-v-a65e9027] {
+.placeholder[data-v-41af3987] {
   font-style: italic;
   color: rgba(226, 232, 240, 0.5);
   text-align: center;
@@ -2457,10 +2457,10 @@ to { transform: rotate(360deg);
 }
 
 /* ── Spinner (Font Awesome) ── */
-.fa-spinner[data-v-a65e9027] {
-  animation: fa-spin-a65e9027 1s linear infinite;
+.fa-spinner[data-v-41af3987] {
+  animation: fa-spin-41af3987 1s linear infinite;
 }
-@keyframes fa-spin-a65e9027 {
+@keyframes fa-spin-41af3987 {
 0% { transform: rotate(0deg);
 }
 100% { transform: rotate(360deg);
@@ -15484,33 +15484,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       comfyApp.canvas.processMouseWheel(event);
     }
     onMounted(() => {
-      props.widget.serializeValue = async () => ({
+      var _a2, _b, _c, _d;
+      const buildValue = () => ({
         name: loraName.value,
         notes: notes.value,
         filePath: filePath.value,
         activeTab: activeTab.value
       });
-      props.widget.onSetValue = (v2) => {
+      const applyValue = (v2) => {
         if (v2 && typeof v2 === "object") {
           const data = v2;
+          if (data.activeTab !== void 0) activeTab.value = data.activeTab;
           if (data.name !== void 0) loraName.value = data.name;
           if (data.notes !== void 0) {
             notes.value = data.notes;
             originalNotes.value = data.notes;
           }
           if (data.filePath !== void 0) filePath.value = data.filePath;
-          if (data.activeTab !== void 0) activeTab.value = data.activeTab;
         }
       };
-      if (props.widget.value && typeof props.widget.value === "object") {
-        const data = props.widget.value;
-        if (data.name !== void 0) loraName.value = data.name;
-        if (data.notes !== void 0) {
-          notes.value = data.notes;
-          originalNotes.value = data.notes;
+      props.widget.options.getValue = buildValue;
+      props.widget.options.setValue = applyValue;
+      props.widget.serializeValue = async () => buildValue();
+      props.widget.onSetValue = applyValue;
+      const widgetIndex = (_b = (_a2 = props.widget.node) == null ? void 0 : _a2.widgets) == null ? void 0 : _b.findIndex(
+        (w2) => w2.id === props.widget.id
+      );
+      let restored = false;
+      if (widgetIndex !== void 0 && widgetIndex >= 0) {
+        const savedValue = (_d = (_c = props.widget.node) == null ? void 0 : _c.widgets_values) == null ? void 0 : _d[widgetIndex];
+        if (savedValue && typeof savedValue === "object") {
+          applyValue(savedValue);
+          restored = true;
         }
-        if (data.filePath !== void 0) filePath.value = data.filePath;
-        if (data.activeTab !== void 0) activeTab.value = data.activeTab;
+      }
+      if (!restored && props.widget.value && typeof props.widget.value === "object") {
+        applyValue(props.widget.value);
       }
       props.widget._setLoraInfo = (data) => {
         if (data) {
@@ -15624,7 +15633,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a65e9027"]]);
+const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41af3987"]]);
 function createVueWidgetCleanup(vueApp, onCleanup) {
   let didUnmount = false;
   return () => {