feat: right side panel (#6952)

<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -14,10 +14,10 @@
       </div>
 
       <Splitter
-        key="main-splitter-stable"
+        :key="splitterRefreshKey"
         class="splitter-overlay flex-1 overflow-hidden"
-        :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-        :state-key="sidebarStateKey || 'main-splitter'"
+        :pt:gutter="getSplitterGutterClasses"
+        :state-key="sidebarStateKey"
         state-storage="local"
       >
         <SplitterPanel
@@ -80,6 +80,16 @@
             name="side-bar-panel"
           />
         </SplitterPanel>
+
+        <!-- Right Side Panel - independent of sidebar -->
+        <SplitterPanel
+          v-if="rightSidePanelVisible"
+          class="right-side-panel pointer-events-auto"
+          :min-size="15"
+          :size="20"
+        >
+          <slot name="right-side-panel" />
+        </SplitterPanel>
       </Splitter>
     </div>
   </div>
@@ -92,9 +102,11 @@ import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 const settingStore = useSettingStore()
+const rightSidePanelStore = useRightSidePanelStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -109,6 +121,7 @@ const sidebarPanelVisible = computed(
 const bottomPanelVisible = computed(
   () => useBottomPanelStore().bottomPanelVisible
 )
+const rightSidePanelVisible = computed(() => rightSidePanelStore.isOpen)
 const activeSidebarTabId = computed(
   () => useSidebarTabStore().activeSidebarTabId
 )
@@ -120,6 +133,21 @@ const sidebarStateKey = computed(() => {
   // When no tab is active, use a default key to maintain state
   return activeSidebarTabId.value ?? 'default-sidebar'
 })
+
+/**
+ * Force refresh the splitter when right panel visibility changes to recalculate the width
+ */
+const splitterRefreshKey = computed(() => {
+  return rightSidePanelVisible.value
+    ? 'main-splitter-with-right-panel'
+    : 'main-splitter'
+})
+
+// Gutter visibility should be controlled by CSS targeting specific gutters
+const getSplitterGutterClasses = computed(() => {
+  // Empty string - let individual gutter styles handle visibility
+  return ''
+})
 </script>
 
 <style scoped>
@@ -135,10 +163,20 @@ const sidebarStateKey = computed(() => {
   background-color: var(--p-primary-color);
 }
 
+/* Hide sidebar gutter when sidebar is not visible */
+:deep(.side-bar-panel[style*='display: none'] + .p-splitter-gutter),
+:deep(.p-splitter-gutter + .side-bar-panel[style*='display: none']) {
+  display: none;
+}
+
 .side-bar-panel {
   background-color: var(--bg-color);
 }
 
+.right-side-panel {
+  background-color: var(--bg-color);
+}
+
 .bottom-panel {
   background-color: var(--comfy-menu-bg);
   border: 1px solid var(--p-panel-border-color);

src/components/TopMenuSection.vue

@@ -44,6 +44,20 @@
         </IconButton>
         <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
         <LoginButton v-else-if="isDesktop" />
+        <IconButton
+          v-if="!isRightSidePanelOpen"
+          v-tooltip.bottom="rightSidePanelTooltipConfig"
+          type="transparent"
+          size="sm"
+          class="mr-2 transition-colors duration-200 ease-in-out hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+          :aria-pressed="isRightSidePanelOpen"
+          :aria-label="t('rightSidePanel.togglePanel')"
+          @click="toggleRightSidePanel"
+        >
+          <i
+            class="icon-[lucide--panel-right] block size-4 text-muted-foreground"
+          />
+        </IconButton>
       </div>
       <QueueProgressOverlay
         v-model:expanded="isQueueOverlayExpanded"
@@ -68,10 +82,12 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
 import { useQueueStore } from '@/stores/queueStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
+const rightSidePanelStore = useRightSidePanelStore()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
@@ -88,6 +104,16 @@ const queueHistoryButtonBackgroundClass = computed(() =>
     : 'bg-secondary-background'
 )
 
+// Right side panel toggle
+const isRightSidePanelOpen = computed(() => rightSidePanelStore.isOpen)
+const rightSidePanelTooltipConfig = computed(() =>
+  buildTooltipConfig(t('rightSidePanel.togglePanel'))
+)
+
+const toggleRightSidePanel = () => {
+  rightSidePanelStore.togglePanel()
+}
+
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 onMounted(() => {

src/components/graph/GraphCanvas.vue

@@ -38,6 +38,9 @@
     <template v-if="showUI" #bottom-panel>
       <BottomPanel />
     </template>
+    <template v-if="showUI" #right-side-panel>
+      <NodePropertiesPanel />
+    </template>
     <template #graph-canvas-panel>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
       <MiniMap
@@ -111,6 +114,7 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
+import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -7,11 +7,17 @@
     severity="secondary"
     text
     icon="icon-[lucide--settings-2]"
-    @click="showSubgraphNodeDialog"
+    @click="handleClick"
   />
 </template>
 <script setup lang="ts">
 import Button from 'primevue/button'
 
-import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+const rightSidePanelStore = useRightSidePanelStore()
+
+const handleClick = () => {
+  rightSidePanelStore.openPanel('subgraph')
+}
 </script>

src/components/node/NodeHelpContent.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="node-help-content mx-auto w-full">
+    <ProgressSpinner
+      v-if="isLoading"
+      class="m-auto"
+      :aria-label="$t('g.loading')"
+    />
+    <!-- Markdown fetched successfully -->
+    <div
+      v-else-if="!error"
+      class="markdown-content"
+      v-html="renderedHelpHtml"
+    />
+    <!-- Fallback: markdown not found or fetch error -->
+    <div v-else class="fallback-content space-y-6 text-sm">
+      <p v-if="node.description">
+        <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
+      </p>
+
+      <div v-if="inputList.length">
+        <p>
+          <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
+        </p>
+        <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
+        <table class="overflow-x-auto">
+          <thead>
+            <tr>
+              <th>{{ $t('g.name') }}</th>
+              <th>{{ $t('nodeHelpPage.type') }}</th>
+              <th>{{ $t('g.description') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="input in inputList" :key="input.name">
+              <td>
+                <code>{{ input.name }}</code>
+              </td>
+              <td>{{ input.type }}</td>
+              <td>{{ input.tooltip || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-if="outputList.length">
+        <p>
+          <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
+        </p>
+        <table class="overflow-x-auto">
+          <thead>
+            <tr>
+              <th>{{ $t('g.name') }}</th>
+              <th>{{ $t('nodeHelpPage.type') }}</th>
+              <th>{{ $t('g.description') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="output in outputList" :key="output.name">
+              <td>
+                <code>{{ output.name }}</code>
+              </td>
+              <td>{{ output.type }}</td>
+              <td>{{ output.tooltip || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+
+const inputList = computed(() =>
+  Object.values(node.inputs).map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+
+const outputList = computed(() =>
+  node.outputs.map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+</script>
+
+<style scoped>
+@reference './../../assets/css/style.css';
+
+.node-help-content :deep(:is(img, video)) {
+  @apply max-w-full h-auto block mb-4;
+}
+
+.markdown-content,
+.fallback-content {
+  @apply text-sm overflow-visible;
+}
+
+.markdown-content :deep(h1),
+.fallback-content h1 {
+  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h2),
+.fallback-content h2 {
+  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h3),
+.fallback-content h3 {
+  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h4),
+.markdown-content :deep(h5),
+.markdown-content :deep(h6),
+.fallback-content h4,
+.fallback-content h5,
+.fallback-content h6 {
+  @apply mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(td),
+.fallback-content td {
+  color: var(--drag-text);
+}
+
+.markdown-content :deep(a),
+.fallback-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+.markdown-content :deep(th),
+.fallback-content th {
+  color: var(--fg-color);
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol),
+.fallback-content ul,
+.fallback-content ol {
+  @apply pl-8 my-2;
+}
+
+.markdown-content :deep(ul ul),
+.markdown-content :deep(ol ol),
+.markdown-content :deep(ul ol),
+.markdown-content :deep(ol ul),
+.fallback-content ul ul,
+.fallback-content ol ol,
+.fallback-content ul ol,
+.fallback-content ol ul {
+  @apply pl-6 my-2;
+}
+
+.markdown-content :deep(li),
+.fallback-content li {
+  @apply my-2;
+}
+
+.markdown-content :deep(*:first-child),
+.fallback-content > *:first-child {
+  @apply mt-0;
+}
+
+.markdown-content :deep(code),
+.fallback-content code {
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  @apply rounded px-1.5 py-0.5;
+}
+
+.markdown-content :deep(table),
+.fallback-content table {
+  @apply w-full border-collapse;
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td),
+.fallback-content th,
+.fallback-content td {
+  @apply px-2 py-2;
+}
+
+.markdown-content :deep(tr),
+.fallback-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.markdown-content :deep(tr:last-child),
+.fallback-content tr:last-child {
+  border-bottom: none;
+}
+
+.markdown-content :deep(thead),
+.fallback-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+
+.markdown-content :deep(pre),
+.fallback-content pre {
+  @apply rounded p-4 my-4 overflow-x-auto;
+  background-color: var(--code-block-bg-color);
+
+  code {
+    @apply bg-transparent p-0;
+    color: var(--p-text-color);
+  }
+}
+
+.markdown-content :deep(table) {
+  @apply overflow-x-auto;
+}
+</style>

src/components/rightSidePanel/RightSidePanel.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import Tab from '@/components/tab/Tab.vue'
+import TabList from '@/components/tab/TabList.vue'
+import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useRightSidePanelStore } 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 TabSettings from './settings/TabSettings.vue'
+import SubgraphEditor from './subgraph/SubgraphEditor.vue'
+
+const canvasStore = useCanvasStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { t } = useI18n()
+
+const { selectedItems } = storeToRefs(canvasStore)
+const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
+
+const hasSelection = computed(() => selectedItems.value.length > 0)
+
+const selectedNodes = computed(() => {
+  return selectedItems.value.filter(isLGraphNode) as LGraphNode[]
+})
+
+const isSubgraphNode = computed(() => {
+  return selectedNode.value instanceof SubgraphNode
+})
+
+const isSingleNodeSelected = computed(() => selectedNodes.value.length === 1)
+
+const selectedNode = computed(() => {
+  return isSingleNodeSelected.value ? selectedNodes.value[0] : null
+})
+
+const selectionCount = computed(() => selectedItems.value.length)
+
+const panelTitle = computed(() => {
+  if (!hasSelection.value) return t('rightSidePanel.properties')
+  if (isSingleNodeSelected.value && selectedNode.value) {
+    return selectedNode.value.title || selectedNode.value.type || 'Node'
+  }
+  return t('rightSidePanel.multipleSelection', { count: selectionCount.value })
+})
+
+function closePanel() {
+  rightSidePanelStore.closePanel()
+}
+
+const tabs = computed<{ label: () => string; value: string }[]>(() => {
+  const list = [
+    {
+      label: () => t('rightSidePanel.parameters'),
+      value: 'parameters'
+    },
+    {
+      label: () => t('rightSidePanel.settings'),
+      value: 'settings'
+    }
+  ]
+  if (
+    !hasSelection.value ||
+    (isSingleNodeSelected.value && !isSubgraphNode.value)
+  ) {
+    list.push({
+      label: () => t('rightSidePanel.info'),
+      value: 'info'
+    })
+  }
+  return list
+})
+
+// Use global state for activeTab and ensure it's valid
+watchEffect(() => {
+  if (!tabs.value.some((tab) => tab.value === activeTab.value)) {
+    activeTab.value = tabs.value[0].value as 'parameters' | 'settings' | 'info'
+  }
+})
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-col bg-interface-panel-surface">
+    <!-- Panel Header -->
+    <div class="border-b border-interface-stroke 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">
+          {{ panelTitle }}
+        </h3>
+
+        <div class="flex gap-2">
+          <IconButton
+            v-if="isSubgraphNode"
+            type="transparent"
+            size="sm"
+            class="bg-secondary-background hover:bg-secondary-background-hover"
+            :class="
+              cn(
+                'bg-secondary-background hover:bg-secondary-background-hover',
+                isEditingSubgraph
+                  ? 'bg-secondary-background-selected'
+                  : 'bg-secondary-background'
+              )
+            "
+            @click="isEditingSubgraph = !isEditingSubgraph"
+          >
+            <i class="icon-[lucide--settings-2]" />
+          </IconButton>
+          <IconButton
+            type="transparent"
+            size="sm"
+            class="bg-secondary-background hover:bg-secondary-background-hover"
+            :aria-pressed="rightSidePanelStore.isOpen"
+            :aria-label="t('rightSidePanel.togglePanel')"
+            @click="closePanel"
+          >
+            <i class="icon-[lucide--panel-right]" />
+          </IconButton>
+        </div>
+      </div>
+      <div
+        v-if="hasSelection && !(isSubgraphNode && isEditingSubgraph)"
+        class="px-4 pb-2 pt-1"
+      >
+        <TabList v-model="activeTab">
+          <Tab
+            v-for="tab in tabs"
+            :key="tab.value"
+            class="text-sm py-1 px-2"
+            :value="tab.value"
+          >
+            {{ tab.label() }}
+          </Tab>
+        </TabList>
+      </div>
+    </div>
+
+    <!-- Panel Content -->
+    <div class="scrollbar-thin flex-1 overflow-y-auto">
+      <SubgraphEditor
+        v-if="isSubgraphNode && isEditingSubgraph"
+        :node="selectedNode"
+      />
+      <div
+        v-else-if="!hasSelection"
+        class="flex h-full items-center justify-center text-center"
+      >
+        <div class="px-4 text-sm text-base-foreground-muted">
+          {{ $t('rightSidePanel.noSelection') }}
+        </div>
+      </div>
+      <template v-else>
+        <TabParameters
+          v-if="activeTab === 'parameters'"
+          :nodes="selectedNodes"
+        />
+        <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
+        <TabSettings
+          v-else-if="activeTab === 'settings'"
+          :nodes="selectedNodes"
+        />
+      </template>
+    </div>
+  </div>
+</template>

src/components/rightSidePanel/info/TabInfo.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const props = defineProps<{
+  nodes: LGraphNode[]
+}>()
+const node = computed(() => props.nodes[0])
+
+const nodeDefStore = useNodeDefStore()
+const nodeHelpStore = useNodeHelpStore()
+
+const nodeInfo = computed(() => {
+  return nodeDefStore.fromLGraphNode(node.value)
+})
+
+// Open node help when the selected node changes
+watch(
+  nodeInfo,
+  (info) => {
+    if (info) {
+      nodeHelpStore.openHelp(info)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div v-if="nodeInfo" class="rounded-lg bg-interface-surface p-3">
+    <NodeHelpContent :node="nodeInfo" />
+  </div>
+</template>

src/components/rightSidePanel/layout/RightPanelSection.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { watch } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  label?: string
+  defaultCollapse?: boolean
+}>()
+const isCollapse = defineModel<boolean>('collapse', { default: false })
+
+if (props.defaultCollapse) {
+  isCollapse.value = true
+}
+watch(
+  () => props.defaultCollapse,
+  (value) => (isCollapse.value = value)
+)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12"
+    >
+      <button
+        class="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 cursor-pointer"
+        @click="isCollapse = !isCollapse"
+      >
+        <span class="text-sm font-semibold line-clamp-2">
+          <slot name="label">
+            {{ props.label ?? '' }}
+          </slot>
+        </span>
+
+        <i
+          :class="
+            cn(
+              'icon-[lucide--chevron-down] size-5 min-w-5 transition-all',
+              isCollapse && 'rotate-90'
+            )
+          "
+          class="relative top-px text-xs leading-none text-node-component-header-icon group-hover:text-base-foreground"
+        />
+      </button>
+    </div>
+    <div v-if="!isCollapse" class="pb-4">
+      <slot />
+    </div>
+  </div>
+</template>

src/components/rightSidePanel/layout/SidePanelSearch.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+import { ref, toRef, watch } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const props = withDefaults(
+  defineProps<{
+    searcher?: (
+      query: string,
+      onCleanup: (cleanupFn: () => void) => void
+    ) => Promise<void>
+    updateKey?: (() => unknown) | unknown
+  }>(),
+  {
+    searcher: async () => {}
+  }
+)
+
+const searchQuery = defineModel<string>({ default: '' })
+
+const isQuerying = ref(false)
+const debouncedSearchQuery = refDebounced(searchQuery, 700, {
+  maxWait: 700
+})
+watch(searchQuery, (value) => {
+  isQuerying.value = value !== debouncedSearchQuery.value
+})
+
+const updateKey =
+  typeof props.updateKey === 'function'
+    ? props.updateKey
+    : toRef(props, 'updateKey')
+
+watch(
+  [debouncedSearchQuery, updateKey],
+  (_, __, onCleanup) => {
+    let isCleanup = false
+    let cleanupFn: undefined | (() => void)
+    onCleanup(() => {
+      isCleanup = true
+      cleanupFn?.()
+    })
+
+    void props
+      .searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb))
+      .finally(() => {
+        if (!isCleanup) isQuerying.value = false
+      })
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <label
+    :class="
+      cn(
+        'h-8 bg-zinc-500/20 rounded-lg outline outline-offset-[-1px] outline-node-component-border transition-all duration-150',
+        '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'
+      )
+    "
+  >
+    <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"
+      class="bg-transparent border-0 outline-0 ring-0 text-left"
+      :placeholder="$t('g.search')"
+    />
+  </label>
+</template>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+import type { LGraphNode } 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 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+import RightPanelSection from '../layout/RightPanelSection.vue'
+
+defineProps<{
+  label?: string
+  widgets: { widget: IBaseWidget; node: LGraphNode }[]
+}>()
+
+provide('hideLayoutField', true)
+
+const canvasStore = useCanvasStore()
+
+function getWidgetComponent(widget: IBaseWidget) {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
+}
+
+function onWidgetValueChange(
+  widget: IBaseWidget,
+  value: string | number | boolean | object
+) {
+  widget.value = value
+  widget.callback?.(value)
+  canvasStore.canvas?.setDirty(true, true)
+}
+</script>
+
+<template>
+  <RightPanelSection>
+    <template #label>
+      <slot name="label">
+        {{ label ?? $t('rightSidePanel.inputs') }}
+      </slot>
+    </template>
+
+    <div 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>
+        <component
+          :is="getWidgetComponent(widget)"
+          :widget="widget"
+          :model-value="widget.value"
+          :node-id="String(node.id)"
+          :node-type="node.type"
+          class="col-span-1"
+          @update:model-value="
+            (value: string | number | boolean | object) =>
+              onWidgetValueChange(widget, value)
+          "
+        />
+      </div>
+    </div>
+  </RightPanelSection>
+</template>

src/components/rightSidePanel/parameters/TabParameters.vue

@@ -0,0 +1,89 @@
+<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 props = defineProps<{
+  nodes: LGraphNode[]
+}>()
+
+const widgetsSectionDataList = computed(() => {
+  const list: {
+    widgets: { node: LGraphNode; widget: IBaseWidget }[]
+    node: LGraphNode
+  }[] = []
+  for (const node of props.nodes) {
+    const shownWidgets: IBaseWidget[] = []
+    for (const widget of node.widgets ?? []) {
+      if (widget.options?.canvasOnly || widget.options?.hidden) continue
+      shownWidgets.push(widget)
+    }
+    list.push({
+      widgets: shownWidgets?.map((widget) => ({ node, widget })) ?? [],
+      node
+    })
+  }
+  return list
+})
+
+const searchedWidgetsSectionDataList = shallowRef<
+  {
+    widgets: { node: LGraphNode; widget: IBaseWidget }[]
+    node: LGraphNode
+  }[]
+>([])
+
+/**
+ * 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="p-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>

src/components/rightSidePanel/settings/TabSettings.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="space-y-4 rounded-lg bg-interface-surface p-3">
+    <!-- Node State -->
+    <div class="flex flex-col gap-2">
+      <span class="text-sm text-text-secondary">
+        {{ 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 class="text-sm text-text-secondary">
+        {{ t('rightSidePanel.color') }}
+      </span>
+      <div
+        class="bg-component-node-widget-background text-component-node-foreground 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',
+              {
+                'bg-interface-menu-component-surface-selected':
+                  option.name === nodeColor,
+                'hover:bg-interface-menu-component-surface-selected':
+                  option.name !== nodeColor
+              }
+            )
+          "
+          @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 class="text-sm text-text-secondary">
+        {{ t('rightSidePanel.pinned') }}
+      </span>
+      <ToggleSwitch v-model="isPinned" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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'
+
+const props = defineProps<{
+  node?: LGraphNode
+  nodes?: LGraphNode[]
+}>()
+
+const { t } = useI18n()
+
+const canvasStore = useCanvasStore()
+const colorPaletteStore = useColorPaletteStore()
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
+const targetNodes = shallowRef<LGraphNode[]>([])
+watchEffect(() => {
+  if (props.node) {
+    targetNodes.value = [props.node]
+  } else {
+    targetNodes.value = props.nodes || []
+  }
+})
+
+const nodeState = computed({
+  get() {
+    let mode: LGraphNode['mode'] | null = null
+
+    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
+    if (targetNodes.value.length > 1) {
+      mode = targetNodes.value[0].mode
+      if (!targetNodes.value.every((node) => node.mode === mode)) {
+        mode = null
+      }
+    } else {
+      mode = targetNodes.value[0].mode
+    }
+
+    return mode
+  },
+  set(value: LGraphNode['mode']) {
+    targetNodes.value.forEach((node) => {
+      node.mode = value
+    })
+    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))
+    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)
+    }
+    triggerRef(targetNodes)
+    canvasStore.canvas?.setDirty(true, true)
+  }
+})
+</script>

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { refDebounced, watchDebounced } from '@vueuse/core'
+import { watchDebounced } from '@vueuse/core'
+import Button from 'primevue/button'
 import {
   computed,
   customRef,
@@ -9,8 +10,6 @@ import {
   triggerRef
 } from 'vue'
 
-import SearchBox from '@/components/common/SearchBox.vue'
-import SubgraphNodeWidget from '@/core/graph/subgraph/SubgraphNodeWidget.vue'
 import {
   demoteWidget,
   isRecommendedWidget,
@@ -29,14 +28,15 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { useLitegraphService } from '@/services/litegraphService'
-import { useDialogStore } from '@/stores/dialogStore'
+
+import SidePanelSearch from '../layout/SidePanelSearch.vue'
+import SubgraphNodeWidget from './SubgraphNodeWidget.vue'
 
 const canvasStore = useCanvasStore()
 
 const draggableList = ref<DraggableList | undefined>(undefined)
 const draggableItems = ref()
 const searchQuery = ref<string>('')
-const debouncedQuery = refDebounced(searchQuery, 200)
 const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
   get() {
     track()
@@ -56,10 +56,13 @@ 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
-  useDialogStore().closeDialog()
   return undefined
 })
 
@@ -114,7 +117,7 @@ const candidateWidgets = computed<WidgetItem[]>(() => {
   )
 })
 const filteredCandidates = computed<WidgetItem[]>(() => {
-  const query = debouncedQuery.value.toLowerCase()
+  const query = searchQuery.value.toLowerCase()
   if (!query) return candidateWidgets.value
   return candidateWidgets.value.filter(
     ([n, w]: WidgetItem) =>
@@ -125,12 +128,12 @@ const filteredCandidates = computed<WidgetItem[]>(() => {
 
 const recommendedWidgets = computed(() => {
   const node = activeNode.value
-  if (!node) return [] //Not reachable
+  if (!node) return []
   return filteredCandidates.value.filter(isRecommendedWidget)
 })
 
 const filteredActive = computed<WidgetItem[]>(() => {
-  const query = debouncedQuery.value.toLowerCase()
+  const query = searchQuery.value.toLowerCase()
   if (!query) return activeWidgets.value
   return activeWidgets.value.filter(
     ([n, w]: WidgetItem) =>
@@ -160,7 +163,7 @@ function promote([node, widget]: WidgetItem) {
 }
 function showAll() {
   const node = activeNode.value
-  if (!node) return //Not reachable
+  if (!node) return
   const widgets = proxyWidgets.value
   const toAdd: ProxyWidgetsProperty =
     filteredCandidates.value.map(widgetItemToProperty)
@@ -169,7 +172,7 @@ function showAll() {
 }
 function hideAll() {
   const node = activeNode.value
-  if (!node) return //Not reachable
+  if (!node) return
   proxyWidgets.value = proxyWidgets.value.filter(
     (propertyItem) =>
       !filteredActive.value.some(matchesWidgetItem(propertyItem)) ||
@@ -178,25 +181,21 @@ function hideAll() {
 }
 function showRecommended() {
   const node = activeNode.value
-  if (!node) return //Not reachable
+  if (!node) return
   const widgets = proxyWidgets.value
   const toAdd: ProxyWidgetsProperty =
     recommendedWidgets.value.map(widgetItemToProperty)
-  //TODO: Add sort step here
-  //Input should always be before output by default
   widgets.push(...toAdd)
   proxyWidgets.value = widgets
 }
 
 function setDraggableState() {
   draggableList.value?.dispose()
-  if (debouncedQuery.value || !draggableItems.value?.children?.length) return
+  if (searchQuery.value || !draggableItems.value?.children?.length) return
   draggableList.value = new DraggableList(
     draggableItems.value,
     '.draggable-item'
   )
-  //Original implementation plays really poorly with vue,
-  //It has been modified to not add/remove elements
   draggableList.value.applyNewItemsOrder = function () {
     const reorderedItems = []
 
@@ -242,70 +241,87 @@ onBeforeUnmount(() => {
   draggableList.value?.dispose()
 })
 </script>
+
 <template>
-  <SearchBox
-    v-model:model-value="searchQuery"
-    class="p-2"
-    :placeholder="$t('g.search') + '...'"
-  />
-  <div
-    v-if="filteredActive.length"
-    class="border-b-1 border-node-component-border pt-1 pb-4"
-  >
-    <div class="flex justify-between px-4 py-0">
-      <div class="text-[9px] font-semibold text-slate-100 uppercase">
-        {{ $t('subgraphStore.shown') }}
+  <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
+    <div class="p-4 flex gap-2">
+      <SidePanelSearch :searcher />
+    </div>
+
+    <div class="flex-1">
+      <div
+        v-if="filteredActive.length"
+        class="flex flex-col border-t border-interface-stroke"
+      >
+        <div
+          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+        >
+          <div class="text-sm font-semibold uppercase line-clamp-1">
+            {{ $t('subgraphStore.shown') }}
+          </div>
+          <a
+            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            @click.stop="hideAll"
+          >
+            {{ $t('subgraphStore.hideAll') }}</a
+          >
+        </div>
+        <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
+          <SubgraphNodeWidget
+            v-for="[node, widget] in filteredActive"
+            :key="toKey([node, widget])"
+            class="bg-interface-panel-surface"
+            :node-title="node.title"
+            :widget-name="widget.name"
+            :is-shown="true"
+            :is-draggable="!searchQuery"
+            :is-physical="node.id === -1"
+            @toggle-visibility="demote([node, widget])"
+          />
+        </div>
       </div>
-      <a
-        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
-        @click.stop="hideAll"
+
+      <div
+        v-if="filteredCandidates.length"
+        class="flex flex-col border-t border-interface-stroke"
       >
-        {{ $t('subgraphStore.hideAll') }}</a
-      >
-    </div>
-    <div ref="draggableItems">
-      <SubgraphNodeWidget
-        v-for="[node, widget] in filteredActive"
-        :key="toKey([node, widget])"
-        :node-title="node.title"
-        :widget-name="widget.name"
-        :is-shown="true"
-        :is-draggable="!debouncedQuery"
-        :is-physical="node.id === -1"
-        @toggle-visibility="demote([node, widget])"
-      />
-    </div>
-  </div>
-  <div v-if="filteredCandidates.length" class="pt-1 pb-4">
-    <div class="flex justify-between px-4 py-0">
-      <div class="text-[9px] font-semibold text-slate-100 uppercase">
-        {{ $t('subgraphStore.hidden') }}
+        <div
+          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+        >
+          <div class="text-sm font-semibold uppercase line-clamp-1">
+            {{ $t('subgraphStore.hidden') }}
+          </div>
+          <a
+            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            @click.stop="showAll"
+          >
+            {{ $t('subgraphStore.showAll') }}</a
+          >
+        </div>
+        <div class="pb-2 px-2 space-y-0.5 mt-0.5">
+          <SubgraphNodeWidget
+            v-for="[node, widget] in filteredCandidates"
+            :key="toKey([node, widget])"
+            class="bg-interface-panel-surface"
+            :node-title="node.title"
+            :widget-name="widget.name"
+            @toggle-visibility="promote([node, widget])"
+          />
+        </div>
       </div>
-      <a
-        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
-        @click.stop="showAll"
-      >
-        {{ $t('subgraphStore.showAll') }}</a
+
+      <div
+        v-if="recommendedWidgets.length"
+        class="flex justify-center border-t border-interface-stroke py-4"
       >
+        <Button
+          size="small"
+          class="rounded border-none px-3 py-0.5"
+          @click.stop="showRecommended"
+        >
+          {{ $t('subgraphStore.showRecommended') }}
+        </Button>
+      </div>
     </div>
-    <SubgraphNodeWidget
-      v-for="[node, widget] in filteredCandidates"
-      :key="toKey([node, widget])"
-      :node-title="node.title"
-      :widget-name="widget.name"
-      @toggle-visibility="promote([node, widget])"
-    />
-  </div>
-  <div
-    v-if="recommendedWidgets.length"
-    class="flex justify-center border-t-1 border-node-component-border py-4"
-  >
-    <Button
-      size="small"
-      class="rounded border-none px-3 py-0.5"
-      @click.stop="showRecommended"
-    >
-      {{ $t('subgraphStore.showRecommended') }}
-    </Button>
   </div>
 </template>

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -2,6 +2,7 @@
 import Button from 'primevue/button'
 
 import { cn } from '@/utils/tailwindUtil'
+import type { ClassValue } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   nodeTitle: string
@@ -9,19 +10,12 @@ const props = defineProps<{
   isShown?: boolean
   isDraggable?: boolean
   isPhysical?: boolean
+  class?: ClassValue
 }>()
 defineEmits<{
   (e: 'toggleVisibility'): void
 }>()
 
-function classes() {
-  return cn(
-    'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
-    'bg-node-component-surface',
-    props.isDraggable &&
-      'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing'
-  )
-}
 function getIcon() {
   return props.isPhysical
     ? 'icon-[lucide--link]'
@@ -30,19 +24,24 @@ function getIcon() {
       : 'icon-[lucide--eye-off]'
 }
 </script>
+
 <template>
-  <div :class="classes()">
-    <div
-      :class="
-        cn(
-          'size-4 pointer-events-none',
-          isDraggable ? 'icon-[lucide--grip-vertical]' : ''
-        )
-      "
-    />
+  <div
+    :class="
+      cn(
+        'flex py-1 px-2 break-all rounded items-center gap-1',
+        'bg-node-component-surface',
+        props.isDraggable &&
+          'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing hover:ring-1 ring-accent-background',
+        props.class
+      )
+    "
+  >
     <div class="pointer-events-none flex-1">
-      <div class="text-[10px] text-slate-100">{{ nodeTitle }}</div>
-      <div class="text-xs">{{ widgetName }}</div>
+      <div class="text-xs text-text-secondary line-clamp-1">
+        {{ nodeTitle }}
+      </div>
+      <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
     </div>
     <Button
       size="small"
@@ -52,5 +51,9 @@ function getIcon() {
       severity="secondary"
       @click.stop="$emit('toggleVisibility')"
     />
+    <div
+      v-if="isDraggable"
+      class="size-4 pointer-events-none icon-[lucide--grip-vertical]"
+    />
   </div>
 </template>

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -12,234 +12,21 @@
       />
       <span class="ml-2 font-semibold">{{ node.display_name }}</span>
     </div>
-    <div class="node-help-content mx-auto w-full grow p-4">
-      <ProgressSpinner
-        v-if="isLoading"
-        class="m-auto"
-        :aria-label="$t('g.loading')"
-      />
-      <!-- Markdown fetched successfully -->
-      <div
-        v-else-if="!error"
-        class="markdown-content"
-        v-html="renderedHelpHtml"
-      />
-      <!-- Fallback: markdown not found or fetch error -->
-      <div v-else class="fallback-content space-y-6 text-sm">
-        <p v-if="node.description">
-          <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
-        </p>
-
-        <div v-if="inputList.length">
-          <p>
-            <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
-          </p>
-          <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
-          <table>
-            <thead>
-              <tr>
-                <th>{{ $t('g.name') }}</th>
-                <th>{{ $t('nodeHelpPage.type') }}</th>
-                <th>{{ $t('g.description') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="input in inputList" :key="input.name">
-                <td>
-                  <code>{{ input.name }}</code>
-                </td>
-                <td>{{ input.type }}</td>
-                <td>{{ input.tooltip || '-' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div v-if="outputList.length">
-          <p>
-            <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
-          </p>
-          <table>
-            <thead>
-              <tr>
-                <th>{{ $t('g.name') }}</th>
-                <th>{{ $t('nodeHelpPage.type') }}</th>
-                <th>{{ $t('g.description') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="output in outputList" :key="output.name">
-                <td>
-                  <code>{{ output.name }}</code>
-                </td>
-                <td>{{ output.type }}</td>
-                <td>{{ output.tooltip || '-' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+    <div class="grow p-4">
+      <NodeHelpContent :node="node" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
-import ProgressSpinner from 'primevue/progressspinner'
-import { computed } from 'vue'
 
+import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
 const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
 
-const nodeHelpStore = useNodeHelpStore()
-const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
-
 defineEmits<{
   (e: 'close'): void
 }>()
-
-const inputList = computed(() =>
-  Object.values(node.inputs).map((spec) => ({
-    name: spec.name,
-    type: spec.type,
-    tooltip: spec.tooltip || ''
-  }))
-)
-
-const outputList = computed(() =>
-  node.outputs.map((spec) => ({
-    name: spec.name,
-    type: spec.type,
-    tooltip: spec.tooltip || ''
-  }))
-)
 </script>
-
-<style scoped>
-@reference './../../../../assets/css/style.css';
-
-.node-help-content :deep(:is(img, video)) {
-  @apply max-w-full h-auto block mb-4;
-}
-
-.markdown-content,
-.fallback-content {
-  @apply text-sm;
-}
-
-.markdown-content :deep(h1),
-.fallback-content h1 {
-  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
-}
-
-.markdown-content :deep(h2),
-.fallback-content h2 {
-  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
-}
-
-.markdown-content :deep(h3),
-.fallback-content h3 {
-  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
-}
-
-.markdown-content :deep(h4),
-.markdown-content :deep(h5),
-.markdown-content :deep(h6),
-.fallback-content h4,
-.fallback-content h5,
-.fallback-content h6 {
-  @apply mt-8 mb-4 first:mt-0;
-}
-
-.markdown-content :deep(td),
-.fallback-content td {
-  color: var(--drag-text);
-}
-
-.markdown-content :deep(a),
-.fallback-content a {
-  color: var(--drag-text);
-  text-decoration: underline;
-}
-
-.markdown-content :deep(th),
-.fallback-content th {
-  color: var(--fg-color);
-}
-
-.markdown-content :deep(ul),
-.markdown-content :deep(ol),
-.fallback-content ul,
-.fallback-content ol {
-  @apply pl-8 my-2;
-}
-
-.markdown-content :deep(ul ul),
-.markdown-content :deep(ol ol),
-.markdown-content :deep(ul ol),
-.markdown-content :deep(ol ul),
-.fallback-content ul ul,
-.fallback-content ol ol,
-.fallback-content ul ol,
-.fallback-content ol ul {
-  @apply pl-6 my-2;
-}
-
-.markdown-content :deep(li),
-.fallback-content li {
-  @apply my-2;
-}
-
-.markdown-content :deep(*:first-child),
-.fallback-content > *:first-child {
-  @apply mt-0;
-}
-
-.markdown-content :deep(code),
-.fallback-content code {
-  color: var(--code-text-color);
-  background-color: var(--code-bg-color);
-  @apply rounded px-1.5 py-0.5;
-}
-
-.markdown-content :deep(table),
-.fallback-content table {
-  @apply w-full border-collapse;
-}
-
-.markdown-content :deep(th),
-.markdown-content :deep(td),
-.fallback-content th,
-.fallback-content td {
-  @apply px-2 py-2;
-}
-
-.markdown-content :deep(tr),
-.fallback-content tr {
-  border-bottom: 1px solid var(--content-bg);
-}
-
-.markdown-content :deep(tr:last-child),
-.fallback-content tr:last-child {
-  border-bottom: none;
-}
-
-.markdown-content :deep(thead),
-.fallback-content thead {
-  border-bottom: 1px solid var(--p-text-color);
-}
-
-.markdown-content :deep(pre),
-.fallback-content pre {
-  @apply rounded p-4 my-4 overflow-x-auto;
-  background-color: var(--code-block-bg-color);
-
-  code {
-    @apply bg-transparent p-0;
-    color: var(--p-text-color);
-  }
-}
-</style>

src/composables/useCoreCommands.ts

@@ -8,7 +8,6 @@ import {
   DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
 import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils'
-import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { t } from '@/i18n'
 import {
   LGraphEventMode,
@@ -48,6 +47,7 @@ import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
@@ -1025,7 +1025,9 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Edit Subgraph Widgets',
       icon: 'icon-[lucide--settings-2]',
       versionAdded: '1.28.5',
-      function: showSubgraphNodeDialog
+      function: () => {
+        useRightSidePanelStore().openPanel('subgraph')
+      }
     },
     {
       id: 'Comfy.Graph.ToggleWidgetPromotion',

src/core/graph/subgraph/useSubgraphNodeDialog.ts

@@ -1,27 +0,0 @@
-import SubgraphNode from '@/core/graph/subgraph/SubgraphNode.vue'
-import { useDialogStore } from '@/stores/dialogStore'
-import type { DialogComponentProps } from '@/stores/dialogStore'
-
-const key = 'global-subgraph-node-config'
-
-export function showSubgraphNodeDialog() {
-  const dialogStore = useDialogStore()
-  const dialogComponentProps: DialogComponentProps = {
-    modal: false,
-    position: 'topright',
-    pt: {
-      root: {
-        class: 'bg-node-component-surface mt-22'
-      },
-      header: {
-        class: 'h-8 text-xs ml-3'
-      }
-    }
-  }
-  dialogStore.showDialog({
-    title: 'Parameters',
-    key,
-    component: SubgraphNode,
-    dialogComponentProps
-  })
-}

src/locales/en/main.json

@@ -2251,5 +2251,24 @@
       "description": "This workflow uses custom nodes you haven't installed yet.",
       "replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
     }
+  },
+  "rightSidePanel": {
+    "togglePanel": "Toggle properties panel",
+    "noSelection": "Select a node to see its properties and info.",
+    "multipleSelection": "{count} items selected",
+    "parameters": "Parameters",
+    "info": "Info",
+    "nodeType": "Type",
+    "nodeId": "ID",
+    "description": "Description",
+    "color": "Node color",
+    "pinned": "Pinned",
+    "bypass": "Bypass",
+    "normal": "Normal",
+    "mute": "Mute",
+    "inputs": "INPUTS",
+    "properties": "Properties",
+    "nodeState": "Node state",
+    "settings": "Settings"
   }
 }

src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue

@@ -17,17 +17,19 @@
           'text-center text-xs font-normal',
           {
             'bg-interface-menu-component-surface-selected':
-              isSelected(option) && !disabled,
-            'hover:bg-interface-menu-component-surface-hovered':
-              !isSelected(option) && !disabled,
+              isSelected(index) && !disabled,
+            'hover:bg-interface-menu-component-surface-selected/50':
+              !isSelected(index) && !disabled,
             'opacity-50 cursor-not-allowed': disabled,
             'cursor-pointer': !disabled
           },
-          isSelected(option) && !disabled ? 'text-primary' : 'text-secondary'
+          isSelected(index) && !disabled
+            ? 'text-text-primary'
+            : 'text-text-secondary'
         )
       "
       :disabled="disabled"
-      @click="handleSelect(option)"
+      @click="handleSelect(index)"
     >
       {{ getOptionLabel(option) }}
     </button>
@@ -37,14 +39,18 @@
 <script
   setup
   lang="ts"
-  generic="T extends string | number | { label: string; value: any }"
+  generic="
+    T extends string | number | { label: string; value: string | number }
+  "
 >
 import { cn } from '@/utils/tailwindUtil'
 
 import { WidgetInputBaseClass } from '../layout'
 
+type ModelValue = T extends object ? T['value'] : T
+
 interface Props {
-  modelValue: string | null | undefined
+  modelValue: ModelValue | null | undefined
   options: T[]
   optionLabel?: string // PrimeVue compatible prop
   optionValue?: string // PrimeVue compatible prop
@@ -52,7 +58,7 @@ interface Props {
 }
 
 interface Emits {
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: ModelValue]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,18 +70,19 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 // handle both string/number arrays and object arrays with PrimeVue compatibility
-const getOptionValue = (option: T, index: number): string => {
-  if (typeof option === 'object' && option !== null) {
-    const valueField = props.optionValue
-    const value =
-      (option as any)[valueField] ??
-      (option as any).value ??
-      (option as any).name ??
-      (option as any).label ??
-      index
-    return String(value)
+const getOptionValue = (option: T, index: number): ModelValue => {
+  if (typeof option !== 'object') {
+    return option as ModelValue
   }
-  return String(option)
+
+  const valueField = props.optionValue
+  const value =
+    (option as any)[valueField] ??
+    option.value ??
+    (option as any).name ??
+    option.label ??
+    index
+  return value
 }
 
 // for display with PrimeVue compatibility
@@ -84,24 +91,24 @@ const getOptionLabel = (option: T): string => {
     const labelField = props.optionLabel
     return (
       (option as any)[labelField] ??
-      (option as any).label ??
+      option.label ??
       (option as any).name ??
-      (option as any).value ??
+      option.value ??
       String(option)
     )
   }
   return String(option)
 }
 
-const isSelected = (option: T): boolean => {
-  const optionValue = getOptionValue(option, props.options.indexOf(option))
-  return optionValue === String(props.modelValue ?? '')
+const isSelected = (index: number): boolean => {
+  const optionValue = getOptionValue(props.options[index], index)
+  return String(optionValue) === String(props.modelValue ?? '')
 }
 
-const handleSelect = (option: T) => {
+const handleSelect = (index: number) => {
   if (props.disabled) return
 
-  const optionValue = getOptionValue(option, props.options.indexOf(option))
+  const optionValue = getOptionValue(props.options[index], index)
   emit('update:modelValue', optionValue)
 }
 </script>

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { noop } from 'es-toolkit'
+import { inject } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 defineProps<{
   widget: Pick<SimplifiedWidget<string | number | undefined>, 'name' | 'label'>
 }>()
+
+const hideLayoutField = inject<boolean>('hideLayoutField', false)
 </script>
 
 <template>
   <div
     class="grid grid-cols-subgrid h-7.5 min-w-0 items-center justify-between gap-1"
   >
-    <div class="relative flex h-full min-w-0 items-center">
+    <div
+      v-if="!hideLayoutField"
+      class="relative flex h-full min-w-0 items-center"
+    >
       <p
         v-if="widget.name"
         class="flex-1 truncate text-xs font-normal text-node-component-slot-text"

src/services/litegraphService.ts

@@ -6,7 +6,6 @@ import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
 import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImagePreview'
 import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
 import { addWidgetPromotionOptions } from '@/core/graph/subgraph/proxyWidgetUtils'
-import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { applyDynamicInputs } from '@/core/graph/widgets/dynamicWidgets'
 import { st, t } from '@/i18n'
 import {
@@ -50,6 +49,7 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
@@ -658,7 +658,7 @@ export const useLitegraphService = () => {
           {
             content: 'Edit Subgraph Widgets',
             callback: () => {
-              showSubgraphNodeDialog()
+              useRightSidePanelStore().openPanel('subgraph')
             }
           },
           {

src/stores/workspace/rightSidePanelStore.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+type RightSidePanelTab = 'parameters' | 'settings' | 'info'
+
+/**
+ * Store for managing the right side panel state.
+ * This panel displays properties and settings for selected nodes.
+ */
+export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
+  // Panel visibility state
+  const isOpen = ref(false)
+  const isEditingSubgraph = ref(false)
+
+  // Active tab in the node properties panel
+  const activeTab = ref<RightSidePanelTab>('parameters')
+
+  // Actions
+  function openPanel(tab?: RightSidePanelTab | 'subgraph') {
+    isOpen.value = true
+    if (tab === 'subgraph') {
+      activeTab.value = 'parameters'
+      isEditingSubgraph.value = true
+    } else if (tab) {
+      activeTab.value = tab
+      isEditingSubgraph.value = false
+    }
+  }
+
+  function closePanel() {
+    isOpen.value = false
+    isEditingSubgraph.value = false
+  }
+
+  function togglePanel() {
+    isOpen.value = !isOpen.value
+  }
+
+  function setActiveTab(tab: RightSidePanelTab) {
+    activeTab.value = tab
+  }
+
+  return {
+    isOpen,
+    activeTab,
+    isEditingSubgraph,
+    openPanel,
+    closePanel,
+    togglePanel,
+    setActiveTab
+  }
+})