fix: address promoted widget review feedback

- keep selected advanced widgets visible in app mode
- pin promoted slot metadata at its producer boundary
- simplify and clarify promoted visibility coverage

Author: jaeone94

src/components/builder/AppModeWidgetList.test.ts

@@ -0,0 +1,154 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import { fromAny } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { toNodeId } from '@/types/nodeId'
+import type { WidgetId } from '@/types/widgetId'
+
+import AppModeWidgetList from './AppModeWidgetList.vue'
+
+const mocks = vi.hoisted(() => ({
+  extractVueNodeData: vi.fn(),
+  resolvedInputs: { value: [] as unknown[] }
+}))
+
+vi.mock('@/components/builder/useResolvedSelectedInputs', () => ({
+  useResolvedSelectedInputs: () => mocks.resolvedInputs
+}))
+
+vi.mock('@/composables/graph/useGraphNodeManager', () => ({
+  extractVueNodeData: mocks.extractVueNodeData
+}))
+
+vi.mock('@/composables/maskeditor/useMaskEditor', () => ({
+  useMaskEditor: () => ({ openMaskEditor: vi.fn() })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    canvas: { graph: { rootGraph: { id: 'graph-test' } } }
+  })
+}))
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers',
+  () => ({
+    useNodeEventHandlers: () => ({ handleNodeRightClick: vi.fn() })
+  })
+)
+
+vi.mock('@/renderer/extensions/vueNodes/composables/useNodeTooltips', () => ({
+  useNodeTooltips: () => ({
+    createTooltipConfig: () => ({}),
+    getWidgetTooltip: () => ''
+  })
+}))
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry',
+  () => ({
+    getComponent: () => ({
+      props: ['widget'],
+      template: '<div data-testid="advanced-widget-control" />'
+    }),
+    shouldExpand: () => false,
+    shouldRenderAsVue: () => true
+  })
+)
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    isGraphReady: false,
+    rootGraph: { id: 'graph-test' }
+  }
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { remove: 'Remove', rename: 'Rename' }
+    }
+  }
+})
+
+describe('AppModeWidgetList', () => {
+  beforeEach(() => {
+    const widgetId = 'graph-test:1:max_shift' as WidgetId
+    const widget = fromAny<IBaseWidget, unknown>({
+      label: 'Max shift',
+      name: 'max_shift',
+      widgetId
+    })
+    const node = fromAny<LGraphNode, unknown>({
+      id: toNodeId(1),
+      mode: LGraphEventMode.ALWAYS,
+      title: 'Subgraph',
+      type: 'SubgraphNode'
+    })
+    const nodeData: VueNodeData = {
+      executing: false,
+      id: toNodeId(1),
+      inputs: [],
+      mode: LGraphEventMode.ALWAYS,
+      outputs: [],
+      selected: false,
+      title: 'Subgraph',
+      type: 'SubgraphNode',
+      widgets: [
+        {
+          name: 'max_shift',
+          options: { advanced: true },
+          slotMetadata: {
+            index: 0,
+            linked: false,
+            promoted: true,
+            type: 'FLOAT'
+          },
+          type: 'number',
+          widgetId
+        }
+      ]
+    }
+
+    mocks.resolvedInputs.value = [
+      {
+        displayName: 'max_shift',
+        node,
+        status: 'resolved',
+        widget,
+        widgetId
+      }
+    ]
+    mocks.extractVueNodeData.mockReturnValue(nodeData)
+  })
+
+  it('renders a selected promoted advanced widget', () => {
+    const pinia = createTestingPinia({ stubActions: false })
+    setActivePinia(pinia)
+
+    render(AppModeWidgetList, {
+      global: {
+        directives: { tooltip: { mounted: () => {} } },
+        plugins: [pinia, i18n],
+        stubs: {
+          Button: { template: '<button><slot /></button>' },
+          DropZone: { template: '<div><slot /></div>' },
+          InputSlot: true,
+          Popover: { template: '<div><slot name="button" /></div>' },
+          WidgetDescription: true
+        }
+      }
+    })
+
+    expect(screen.getByTestId('advanced-widget-control')).toBeVisible()
+  })
+})

src/components/builder/AppModeWidgetList.vue

@@ -87,6 +87,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
         description: config?.description,
         nodeData: {
           ...fullNodeData,
+          showAdvanced: true,
           widgets: [matchingWidget]
         },
         action: { widget, node }

src/composables/graph/useGraphNodeManager.test.ts

@@ -112,7 +112,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     return { graph, node, upstream, linkId: link.id }
   }
 
-  it('sets slotMetadata.linked to true when input has a link', () => {
+  it('identifies a linked regular widget input as unpromoted', () => {
     const { graph, node } = createWidgetInputGraph()
     const { vueNodeData } = useGraphNodeManager(graph)
 
@@ -121,6 +121,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
 
     expect(widgetData?.slotMetadata).toBeDefined()
     expect(widgetData?.slotMetadata?.linked).toBe(true)
+    expect(widgetData?.slotMetadata?.promoted).toBe(false)
   })
 
   it('updates slotMetadata.linked to false after link disconnect event', async () => {
@@ -236,6 +237,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     expect(widgetData).toBeDefined()
     expect(widgetData?.sourceWidgetName).toBe('prompt')
     expect(widgetData?.slotMetadata).toBeDefined()
+    expect(widgetData?.slotMetadata?.promoted).toBe(true)
   })
 
   it('clears stale slotMetadata when input no longer matches widget', async () => {

src/renderer/extensions/vueNodes/composables/useProcessedWidgets.test.ts

@@ -4,15 +4,9 @@ import { setActivePinia } from 'pinia'
 import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
-import {
-  createTestSubgraph,
-  createTestSubgraphNode
-} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import {
@@ -24,8 +18,6 @@ import { widgetId } from '@/types/widgetId'
 import type * as GraphTraversalUtil from '@/utils/graphTraversalUtil'
 
 import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
-import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
 import {
   computeProcessedWidgets,
   getWidgetIdentity,
@@ -173,11 +165,11 @@ describe('isWidgetVisible', () => {
     expect(isWidgetVisible({ advanced: true }, true)).toBe(true)
   })
 
-  it('keeps advanced widgets visible when linked and showAdvanced is false', () => {
+  it('keeps advanced widgets visible when advanced filtering is ignored', () => {
     expect(isWidgetVisible({ advanced: true }, false, true)).toBe(true)
   })
 
-  it('keeps hidden widgets hidden when linked', () => {
+  it('keeps hidden widgets hidden when advanced filtering is ignored', () => {
     expect(isWidgetVisible({ hidden: true }, false, true)).toBe(false)
   })
 })
@@ -422,58 +414,24 @@ describe('computeProcessedWidgets visibility', () => {
   })
 
   it('keeps a promoted advanced widget visible without source metadata', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
-    subgraph.rootGraph.add(subgraphNode)
-
-    const interiorNode = new LGraphNode('ModelSamplingFlux')
-    const interiorInput = interiorNode.addInput('max_shift', 'FLOAT')
-    const interiorWidget = interiorNode.addWidget(
-      'number',
-      'max_shift',
-      1,
-      () => {},
-      { advanced: true }
-    )
-    interiorInput.widget = { name: interiorWidget.name }
-    subgraph.add(interiorNode)
+    const widget = createMockWidget({
+      name: 'max_shift',
+      type: 'number',
+      options: { advanced: true },
+      slotMetadata: {
+        index: 0,
+        linked: false,
+        promoted: true,
+        type: 'FLOAT'
+      },
+      sourceExecutionId: undefined,
+      sourceWidgetName: undefined
+    })
 
-    const promotion = promoteValueWidgetViaSubgraphInput(
-      subgraphNode,
-      interiorNode,
-      interiorWidget
-    )
-    expect(promotion.ok).toBe(true)
-
-    const rootGraphSpy = vi
-      .spyOn(app, 'rootGraph', 'get')
-      .mockReturnValue(subgraph.rootGraph)
-    try {
-      const nodeData = extractVueNodeData(subgraphNode)
-      const processedWidgets = computeProcessedWidgets({
-        nodeData: {
-          ...nodeData,
-          widgets: nodeData.widgets?.map((widget) => ({
-            ...widget,
-            sourceExecutionId: undefined,
-            sourceWidgetName: undefined
-          }))
-        },
-        graphId: subgraph.rootGraph.id,
-        showAdvanced: false,
-        isGraphReady: false,
-        rootGraph: null,
-        ui: noopUi
-      })
-      const promotedWidget = processedWidgets.find(
-        (widget) => widget.name === 'max_shift'
-      )
+    const promotedWidget = processWidgets([widget])[0]
 
-      expect(promotedWidget).toBeDefined()
-      expect(promotedWidget?.visible).toBe(true)
-    } finally {
-      rootGraphSpy.mockRestore()
-    }
+    expect(promotedWidget).toBeDefined()
+    expect(promotedWidget?.visible).toBe(true)
   })
 })