feat: right side panel favorites, no selection state, and more... (#7812)

Most of the features in this pull request are completed and can be reviewed and merged. ## TODO - [x] no selection panel - [x] group selected panel - [x] tabs - [x] favorites tab - [x] global settings tab - [x] nodes tab - [x] widget actions menu - [x] [Bug]: style bugs - [x] button zoom to the node on canvas. - [x] rename widgets on widget actions - [ ] [Bug]: the canvas has not been updated after renaming. - [x] global settings - [ ] setting item: "show advanced parameters" - blocked by other things. skip for now. - [x] setting item: show toolbox on selection - [x] setting item: nodes 2.0 - [ ] setting item: "background color" - blocked by other things. skip for now. - [x] setting item: grid spacing - [x] setting item: snap nodes to grid - [x] setting item: link shape - [x] setting item: show connected links - [x] form style reuses the form style of node widgets - [x] group node cases - [x] group node settings - [x] show all nodes in group - [x] show frame name on nodes when multiple selections are made - [x] group multiple selections - [x] [Bug]: nodes without widgets cannot display the location and their group - [x] [Bug]: labels layout - [x] favorites - [x] the indicator on widgets - [x] favorite and unfavorite buttons on widgets - [x] [Bug]: show node name in favorite widgets + improve labels layout - [ ] [Bug]: After canceling the like, the like list will not be updated immediately. - [x] [Bug]: The favorite function does not work for the project on Subgraph. - [x] subgraph - [x] add the node name from where this parameter comes from when node is subgraph - [x] show and hide directly on Inputs - [x] some bugs need to be fixed. - [x] advanced widgets - [x] button: show advanced inputs - Clicking button expands the "Advanced Inputs" section on the right side panel, regardless of whether the panel is open or not - [x] [Bug]: style bugs - [x] advanced inputs section when node is subgraph - [x] inputs tab rearranging - [x] favorited inputs rearranging - [x] subgraph inputs rearranging - [ ] review and reconstruction to improve complexity and architecture ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7812-feat-right-side-panel-favorites-no-selection-state-and-more-2da6d73d36508134b503d676f9b3d248) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: bymyself <cbyrne@comfy.org>
2026-01-26 19:09:52 +00:00 · 2026-01-14 10:37:17 +07:00
parent 069e94b325
commit b1b2fd8a4f
44 changed files with 3352 additions and 571 deletions
--- a/browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
+++ b/browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
@@ -8,13 +8,11 @@ test.describe('Properties panel', () => {

    const { propertiesPanel } = comfyPage.menu

-    await expect(propertiesPanel.panelTitle).toContainText(
-      'No node(s) selected'
-    )
+    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')

    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])

-    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
    await expect(
      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
--- a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
+++ b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
--- a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
+++ b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
--- a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
+++ b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1 +1,21 @@
@import '@comfyorg/design-system/css/style.css';
+
+@media (prefers-reduced-motion: no-preference) {
+  /* List transition animations */
+  .list-scale-move,
+  .list-scale-enter-active,
+  .list-scale-leave-active {
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  .list-scale-enter-from,
+  .list-scale-leave-to {
+    opacity: 0;
+    transform: scale(70%);
+  }
+
+  .list-scale-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
+    <Button
+      size="icon"
+      variant="secondary"
+      v-bind="$attrs"
+      @click="popover?.toggle"
+    >
      <i
        :class="
          cn(
@@ -60,6 +65,10 @@ import { ref } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'

+defineOptions({
+  inheritAttrs: false
+})
+
 interface MoreButtonProps {
  isVertical?: boolean
 }
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -1,32 +1,41 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, ref, toValue, watchEffect } from 'vue'
+import { computed, provide, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'

 import EditableText from '@/components/common/EditableText.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
-import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'

 import TabInfo from './info/TabInfo.vue'
-import TabParameters from './parameters/TabParameters.vue'
+import TabGlobalParameters from './parameters/TabGlobalParameters.vue'
+import TabNodes from './parameters/TabNodes.vue'
+import TabNormalInputs from './parameters/TabNormalInputs.vue'
+import TabSubgraphInputs from './parameters/TabSubgraphInputs.vue'
+import TabGlobalSettings from './settings/TabGlobalSettings.vue'
 import TabSettings from './settings/TabSettings.vue'
+import {
+  GetNodeParentGroupKey,
+  useFlatAndCategorizeSelectedItems
+} from './shared'
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'

 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const { findParentGroup } = useGraphHierarchy()

-const { selectedItems } = storeToRefs(canvasStore)
+const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
 const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)

 const sidebarLocation = computed<'left' | 'right'>(() =>
@@ -40,29 +49,31 @@ const panelIcon = computed(() =>
    : 'icon-[lucide--panel-right]'
 )

-const hasSelection = computed(() => selectedItems.value.length > 0)
+const { flattedItems, selectedNodes, selectedGroups, nodeToParentGroup } =
+  useFlatAndCategorizeSelectedItems(directlySelectedItems)

-const selectedNodes = computed((): LGraphNode[] => {
-  return selectedItems.value.filter(isLGraphNode)
+const shouldShowGroupNames = computed(() => {
+  return !(
+    directlySelectedItems.value.length === 1 &&
+    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
+  )
 })

-const isSubgraphNode = computed(() => {
-  return selectedNode.value instanceof SubgraphNode
+provide(GetNodeParentGroupKey, (node: LGraphNode) => {
+  if (!shouldShowGroupNames.value) return null
+  return nodeToParentGroup.value.get(node) ?? findParentGroup(node)
 })

-const isSingleNodeSelected = computed(() => selectedNodes.value.length === 1)
+const hasSelection = computed(() => flattedItems.value.length > 0)

-const selectedNode = computed(() => {
-  return isSingleNodeSelected.value ? selectedNodes.value[0] : null
+const selectedSingleNode = computed(() => {
+  return selectedNodes.value.length === 1 && flattedItems.value.length === 1
+    ? selectedNodes.value[0]
+    : null
 })

-const selectionCount = computed(() => selectedItems.value.length)
-
-const panelTitle = computed(() => {
-  if (isSingleNodeSelected.value && selectedNode.value) {
-    return selectedNode.value.title || selectedNode.value.type || 'Node'
-  }
-  return t('rightSidePanel.title', { count: selectionCount.value })
+const isSingleSubgraphNode = computed(() => {
+  return selectedSingleNode.value instanceof SubgraphNode
 })

 function closePanel() {
@@ -75,25 +86,40 @@ type RightSidePanelTabList = Array<{
 }>

 const tabs = computed<RightSidePanelTabList>(() => {
-  const list: RightSidePanelTabList = [
-    {
-      label: () => t('rightSidePanel.parameters'),
-      value: 'parameters'
-    },
-    {
-      label: () => t('g.settings'),
-      value: 'settings'
-    }
-  ]
-  if (
-    !hasSelection.value ||
-    (isSingleNodeSelected.value && !isSubgraphNode.value)
-  ) {
+  const list: RightSidePanelTabList = []
+
+  list.push({
+    label: () =>
+      flattedItems.value.length > 1
+        ? t('rightSidePanel.nodes')
+        : t('rightSidePanel.parameters'),
+    value: 'parameters'
+  })
+
+  if (!hasSelection.value) {
    list.push({
-      label: () => t('rightSidePanel.info'),
-      value: 'info'
+      label: () => t('rightSidePanel.nodes'),
+      value: 'nodes'
    })
  }
+
+  if (hasSelection.value) {
+    if (selectedSingleNode.value && !isSingleSubgraphNode.value) {
+      list.push({
+        label: () => t('rightSidePanel.info'),
+        value: 'info'
+      })
+    }
+  }
+
+  list.push({
+    label: () =>
+      hasSelection.value
+        ? t('g.settings')
+        : t('rightSidePanel.globalSettings.title'),
+    value: 'settings'
+  })
+
  return list
 })

@@ -101,27 +127,59 @@ const tabs = computed<RightSidePanelTabList>(() => {
 watchEffect(() => {
  if (
    !tabs.value.some((tab) => tab.value === activeTab.value) &&
-    !(activeTab.value === 'subgraph' && isSubgraphNode.value)
+    !(activeTab.value === 'subgraph' && isSingleSubgraphNode.value)
  ) {
    rightSidePanelStore.openPanel(tabs.value[0].value)
  }
 })

+function resolveTitle() {
+  const items = flattedItems.value
+  const nodes = selectedNodes.value
+  const groups = selectedGroups.value
+
+  if (items.length === 0) {
+    return t('rightSidePanel.workflowOverview')
+  }
+  if (directlySelectedItems.value.length === 1) {
+    if (groups.length === 1) {
+      return groups[0].title || t('rightSidePanel.fallbackGroupTitle')
+    }
+    if (nodes.length === 1) {
+      return (
+        nodes[0].title || nodes[0].type || t('rightSidePanel.fallbackNodeTitle')
+      )
+    }
+  }
+  return t('rightSidePanel.title', { count: items.length })
+}
+
+const panelTitle = ref(resolveTitle())
+watchEffect(() => (panelTitle.value = resolveTitle()))
+
 const isEditing = ref(false)

+const allowTitleEdit = computed(() => {
+  return (
+    directlySelectedItems.value.length === 1 &&
+    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
+  )
+})
+
 function handleTitleEdit(newTitle: string) {
  isEditing.value = false

  const trimmedTitle = newTitle.trim()
  if (!trimmedTitle) return

-  const node = toValue(selectedNode)
+  const node = selectedGroups.value[0] || selectedNodes.value[0]
  if (!node) return

  if (trimmedTitle === node.title) return

  node.title = trimmedTitle
-  canvasStore.canvas?.setDirty(true, false)
+  panelTitle.value = trimmedTitle
+  canvasStore.canvas?.setDirty(true, true)
 }

 function handleTitleCancel() {
@@ -132,21 +190,28 @@ function handleTitleCancel() {
 <template>
  <div
    data-testid="properties-panel"
-    class="flex size-full flex-col bg-interface-panel-surface"
+    class="flex size-full flex-col bg-comfy-menu-bg"
  >
    <!-- Panel Header -->
    <section class="pt-1">
      <div class="flex items-center justify-between pl-4 pr-3">
-        <h3 class="my-3.5 text-sm font-semibold line-clamp-2">
-          <EditableText
-            v-if="isSingleNodeSelected"
-            :model-value="panelTitle"
-            :is-editing="isEditing"
-            :input-attrs="{ 'data-testid': 'node-title-input' }"
-            @edit="handleTitleEdit"
-            @cancel="handleTitleCancel"
-            @dblclick="isEditing = true"
-          />
+        <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
+          <template v-if="allowTitleEdit">
+            <EditableText
+              :model-value="panelTitle"
+              :is-editing="isEditing"
+              :input-attrs="{ 'data-testid': 'node-title-input' }"
+              class="cursor-text"
+              @edit="handleTitleEdit"
+              @cancel="handleTitleCancel"
+              @click="isEditing = true"
+            />
+            <i
+              v-if="!isEditing"
+              class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
+              @click="isEditing = true"
+            />
+          </template>
          <template v-else>
            {{ panelTitle }}
          </template>
@@ -154,7 +219,7 @@ function handleTitleCancel() {

        <div class="flex gap-2">
          <Button
-            v-if="isSubgraphNode"
+            v-if="isSingleSubgraphNode"
            variant="secondary"
            size="icon"
            :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
@@ -177,7 +242,7 @@ function handleTitleCancel() {
          </Button>
        </div>
      </div>
-      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
+      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
        <TabList
          :model-value="activeTab"
          @update:model-value="
@@ -189,7 +254,7 @@ function handleTitleCancel() {
          <Tab
            v-for="tab in tabs"
            :key="tab.value"
-            class="text-sm py-1 px-2 font-inter"
+            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
            :value="tab.value"
          >
            {{ tab.label() }}
@@ -200,25 +265,29 @@ function handleTitleCancel() {

    <!-- Panel Content -->
    <div class="scrollbar-thin flex-1 overflow-y-auto">
-      <div
-        v-if="!hasSelection"
-        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
-      >
-        {{ $t('rightSidePanel.noSelection') }}
-      </div>
+      <template v-if="!hasSelection">
+        <TabGlobalParameters v-if="activeTab === 'parameters'" />
+        <TabNodes v-else-if="activeTab === 'nodes'" />
+        <TabGlobalSettings v-else-if="activeTab === 'settings'" />
+      </template>
      <SubgraphEditor
-        v-else-if="isSubgraphNode && isEditingSubgraph"
-        :node="selectedNode"
+        v-else-if="isSingleSubgraphNode && isEditingSubgraph"
+        :node="selectedSingleNode"
      />
      <template v-else>
-        <TabParameters
-          v-if="activeTab === 'parameters'"
+        <TabSubgraphInputs
+          v-if="activeTab === 'parameters' && isSingleSubgraphNode"
+          :node="selectedSingleNode as SubgraphNode"
+        />
+        <TabNormalInputs
+          v-else-if="activeTab === 'parameters'"
          :nodes="selectedNodes"
+          :must-show-node-title="selectedGroups.length > 0"
        />
        <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
        <TabSettings
          v-else-if="activeTab === 'settings'"
-          :nodes="selectedNodes"
+          :nodes="flattedItems"
        />
      </template>
    </div>
--- a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
+++ b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
@@ -1,54 +1,70 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 import { cn } from '@/utils/tailwindUtil'

-defineProps<{
-  isEmpty?: boolean
+import TransitionCollapse from './TransitionCollapse.vue'
+
+const props = defineProps<{
+  disabled?: boolean
+  label?: string
+  enableEmptyState?: boolean
+  tooltip?: string
 }>()

 const isCollapse = defineModel<boolean>('collapse', { default: false })
+
+const isExpanded = computed(() => !isCollapse.value && !props.disabled)
+
+const tooltipConfig = computed(() => {
+  if (!props.tooltip) return undefined
+  return { value: props.tooltip, showDelay: 1000 }
+})
 </script>

 <template>
-  <div class="flex flex-col bg-interface-panel-surface">
+  <div class="flex flex-col bg-comfy-menu-bg">
    <div
      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
    >
      <button
-        v-tooltip="
-          isEmpty
-            ? {
-                value: $t('rightSidePanel.inputsNoneTooltip'),
-                showDelay: 1_000
-              }
-            : undefined
-        "
+        v-tooltip="tooltipConfig"
        type="button"
        :class="
          cn(
            'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
-            !isEmpty && 'cursor-pointer'
+            !disabled && 'cursor-pointer'
          )
        "
-        :disabled="isEmpty"
+        :disabled="disabled"
        @click="isCollapse = !isCollapse"
      >
-        <span class="text-sm font-semibold line-clamp-2">
-          <slot name="label" />
+        <span class="text-sm font-semibold line-clamp-2 flex-1">
+          <slot name="label">
+            {{ label }}
+          </slot>
        </span>

        <i
-          v-if="!isEmpty"
          :class="
            cn(
-              'text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
-              isCollapse && '-rotate-180'
+              'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              isCollapse && '-rotate-180',
+              disabled && 'opacity-0'
            )
          "
        />
      </button>
    </div>
-    <div v-if="!isCollapse && !isEmpty" class="pb-4">
-      <slot />
-    </div>
+    <TransitionCollapse>
+      <div v-if="isExpanded" class="pb-4">
+        <slot />
+      </div>
+      <slot v-else-if="enableEmptyState && disabled" name="empty">
+        <div>
+          {{ $t('g.empty') }}
+        </div>
+      </slot>
+    </TransitionCollapse>
  </div>
 </template>
--- a/src/components/rightSidePanel/layout/TransitionCollapse.vue
+++ b/src/components/rightSidePanel/layout/TransitionCollapse.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+// From: https://stackoverflow.com/a/71426342/22392721
+interface Props {
+  duration?: number
+  easingEnter?: string
+  easingLeave?: string
+  opacityClosed?: number
+  opacityOpened?: number
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 150,
+  easingEnter: 'ease-in-out',
+  easingLeave: 'ease-in-out',
+  opacityClosed: 0,
+  opacityOpened: 1
+})
+
+const closed = '0px'
+
+const isMounted = ref(false)
+onMounted(() => (isMounted.value = true))
+
+const duration = computed(() =>
+  isMounted.value && !props.disable ? props.duration : 0
+)
+
+interface initialStyle {
+  height: string
+  width: string
+  position: string
+  visibility: string
+  overflow: string
+  paddingTop: string
+  paddingBottom: string
+  borderTopWidth: string
+  borderBottomWidth: string
+  marginTop: string
+  marginBottom: string
+}
+
+function getElementStyle(element: HTMLElement) {
+  return {
+    height: element.style.height,
+    width: element.style.width,
+    position: element.style.position,
+    visibility: element.style.visibility,
+    overflow: element.style.overflow,
+    paddingTop: element.style.paddingTop,
+    paddingBottom: element.style.paddingBottom,
+    borderTopWidth: element.style.borderTopWidth,
+    borderBottomWidth: element.style.borderBottomWidth,
+    marginTop: element.style.marginTop,
+    marginBottom: element.style.marginBottom
+  }
+}
+
+function prepareElement(element: HTMLElement, initialStyle: initialStyle) {
+  const { width } = getComputedStyle(element)
+  element.style.width = width
+  element.style.position = 'absolute'
+  element.style.visibility = 'hidden'
+  element.style.height = ''
+  const { height } = getComputedStyle(element)
+  element.style.width = initialStyle.width
+  element.style.position = initialStyle.position
+  element.style.visibility = initialStyle.visibility
+  element.style.height = closed
+  element.style.overflow = 'hidden'
+  return initialStyle.height && initialStyle.height !== closed
+    ? initialStyle.height
+    : height
+}
+
+function animateTransition(
+  element: HTMLElement,
+  initialStyle: initialStyle,
+  done: () => void,
+  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+  options?: number | KeyframeAnimationOptions
+) {
+  const animation = element.animate(keyframes, options)
+  // Set height to 'auto' to restore it after animation
+  element.style.height = initialStyle.height
+  animation.onfinish = () => {
+    element.style.overflow = initialStyle.overflow
+    done()
+  }
+}
+
+function getEnterKeyframes(height: string, initialStyle: initialStyle) {
+  return [
+    {
+      height: closed,
+      opacity: props.opacityClosed,
+      paddingTop: closed,
+      paddingBottom: closed,
+      borderTopWidth: closed,
+      borderBottomWidth: closed,
+      marginTop: closed,
+      marginBottom: closed
+    },
+    {
+      height,
+      opacity: props.opacityOpened,
+      paddingTop: initialStyle.paddingTop,
+      paddingBottom: initialStyle.paddingBottom,
+      borderTopWidth: initialStyle.borderTopWidth,
+      borderBottomWidth: initialStyle.borderBottomWidth,
+      marginTop: initialStyle.marginTop,
+      marginBottom: initialStyle.marginBottom
+    }
+  ]
+}
+
+function enterTransition(element: Element, done: () => void) {
+  const HTMLElement = element as HTMLElement
+  const initialStyle = getElementStyle(HTMLElement)
+  const height = prepareElement(HTMLElement, initialStyle)
+  const keyframes = getEnterKeyframes(height, initialStyle)
+  const options = { duration: duration.value, easing: props.easingEnter }
+  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
+}
+
+function leaveTransition(element: Element, done: () => void) {
+  const HTMLElement = element as HTMLElement
+  const initialStyle = getElementStyle(HTMLElement)
+  const { height } = getComputedStyle(HTMLElement)
+  HTMLElement.style.height = height
+  HTMLElement.style.overflow = 'hidden'
+  const keyframes = getEnterKeyframes(height, initialStyle).reverse()
+  const options = { duration: duration.value, easing: props.easingLeave }
+  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
+}
+</script>
+
+<template>
+  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
+    <slot />
+  </Transition>
+</template>
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -1,87 +1,185 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'

-import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import Button from '@/components/ui/button/Button.vue'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import type {
+  LGraphGroup,
+  LGraphNode,
+  SubgraphNode
+} from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
-import {
-  getComponent,
-  shouldExpand
-} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import { cn } from '@/utils/tailwindUtil'

 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import { GetNodeParentGroupKey } from '../shared'
+import WidgetItem from './WidgetItem.vue'

-const { label, widgets } = defineProps<{
+const {
+  label,
+  node,
+  widgets: widgetsProp,
+  showLocateButton = false,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  parents = [],
+  enableEmptyState = false,
+  tooltip
+} = defineProps<{
  label?: string
+  parents?: SubgraphNode[]
+  node?: LGraphNode
  widgets: { widget: IBaseWidget; node: LGraphNode }[]
+  showLocateButton?: boolean
+  isDraggable?: boolean
+  hiddenFavoriteIndicator?: boolean
+  showNodeName?: boolean
+  /**
+   * Whether to show the empty state slot when there are no widgets.
+   */
+  enableEmptyState?: boolean
+  tooltip?: string
 }>()

+const collapse = defineModel<boolean>('collapse', { default: false })
+
+const widgetsContainer = ref<HTMLElement>()
+const rootElement = ref<HTMLElement>()
+
+const widgets = shallowRef(widgetsProp)
+watchEffect(() => (widgets.value = widgetsProp))
+
 provide('hideLayoutField', true)

 const canvasStore = useCanvasStore()
 const { t } = useI18n()

-function getWidgetComponent(widget: IBaseWidget) {
-  const component = getComponent(widget.type, widget.name)
-  return component || WidgetLegacy
+const getNodeParentGroup = inject(GetNodeParentGroupKey, null)
+
+function isWidgetShownOnParents(
+  widgetNode: LGraphNode,
+  widget: IBaseWidget
+): boolean {
+  if (!parents.length) return false
+  const proxyWidgets = parseProxyWidgets(parents[0].properties.proxyWidgets)
+
+  // For proxy widgets (already promoted), check using overlay information
+  if (isProxyWidget(widget)) {
+    return proxyWidgets.some(
+      ([nodeId, widgetName]) =>
+        widget._overlay.nodeId == nodeId &&
+        widget._overlay.widgetName === widgetName
+    )
+  }
+
+  // For regular widgets (not yet promoted), check using node ID and widget name
+  return proxyWidgets.some(
+    ([nodeId, widgetName]) =>
+      widgetNode.id == nodeId && widget.name === widgetName
+  )
 }

-function onWidgetValueChange(
-  widget: IBaseWidget,
-  value: string | number | boolean | object
-) {
-  widget.value = value
-  widget.callback?.(value)
-  canvasStore.canvas?.setDirty(true, true)
-}
-
-const isEmpty = computed(() => widgets.length === 0)
+const isEmpty = computed(() => widgets.value.length === 0)

 const displayLabel = computed(
-  () =>
-    label ??
-    (isEmpty.value
-      ? t('rightSidePanel.inputsNone')
-      : t('rightSidePanel.inputs'))
+  () => label ?? (node ? node.title : t('rightSidePanel.inputs'))
 )
+
+const targetNode = computed<LGraphNode | null>(() => {
+  if (node) return node
+  if (isEmpty.value) return null
+
+  const firstNodeId = widgets.value[0].node.id
+  const allSameNode = widgets.value.every(({ node }) => node.id === firstNodeId)
+
+  return allSameNode ? widgets.value[0].node : null
+})
+
+const parentGroup = computed<LGraphGroup | null>(() => {
+  if (!targetNode.value || !getNodeParentGroup) return null
+  return getNodeParentGroup(targetNode.value)
+})
+
+const canShowLocateButton = computed(
+  () => showLocateButton && targetNode.value !== null
+)
+
+function handleLocateNode() {
+  if (!targetNode.value || !canvasStore.canvas) return
+
+  const graphNode = canvasStore.canvas.graph?.getNodeById(targetNode.value.id)
+  if (graphNode) {
+    canvasStore.canvas.animateToBounds(graphNode.boundingRect)
+  }
+}
+
+defineExpose({
+  widgetsContainer,
+  rootElement
+})
 </script>

 <template>
-  <PropertiesAccordionItem :is-empty>
-    <template #label>
-      <slot name="label">
-        {{ displayLabel }}
-      </slot>
-    </template>
-
-    <div v-if="!isEmpty" class="space-y-4 rounded-lg bg-interface-surface px-4">
-      <div
-        v-for="({ widget, node }, index) in widgets"
-        :key="`widget-${index}-${widget.name}`"
-        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
-      >
-        <div class="min-h-8">
-          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
-            {{ widget.label || widget.name }}
-          </p>
+  <div ref="rootElement">
+    <PropertiesAccordionItem
+      v-model:collapse="collapse"
+      :enable-empty-state
+      :disabled="isEmpty"
+      :tooltip
+    >
+      <template #label>
+        <div class="flex items-center gap-2 flex-1 min-w-0">
+          <span class="flex-1 flex items-center gap-2 min-w-0">
+            <span class="truncate">
+              <slot name="label">
+                {{ displayLabel }}
+              </slot>
+            </span>
+            <span
+              v-if="parentGroup"
+              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
+              :title="parentGroup.title"
+            >
+              {{ parentGroup.title }}
+            </span>
+          </span>
+          <Button
+            v-if="canShowLocateButton"
+            variant="textonly"
+            size="icon-sm"
+            class="subbutton shrink-0 mr-3 size-8 cursor-pointer text-muted-foreground hover:text-base-foreground"
+            :title="t('rightSidePanel.locateNode')"
+            :aria-label="t('rightSidePanel.locateNode')"
+            @click.stop="handleLocateNode"
+          >
+            <i class="icon-[lucide--locate] size-4" />
+          </Button>
        </div>
-        <component
-          :is="getWidgetComponent(widget)"
-          :widget="widget"
-          :model-value="useReactiveWidgetValue(widget)"
-          :node-id="String(node.id)"
-          :node-type="node.type"
-          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
-          @update:model-value="
-            (value: string | number | boolean | object) =>
-              onWidgetValueChange(widget, value)
-          "
-        />
+      </template>
+
+      <template #empty><slot name="empty" /></template>
+
+      <div
+        ref="widgetsContainer"
+        class="space-y-2 rounded-lg px-4 pt-1 relative"
+      >
+        <TransitionGroup name="list-scale">
+          <WidgetItem
+            v-for="{ widget, node } in widgets"
+            :key="`${node.id}-${widget.name}-${widget.type}`"
+            :widget="widget"
+            :node="node"
+            :is-draggable="isDraggable"
+            :hidden-favorite-indicator="hiddenFavoriteIndicator"
+            :show-node-name="showNodeName"
+            :parents="parents"
+            :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
+          />
+        </TransitionGroup>
      </div>
-    </div>
-  </PropertiesAccordionItem>
+    </PropertiesAccordionItem>
+  </div>
 </template>
--- a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { useMounted, watchDebounced } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { DraggableList } from '@/scripts/ui/draggableList'
+import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
+import type { ValidFavoritedWidget } from '@/stores/workspace/favoritedWidgetsStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgets } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const favoritedWidgetsStore = useFavoritedWidgetsStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)
+const { t } = useI18n()
+
+const draggableList = ref<DraggableList | undefined>(undefined)
+const sectionWidgetsRef = ref<{ widgetsContainer: HTMLElement }>()
+const isSearching = ref(false)
+
+const favoritedWidgets = computed(
+  () => favoritedWidgetsStore.validFavoritedWidgets
+)
+
+const label = computed(() =>
+  favoritedWidgets.value.length === 0
+    ? t('rightSidePanel.favoritesNone')
+    : t('rightSidePanel.favorites')
+)
+
+const searchedFavoritedWidgets = shallowRef<ValidFavoritedWidget[]>(
+  favoritedWidgets.value
+)
+
+async function searcher(query: string) {
+  isSearching.value = query.trim().length > 0
+  searchedFavoritedWidgets.value = searchWidgets(favoritedWidgets.value, query)
+}
+
+const isMounted = useMounted()
+
+function setDraggableState() {
+  if (!isMounted.value) return
+  draggableList.value?.dispose()
+  const container = sectionWidgetsRef.value?.widgetsContainer
+  if (isSearching.value || !container?.children?.length) return
+
+  draggableList.value = new DraggableList(container, '.draggable-item')
+
+  draggableList.value.applyNewItemsOrder = function () {
+    const reorderedItems: HTMLElement[] = []
+
+    let oldPosition = -1
+    this.getAllItems().forEach((item, index) => {
+      if (item === this.draggableItem) {
+        oldPosition = index
+        return
+      }
+      if (!this.isItemToggled(item)) {
+        reorderedItems[index] = item
+        return
+      }
+      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
+      reorderedItems[newIndex] = item
+    })
+
+    for (let index = 0; index < this.getAllItems().length; index++) {
+      const item = reorderedItems[index]
+      if (typeof item === 'undefined') {
+        reorderedItems[index] = this.draggableItem as HTMLElement
+      }
+    }
+
+    const newPosition = reorderedItems.indexOf(
+      this.draggableItem as HTMLElement
+    )
+    const widgets = [...searchedFavoritedWidgets.value]
+    const [widget] = widgets.splice(oldPosition, 1)
+    widgets.splice(newPosition, 0, widget)
+    searchedFavoritedWidgets.value = widgets
+    favoritedWidgetsStore.reorderFavorites(widgets)
+  }
+}
+
+watchDebounced(
+  searchedFavoritedWidgets,
+  () => {
+    setDraggableState()
+  },
+  { debounce: 100 }
+)
+
+onMounted(() => {
+  setDraggableState()
+})
+
+onBeforeUnmount(() => {
+  draggableList.value?.dispose()
+})
+</script>
+
+<template>
+  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
+      :update-key="favoritedWidgets"
+    />
+  </div>
+  <SectionWidgets
+    ref="sectionWidgetsRef"
+    :label
+    :widgets="searchedFavoritedWidgets"
+    :is-draggable="!isSearching"
+    hidden-favorite-indicator
+    show-node-name
+    enable-empty-state
+    class="border-b border-interface-stroke"
+    @update:collapse="nextTick(setDraggableState)"
+  >
+    <template #empty>
+      <div class="text-sm text-muted-foreground px-4 text-center py-10">
+        {{
+          isSearching
+            ? t('rightSidePanel.noneSearchDesc')
+            : t('rightSidePanel.favoritesNoneDesc')
+        }}
+      </div>
+    </template>
+  </SectionWidgets>
+</template>
--- a/src/components/rightSidePanel/parameters/TabNodes.vue
+++ b/src/components/rightSidePanel/parameters/TabNodes.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgetsAndNodes } from '../shared'
+import type { NodeWidgetsListList } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const canvasStore = useCanvasStore()
+const workflowStore = useWorkflowStore()
+
+const nodes = computed((): LGraphNode[] => {
+  // Depend on activeWorkflow to trigger recomputation when workflow changes
+  void workflowStore.activeWorkflow?.path
+  return (canvasStore.canvas?.graph?.nodes ?? []) as LGraphNode[]
+})
+
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)
+
+const widgetsSectionDataList = computed((): NodeWidgetsListList => {
+  return nodes.value.map((node) => {
+    const { widgets = [] } = node
+    const shownWidgets = widgets
+      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
+      .map((widget) => ({ node, widget }))
+    return {
+      widgets: shownWidgets,
+      node
+    }
+  })
+})
+
+const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
+  widgetsSectionDataList.value
+)
+const isSearching = ref(false)
+async function searcher(query: string) {
+  const list = widgetsSectionDataList.value
+  const target = searchedWidgetsSectionDataList
+  isSearching.value = query.trim() !== ''
+  target.value = searchWidgetsAndNodes(list, query)
+}
+</script>
+
+<template>
+  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
+      :update-key="widgetsSectionDataList"
+    />
+  </div>
+  <TransitionGroup tag="div" name="list-scale" class="relative">
+    <div
+      v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
+      class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
+    >
+      {{ $t('rightSidePanel.noneSearchDesc') }}
+    </div>
+    <SectionWidgets
+      v-for="{ node, widgets } in searchedWidgetsSectionDataList"
+      :key="node.id"
+      :node
+      :widgets
+      :collapse="!isSearching"
+      :tooltip="
+        isSearching || widgets.length
+          ? ''
+          : $t('rightSidePanel.inputsNoneTooltip')
+      "
+      show-locate-button
+      class="border-b border-interface-stroke"
+    />
+  </TransitionGroup>
+</template>
--- a/src/components/rightSidePanel/parameters/TabNormalInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgetsAndNodes } from '../shared'
+import type { NodeWidgetsListList } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const { nodes, mustShowNodeTitle } = defineProps<{
+  mustShowNodeTitle?: boolean
+  nodes: LGraphNode[]
+}>()
+
+const { t } = useI18n()
+
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)
+
+const widgetsSectionDataList = computed((): NodeWidgetsListList => {
+  return nodes.map((node) => {
+    const { widgets = [] } = node
+    const shownWidgets = widgets
+      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
+      .map((widget) => ({ node, widget }))
+
+    return { widgets: shownWidgets, node }
+  })
+})
+
+const isMultipleNodesSelected = computed(
+  () => widgetsSectionDataList.value.length > 1
+)
+
+const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
+  widgetsSectionDataList.value
+)
+const isSearching = ref(false)
+
+async function searcher(query: string) {
+  const list = widgetsSectionDataList.value
+  const target = searchedWidgetsSectionDataList
+  isSearching.value = query.trim() !== ''
+  target.value = searchWidgetsAndNodes(list, query)
+}
+
+const label = computed(() => {
+  const sections = widgetsSectionDataList.value
+  return !mustShowNodeTitle && sections.length === 1
+    ? sections[0].widgets.length !== 0
+      ? t('rightSidePanel.inputs')
+      : t('rightSidePanel.inputsNone')
+    : undefined // SectionWidgets display node titles by default
+})
+</script>
+
+<template>
+  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
+      :update-key="widgetsSectionDataList"
+    />
+  </div>
+  <TransitionGroup tag="div" name="list-scale" class="relative">
+    <div
+      v-if="searchedWidgetsSectionDataList.length === 0"
+      class="text-sm text-muted-foreground px-4 py-10 text-center"
+    >
+      {{
+        isSearching
+          ? t('rightSidePanel.noneSearchDesc')
+          : t('rightSidePanel.nodesNoneDesc')
+      }}
+    </div>
+    <SectionWidgets
+      v-for="{ widgets, node } in searchedWidgetsSectionDataList"
+      :key="node.id"
+      :node
+      :label
+      :widgets
+      :collapse="isMultipleNodesSelected && !isSearching"
+      :show-locate-button="isMultipleNodesSelected"
+      :tooltip="
+        isSearching || widgets.length
+          ? ''
+          : t('rightSidePanel.inputsNoneTooltip')
+      "
+      class="border-b border-interface-stroke"
+    />
+  </TransitionGroup>
+</template>
--- a/src/components/rightSidePanel/parameters/TabParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabParameters.vue
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
-import SidePanelSearch from '../layout/SidePanelSearch.vue'
-import SectionWidgets from './SectionWidgets.vue'
-
-const { nodes } = defineProps<{
-  nodes: LGraphNode[]
-}>()
-
-type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
-type NodeWidgetsListList = Array<{
-  node: LGraphNode
-  widgets: NodeWidgetsList
-}>
-
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
-    return {
-      widgets: shownWidgets,
-      node
-    }
-  })
-})
-
-const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>([])
-
-/**
- * Searches widgets in all selected nodes and returns search results.
- * Filters by name, localized label, type, and user-input value.
- * Performs basic tokenization of the query string.
- */
-async function searcher(query: string) {
-  if (query.trim() === '') {
-    searchedWidgetsSectionDataList.value = widgetsSectionDataList.value
-    return
-  }
-  const words = query.trim().toLowerCase().split(' ')
-  searchedWidgetsSectionDataList.value = widgetsSectionDataList.value
-    .map((item) => {
-      return {
-        ...item,
-        widgets: item.widgets.filter(({ widget }) => {
-          const label = widget.label?.toLowerCase()
-          const name = widget.name.toLowerCase()
-          const type = widget.type.toLowerCase()
-          const value = widget.value?.toString().toLowerCase()
-          return words.every(
-            (word) =>
-              name.includes(word) ||
-              label?.includes(word) ||
-              type?.includes(word) ||
-              value?.includes(word)
-          )
-        })
-      }
-    })
-    .filter((item) => item.widgets.length > 0)
-}
-</script>
-
-<template>
-  <div class="px-4 pb-4 flex gap-2 border-b border-interface-stroke">
-    <SidePanelSearch :searcher :update-key="widgetsSectionDataList" />
-  </div>
-  <SectionWidgets
-    v-for="section in searchedWidgetsSectionDataList"
-    :key="section.node.id"
-    :label="widgetsSectionDataList.length > 1 ? section.node.title : undefined"
-    :widgets="section.widgets"
-    :default-collapse="
-      widgetsSectionDataList.length > 1 &&
-      widgetsSectionDataList === searchedWidgetsSectionDataList
-    "
-    class="border-b border-interface-stroke"
-  />
-</template>
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { useMounted, watchDebounced } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import {
+  computed,
+  customRef,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  triggerRef,
+  useTemplateRef,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { DraggableList } from '@/scripts/ui/draggableList'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgets } from '../shared'
+import type { NodeWidgetsList } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const { node } = defineProps<{
+  node: SubgraphNode
+}>()
+
+const { t } = useI18n()
+const canvasStore = useCanvasStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { focusedSection, searchQuery } = storeToRefs(rightSidePanelStore)
+
+const advancedInputsCollapsed = ref(true)
+const draggableList = ref<DraggableList | undefined>(undefined)
+const sectionWidgetsRef = useTemplateRef('sectionWidgetsRef')
+const advancedInputsSectionRef = useTemplateRef('advancedInputsSectionRef')
+
+// Use customRef to track proxyWidgets changes
+const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
+  get() {
+    track()
+    return parseProxyWidgets(node.properties.proxyWidgets)
+  },
+  set(value?: ProxyWidgetsProperty) {
+    trigger()
+    if (!value) return
+    // eslint-disable-next-line vue/no-mutating-props
+    node.properties.proxyWidgets = value
+  }
+}))
+
+watch(
+  focusedSection,
+  async (section) => {
+    if (section === 'advanced-inputs') {
+      advancedInputsCollapsed.value = false
+      rightSidePanelStore.clearFocusedSection()
+
+      await nextTick()
+
+      await new Promise((resolve) => setTimeout(resolve, 300))
+
+      const sectionComponent = advancedInputsSectionRef.value
+      const sectionElement = sectionComponent?.rootElement
+      if (sectionElement) {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const widgetsList = computed((): NodeWidgetsList => {
+  const proxyWidgetsOrder = proxyWidgets.value
+  const { widgets = [] } = node
+
+  // Map proxyWidgets to actual proxy widgets in the correct order
+  const result: NodeWidgetsList = []
+  for (const [nodeId, widgetName] of proxyWidgetsOrder) {
+    // Find the proxy widget that matches this nodeId and widgetName
+    const widget = widgets.find((w) => {
+      // Check if this is a proxy widget with _overlay
+      if (isProxyWidget(w)) {
+        return (
+          String(w._overlay.nodeId) === nodeId &&
+          w._overlay.widgetName === widgetName
+        )
+      }
+      // For non-proxy widgets (like linked widgets), match by name
+      return w.name === widgetName
+    })
+    if (widget) {
+      result.push({ node, widget })
+    }
+  }
+  return result
+})
+
+const advancedInputsWidgets = computed((): NodeWidgetsList => {
+  const interiorNodes = node.subgraph.nodes
+  const proxyWidgetsValue = parseProxyWidgets(node.properties.proxyWidgets)
+
+  // Get all widgets from interior nodes
+  const allInteriorWidgets = interiorNodes.flatMap((interiorNode) => {
+    const { widgets = [] } = interiorNode
+    return widgets
+      .filter((w) => !w.computedDisabled)
+      .map((widget) => ({ node: interiorNode, widget }))
+  })
+
+  // Filter out widgets that are already promoted using tuple matching
+  return allInteriorWidgets.filter(({ node: interiorNode, widget }) => {
+    return !proxyWidgetsValue.some(
+      ([nodeId, widgetName]) =>
+        interiorNode.id == nodeId && widget.name === widgetName
+    )
+  })
+})
+
+const parents = computed<SubgraphNode[]>(() => [node])
+
+const searchedWidgetsList = shallowRef<NodeWidgetsList>(widgetsList.value)
+const isSearching = ref(false)
+
+async function searcher(query: string) {
+  isSearching.value = query.trim() !== ''
+  searchedWidgetsList.value = searchWidgets(widgetsList.value, query)
+}
+
+const isMounted = useMounted()
+
+function setDraggableState() {
+  if (!isMounted.value) return
+
+  draggableList.value?.dispose()
+  const container = sectionWidgetsRef.value?.widgetsContainer
+  if (isSearching.value || !container?.children?.length) return
+
+  draggableList.value = new DraggableList(container, '.draggable-item')
+
+  draggableList.value.applyNewItemsOrder = function () {
+    const reorderedItems: HTMLElement[] = []
+
+    let oldPosition = -1
+    this.getAllItems().forEach((item, index) => {
+      if (item === this.draggableItem) {
+        oldPosition = index
+        return
+      }
+      if (!this.isItemToggled(item)) {
+        reorderedItems[index] = item
+        return
+      }
+      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
+      reorderedItems[newIndex] = item
+    })
+
+    if (oldPosition === -1) {
+      console.error('[TabSubgraphInputs] draggableItem not found in items')
+      return
+    }
+
+    for (let index = 0; index < this.getAllItems().length; index++) {
+      const item = reorderedItems[index]
+      if (typeof item === 'undefined') {
+        reorderedItems[index] = this.draggableItem as HTMLElement
+      }
+    }
+
+    const newPosition = reorderedItems.indexOf(
+      this.draggableItem as HTMLElement
+    )
+
+    // Update proxyWidgets order
+    const pw = proxyWidgets.value
+    const [w] = pw.splice(oldPosition, 1)
+    pw.splice(newPosition, 0, w)
+    proxyWidgets.value = pw
+    canvasStore.canvas?.setDirty(true, true)
+    triggerRef(proxyWidgets)
+  }
+}
+
+watchDebounced(searchedWidgetsList, () => setDraggableState(), {
+  debounce: 100
+})
+onMounted(() => setDraggableState())
+onBeforeUnmount(() => draggableList.value?.dispose())
+
+const label = computed(() => {
+  return searchedWidgetsList.value.length !== 0
+    ? t('rightSidePanel.inputs')
+    : t('rightSidePanel.inputsNone')
+})
+</script>
+
+<template>
+  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
+      :update-key="widgetsList"
+    />
+  </div>
+  <SectionWidgets
+    ref="sectionWidgetsRef"
+    :node
+    :label
+    :parents
+    :widgets="searchedWidgetsList"
+    :is-draggable="!isSearching"
+    :enable-empty-state="isSearching"
+    :tooltip="
+      isSearching || searchedWidgetsList.length
+        ? ''
+        : t('rightSidePanel.inputsNoneTooltip')
+    "
+    class="border-b border-interface-stroke"
+    @update:collapse="nextTick(setDraggableState)"
+  >
+    <template #empty>
+      <div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
+        {{ t('rightSidePanel.noneSearchDesc') }}
+      </div>
+    </template>
+  </SectionWidgets>
+  <SectionWidgets
+    v-if="advancedInputsWidgets.length > 0"
+    ref="advancedInputsSectionRef"
+    v-model:collapse="advancedInputsCollapsed"
+    :label="t('rightSidePanel.advancedInputs')"
+    :parents="parents"
+    :widgets="advancedInputsWidgets"
+    show-node-name
+    class="border-b border-interface-stroke"
+  />
+</template>
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import MoreButton from '@/components/button/MoreButton.vue'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import {
+  demoteWidget,
+  promoteWidget
+} from '@/core/graph/subgraph/proxyWidgetUtils'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useDialogService } from '@/services/dialogService'
+import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
+
+const {
+  widget,
+  node,
+  parents = [],
+  isShownOnParents = false
+} = defineProps<{
+  widget: IBaseWidget
+  node: LGraphNode
+  parents?: SubgraphNode[]
+  isShownOnParents?: boolean
+}>()
+
+const label = defineModel<string>('label', { required: true })
+
+const canvasStore = useCanvasStore()
+const favoritedWidgetsStore = useFavoritedWidgetsStore()
+const dialogService = useDialogService()
+const { t } = useI18n()
+
+const hasParents = computed(() => parents?.length > 0)
+const favoriteNode = computed(() =>
+  isShownOnParents && hasParents.value ? parents[0] : node
+)
+const isFavorited = computed(() =>
+  favoritedWidgetsStore.isFavorited(favoriteNode.value, widget.name)
+)
+
+async function handleRename() {
+  const newLabel = await dialogService.prompt({
+    title: t('g.rename'),
+    message: t('g.enterNewName') + ':',
+    defaultValue: widget.label,
+    placeholder: widget.name
+  })
+
+  if (newLabel === null) return
+  label.value = newLabel
+}
+
+function handleHideInput() {
+  if (!parents?.length) return
+
+  // For proxy widgets (already promoted), we need to find the original interior node and widget
+  if (isProxyWidget(widget)) {
+    const subgraph = parents[0].subgraph
+    const interiorNode = subgraph.getNodeById(parseInt(widget._overlay.nodeId))
+
+    if (!interiorNode) {
+      console.error('Could not find interior node for proxy widget')
+      return
+    }
+
+    const originalWidget = interiorNode.widgets?.find(
+      (w) => w.name === widget._overlay.widgetName
+    )
+
+    if (!originalWidget) {
+      console.error('Could not find original widget for proxy widget')
+      return
+    }
+
+    demoteWidget(interiorNode, originalWidget, parents)
+  } else {
+    // For regular widgets (not yet promoted), use them directly
+    demoteWidget(node, widget, parents)
+  }
+
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+function handleShowInput() {
+  if (!parents?.length) return
+
+  promoteWidget(node, widget, parents)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+function handleToggleFavorite() {
+  favoritedWidgetsStore.toggleFavorite(favoriteNode.value, widget.name)
+}
+
+const buttonClasses = cn([
+  'border-none bg-transparent',
+  'w-full flex items-center gap-2 rounded px-3 py-2 text-sm',
+  'cursor-pointer transition-all hover:bg-secondary-background-hover active:scale-95'
+])
+</script>
+
+<template>
+  <MoreButton
+    is-vertical
+    class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
+  >
+    <template #default="{ close }">
+      <button
+        :class="buttonClasses"
+        @click="
+          () => {
+            handleRename()
+            close()
+          }
+        "
+      >
+        <i class="icon-[lucide--edit] size-4" />
+        <span>{{ t('g.rename') }}</span>
+      </button>
+
+      <button
+        v-if="hasParents"
+        :class="buttonClasses"
+        @click="
+          () => {
+            if (isShownOnParents) handleHideInput()
+            else handleShowInput()
+            close()
+          }
+        "
+      >
+        <template v-if="isShownOnParents">
+          <i class="icon-[lucide--eye-off] size-4" />
+          <span>{{ t('rightSidePanel.hideInput') }}</span>
+        </template>
+        <template v-else>
+          <i class="icon-[lucide--eye] size-4" />
+          <span>{{ t('rightSidePanel.showInput') }}</span>
+        </template>
+      </button>
+
+      <button
+        :class="buttonClasses"
+        @click="
+          () => {
+            handleToggleFavorite()
+            close()
+          }
+        "
+      >
+        <template v-if="isFavorited">
+          <i class="icon-[lucide--star]" />
+          <span>{{ t('rightSidePanel.removeFavorite') }}</span>
+        </template>
+        <template v-else>
+          <i class="icon-[lucide--star]" />
+          <span>{{ t('rightSidePanel.addFavorite') }}</span>
+        </template>
+      </button>
+    </template>
+  </MoreButton>
+</template>
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed, customRef, ref } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { getSharedWidgetEnhancements } from '@/composables/graph/useGraphNodeManager'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
+import {
+  getComponent,
+  shouldExpand
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
+import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import { renameWidget } from '../shared'
+import WidgetActions from './WidgetActions.vue'
+
+const {
+  widget,
+  node,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  parents = [],
+  isShownOnParents = false
+} = defineProps<{
+  widget: IBaseWidget
+  node: LGraphNode
+  isDraggable?: boolean
+  hiddenFavoriteIndicator?: boolean
+  showNodeName?: boolean
+  parents?: SubgraphNode[]
+  isShownOnParents?: boolean
+}>()
+
+const canvasStore = useCanvasStore()
+const favoritedWidgetsStore = useFavoritedWidgetsStore()
+const isEditing = ref(false)
+
+const widgetComponent = computed(() => {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
+})
+
+const enhancedWidget = computed(() => {
+  // Get shared enhancements (reactive value, controlWidget, spec, nodeType, etc.)
+  const enhancements = getSharedWidgetEnhancements(node, widget)
+  return { ...widget, ...enhancements }
+})
+
+const sourceNodeName = computed((): string | null => {
+  let sourceNode: LGraphNode | null = node
+  if (isProxyWidget(widget)) {
+    const { graph, nodeId } = widget._overlay
+    sourceNode = getNodeByExecutionId(graph, nodeId)
+  }
+  return sourceNode ? sourceNode.title || sourceNode.type : null
+})
+
+const hasParents = computed(() => parents?.length > 0)
+const favoriteNode = computed(() =>
+  isShownOnParents && hasParents.value ? parents[0] : node
+)
+
+const widgetValue = computed({
+  get: () => {
+    widget.vueTrack?.()
+    return widget.value
+  },
+  set: (newValue: string | number | boolean | object) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    widget.value = newValue
+    widget.callback?.(newValue)
+    canvasStore.canvas?.setDirty(true, true)
+  }
+})
+
+const displayLabel = customRef((track, trigger) => {
+  return {
+    get() {
+      track()
+      return widget.label || widget.name
+    },
+    set(newValue: string) {
+      isEditing.value = false
+
+      const trimmedLabel = newValue.trim()
+
+      const success = renameWidget(widget, node, trimmedLabel, parents)
+
+      if (success) {
+        canvasStore.canvas?.setDirty(true)
+        trigger()
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
+        isDraggable &&
+          'draggable-item !will-change-auto drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
+      )
+    "
+  >
+    <!-- widget header -->
+    <div
+      :class="
+        cn(
+          'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
+          isDraggable && 'pointer-events-none'
+        )
+      "
+    >
+      <EditableText
+        v-if="widget.name"
+        :model-value="displayLabel"
+        :is-editing="isEditing"
+        :input-attrs="{ placeholder: widget.name }"
+        class="text-sm leading-8 p-0 m-0 truncate pointer-events-auto cursor-text"
+        @edit="displayLabel = $event"
+        @cancel="isEditing = false"
+        @click="isEditing = true"
+      />
+
+      <span
+        v-if="(showNodeName || hasParents) && sourceNodeName"
+        class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
+      >
+        {{ sourceNodeName }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0 pointer-events-auto">
+        <WidgetActions
+          v-model:label="displayLabel"
+          :widget="widget"
+          :node="node"
+          :parents="parents"
+          :is-shown-on-parents="isShownOnParents"
+        />
+      </div>
+    </div>
+    <!-- favorite indicator -->
+    <div
+      v-if="
+        !hiddenFavoriteIndicator &&
+        favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
+      "
+      class="relative z-2 pointer-events-none"
+    >
+      <i
+        class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
+      />
+    </div>
+    <!-- widget content -->
+    <component
+      :is="widgetComponent"
+      v-model="widgetValue"
+      :widget="enhancedWidget"
+      :node-id="String(node.id)"
+      :node-type="node.type"
+      :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
+    />
+    <!-- Drag handle -->
+    <div
+      :class="
+        cn(
+          'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
+          'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
+          !isDraggable && 'opacity-0'
+        )
+      "
+    />
+  </div>
+</template>
--- a/src/components/rightSidePanel/settings/FieldSwitch.vue
+++ b/src/components/rightSidePanel/settings/FieldSwitch.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+
+import LayoutField from './LayoutField.vue'
+
+defineProps<{
+  label: string
+  tooltip?: string
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <LayoutField singleline :label :tooltip>
+    <ToggleSwitch
+      v-model="modelValue"
+      class="transition-transform active:scale-90"
+    />
+  </LayoutField>
+</template>
--- a/src/components/rightSidePanel/settings/LayoutField.vue
+++ b/src/components/rightSidePanel/settings/LayoutField.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+defineProps<{
+  label: string
+  tooltip?: string
+  singleline?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex gap-2', singleline ? 'items-center justify-between' : 'flex-col')
+    "
+  >
+    <span
+      v-tooltip.left="
+        tooltip
+          ? {
+              value: tooltip,
+              showDelay: 300
+            }
+          : null
+      "
+      :class="
+        cn(
+          'text-sm text-muted-foreground truncate',
+          tooltip ? 'cursor-help' : '',
+          singleline ? 'flex-1' : ''
+        )
+      "
+    >
+      {{ label }}
+    </span>
+    <slot />
+  </div>
+</template>
--- a/src/components/rightSidePanel/settings/NodeSettings.vue
+++ b/src/components/rightSidePanel/settings/NodeSettings.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="space-y-4 text-sm text-muted-foreground">
+    <SetNodeState
+      v-if="isNodes(targetNodes)"
+      :nodes="targetNodes"
+      @changed="handleChanged"
+    />
+    <SetNodeColor :nodes="targetNodes" @changed="handleChanged" />
+    <SetPinned :nodes="targetNodes" @changed="handleChanged" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { isLGraphGroup } from '@/utils/litegraphUtil'
+
+import SetNodeColor from './SetNodeColor.vue'
+import SetNodeState from './SetNodeState.vue'
+import SetPinned from './SetPinned.vue'
+
+const props = defineProps<{
+  /**
+   * - If the item is a Group, Node State cannot be set
+   * as Groups do not have a 'mode' property.
+   *
+   * - The nodes array can contain either all Nodes or all Groups,
+   * but it must not be a mix of both.
+   */
+  nodes?: LGraphNode[] | LGraphGroup[]
+}>()
+
+const targetNodes = shallowRef<LGraphNode[] | LGraphGroup[]>([])
+watchEffect(() => {
+  if (props.nodes) {
+    targetNodes.value = props.nodes
+  } else {
+    targetNodes.value = []
+  }
+})
+
+const canvasStore = useCanvasStore()
+
+function isNodes(nodes: LGraphNode[] | LGraphGroup[]): nodes is LGraphNode[] {
+  return !nodes.some((node) => isLGraphGroup(node))
+}
+
+function handleChanged() {
+  /**
+   * This is not a random comment—it's crucial.
+   * Otherwise, the UI cannot update correctly.
+   * There is a bug with triggerRef here, so we can't use triggerRef.
+   * We'll work around it for now and later submit a Vue issue and pull request to fix it.
+   */
+  targetNodes.value = targetNodes.value.slice()
+
+  canvasStore.canvas?.setDirty(true, true)
+}
+</script>
--- a/src/components/rightSidePanel/settings/SetNodeColor.vue
+++ b/src/components/rightSidePanel/settings/SetNodeColor.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ColorOption } from '@/lib/litegraph/src/litegraph'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import LayoutField from './LayoutField.vue'
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the getColorOption and setColorOption methods,
+ * and do not concern ourselves with other methods.
+ */
+type PickedNode = Pick<LGraphNode, 'getColorOption' | 'setColorOption'>
+
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+const colorPaletteStore = useColorPaletteStore()
+
+type NodeColorOption = {
+  name: string
+  localizedName: () => string
+  value: {
+    dark: string
+    light: string
+    ringDark: string
+    ringLight: string
+  }
+}
+
+const nodeColorEntries = Object.entries(LGraphCanvas.node_colors)
+
+function getColorValue(color: string): NodeColorOption['value'] {
+  return {
+    dark: adjustColor(color, { lightness: 0.3 }),
+    light: adjustColor(color, { lightness: 0.4 }),
+    ringDark: adjustColor(color, { lightness: 0.5 }),
+    ringLight: adjustColor(color, { lightness: 0.1 })
+  }
+}
+
+const NO_COLOR_OPTION: NodeColorOption = {
+  name: 'noColor',
+  localizedName: () => t('color.noColor'),
+  value: getColorValue(LiteGraph.NODE_DEFAULT_BGCOLOR)
+}
+
+const colorOptions: NodeColorOption[] = [
+  NO_COLOR_OPTION,
+  ...nodeColorEntries.map(([name, color]) => ({
+    name,
+    localizedName: () => t(`color.${name}`),
+    value: getColorValue(color.bgcolor)
+  }))
+]
+
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
+const nodeColor = computed<NodeColorOption['name'] | null>({
+  get() {
+    if (nodes.length === 0) return null
+    const theColorOptions = nodes.map((item) => item.getColorOption())
+
+    let colorOption: ColorOption | null | false = theColorOptions[0]
+    if (!theColorOptions.every((option) => option === colorOption)) {
+      colorOption = false
+    }
+
+    if (colorOption === false) return null
+    if (colorOption == null || (!colorOption.bgcolor && !colorOption.color))
+      return NO_COLOR_OPTION.name
+    return (
+      nodeColorEntries.find(
+        ([_, color]) =>
+          color.bgcolor === colorOption.bgcolor &&
+          color.color === colorOption.color
+      )?.[0] ?? null
+    )
+  },
+  set(colorName) {
+    if (colorName === null) return
+
+    const canvasColorOption =
+      colorName === NO_COLOR_OPTION.name
+        ? null
+        : LGraphCanvas.node_colors[colorName]
+
+    for (const item of nodes) {
+      item.setColorOption(canvasColorOption)
+    }
+
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <LayoutField :label="t('rightSidePanel.color')">
+    <div
+      class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
+    >
+      <button
+        v-for="option of colorOptions"
+        :key="option.name"
+        :class="
+          cn(
+            'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
+            option.name === nodeColor
+              ? 'bg-interface-menu-component-surface-selected'
+              : 'hover:bg-interface-menu-component-surface-selected'
+          )
+        "
+        @click="nodeColor = option.name"
+      >
+        <div
+          v-tooltip.top="option.localizedName()"
+          :class="cn('size-4 rounded-full ring-2 ring-gray-500/10')"
+          :style="{
+            backgroundColor: isLightTheme
+              ? option.value.light
+              : option.value.dark,
+            '--tw-ring-color':
+              option.name === nodeColor
+                ? isLightTheme
+                  ? option.value.ringLight
+                  : option.value.ringDark
+                : undefined
+          }"
+          :data-testid="option.name"
+        />
+      </button>
+    </div>
+  </LayoutField>
+</template>
--- a/src/components/rightSidePanel/settings/SetNodeState.vue
+++ b/src/components/rightSidePanel/settings/SetNodeState.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import FormSelectButton from '@/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue'
+
+import LayoutField from './LayoutField.vue'
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the mode method,
+ * and do not concern ourselves with other methods.
+ */
+type PickedNode = Pick<LGraphNode, 'mode'>
+
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+const nodeState = computed({
+  get() {
+    let mode: LGraphNode['mode'] | null = null
+
+    if (nodes.length === 0) return null
+
+    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
+    if (nodes.length > 1) {
+      mode = nodes[0].mode
+      if (!nodes.every((node) => node.mode === mode)) {
+        mode = null
+      }
+    } else {
+      mode = nodes[0].mode
+    }
+
+    return mode
+  },
+  set(value: LGraphNode['mode']) {
+    nodes.forEach((node) => {
+      node.mode = value
+    })
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <LayoutField :label="t('rightSidePanel.nodeState')">
+    <FormSelectButton
+      v-model="nodeState"
+      class="w-full"
+      :options="[
+        {
+          label: t('rightSidePanel.normal'),
+          value: LGraphEventMode.ALWAYS
+        },
+        {
+          label: t('rightSidePanel.bypass'),
+          value: LGraphEventMode.BYPASS
+        },
+        {
+          label: t('rightSidePanel.mute'),
+          value: LGraphEventMode.NEVER
+        }
+      ]"
+    />
+  </LayoutField>
+</template>
--- a/src/components/rightSidePanel/settings/SetPinned.vue
+++ b/src/components/rightSidePanel/settings/SetPinned.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+import FieldSwitch from './FieldSwitch.vue'
+
+type PickedNode = Pick<LGraphNode, 'pinned' | 'pin'>
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the pinned and pin methods,
+ * and do not concern ourselves with other methods.
+ */
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+// Pinned state
+const isPinned = computed<boolean>({
+  get() {
+    return nodes.some((node) => node.pinned)
+  },
+  set(value) {
+    nodes.forEach((node) => node.pin(value))
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <FieldSwitch v-model="isPinned" :label="t('rightSidePanel.pinned')" />
+</template>
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import InputNumber from 'primevue/inputnumber'
+import Select from 'primevue/select'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LinkRenderType } from '@/lib/litegraph/src/types/globalEnums'
+import { LinkMarkerShape } from '@/lib/litegraph/src/types/globalEnums'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { WidgetInputBaseClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import FieldSwitch from './FieldSwitch.vue'
+import LayoutField from './LayoutField.vue'
+
+const { t } = useI18n()
+const settingStore = useSettingStore()
+const dialogService = useDialogService()
+
+// NODES settings
+const showAdvancedParameters = ref(false) // Placeholder for future implementation
+
+const showToolbox = computed({
+  get: () => settingStore.get('Comfy.Canvas.SelectionToolbox'),
+  set: (value) => settingStore.set('Comfy.Canvas.SelectionToolbox', value)
+})
+
+const nodes2Enabled = computed({
+  get: () => settingStore.get('Comfy.VueNodes.Enabled'),
+  set: (value) => settingStore.set('Comfy.VueNodes.Enabled', value)
+})
+
+// CANVAS settings
+const gridSpacing = computed({
+  get: () => settingStore.get('Comfy.SnapToGrid.GridSize'),
+  set: (value) => settingStore.set('Comfy.SnapToGrid.GridSize', value)
+})
+
+const snapToGrid = computed({
+  get: () => settingStore.get('pysssss.SnapToGrid'),
+  set: (value) => settingStore.set('pysssss.SnapToGrid', value)
+})
+
+// CONNECTION LINKS settings
+const linkShape = computed({
+  get: () => settingStore.get('Comfy.Graph.LinkMarkers'),
+  set: (value) => settingStore.set('Comfy.Graph.LinkMarkers', value)
+})
+
+const linkShapeOptions = computed(() => [
+  { value: LinkMarkerShape.None, label: t('g.none') },
+  { value: LinkMarkerShape.Circle, label: t('shape.circle') },
+  { value: LinkMarkerShape.Arrow, label: t('shape.arrow') }
+])
+
+let theOldLinkRenderMode: LinkRenderType = LiteGraph.SPLINE_LINK
+const showConnectedLinks = computed({
+  get: () => settingStore.get('Comfy.LinkRenderMode') !== LiteGraph.HIDDEN_LINK,
+  set: (value) => {
+    let oldLinkRenderMode = settingStore.get('Comfy.LinkRenderMode')
+    if (oldLinkRenderMode !== LiteGraph.HIDDEN_LINK) {
+      theOldLinkRenderMode = oldLinkRenderMode
+    }
+    const newMode = value ? theOldLinkRenderMode : LiteGraph.HIDDEN_LINK
+    settingStore.set('Comfy.LinkRenderMode', newMode)
+  }
+})
+
+const GRID_SIZE_MIN = 1
+const GRID_SIZE_MAX = 100
+const GRID_SIZE_STEP = 1
+
+function updateGridSpacingFromSlider(values?: number[]) {
+  if (!values?.length) return
+  gridSpacing.value = values[0]
+}
+
+function updateGridSpacingFromInput(value: number | null | undefined) {
+  if (typeof value !== 'number') return
+
+  const clampedValue = Math.min(GRID_SIZE_MAX, Math.max(GRID_SIZE_MIN, value))
+  gridSpacing.value = Math.round(clampedValue / GRID_SIZE_STEP) * GRID_SIZE_STEP
+}
+
+function openFullSettings() {
+  dialogService.showSettingsDialog()
+}
+</script>
+
+<template>
+  <div class="flex flex-col border-t border-interface-stroke">
+    <!-- NODES Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.nodes') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <FieldSwitch
+          v-model="showAdvancedParameters"
+          :label="t('rightSidePanel.globalSettings.showAdvanced')"
+          :tooltip="t('rightSidePanel.globalSettings.showAdvancedTooltip')"
+        />
+        <FieldSwitch
+          v-model="showToolbox"
+          :label="t('rightSidePanel.globalSettings.showToolbox')"
+        />
+        <FieldSwitch
+          v-model="nodes2Enabled"
+          :label="t('rightSidePanel.globalSettings.nodes2')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- CANVAS Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.canvas') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
+          <div
+            :class="
+              cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')
+            "
+          >
+            <Slider
+              :model-value="[gridSpacing]"
+              class="flex-grow text-xs"
+              :min="GRID_SIZE_MIN"
+              :max="GRID_SIZE_MAX"
+              :step="GRID_SIZE_STEP"
+              @update:model-value="updateGridSpacingFromSlider"
+            />
+            <InputNumber
+              :model-value="gridSpacing"
+              class="w-16"
+              size="small"
+              pt:pc-input-text:root="min-w-[4ch] bg-transparent border-none text-center truncate"
+              :min="GRID_SIZE_MIN"
+              :max="GRID_SIZE_MAX"
+              :step="GRID_SIZE_STEP"
+              :allow-empty="false"
+              @update:model-value="updateGridSpacingFromInput"
+            />
+          </div>
+        </LayoutField>
+        <FieldSwitch
+          v-model="snapToGrid"
+          :label="t('rightSidePanel.globalSettings.snapNodesToGrid')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- CONNECTION LINKS Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.connectionLinks') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <LayoutField :label="t('rightSidePanel.globalSettings.linkShape')">
+          <Select
+            v-model="linkShape"
+            :options="linkShapeOptions"
+            :aria-label="t('rightSidePanel.globalSettings.linkShape')"
+            :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+            size="small"
+            :pt="{
+              option: 'text-xs',
+              dropdown: 'w-8',
+              label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
+              overlay: 'w-fit min-w-full'
+            }"
+            data-capture-wheel="true"
+            option-label="label"
+            option-value="value"
+          />
+        </LayoutField>
+        <FieldSwitch
+          v-model="showConnectedLinks"
+          :label="t('rightSidePanel.globalSettings.showConnectedLinks')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- View all settings button -->
+    <div
+      class="flex items-center justify-center p-4 border-b border-interface-stroke"
+    >
+      <Button
+        variant="muted-textonly"
+        size="sm"
+        class="gap-2 text-sm"
+        @click="openFullSettings"
+      >
+        {{ t('rightSidePanel.globalSettings.viewAllSettings') }}
+        <i class="icon-[lucide--settings] size-4" />
+      </Button>
+    </div>
+  </div>
+</template>
--- a/src/components/rightSidePanel/settings/TabSettings.vue
+++ b/src/components/rightSidePanel/settings/TabSettings.vue
@@ -1,245 +1,58 @@
 <template>
-  <div class="space-y-4 p-3 text-sm text-muted-foreground">
-    <!-- Node State -->
-    <div class="flex flex-col gap-2">
-      <span>
-        {{ t('rightSidePanel.nodeState') }}
-      </span>
-      <FormSelectButton
-        v-model="nodeState"
-        class="w-full"
-        :options="[
-          {
-            label: t('rightSidePanel.normal'),
-            value: LGraphEventMode.ALWAYS
-          },
-          {
-            label: t('rightSidePanel.bypass'),
-            value: LGraphEventMode.BYPASS
-          },
-          {
-            label: t('rightSidePanel.mute'),
-            value: LGraphEventMode.NEVER
-          }
-        ]"
-      />
-    </div>
-
-    <!-- Color Picker -->
-    <div class="flex flex-col gap-2">
-      <span>
-        {{ t('rightSidePanel.color') }}
-      </span>
-      <div
-        class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
-      >
-        <button
-          v-for="option of colorOptions"
-          :key="option.name"
-          :class="
-            cn(
-              'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
-              option.name === nodeColor
-                ? 'bg-interface-menu-component-surface-selected'
-                : 'hover:bg-interface-menu-component-surface-selected'
-            )
-          "
-          @click="nodeColor = option.name"
-        >
-          <div
-            v-tooltip.top="option.localizedName()"
-            :class="cn('size-4 rounded-full ring-2 ring-gray-500/10')"
-            :style="{
-              backgroundColor: isLightTheme
-                ? option.value.light
-                : option.value.dark,
-              '--tw-ring-color':
-                option.name === nodeColor
-                  ? isLightTheme
-                    ? option.value.ringLight
-                    : option.value.ringDark
-                  : undefined
-            }"
-            :data-testid="option.name"
-          />
-        </button>
-      </div>
-    </div>
-
-    <!-- Pinned Toggle -->
-    <div class="flex items-center justify-between">
-      <span>
-        {{ t('rightSidePanel.pinned') }}
-      </span>
-      <ToggleSwitch v-model="isPinned" />
-    </div>
+  <div v-if="isOnlyHasNodes" class="p-4">
+    <NodeSettings :nodes="theNodes" />
+  </div>
+  <div v-else class="border-t border-interface-stroke">
+    <PropertiesAccordionItem
+      v-if="hasNodes"
+      class="border-b border-interface-stroke"
+      :label="$t('rightSidePanel.nodes')"
+    >
+      <NodeSettings :nodes="theNodes" class="p-4" />
+    </PropertiesAccordionItem>
+    <PropertiesAccordionItem
+      v-if="hasGroups"
+      class="border-b border-interface-stroke"
+      :label="$t('rightSidePanel.groups')"
+    >
+      <NodeSettings :nodes="theGroups" class="p-4" />
+    </PropertiesAccordionItem>
  </div>
 </template>

 <script setup lang="ts">
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
+/**
+ * If we only need to show settings for Nodes,
+ * there's no need to wrap them in PropertiesAccordionItem,
+ * making the UI cleaner.
+ * But if there are multiple types of settings,
+ * it's better to wrap them; otherwise,
+ * the UI would look messy.
+ */
+import { computed } from 'vue'
+import type { Raw } from 'vue'

-import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { ColorOption, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSelectButton from '@/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { adjustColor } from '@/utils/colorUtil'
-import { cn } from '@/utils/tailwindUtil'
+import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import NodeSettings from './NodeSettings.vue'

 const props = defineProps<{
-  nodes?: LGraphNode[]
+  nodes: Raw<Positionable>[]
 }>()

-/**
- * This is not random writing. It is very important.
- * Otherwise, the UI cannot be updated correctly.
- */
-const targetNodes = shallowRef<LGraphNode[]>([])
-watchEffect(() => {
-  if (props.nodes) {
-    targetNodes.value = props.nodes
-  } else {
-    targetNodes.value = []
-  }
-})
-
-const { t } = useI18n()
-
-const canvasStore = useCanvasStore()
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
+const theNodes = computed<LGraphNode[]>(() =>
+  props.nodes.filter((node) => isLGraphNode(node))
 )

-const nodeState = computed({
-  get() {
-    let mode: LGraphNode['mode'] | null = null
-    const nodes = targetNodes.value
+const theGroups = computed<LGraphGroup[]>(() =>
+  props.nodes.filter((node) => isLGraphGroup(node))
+)

-    if (nodes.length === 0) return null
-
-    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    if (nodes.length > 1) {
-      mode = nodes[0].mode
-      if (!nodes.every((node) => node.mode === mode)) {
-        mode = null
-      }
-    } else {
-      mode = nodes[0].mode
-    }
-
-    return mode
-  },
-  set(value: LGraphNode['mode']) {
-    targetNodes.value.forEach((node) => {
-      node.mode = value
-    })
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
-
-// Pinned state
-const isPinned = computed<boolean>({
-  get() {
-    return targetNodes.value.some((node) => node.pinned)
-  },
-  set(value) {
-    targetNodes.value.forEach((node) => node.pin(value))
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
-
-type NodeColorOption = {
-  name: string
-  localizedName: () => string
-  value: {
-    dark: string
-    light: string
-    ringDark: string
-    ringLight: string
-  }
-}
-
-function getColorValue(color: string): NodeColorOption['value'] {
-  return {
-    dark: adjustColor(color, { lightness: 0.3 }),
-    light: adjustColor(color, { lightness: 0.4 }),
-    ringDark: adjustColor(color, { lightness: 0.5 }),
-    ringLight: adjustColor(color, { lightness: 0.1 })
-  }
-}
-
-const NO_COLOR_OPTION: NodeColorOption = {
-  name: 'noColor',
-  localizedName: () => t('color.noColor'),
-  value: getColorValue(LiteGraph.NODE_DEFAULT_BGCOLOR)
-}
-
-const nodeColorEntries = Object.entries(LGraphCanvas.node_colors)
-
-const colorOptions: NodeColorOption[] = [
-  NO_COLOR_OPTION,
-  ...nodeColorEntries.map(([name, color]) => ({
-    name,
-    localizedName: () => t(`color.${name}`),
-    value: getColorValue(color.bgcolor)
-  }))
-]
-
-const nodeColor = computed<NodeColorOption['name'] | null>({
-  get() {
-    if (targetNodes.value.length === 0) return null
-    const theColorOptions = targetNodes.value.map((item) =>
-      item.getColorOption()
-    )
-
-    let colorOption: ColorOption | null | false = theColorOptions[0]
-    if (!theColorOptions.every((option) => option === colorOption)) {
-      colorOption = false
-    }
-
-    if (colorOption === false) return null
-    if (colorOption == null || (!colorOption.bgcolor && !colorOption.color))
-      return NO_COLOR_OPTION.name
-    return (
-      nodeColorEntries.find(
-        ([_, color]) =>
-          color.bgcolor === colorOption.bgcolor &&
-          color.color === colorOption.color
-      )?.[0] ?? null
-    )
-  },
-  set(colorName) {
-    if (colorName === null) return
-
-    const canvasColorOption =
-      colorName === NO_COLOR_OPTION.name
-        ? null
-        : LGraphCanvas.node_colors[colorName]
-
-    for (const item of targetNodes.value) {
-      item.setColorOption(canvasColorOption)
-    }
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
+const hasGroups = computed(() => theGroups.value.length > 0)
+const hasNodes = computed(() => theNodes.value.length > 0)
+const isOnlyHasNodes = computed(() => hasNodes.value && !hasGroups.value)
 </script>
--- a/src/components/rightSidePanel/shared.test.ts
+++ b/src/components/rightSidePanel/shared.test.ts
@@ -0,0 +1,178 @@
+import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import { describe, expect, it, beforeEach } from 'vitest'
+import { flatAndCategorizeSelectedItems, searchWidgets } from './shared'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+describe('searchWidgets', () => {
+  const createWidget = (
+    name: string,
+    type: string,
+    value?: string,
+    label?: string
+  ): { widget: IBaseWidget } => ({
+    widget: {
+      name,
+      type,
+      value,
+      label
+    } as IBaseWidget
+  })
+
+  it('should return all widgets when query is empty', () => {
+    const widgets = [
+      createWidget('width', 'number', '100'),
+      createWidget('height', 'number', '200')
+    ]
+    const result = searchWidgets(widgets, '')
+    expect(result).toEqual(widgets)
+  })
+
+  it('should filter widgets by name, label, type, or value', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Size Control'),
+      createWidget('height', 'slider', '200', 'Image Height'),
+      createWidget('quality', 'text', 'high', 'Quality')
+    ]
+
+    expect(searchWidgets(widgets, 'width')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'slider')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'high')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'image')).toHaveLength(1)
+  })
+
+  it('should handle multiple search words', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Image Width'),
+      createWidget('height', 'number', '200', 'Image Height')
+    ]
+    const result = searchWidgets(widgets, 'image width')
+    expect(result).toHaveLength(1)
+    expect(result[0].widget.name).toBe('width')
+  })
+
+  it('should be case insensitive', () => {
+    const widgets = [createWidget('Width', 'Number', '100', 'Image Width')]
+    const result = searchWidgets(widgets, 'IMAGE width')
+    expect(result).toHaveLength(1)
+  })
+})
+
+describe('flatAndCategorizeSelectedItems', () => {
+  let testGroup1: LGraphGroup
+  let testGroup2: LGraphGroup
+  let testNode1: LGraphNode
+  let testNode2: LGraphNode
+  let testNode3: LGraphNode
+
+  beforeEach(() => {
+    testGroup1 = new LGraphGroup('Group 1', 1)
+    testGroup2 = new LGraphGroup('Group 2', 2)
+    testNode1 = new LGraphNode('Node 1')
+    testNode2 = new LGraphNode('Node 2')
+    testNode3 = new LGraphNode('Node 3')
+  })
+
+  it('should return empty arrays for empty input', () => {
+    const result = flatAndCategorizeSelectedItems([])
+
+    expect(result.all).toEqual([])
+    expect(result.nodes).toEqual([])
+    expect(result.groups).toEqual([])
+    expect(result.others).toEqual([])
+    expect(result.nodeToParentGroup.size).toBe(0)
+  })
+
+  it('should categorize nodes', () => {
+    const result = flatAndCategorizeSelectedItems([testNode1])
+
+    expect(result.all).toEqual([testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([])
+    expect(result.others).toEqual([])
+    expect(result.nodeToParentGroup.size).toBe(0)
+  })
+
+  it('should categorize single group without children', () => {
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1])
+    expect(result.nodes).toEqual([])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.others).toEqual([])
+  })
+
+  it('should flatten group with child nodes', () => {
+    testGroup1._children.add(testNode1)
+    testGroup1._children.add(testNode2)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1, testNode1, testNode2])
+    expect(result.nodes).toEqual([testNode1, testNode2])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup1)
+    expect(result.nodeToParentGroup.get(testNode2)).toBe(testGroup1)
+  })
+
+  it('should handle nested groups', () => {
+    testGroup1._children.add(testGroup2)
+    testGroup2._children.add(testNode1)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1, testGroup2, testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1, testGroup2])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup2)
+    expect(result.nodeToParentGroup.has(testGroup2 as any)).toBe(false)
+  })
+
+  it('should handle mixed selection of nodes and groups', () => {
+    testGroup1._children.add(testNode2)
+
+    const result = flatAndCategorizeSelectedItems([
+      testNode1,
+      testGroup1,
+      testNode3
+    ])
+
+    expect(result.all).toContain(testNode1)
+    expect(result.all).toContain(testNode2)
+    expect(result.all).toContain(testNode3)
+    expect(result.all).toContain(testGroup1)
+
+    expect(result.nodes).toEqual([testNode1, testNode2, testNode3])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBeUndefined()
+    expect(result.nodeToParentGroup.get(testNode2)).toBe(testGroup1)
+    expect(result.nodeToParentGroup.get(testNode3)).toBeUndefined()
+  })
+
+  it('should remove duplicate items across group and direct selection', () => {
+    testGroup1._children.add(testNode1)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1, testNode1])
+
+    expect(result.all).toEqual([testGroup1, testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup1)
+  })
+
+  it('should handle non-node/non-group items as others', () => {
+    const unknownItem = { pos: [0, 0], size: [100, 100] } as Positionable
+
+    const result = flatAndCategorizeSelectedItems([
+      testNode1,
+      unknownItem,
+      testGroup1
+    ])
+
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.others).toEqual([unknownItem])
+    expect(result.all).not.toContain(unknownItem)
+  })
+})
--- a/src/components/rightSidePanel/shared.ts
+++ b/src/components/rightSidePanel/shared.ts
@@ -0,0 +1,271 @@
+import type { InjectionKey, MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+export const GetNodeParentGroupKey: InjectionKey<
+  (node: LGraphNode) => LGraphGroup | null
+> = Symbol('getNodeParentGroup')
+
+export type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
+export type NodeWidgetsListList = Array<{
+  node: LGraphNode
+  widgets: NodeWidgetsList
+}>
+
+/**
+ * Searches widgets in a list and returns search results.
+ * Filters by name, localized label, type, and user-input value.
+ * Performs basic tokenization of the query string.
+ */
+export function searchWidgets<T extends { widget: IBaseWidget }[]>(
+  list: T,
+  query: string
+): T {
+  if (query.trim() === '') {
+    return list
+  }
+  const words = query.trim().toLowerCase().split(' ')
+  return list.filter(({ widget }) => {
+    const label = widget.label?.toLowerCase()
+    const name = widget.name.toLowerCase()
+    const type = widget.type.toLowerCase()
+    const value = widget.value?.toString().toLowerCase()
+    return words.every(
+      (word) =>
+        name.includes(word) ||
+        label?.includes(word) ||
+        type?.includes(word) ||
+        value?.includes(word)
+    )
+  }) as T
+}
+
+/**
+ * Searches widgets and nodes in a list and returns search results.
+ * First checks if the node title matches the query (if so, keeps entire node).
+ * Otherwise, filters widgets using searchWidgets.
+ * Performs basic tokenization of the query string.
+ */
+export function searchWidgetsAndNodes(
+  list: NodeWidgetsListList,
+  query: string
+): NodeWidgetsListList {
+  if (query.trim() === '') {
+    return list
+  }
+  const words = query.trim().toLowerCase().split(' ')
+  return list
+    .map((item) => {
+      const { node } = item
+      const title = node.getTitle().toLowerCase()
+      if (words.every((word) => title.includes(word))) {
+        return { ...item, keep: true }
+      }
+      return {
+        ...item,
+        keep: false,
+        widgets: searchWidgets(item.widgets, query)
+      }
+    })
+    .filter((item) => item.keep || item.widgets.length > 0)
+}
+
+type MixedSelectionItem = LGraphGroup | LGraphNode
+type FlatAndCategorizeSelectedItemsResult = {
+  all: MixedSelectionItem[]
+  nodes: LGraphNode[]
+  groups: LGraphGroup[]
+  others: Positionable[]
+  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
+}
+
+type FlatItemsContext = {
+  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
+  depth: number
+  parentGroup?: LGraphGroup
+}
+
+/**
+ * The selected items may contain "Group" nodes, which can include child nodes.
+ * This function flattens such structures and categorizes items into:
+ * - all: all categorizable nodes (does not include nodes in "others")
+ * - nodes: node items
+ * - groups: group items
+ * - others: items not currently supported
+ * - nodeToParentGroup: a map from each node to its direct parent group (if any)
+ * @param items The selected items to flatten and categorize
+ * @returns An object containing arrays: all, nodes, groups, others, and nodeToParentGroup map
+ */
+export function flatAndCategorizeSelectedItems(
+  items: Positionable[]
+): FlatAndCategorizeSelectedItemsResult {
+  const ctx: FlatItemsContext = {
+    nodeToParentGroup: new Map<LGraphNode, LGraphGroup>(),
+    depth: 0
+  }
+  const { all, nodes, groups, others } = flatItems(items, ctx)
+  return {
+    all: repeatItems(all),
+    nodes: repeatItems(nodes),
+    groups: repeatItems(groups),
+    others: repeatItems(others),
+    nodeToParentGroup: ctx.nodeToParentGroup
+  }
+}
+
+export function useFlatAndCategorizeSelectedItems(
+  items: MaybeRefOrGetter<Positionable[]>
+) {
+  const result = computed(() => flatAndCategorizeSelectedItems(toValue(items)))
+
+  return {
+    flattedItems: computed(() => result.value.all),
+    selectedNodes: computed(() => result.value.nodes),
+    selectedGroups: computed(() => result.value.groups),
+    selectedOthers: computed(() => result.value.others),
+    nodeToParentGroup: computed(() => result.value.nodeToParentGroup)
+  }
+}
+
+function flatItems(
+  items: Positionable[],
+  ctx: FlatItemsContext
+): Omit<FlatAndCategorizeSelectedItemsResult, 'nodeToParentGroup'> {
+  const result: MixedSelectionItem[] = []
+  const nodes: LGraphNode[] = []
+  const groups: LGraphGroup[] = []
+  const others: Positionable[] = []
+
+  if (ctx.depth > 1000) {
+    return {
+      all: [],
+      nodes: [],
+      groups: [],
+      others: []
+    }
+  }
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i] as Positionable
+
+    if (isLGraphGroup(item)) {
+      result.push(item)
+      groups.push(item)
+
+      const children = Array.from(item.children)
+      const childCtx: FlatItemsContext = {
+        nodeToParentGroup: ctx.nodeToParentGroup,
+        depth: ctx.depth + 1,
+        parentGroup: item
+      }
+      const {
+        all: childAll,
+        nodes: childNodes,
+        groups: childGroups,
+        others: childOthers
+      } = flatItems(children, childCtx)
+      result.push(...childAll)
+      nodes.push(...childNodes)
+      groups.push(...childGroups)
+      others.push(...childOthers)
+    } else if (isLGraphNode(item)) {
+      result.push(item)
+      nodes.push(item)
+      if (ctx.parentGroup) {
+        ctx.nodeToParentGroup.set(item, ctx.parentGroup)
+      }
+    } else {
+      // Other types of items are not supported yet
+      // Do not add to all
+      others.push(item)
+    }
+  }
+  return {
+    all: result,
+    nodes,
+    groups,
+    others
+  }
+}
+
+function repeatItems<T>(items: T[]): T[] {
+  const itemSet = new Set<T>()
+  const result: T[] = []
+  for (const item of items) {
+    if (itemSet.has(item)) continue
+    itemSet.add(item)
+    result.push(item)
+  }
+  return result
+}
+
+/**
+ * Renames a widget and its corresponding input.
+ * Handles both regular widgets and proxy widgets in subgraphs.
+ *
+ * @param widget The widget to rename
+ * @param node The node containing the widget
+ * @param newLabel The new label for the widget (empty string or undefined to clear)
+ * @param parents Optional array of parent SubgraphNodes (for proxy widgets)
+ * @returns true if the rename was successful, false otherwise
+ */
+export function renameWidget(
+  widget: IBaseWidget,
+  node: LGraphNode,
+  newLabel: string,
+  parents?: SubgraphNode[]
+): boolean {
+  // For proxy widgets in subgraphs, we need to rename the original interior widget
+  if (isProxyWidget(widget) && parents?.length) {
+    const subgraph = parents[0].subgraph
+    if (!subgraph) {
+      console.error('Could not find subgraph for proxy widget')
+      return false
+    }
+    const interiorNode = subgraph.getNodeById(parseInt(widget._overlay.nodeId))
+
+    if (!interiorNode) {
+      console.error('Could not find interior node for proxy widget')
+      return false
+    }
+
+    const originalWidget = interiorNode.widgets?.find(
+      (w) => w.name === widget._overlay.widgetName
+    )
+
+    if (!originalWidget) {
+      console.error('Could not find original widget for proxy widget')
+      return false
+    }
+
+    // Rename the original widget
+    originalWidget.label = newLabel || undefined
+
+    // Also rename the corresponding input on the interior node
+    const interiorInput = interiorNode.inputs?.find(
+      (inp) => inp.widget?.name === widget._overlay.widgetName
+    )
+    if (interiorInput) {
+      interiorInput.label = newLabel || undefined
+    }
+  }
+
+  // Always rename the widget on the current node (either regular widget or proxy widget)
+  const input = node.inputs?.find((inp) => inp.widget?.name === widget.name)
+
+  // Intentionally mutate the widget object here as it's a reference
+  // to the actual widget in the graph
+  widget.label = newLabel || undefined
+  if (input) {
+    input.label = newLabel || undefined
+  }
+
+  return true
+}
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import {
  computed,
  customRef,
@@ -26,17 +27,19 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'

-import SidePanelSearch from '../layout/SidePanelSearch.vue'
 import SubgraphNodeWidget from './SubgraphNodeWidget.vue'

 const canvasStore = useCanvasStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)

 const draggableList = ref<DraggableList | undefined>(undefined)
 const draggableItems = ref()
-const searchQuery = ref<string>('')
 const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
  get() {
    track()
@@ -56,10 +59,6 @@ const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
  }
 }))

-async function searcher(query: string) {
-  searchQuery.value = query
-}
-
 const activeNode = computed(() => {
  const node = canvasStore.selectedItems[0]
  if (node instanceof SubgraphNode) return node
@@ -244,14 +243,25 @@ onBeforeUnmount(() => {

 <template>
  <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
-    <div class="p-4 flex gap-2">
-      <SidePanelSearch :searcher />
+    <div class="px-4 pb-4 pt-1 flex gap-2 border-b border-interface-stroke">
+      <FormSearchInput v-model="searchQuery" />
    </div>

    <div class="flex-1">
+      <div
+        v-if="
+          searchQuery &&
+          filteredActive.length === 0 &&
+          filteredCandidates.length === 0
+        "
+        class="text-sm text-muted-foreground px-4 py-10 text-center"
+      >
+        {{ $t('rightSidePanel.noneSearchDesc') }}
+      </div>
+
      <div
        v-if="filteredActive.length"
-        class="flex flex-col border-t border-interface-stroke"
+        class="flex flex-col border-b border-interface-stroke"
      >
        <div
          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
@@ -270,7 +280,7 @@ onBeforeUnmount(() => {
          <SubgraphNodeWidget
            v-for="[node, widget] in filteredActive"
            :key="toKey([node, widget])"
-            class="bg-interface-panel-surface"
+            class="bg-comfy-menu-bg"
            :node-title="node.title"
            :widget-name="widget.name"
            :is-shown="true"
@@ -283,7 +293,7 @@ onBeforeUnmount(() => {

      <div
        v-if="filteredCandidates.length"
-        class="flex flex-col border-t border-interface-stroke"
+        class="flex flex-col border-b border-interface-stroke"
      >
        <div
          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
@@ -302,7 +312,7 @@ onBeforeUnmount(() => {
          <SubgraphNodeWidget
            v-for="[node, widget] in filteredCandidates"
            :key="toKey([node, widget])"
-            class="bg-interface-panel-surface"
+            class="bg-comfy-menu-bg"
            :node-title="node.title"
            :widget-name="widget.name"
            @toggle-visibility="promote([node, widget])"
@@ -312,7 +322,7 @@ onBeforeUnmount(() => {

      <div
        v-if="recommendedWidgets.length"
-        class="flex justify-center border-t border-interface-stroke py-4"
+        class="flex justify-center border-b border-interface-stroke py-4"
      >
        <Button
          size="sm"
--- a/src/composables/graph/useGraphHierarchy.test.ts
+++ b/src/composables/graph/useGraphHierarchy.test.ts
@@ -0,0 +1,133 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import * as measure from '@/lib/litegraph/src/measure'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+import { useGraphHierarchy } from './useGraphHierarchy'
+
+vi.mock('@/renderer/core/canvas/canvasStore')
+
+describe('useGraphHierarchy', () => {
+  let mockCanvasStore: ReturnType<typeof useCanvasStore>
+  let mockNode: LGraphNode
+  let mockGroups: LGraphGroup[]
+
+  beforeEach(() => {
+    mockNode = {
+      boundingRect: [100, 100, 50, 50]
+    } as unknown as LGraphNode
+
+    mockGroups = []
+
+    mockCanvasStore = {
+      canvas: {
+        graph: {
+          groups: mockGroups
+        }
+      }
+    } as any
+
+    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore)
+  })
+
+  describe('findParentGroup', () => {
+    it('returns null when no groups exist', () => {
+      const { findParentGroup } = useGraphHierarchy()
+
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('returns null when node is not in any group', () => {
+      const group = {
+        boundingRect: [0, 0, 50, 50]
+      } as unknown as LGraphGroup
+      mockGroups.push(group)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(false)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('returns the only group when node is in exactly one group', () => {
+      const group = {
+        boundingRect: [0, 0, 200, 200]
+      } as unknown as LGraphGroup
+      mockGroups.push(group)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(group)
+    })
+
+    it('returns the smallest group when node is in multiple groups', () => {
+      const largeGroup = {
+        boundingRect: [0, 0, 300, 300]
+      } as unknown as LGraphGroup
+      const smallGroup = {
+        boundingRect: [50, 50, 100, 100]
+      } as unknown as LGraphGroup
+      mockGroups.push(largeGroup, smallGroup)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+      vi.spyOn(measure, 'containsRect').mockReturnValue(false)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(smallGroup)
+    })
+
+    it('returns the inner group when one group contains another', () => {
+      const outerGroup = {
+        boundingRect: [0, 0, 300, 300]
+      } as unknown as LGraphGroup
+      const innerGroup = {
+        boundingRect: [50, 50, 100, 100]
+      } as unknown as LGraphGroup
+      mockGroups.push(outerGroup, innerGroup)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+      vi.spyOn(measure, 'containsRect').mockImplementation(
+        (container, contained) => {
+          // outerGroup contains innerGroup
+          if (container === outerGroup.boundingRect) {
+            return contained === innerGroup.boundingRect
+          }
+          return false
+        }
+      )
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(innerGroup)
+    })
+
+    it('handles null canvas gracefully', () => {
+      mockCanvasStore.canvas = null as any
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('handles null graph gracefully', () => {
+      mockCanvasStore.canvas!.graph = null as any
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+  })
+})
--- a/src/composables/graph/useGraphHierarchy.ts
+++ b/src/composables/graph/useGraphHierarchy.ts
@@ -0,0 +1,57 @@
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { containsCentre, containsRect } from '@/lib/litegraph/src/measure'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+/**
+ * Composable for working with graph hierarchy, specifically group containment.
+ */
+export function useGraphHierarchy() {
+  const canvasStore = useCanvasStore()
+
+  /**
+   * Finds the smallest group that contains the center of a node's bounding box.
+   * When multiple groups contain the node, returns the one with the smallest area.
+   *
+   * TODO: This traverses the entire graph and could be very slow; needs optimization.
+   * Consider spatial indexing or caching for large graphs.
+   *
+   * @param node - The node to find the parent group for
+   * @returns The parent group if found, otherwise null
+   */
+  function findParentGroup(node: LGraphNode): LGraphGroup | null {
+    const graphGroups = (canvasStore.canvas?.graph?.groups ??
+      []) as LGraphGroup[]
+
+    let parent: LGraphGroup | null = null
+
+    for (const group of graphGroups) {
+      const groupRect = group.boundingRect
+      if (!containsCentre(groupRect, node.boundingRect)) continue
+
+      if (!parent) {
+        parent = group
+        continue
+      }
+
+      const parentRect = parent.boundingRect
+      const candidateInsideParent = containsRect(parentRect, groupRect)
+      const parentInsideCandidate = containsRect(groupRect, parentRect)
+
+      if (candidateInsideParent && !parentInsideCandidate) {
+        parent = group
+        continue
+      }
+
+      const candidateArea = groupRect[2] * groupRect[3]
+      const parentArea = parentRect[2] * parentRect[3]
+
+      if (candidateArea < parentArea) parent = group
+    }
+
+    return parent
+  }
+
+  return {
+    findParentGroup
+  }
+}
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -104,7 +104,7 @@ function widgetWithVueTrack(
    return { get() {}, set() {} }
  })
 }
-export function useReactiveWidgetValue(widget: IBaseWidget) {
+function useReactiveWidgetValue(widget: IBaseWidget) {
  widgetWithVueTrack(widget)
  widget.vueTrack()
  return widget.value
@@ -120,12 +120,59 @@ function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
    update: (value) => (cagWidget.value = normalizeControlOption(value))
  }
 }
+
 function getNodeType(node: LGraphNode, widget: IBaseWidget) {
  if (!node.isSubgraphNode() || !isProxyWidget(widget)) return undefined
  const subNode = node.subgraph.getNodeById(widget._overlay.nodeId)
  return subNode?.type
 }

+/**
+ * Shared widget enhancements used by both safeWidgetMapper and Right Side Panel
+ */
+interface SharedWidgetEnhancements {
+  /** Reactive widget value that updates when the widget changes */
+  value: WidgetValue
+  /** Control widget for seed randomization/increment/decrement */
+  controlWidget?: SafeControlWidget
+  /** Input specification from node definition */
+  spec?: InputSpec
+  /** Node type (for subgraph promoted widgets) */
+  nodeType?: string
+  /** Border style for promoted/advanced widgets */
+  borderStyle?: string
+  /** Widget label */
+  label?: string
+  /** Widget options */
+  options?: Record<string, any>
+}
+
+/**
+ * Extracts common widget enhancements shared across different rendering contexts.
+ * This function centralizes the logic for extracting metadata and reactive values
+ * from widgets, ensuring consistency between Nodes 2.0 and Right Side Panel.
+ */
+export function getSharedWidgetEnhancements(
+  node: LGraphNode,
+  widget: IBaseWidget
+): SharedWidgetEnhancements {
+  const nodeDefStore = useNodeDefStore()
+
+  return {
+    value: useReactiveWidgetValue(widget),
+    controlWidget: getControlWidget(widget),
+    spec: nodeDefStore.getInputSpecForWidget(node, widget.name),
+    nodeType: getNodeType(node, widget),
+    borderStyle: widget.promoted
+      ? 'ring ring-component-node-widget-promoted'
+      : widget.advanced
+        ? 'ring ring-component-node-widget-advanced'
+        : undefined,
+    label: widget.label,
+    options: widget.options
+  }
+}
+
 /**
 * Validates that a value is a valid WidgetValue type
 */
@@ -161,16 +208,13 @@ export function safeWidgetMapper(
  node: LGraphNode,
  slotMetadata: Map<string, WidgetSlotMetadata>
 ): (widget: IBaseWidget) => SafeWidgetData {
-  const nodeDefStore = useNodeDefStore()
  return function (widget) {
    try {
-      const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
+      // Get shared enhancements used by both Nodes 2.0 and Right Side Panel
+      const sharedEnhancements = getSharedWidgetEnhancements(node, widget)
      const slotInfo = slotMetadata.get(widget.name)
-      const borderStyle = widget.promoted
-        ? 'ring ring-component-node-widget-promoted'
-        : widget.advanced
-          ? 'ring ring-component-node-widget-advanced'
-          : undefined
+
+      // Wrapper callback specific to Nodes 2.0 rendering
      const callback = (v: unknown) => {
        const value = normalizeWidgetValue(v)
        widget.value = value ?? undefined
@@ -185,16 +229,10 @@ export function safeWidgetMapper(
      return {
        name: widget.name,
        type: widget.type,
-        value: useReactiveWidgetValue(widget),
-        borderStyle,
+        ...sharedEnhancements,
        callback,
-        controlWidget: getControlWidget(widget),
        hasLayoutSize: typeof widget.computeLayoutSize === 'function',
        isDOMWidget: isDOMWidget(widget),
-        label: widget.label,
-        nodeType: getNodeType(node, widget),
-        options: widget.options,
-        spec,
        slotMetadata: slotInfo
      }
    } catch (error) {
--- a/src/core/graph/subgraph/proxyWidget.test.ts
+++ b/src/core/graph/subgraph/proxyWidget.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'

 import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
+import { promoteWidget } from '@/core/graph/subgraph/proxyWidgetUtils'
 import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphCanvas, SubgraphNode } from '@/lib/litegraph/src/litegraph'
@@ -118,4 +119,23 @@ describe('Subgraph proxyWidgets', () => {
    subgraphNode.widgets[0].computedHeight = 10
    expect(subgraphNode.widgets[0].value).toBe('value')
  })
+  test('Prevents duplicate promotion', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
+
+    const widget = innerNodes[0].widgets![0]
+
+    // Promote once
+    promoteWidget(innerNodes[0], widget, [subgraphNode])
+    expect(subgraphNode.widgets.length).toBe(1)
+    expect(subgraphNode.properties.proxyWidgets).toHaveLength(1)
+
+    // Try to promote again - should not create duplicate
+    promoteWidget(innerNodes[0], widget, [subgraphNode])
+    expect(subgraphNode.widgets.length).toBe(1)
+    expect(subgraphNode.properties.proxyWidgets).toHaveLength(1)
+    expect(subgraphNode.properties.proxyWidgets).toStrictEqual([
+      ['1', 'stringWidget']
+    ])
+  })
 })
--- a/src/core/graph/subgraph/proxyWidgetUtils.ts
+++ b/src/core/graph/subgraph/proxyWidgetUtils.ts
@@ -29,8 +29,13 @@ export function promoteWidget(
  parents: SubgraphNode[]
 ) {
  for (const parent of parents) {
+    const existingProxyWidgets = getProxyWidgets(parent)
+    // Prevent duplicate promotion
+    if (existingProxyWidgets.some(matchesPropertyItem([node, widget]))) {
+      continue
+    }
    const proxyWidgets = [
-      ...getProxyWidgets(parent),
+      ...existingProxyWidgets,
      widgetItemToProperty([node, widget])
    ]
    parent.properties.proxyWidgets = proxyWidgets
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -435,6 +435,8 @@
    "Save Image": "Save Image",
    "Rename": "Rename",
    "RenameWidget": "Rename Widget",
+    "FavoriteWidget": "Favorite Widget",
+    "UnfavoriteWidget": "Unfavorite Widget",
    "Copy": "Copy",
    "Duplicate": "Duplicate",
    "Paste": "Paste",
@@ -2495,8 +2497,10 @@
  "rightSidePanel": {
    "togglePanel": "Toggle properties panel",
    "noSelection": "Select a node to see its properties and info.",
-    "title": "No node(s) selected | 1 node selected | {count} nodes selected",
+    "workflowOverview": "Workflow Overview",
+    "title": "No item(s) selected | 1 item selected | {count} items selected",
    "parameters": "Parameters",
+    "nodes": "Nodes",
    "info": "Info",
    "color": "Node color",
    "pinned": "Pinned",
@@ -2506,9 +2510,43 @@
    "inputs": "INPUTS",
    "inputsNone": "NO INPUTS",
    "inputsNoneTooltip": "Node has no inputs",
+    "advancedInputs": "ADVANCED INPUTS",
+    "showAdvancedInputsButton": "Show advanced inputs",
    "properties": "Properties",
    "nodeState": "Node state",
-    "settings": "Settings"
+    "settings": "Settings",
+    "addFavorite": "Favorite",
+    "removeFavorite": "Unfavorite",
+    "hideInput": "Hide input",
+    "showInput": "Show input",
+    "locateNode": "Locate node on canvas",
+    "favorites": "FAVORITED INPUTS",
+    "favoritesNone": "NO FAVORITED INPUTS",
+    "favoritesNoneTooltip": "Star widgets to quickly access them without selecting nodes",
+    "globalSettings": {
+      "title": "Global Settings",
+      "searchPlaceholder": "Search quick settings...",
+      "nodes": "NODES",
+      "canvas": "CANVAS",
+      "connectionLinks": "CONNECTION LINKS",
+      "showAdvanced": "Show advanced parameters",
+      "showAdvancedTooltip": "This is an important setting that when set to TRUE, reveals all advanced parameters for nodes",
+      "showInfoBadges": "Show info badges",
+      "showToolbox": "Show toolbox on selection",
+      "nodes2": "Nodes 2.0",
+      "gridSpacing": "Grid spacing",
+      "snapNodesToGrid": "Snap nodes to grid",
+      "linkShape": "Link shape",
+      "showConnectedLinks": "Show connected links",
+      "viewAllSettings": "View all settings"
+    },
+    "groupSettings": "Group Settings",
+    "groups": "Groups",
+    "favoritesNoneDesc": "Inputs you favorite will show up here",
+    "noneSearchDesc": "No items match your search",
+    "nodesNoneDesc": "NO NODES",
+    "fallbackGroupTitle": "Group",
+    "fallbackNodeTitle": "Node"
  },
  "help": {
    "recentReleases": "Recent releases",
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -1158,6 +1158,13 @@ export const CORE_SETTINGS: SettingParams[] = [
    defaultValue: false,
    versionAdded: '1.34.1'
  },
+  {
+    id: 'Comfy.RightSidePanel.IsOpen',
+    name: 'Right side panel open state',
+    type: 'hidden',
+    defaultValue: false,
+    versionAdded: '1.37.0'
+  },
  {
    id: 'Comfy.Queue.QPOV2',
    name: 'Queue Panel V2',
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -119,6 +119,23 @@
        <div v-if="shouldShowPreviewImg" class="min-h-0 flex-1 px-4">
          <LivePreview :image-url="latestPreviewUrl || null" />
        </div>
+
+        <!-- Show advanced inputs button for subgraph nodes -->
+        <div v-if="showAdvancedInputsButton" class="flex justify-center px-3">
+          <button
+            :class="
+              cn(
+                WidgetInputBaseClass,
+                'w-full h-7 flex justify-center items-center gap-2 text-sm px-3 outline-0 ring-0 truncate',
+                'transition-all cursor-pointer hover:bg-accent-background duration-150 active:scale-95'
+              )
+            "
+            @click.stop="handleShowAdvancedInputs"
+          >
+            <i class="icon-[lucide--settings-2] size-4" />
+            <span>{{ t('rightSidePanel.showAdvancedInputsButton') }}</span>
+          </button>
+        </div>
      </div>
    </template>

@@ -148,6 +165,7 @@ import {
  LiteGraph,
  RenderShape
 } from '@/lib/litegraph/src/litegraph'
+import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -169,6 +187,7 @@ import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isTransparent } from '@/utils/colorUtil'
 import {
  getLocatorIdFromNodeData,
@@ -177,6 +196,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'

 import { useNodeResize } from '../interactions/resize/useNodeResize'
+import { WidgetInputBaseClass } from '../widgets/components/layout'
 import LivePreview from './LivePreview.vue'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
@@ -474,6 +494,22 @@ const lgraphNode = computed(() => {
  return getNodeByLocatorId(app.rootGraph, locatorId)
 })

+const showAdvancedInputsButton = computed(() => {
+  const node = lgraphNode.value
+  if (!node || !(node instanceof SubgraphNode)) return false
+
+  // Check if there are hidden inputs (widgets not promoted)
+  const interiorNodes = node.subgraph.nodes
+  const allInteriorWidgets = interiorNodes.flatMap((n) => n.widgets ?? [])
+
+  return allInteriorWidgets.some((w) => !w.computedDisabled && !w.promoted)
+})
+
+function handleShowAdvancedInputs() {
+  const rightSidePanelStore = useRightSidePanelStore()
+  rightSidePanelStore.focusSection('advanced-inputs')
+}
+
 const nodeMedia = computed(() => {
  const newOutputs = nodeOutputs.nodeOutputs[nodeOutputLocatorId.value]
  const node = lgraphNode.value
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
 import { ref, toRef, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import type { HTMLAttributes, MaybeRefOrGetter } from 'vue'

 import { cn } from '@/utils/tailwindUtil'

-const { searcher = async () => {}, updateKey } = defineProps<{
+const {
+  searcher = async () => {},
+  updateKey,
+  autofocus = false,
+  class: customClass
+} = defineProps<{
  searcher?: (
    query: string,
    onCleanup: (cleanupFn: () => void) => void
  ) => Promise<void>
  updateKey?: MaybeRefOrGetter<unknown>
+  autofocus?: boolean
+  class?: HTMLAttributes['class']
 }>()

 const searchQuery = defineModel<string>({ default: '' })

 const isQuerying = ref(false)
-const debouncedSearchQuery = refDebounced(searchQuery, 100, {
-  maxWait: 100
+const debouncedSearchQuery = refDebounced(searchQuery, 250, {
+  maxWait: 1000
 })
 watch(searchQuery, (value) => {
  isQuerying.value = value !== debouncedSearchQuery.value
@@ -44,34 +51,54 @@ watch(
  },
  { immediate: true }
 )
+
+function handleFocus(event: FocusEvent) {
+  const target = event.target as HTMLInputElement
+  target.select()
+}
 </script>

 <template>
  <label
    :class="
      cn(
-        'mt-1 py-1.5 bg-secondary-background rounded-lg transition-all duration-150',
-        'flex-1 flex gap-2 px-2 items-center',
+        'group',
+        'bg-component-node-widget-background rounded-lg transition-all duration-150',
+        'flex-1 flex items-center',
        'text-base-foreground border-0',
-        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80'
+        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
+        customClass
      )
    "
  >
    <i
      :class="
        cn(
-          'size-4 text-muted-foreground',
+          'size-4 ml-2 shrink-0 transition-colors duration-150',
          isQuerying
            ? 'icon-[lucide--loader-circle] animate-spin'
-            : 'icon-[lucide--search]'
+            : 'icon-[lucide--search]',
+          searchQuery?.trim() !== ''
+            ? 'text-base-foreground'
+            : 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
        )
      "
    />
    <input
      v-model="searchQuery"
      type="text"
-      class="bg-transparent border-0 outline-0 ring-0 h-5"
+      class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2"
      :placeholder="$t('g.searchPlaceholder')"
+      :autofocus
+      @focus="handleFocus"
    />
+    <button
+      v-if="searchQuery.trim().length > 0"
+      class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
+      :aria-label="$t('g.clear')"
+      @click="searchQuery = ''"
+    >
+      <i :class="cn('icon-[lucide--delete] size-4 cursor-pointer')" />
+    </button>
  </label>
 </template>
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
-import { computed, ref, useTemplateRef, watch } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'

 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -68,10 +67,6 @@ const layoutMode = defineModel<LayoutMode>('layoutMode', {
 const files = defineModel<File[]>('files', { default: [] })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })

-const debouncedSearchQuery = refDebounced(searchQuery, 700, {
-  maxWait: 700
-})
-const isQuerying = ref(false)
 const toastStore = useToastStore()
 const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
@@ -85,36 +80,6 @@ const maxSelectable = computed(() => {

 const filteredItems = ref<DropdownItem[]>([])

-watch(searchQuery, (value) => {
-  isQuerying.value = value !== debouncedSearchQuery.value
-})
-
-watch(
-  [debouncedSearchQuery, () => props.items],
-  (_, __, onCleanup) => {
-    let isCleanup = false
-    let cleanupFn: undefined | (() => void)
-    onCleanup(() => {
-      isCleanup = true
-      cleanupFn?.()
-    })
-
-    void props
-      .searcher(
-        debouncedSearchQuery.value,
-        props.items,
-        (cb) => (cleanupFn = cb)
-      )
-      .then((result) => {
-        if (!isCleanup) filteredItems.value = result
-      })
-      .finally(() => {
-        if (!isCleanup) isQuerying.value = false
-      })
-  },
-  { immediate: true }
-)
-
 const defaultSorter = computed<SortOption['sorter']>(() => {
  const sorter = props.sortOptions.find(
    (option) => option.id === 'default'
@@ -183,6 +148,23 @@ function handleSelection(item: DropdownItem, index: number) {
    closeDropdown()
  }
 }
+
+async function customSearcher(
+  query: string,
+  onCleanup: (cleanupFn: () => void) => void
+) {
+  let isCleanup = false
+  let cleanupFn: undefined | (() => void)
+  onCleanup(() => {
+    isCleanup = true
+    cleanupFn?.()
+  })
+  await props
+    .searcher(query, props.items, (cb) => (cleanupFn = cb))
+    .then((results) => {
+      if (!isCleanup) filteredItems.value = results
+    })
+}
 </script>

 <template>
@@ -223,7 +205,7 @@ function handleSelection(item: DropdownItem, index: number) {
        :filter-options="filterOptions"
        :sort-options="sortOptions"
        :disabled="disabled"
-        :is-querying="isQuerying"
+        :searcher="customSearcher"
        :items="sortedItems"
        :is-selected="internalIsSelected"
        :max-selectable="maxSelectable"
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -15,9 +15,12 @@ import type {
 interface Props {
  items: DropdownItem[]
  isSelected: (item: DropdownItem, index: number) => boolean
-  isQuerying: boolean
  filterOptions: FilterOption[]
  sortOptions: SortOption[]
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
 }

 defineProps<Props>()
@@ -50,7 +53,7 @@ const searchQuery = defineModel<string>('searchQuery')
      v-model:sort-selected="sortSelected"
      v-model:search-query="searchQuery"
      :sort-options="sortOptions"
-      :is-querying="isQuerying"
+      :searcher
    />
    <!-- List -->
    <div class="relative flex h-full mt-2 overflow-y-scroll">
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -4,10 +4,14 @@ import { ref, useTemplateRef } from 'vue'

 import { cn } from '@/utils/tailwindUtil'

+import FormSearchInput from '../FormSearchInput.vue'
 import type { LayoutMode, OptionId, SortOption } from './types'

 defineProps<{
-  isQuerying: boolean
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
  sortOptions: SortOption[]
 }>()

@@ -46,33 +50,18 @@ function handleSortSelected(item: SortOption) {

 <template>
  <div class="text-secondary flex gap-2 px-4">
-    <!-- TODO: Replace with a common Search input -->
-    <label
+    <FormSearchInput
+      v-model="searchQuery"
+      :searcher
      :class="
        cn(
          actionButtonStyle,
-          'flex-1 flex px-2 items-center text-base leading-none cursor-text',
-          searchQuery?.trim() !== '' ? 'text-base-foreground' : '',
          'hover:outline-component-node-widget-background-highlighted/80',
-          'focus-within:outline-component-node-widget-background-highlighted/80'
+          'focus-within:outline-component-node-widget-background-highlighted/80 focus-within:ring-0'
        )
      "
-    >
-      <i
-        v-if="isQuerying"
-        class="mr-2 icon-[lucide--loader-circle] size-4 animate-spin"
-      />
-      <i v-else class="mr-2 icon-[lucide--search] size-4" />
-      <input
-        v-model="searchQuery"
-        type="text"
-        autofocus
-        :class="resetInputStyle"
-        :placeholder="$t('g.search')"
-      />
-    </label>
+    />

-    <!-- Sort Select -->
    <button
      ref="sortTriggerRef"
      :class="
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -554,7 +554,8 @@ const zSettings = z.object({
  'single.setting': z.any(),
  'LiteGraph.Node.DefaultPadding': z.boolean(),
  'LiteGraph.Pointer.TrackpadGestures': z.boolean(),
-  'Comfy.VersionCompatibility.DisableWarnings': z.boolean()
+  'Comfy.VersionCompatibility.DisableWarnings': z.boolean(),
+  'Comfy.RightSidePanel.IsOpen': z.boolean()
 })

 export type EmbeddingsResponse = z.infer<typeof zEmbeddingsResponse>
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -50,6 +50,7 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
+import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
@@ -674,7 +675,8 @@ export const useLitegraphService = () => {
        const input = this.inputs.find(
          (inp) => inp.widget?.name === overWidget.name
        )
-        if (input)
+
+        if (input) {
          options.unshift({
            content: `${t('contextMenu.RenameWidget')}: ${overWidget.label ?? overWidget.name}`,
            callback: async () => {
@@ -690,6 +692,22 @@ export const useLitegraphService = () => {
              useCanvasStore().canvas?.setDirty(true)
            }
          })
+        }
+
+        const favoritedWidgetsStore = useFavoritedWidgetsStore()
+        const isFavorited = favoritedWidgetsStore.isFavorited(
+          this,
+          overWidget.name
+        )
+        options.unshift({
+          content: isFavorited
+            ? `${t('contextMenu.UnfavoriteWidget')}: ${overWidget.label ?? overWidget.name}`
+            : `${t('contextMenu.FavoriteWidget')}: ${overWidget.label ?? overWidget.name}`,
+          callback: () => {
+            favoritedWidgetsStore.toggleFavorite(this, overWidget.name)
+          }
+        })
+
        if (this.graph && !this.graph.isRootGraph) {
          addWidgetPromotionOptions(options, overWidget, this)
        }
--- a/src/stores/workspace/favoritedWidgetsStore.ts
+++ b/src/stores/workspace/favoritedWidgetsStore.ts
@@ -0,0 +1,358 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { NodeLocatorId } from '@/types/nodeIdentification'
+import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+/**
+ * Unique identifier for a favorited widget.
+ * Combines node locator ID and widget name to locate a widget in the graph.
+ */
+interface FavoritedWidgetId {
+  /** The node locator ID in the graph */
+  nodeLocatorId: NodeLocatorId
+  /** The widget name on the node */
+  widgetName: string
+}
+
+/**
+ * A favorited widget with its resolved runtime instance.
+ * The widget instance may be null if the node or widget no longer exists.
+ */
+interface FavoritedWidget extends FavoritedWidgetId {
+  /** The resolved node instance (null if node was deleted) */
+  node: LGraphNode | null
+  /** The resolved widget instance (null if widget no longer exists) */
+  widget: IBaseWidget | null
+  /** Display label for the favorited item */
+  label: string
+}
+
+export interface ValidFavoritedWidget extends FavoritedWidget {
+  node: LGraphNode
+  widget: IBaseWidget
+}
+
+/**
+ * Storage format for persisted favorited widgets.
+ * Stored in workflow.extra.favoritedWidgets.
+ */
+interface FavoritedWidgetStorage {
+  /** Array of favorited widget identifiers */
+  favorites: FavoritedWidgetId[]
+}
+
+/**
+ * Store for managing favorited/starred widgets.
+ *
+ * Favorited widgets can be accessed and edited from the right side panel
+ * without needing to select the corresponding node. This store manages:
+ * - Persisting favorited widget IDs per workflow
+ * - Resolving widget IDs to actual widget instances
+ * - Handling cases where nodes/widgets are deleted
+ *
+ * Design decisions:
+ * - Scope: Per-workflow (not global user preference)
+ * - Identifier: node locator ID + widget.name
+ * - Persistence: Stored in workflow.extra.favoritedWidgets (serialized with workflow)
+ * - Future: Can be extended for Linear Mode
+ */
+export const useFavoritedWidgetsStore = defineStore('favoritedWidgets', () => {
+  const workflowStore = useWorkflowStore()
+  const canvasStore = useCanvasStore()
+
+  /** In-memory array of favorited widget IDs, ordered for display */
+  const favoritedIds = ref<string[]>([])
+
+  /**
+   * Generate a unique string key for a favorited widget ID.
+   */
+  function getFavoriteKey(id: FavoritedWidgetId): string {
+    return JSON.stringify([id.nodeLocatorId, id.widgetName])
+  }
+
+  /**
+   * Parse a favorite key back into a FavoritedWidgetId.
+   */
+  function parseFavoriteKey(key: string): FavoritedWidgetId | null {
+    try {
+      const [nodeLocatorId, widgetName] = JSON.parse(key) as [string, string]
+      if (!nodeLocatorId || !widgetName) return null
+      return { nodeLocatorId, widgetName }
+    } catch {
+      const separatorIndex = key.indexOf(':')
+      if (separatorIndex === -1) return null
+      const nodeLocatorId = key.slice(0, separatorIndex)
+      const widgetName = key.slice(separatorIndex + 1)
+      if (!nodeLocatorId || !widgetName) return null
+      return { nodeLocatorId, widgetName }
+    }
+  }
+
+  function normalizeFavoritedId(
+    id: FavoritedWidgetId | { nodeId?: unknown; widgetName?: unknown } | null
+  ): FavoritedWidgetId | null {
+    if (!id || !id.widgetName) return null
+
+    if ('nodeLocatorId' in id && id.nodeLocatorId) {
+      return {
+        nodeLocatorId: String(id.nodeLocatorId),
+        widgetName: String(id.widgetName)
+      }
+    }
+
+    if ('nodeId' in id && id.nodeId !== undefined) {
+      return {
+        nodeLocatorId: workflowStore.nodeIdToNodeLocatorId(id.nodeId as NodeId),
+        widgetName: String(id.widgetName)
+      }
+    }
+
+    return null
+  }
+
+  function createFavoriteId(
+    node: LGraphNode,
+    widgetName: string
+  ): FavoritedWidgetId {
+    return {
+      nodeLocatorId: workflowStore.nodeToNodeLocatorId(node),
+      widgetName
+    }
+  }
+
+  /**
+   * Load favorited widgets from the current workflow's extra data.
+   */
+  function loadFromWorkflow() {
+    const graph = app.rootGraph
+    if (!graph) {
+      favoritedIds.value = []
+      return
+    }
+
+    try {
+      const storedData = graph.extra?.favoritedWidgets as
+        | FavoritedWidgetStorage
+        | undefined
+
+      if (storedData?.favorites) {
+        const normalized = storedData.favorites
+          .map((fav) => normalizeFavoritedId(fav))
+          .filter((fav): fav is FavoritedWidgetId => fav !== null)
+        favoritedIds.value = normalized.map(getFavoriteKey)
+      } else {
+        favoritedIds.value = []
+      }
+    } catch (error) {
+      console.error('Failed to load favorited widgets from workflow:', error)
+      favoritedIds.value = []
+    }
+  }
+
+  /**
+   * Save favorited widgets to the current workflow's extra data.
+   * Marks the workflow as modified.
+   */
+  function saveToWorkflow() {
+    const graph = app.rootGraph
+    if (!graph) return
+
+    try {
+      const favorites: FavoritedWidgetId[] = favoritedIds.value
+        .map(parseFavoriteKey)
+        .filter((id): id is FavoritedWidgetId => id !== null)
+
+      const data: FavoritedWidgetStorage = { favorites }
+
+      // Ensure extra object exists
+      graph.extra ??= {}
+      graph.extra.favoritedWidgets = data
+
+      // Mark the workflow as modified
+      canvasStore.canvas?.setDirty(true, true)
+    } catch (error) {
+      console.error('Failed to save favorited widgets to workflow:', error)
+    }
+  }
+
+  /**
+   * Resolve a favorited widget ID to its actual widget instance.
+   * Returns null if the node or widget no longer exists.
+   */
+  function resolveWidget(id: FavoritedWidgetId): FavoritedWidget {
+    const graph = app.rootGraph
+    if (!graph) {
+      return {
+        ...id,
+        node: null,
+        widget: null,
+        label: `${id.widgetName} (graph not loaded)`
+      }
+    }
+
+    const node = getNodeByLocatorId(graph, id.nodeLocatorId)
+    if (!node) {
+      return {
+        ...id,
+        node: null,
+        widget: null,
+        label: `${id.widgetName} (node deleted)`
+      }
+    }
+
+    const widget = node.widgets?.find((w) => w.name === id.widgetName)
+    if (!widget) {
+      return {
+        ...id,
+        node,
+        widget: null,
+        label: `${id.widgetName} (widget not found)`
+      }
+    }
+
+    const nodeTitle = node.title || node.type || 'Node'
+    const widgetLabel = widget.label || widget.name
+    return {
+      ...id,
+      node,
+      widget,
+      label: `${nodeTitle} / ${widgetLabel}`
+    }
+  }
+
+  /**
+   * Get all favorited widgets with their resolved instances.
+   * Widgets that no longer exist will have null node/widget properties.
+   */
+  const favoritedWidgets = computed((): FavoritedWidget[] => {
+    return favoritedIds.value
+      .map(parseFavoriteKey)
+      .filter((id): id is FavoritedWidgetId => id !== null)
+      .map(resolveWidget)
+  })
+
+  /**
+   * Get only the valid favorited widgets (where both node and widget exist).
+   */
+  const validFavoritedWidgets = computed((): ValidFavoritedWidget[] => {
+    return favoritedWidgets.value.filter(
+      (fw) => fw.node !== null && fw.widget !== null
+    ) as ValidFavoritedWidget[]
+  })
+
+  /**
+   * Check if a widget is favorited.
+   */
+  function isFavorited(node: LGraphNode, widgetName: string): boolean {
+    return favoritedIds.value.includes(
+      getFavoriteKey(createFavoriteId(node, widgetName))
+    )
+  }
+
+  /**
+   * Add a widget to favorites.
+   */
+  function addFavorite(node: LGraphNode, widgetName: string) {
+    const key = getFavoriteKey(createFavoriteId(node, widgetName))
+    if (favoritedIds.value.includes(key)) return
+
+    favoritedIds.value.push(key)
+    saveToWorkflow()
+  }
+
+  /**
+   * Remove a widget from favorites.
+   */
+  function removeFavorite(node: LGraphNode, widgetName: string) {
+    const key = getFavoriteKey(createFavoriteId(node, widgetName))
+    const index = favoritedIds.value.indexOf(key)
+    if (index === -1) return
+
+    favoritedIds.value.splice(index, 1)
+    saveToWorkflow()
+  }
+
+  /**
+   * Toggle a widget's favorite status.
+   */
+  function toggleFavorite(node: LGraphNode, widgetName: string) {
+    if (isFavorited(node, widgetName)) {
+      removeFavorite(node, widgetName)
+    } else {
+      addFavorite(node, widgetName)
+    }
+  }
+
+  /**
+   * Clear all favorites for the current workflow.
+   */
+  function clearFavorites() {
+    favoritedIds.value = []
+    saveToWorkflow()
+  }
+
+  /**
+   * Remove invalid favorites (where node or widget no longer exists).
+   * Useful for cleanup after loading a workflow.
+   */
+  function pruneInvalidFavorites() {
+    const validKeys = validFavoritedWidgets.value.map((fw) =>
+      getFavoriteKey({
+        nodeLocatorId: fw.nodeLocatorId,
+        widgetName: fw.widgetName
+      })
+    )
+    const validSet = new Set(validKeys)
+
+    const filteredIds = favoritedIds.value.filter((key) => validSet.has(key))
+
+    if (filteredIds.length !== favoritedIds.value.length) {
+      favoritedIds.value = filteredIds
+      saveToWorkflow()
+    }
+  }
+
+  /**
+   * Reorder favorites based on the provided array of widgets.
+   * Used when dragging and dropping favorites to reorder them.
+   */
+  function reorderFavorites(reorderedWidgets: ValidFavoritedWidget[]) {
+    favoritedIds.value = reorderedWidgets.map((fw) =>
+      getFavoriteKey({
+        nodeLocatorId: fw.nodeLocatorId,
+        widgetName: fw.widgetName
+      })
+    )
+    saveToWorkflow()
+  }
+
+  // Watch for workflow changes and reload favorites from workflow.extra
+  watch(
+    () => workflowStore.activeWorkflow?.path,
+    () => {
+      loadFromWorkflow()
+    },
+    { immediate: true }
+  )
+
+  return {
+    // State
+    favoritedWidgets,
+    validFavoritedWidgets,
+
+    // Actions
+    isFavorited,
+    addFavorite,
+    removeFavorite,
+    toggleFavorite,
+    clearFavorites,
+    pruneInvalidFavorites,
+    reorderFavorites
+  }
+})
--- a/src/stores/workspace/rightSidePanelStore.ts
+++ b/src/stores/workspace/rightSidePanelStore.ts
@@ -1,16 +1,33 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'

-export type RightSidePanelTab = 'parameters' | 'settings' | 'info' | 'subgraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+export type RightSidePanelTab =
+  | 'parameters'
+  | 'nodes'
+  | 'settings'
+  | 'info'
+  | 'subgraph'
+
+type RightSidePanelSection = 'advanced-inputs' | string

 /**
 * Store for managing the right side panel state.
 * This panel displays properties and settings for selected nodes.
 */
 export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
-  const isOpen = ref(false)
+  const settingStore = useSettingStore()
+
+  const isOpen = computed({
+    get: () => settingStore.get('Comfy.RightSidePanel.IsOpen'),
+    set: (value: boolean) =>
+      settingStore.set('Comfy.RightSidePanel.IsOpen', value)
+  })
  const activeTab = ref<RightSidePanelTab>('parameters')
  const isEditingSubgraph = computed(() => activeTab.value === 'subgraph')
+  const focusedSection = ref<RightSidePanelSection | null>(null)
+  const searchQuery = ref('')

  function openPanel(tab?: RightSidePanelTab) {
    isOpen.value = true
@@ -27,12 +44,33 @@ export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
    isOpen.value = !isOpen.value
  }

+  /**
+   * Focus on a specific section in the right side panel.
+   * This will open the panel, switch to the parameters tab, and signal
+   * the component to expand and scroll to the section.
+   */
+  function focusSection(section: RightSidePanelSection) {
+    openPanel('parameters')
+    focusedSection.value = section
+  }
+
+  /**
+   * Clear the focused section after it has been handled.
+   */
+  function clearFocusedSection() {
+    focusedSection.value = null
+  }
+
  return {
    isOpen,
    activeTab,
    isEditingSubgraph,
+    focusedSection,
+    searchQuery,
    openPanel,
    closePanel,
-    togglePanel
+    togglePanel,
+    focusSection,
+    clearFocusedSection
  }
 })