feat: replace ResultGallery with standalone MediaViewer for assets

- Add MediaViewer component using Reka UI Dialog with AssetItem directly
- Remove ResultItemImpl dependency from useMediaAssetGalleryStore
- Add getOutputAssets, getAssetsByJobIds to assetService
- Add prompt_id field to asset schema

.env_example

@@ -38,9 +38,6 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 
-# Enable PostHog debug logging in the browser console.
-# VITE_POSTHOG_DEBUG=true
-
 # Sentry ENV vars replace with real ones for debugging
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org

.github/workflows/ci-tests-storybook.yaml

@@ -4,8 +4,6 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
-  push:
-    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -140,29 +138,6 @@ jobs:
             "${{ github.head_ref }}" \
             "completed"
 
-  # Deploy Storybook to production URL on main branch push
-  deploy-production:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Build Storybook
-        run: pnpm build-storybook
-
-      - name: Deploy to Cloudflare Pages (production)
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: |
-          npx wrangler@^4.0.0 pages deploy storybook-static \
-            --project-name=comfy-storybook \
-            --branch=main
-
   # Update comment with Chromatic URLs for version-bump branches
   update-comment-with-chromatic:
     needs: [chromatic-deployment, deploy-and-comment]

.github/workflows/cloud-dispatch-build.yaml

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled, synchronize]
+    types: [labeled]
   workflow_dispatch:
 
 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
+    # For pull_request events, only dispatch when the 'preview' label is added.
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       github.event.label.name == 'preview')
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
@@ -46,30 +39,18 @@ jobs:
           EVENT_NAME: ${{ github.event_name }}
           PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
           PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          ACTION: ${{ github.event.action }}
-          LABEL_NAME: ${{ github.event.label.name }}
-          PR_LABELS: ${{ toJson(github.event.pull_request.labels.*.name) }}
         run: |
           if [ "${EVENT_NAME}" = "pull_request" ]; then
             REF="${PR_HEAD_SHA}"
             BRANCH="${PR_HEAD_REF}"
-
-            # Derive variant from all PR labels (default to cpu for frontend-only previews)
-            VARIANT="cpu"
-            echo "${PR_LABELS}" | grep -q '"preview-gpu"' && VARIANT="gpu"
           else
             REF="${GITHUB_SHA}"
             BRANCH="${GITHUB_REF_NAME}"
-            PR_NUMBER=""
-            VARIANT=""
           fi
           payload="$(jq -nc \
             --arg ref "${REF}" \
             --arg branch "${BRANCH}" \
-            --arg pr_number "${PR_NUMBER}" \
-            --arg variant "${VARIANT}" \
-            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
+            '{ref: $ref, branch: $branch}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

.github/workflows/cloud-dispatch-cleanup.yaml

@@ -1,39 +0,0 @@
----
-# Dispatches a frontend-preview-cleanup event to the cloud repo when a
-# frontend PR with a preview label is closed or has its preview label
-# removed. The cloud repo handles the actual environment teardown.
-#
-# This is fire-and-forget — it does NOT wait for the cloud workflow to
-# complete. Status is visible in the cloud repo's Actions tab.
-
-name: Cloud Frontend Preview Cleanup Dispatch
-
-on:
-  pull_request:
-    types: [closed, unlabeled]
-
-permissions: {}
-
-jobs:
-  dispatch:
-    # Only dispatch when:
-    # - PR closed AND had a preview label
-    # - Preview label specifically removed
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      ((github.event.action == 'closed' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))) ||
-       (github.event.action == 'unlabeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)))
-    runs-on: ubuntu-latest
-    steps:
-      - name: Dispatch to cloud repo
-        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
-        with:
-          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
-          repository: Comfy-Org/cloud
-          event-type: frontend-preview-cleanup
-          client-payload: >-
-            {"pr_number": "${{ github.event.pull_request.number }}"}

.storybook/preview.ts

@@ -58,7 +58,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
-  document.body.classList.add('font-inter')
+  document.body.classList.add('[&_*]:!font-inter')
 
   return Story(context.args, context)
 }

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -24,15 +24,13 @@ export class DragDropHelper {
       url?: string
       dropPosition?: Position
       waitForUpload?: boolean
-      preserveNativePropagation?: boolean
     } = {}
   ): Promise<void> {
     const {
       dropPosition = { x: 100, y: 100 },
       fileName,
       url,
-      waitForUpload = false,
-      preserveNativePropagation = false
+      waitForUpload = false
     } = options
 
     if (!fileName && !url)
@@ -44,8 +42,7 @@ export class DragDropHelper {
       fileType?: string
       buffer?: Uint8Array | number[]
       url?: string
-      preserveNativePropagation: boolean
-    } = { dropPosition, preserveNativePropagation }
+    } = { dropPosition }
 
     if (fileName) {
       const filePath = this.assetPath(fileName)
@@ -128,17 +125,15 @@ export class DragDropHelper {
         )
       }
 
-      if (!params.preserveNativePropagation) {
-        Object.defineProperty(dropEvent, 'preventDefault', {
-          value: () => {},
-          writable: false
-        })
+      Object.defineProperty(dropEvent, 'preventDefault', {
+        value: () => {},
+        writable: false
+      })
 
-        Object.defineProperty(dropEvent, 'stopPropagation', {
-          value: () => {},
-          writable: false
-        })
-      }
+      Object.defineProperty(dropEvent, 'stopPropagation', {
+        value: () => {},
+        writable: false
+      })
 
       targetElement.dispatchEvent(dragOverEvent)
       targetElement.dispatchEvent(dropEvent)
@@ -169,10 +164,7 @@ export class DragDropHelper {
 
   async dragAndDropURL(
     url: string,
-    options: {
-      dropPosition?: Position
-      preserveNativePropagation?: boolean
-    } = {}
+    options: { dropPosition?: Position } = {}
   ): Promise<void> {
     return this.dragAndDropExternalResource({ url, ...options })
   }

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -67,37 +67,5 @@ test.describe(
         )
       })
     })
-
-    test('Load workflow from URL dropped onto Vue node', async ({
-      comfyPage
-    }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-      const node = comfyPage.vueNodes.getNodeByTitle('KSampler')
-      const box = await node.boundingBox()
-      expect(box).not.toBeNull()
-
-      const dropPosition = {
-        x: box!.x + box!.width / 2,
-        y: box!.y + box!.height / 2
-      }
-
-      await comfyPage.dragDrop.dragAndDropURL(
-        'https://comfyanonymous.github.io/ComfyUI_examples/hidream/hidream_dev_example.png',
-        { dropPosition, preserveNativePropagation: true }
-      )
-
-      await comfyPage.page.waitForFunction(
-        (prevCount) => window.app!.graph.nodes.length !== prevCount,
-        initialNodeCount,
-        { timeout: 10000 }
-      )
-
-      const newNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(newNodeCount).not.toBe(initialNodeCount)
-    })
   }
 )

docs/release-process.md

@@ -1,62 +0,0 @@
-# Release Process
-
-## Bump Types
-
-All releases use `release-version-bump.yaml`. Effects differ by bump type:
-
-| Bump       | Target     | Creates branches?                     | GitHub release               |
-| ---------- | ---------- | ------------------------------------- | ---------------------------- |
-| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
-| Patch      | `main`     | No                                    | Published, "latest"          |
-| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
-| Prerelease | any        | No                                    | Draft + prerelease           |
-
-**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
-and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
-bumps on `main` are convenience snapshots — no branches created.
-
-**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
-"latest" so `main` stays current.
-
-### Dual-homed commits
-
-When a minor bump happens, unreleased commits appear in both places:
-
-```
-v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
-                │
-                └── core/1.40
-```
-
-A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
-later ship as v1.40.2). Same commits, no divergence — the branch just prevents
-1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
-
-## Backporting
-
-1. Add `needs-backport` + version label to the merged PR
-2. `pr-backport.yaml` cherry-picks and creates a backport PR
-3. Conflicts produce a comment with details and an agent prompt
-
-## Publishing
-
-Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
-publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
-and npm (`@comfyorg/comfyui-frontend-types`).
-
-## Bi-weekly ComfyUI Integration
-
-`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
-branch has unreleased commits, it triggers a patch bump and drafts a PR to
-`Comfy-Org/ComfyUI` updating `requirements.txt`.
-
-## Workflows
-
-| Workflow                        | Purpose                                          |
-| ------------------------------- | ------------------------------------------------ |
-| `release-version-bump.yaml`     | Bump version, create Release PR                  |
-| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
-| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
-| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
-| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
-| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |

global.d.ts

@@ -35,7 +35,6 @@ interface Window {
     mixpanel_token?: string
     posthog_project_token?: string
     posthog_api_host?: string
-    posthog_debug?: boolean
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

knip.config.ts

@@ -20,10 +20,6 @@ const config: KnipConfig = {
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
-    'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
-    },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     }
@@ -36,9 +32,7 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated manager types
@@ -53,9 +47,7 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

public/splash.css

@@ -1,51 +0,0 @@
-/* Pre-Vue splash loader — colors set by inline script */
-#splash-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  contain: strict;
-}
-#splash-loader svg {
-  width: min(200px, 50vw);
-  height: auto;
-  transform: translateZ(0);
-}
-#splash-loader .wave-group {
-  animation: splash-rise 4s ease-in-out infinite alternate;
-  will-change: transform;
-  transform: translateZ(0);
-}
-#splash-loader .wave-path {
-  animation: splash-wave 1.2s linear infinite;
-  will-change: transform;
-  transform: translateZ(0);
-}
-@keyframes splash-rise {
-  from {
-    transform: translateY(280px);
-  }
-  to {
-    transform: translateY(-80px);
-  }
-}
-@keyframes splash-wave {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-880px);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  #splash-loader .wave-group,
-  #splash-loader .wave-path {
-    animation: none;
-  }
-  #splash-loader .wave-group {
-    transform: translateY(-80px);
-  }
-}

src/App.vue

@@ -2,13 +2,20 @@
   <router-view />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted } from 'vue'
 
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -24,16 +31,6 @@ app.extensionManager = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 
-watch(
-  isLoading,
-  (loading, prevLoading) => {
-    if (prevLoading && !loading) {
-      document.getElementById('splash-loader')?.remove()
-    }
-  },
-  { flush: 'post' }
-)
-
 const showContextMenu = (event: MouseEvent) => {
   const { target } = event
   switch (true) {

src/components/TopMenuSection.vue

@@ -61,7 +61,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[comfy--send] size-4" />
+              <i class="icon-[lucide--share-2] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>

src/components/builder/AppBuilder.vue

@@ -8,7 +8,6 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -28,7 +27,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
@@ -53,15 +52,18 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return node ? { nodeId, widgetName, node, widget } : null
+      const node = resolveNode(nodeId)
+      if (!node) return null
+      const widget = node.widgets?.find((w) => w.name === widgetName)
+      return { nodeId, widgetName, node, widget }
     })
     .filter((item): item is NonNullable<typeof item> => item !== null)
 )
 
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    const node = resolveNode(nodeId)
+    const widget = node?.widgets?.find((w) => w.name === widgetName)
     if (!node || !widget) {
       return {
         nodeId,
@@ -106,7 +108,7 @@ function getHovered(
 
 function getBounding(nodeId: NodeId, widgetName?: string) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  const node = app.rootGraph.getNodeById(nodeId)
   if (!node) return
 
   const titleOffset =
@@ -119,6 +121,7 @@ function getBounding(nodeId: NodeId, widgetName?: string) {
       left: `${node.pos[0]}px`,
       top: `${node.pos[1] - titleOffset}px`
     }
+  const widget = node.widgets?.find((w) => w.name === widgetName)
   if (!widget) return
 
   const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
@@ -157,16 +160,12 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
-  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
+  if (!isSelectInputsMode.value) return
 
-  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
-  const storeName = isPromotedWidgetView(widget)
-    ? widget.sourceWidgetName
-    : widget.name
   const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
+    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
   )
-  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
+  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 

src/components/builder/useAppSetDefaultView.ts

@@ -1,7 +1,6 @@
 import { computed } from 'vue'
 
 import { useAppMode } from '@/composables/useAppMode'
-import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -43,9 +42,6 @@ export function useAppSetDefaultView() {
     const extra = (app.rootGraph.extra ??= {})
     extra.linearMode = openAsApp
     workflow.changeTracker?.checkState()
-    useTelemetry()?.trackDefaultViewSet({
-      default_view: openAsApp ? 'app' : 'graph'
-    })
     closeDialog()
     showAppliedDialog(openAsApp)
   }
@@ -58,7 +54,6 @@ export function useAppSetDefaultView() {
         appliedAsApp,
         onViewApp: () => {
           closeAppliedDialog()
-          useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
           setMode('app')
         },
         onExitToWorkflow: () => {

src/components/common/Dialogue.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{ title?: string; to?: string | HTMLElement }>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <DialogRoot v-slot="{ close }">
-    <DialogTrigger as-child>
-      <slot name="button" />
-    </DialogTrigger>
-    <DialogPortal :to>
-      <DialogOverlay
-        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
-      />
-      <DialogContent
-        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
-      >
-        <div
-          v-if="title"
-          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
-        >
-          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
-          <DialogClose as-child>
-            <Button
-              :aria-label="t('g.close')"
-              size="icon"
-              variant="muted-textonly"
-            >
-              <i class="icon-[lucide--x]" />
-            </Button>
-          </DialogClose>
-        </div>
-        <slot :close />
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>

src/components/common/DropdownItem.vue

@@ -54,12 +54,11 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5 shrink-0" :class="item.icon" />
-    <div class="mr-auto truncate" v-text="item.label" />
-    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
+    <i class="size-5" :class="item.icon" />
+    {{ item.label }}
     <div
-      v-else-if="item.new"
-      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-if="item.new"
+      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )

src/components/common/ScrubableNumberInput.stories.ts

@@ -1,160 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { ref, toRefs } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-import Popover from '@/components/ui/Popover.vue'
-
-import ScrubableNumberInput from './ScrubableNumberInput.vue'
-
-type StoryArgs = ComponentPropsAndSlots<typeof ScrubableNumberInput>
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Input/Number',
-  component: ScrubableNumberInput,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' },
-    hideButtons: { control: 'boolean' }
-  },
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false,
-    hideButtons: false
-  },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div class="w-60"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const { min, max, step, disabled, hideButtons } = toRefs(args)
-      const value = ref(42)
-      return { value, min, max, step, disabled, hideButtons }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min :max :step :disabled :hideButtons />'
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const { disabled } = toRefs(args)
-      const value = ref(50)
-      return { value, disabled }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" :disabled />'
-  })
-}
-
-export const AtMinimum: Story = {
-  render: () => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const value = ref(0)
-      return { value }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" />'
-  })
-}
-
-export const AtMaximum: Story = {
-  render: () => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const value = ref(100)
-      return { value }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" />'
-  })
-}
-
-export const FloatPrecision: Story = {
-  args: { min: 0, max: 1, step: 0.01 },
-  render: (args) => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const { min, max, step } = toRefs(args)
-      const value = ref(0.75)
-      return { value, min, max, step }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min :max :step display-value="0.75" />'
-  })
-}
-
-export const LargeNumber: Story = {
-  render: () => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const value = ref(1809000312992)
-      return { value }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min="0" :max="Number.MAX_SAFE_INTEGER" :step="1" />'
-  })
-}
-
-export const HiddenButtons: Story = {
-  args: { hideButtons: true },
-  render: (args) => ({
-    components: { ScrubableNumberInput },
-    setup() {
-      const { hideButtons } = toRefs(args)
-      const value = ref(42)
-      return { value, hideButtons }
-    },
-    template:
-      '<ScrubableNumberInput v-model="value" :min="0" :max="100" :step="1" :hideButtons />'
-  })
-}
-
-export const WithControlButton: Story = {
-  render: () => ({
-    components: { ScrubableNumberInput, Button, Popover },
-    setup() {
-      const value = ref(1809000312992)
-      return { value }
-    },
-    template: `
-      <ScrubableNumberInput v-model="value" :min="0" :max="Number.MAX_SAFE_INTEGER" :step="1">
-        <Popover>
-          <template #button>
-            <Button
-              variant="textonly"
-              size="sm"
-              class="h-4 w-7 self-center rounded-xl bg-primary-background/30 p-0 hover:bg-primary-background-hover/30"
-            >
-              <i class="icon-[lucide--shuffle] w-full text-xs text-primary-background" />
-            </Button>
-          </template>
-          <div class="p-4 text-sm">Control popover content</div>
-        </Popover>
-      </ScrubableNumberInput>
-    `
-  })
-}

src/components/common/ScrubableNumberInput.vue

@@ -33,20 +33,19 @@
         spellcheck="false"
         @blur="handleBlur"
         @keyup.enter="handleBlur"
-        @keydown.up.prevent="updateValueBy(step)"
-        @keydown.down.prevent="updateValueBy(-step)"
-        @keydown.page-up.prevent="updateValueBy(10 * step)"
-        @keydown.page-down.prevent="updateValueBy(-10 * step)"
+        @dragstart.prevent
       />
       <div
-        ref="swipeElement"
         :class="
           cn(
-            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
+            'absolute inset-0 z-10 cursor-ew-resize',
             textEdit && 'pointer-events-none hidden'
           )
         "
+        @pointerdown="handlePointerDown"
+        @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
+        @pointercancel="resetDrag"
       />
     </div>
     <slot />
@@ -66,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -74,8 +73,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  min = -Number.MAX_VALUE,
-  max = Number.MAX_VALUE,
+  min,
+  max,
   step = 1,
   disabled = false,
   hideButtons = false,
@@ -97,7 +96,6 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
-const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)
 
 onClickOutside(container, () => {
@@ -105,11 +103,21 @@ onClickOutside(container, () => {
 })
 
 function clamp(value: number): number {
-  return Math.min(max, Math.max(min, value))
+  const lo = min ?? -Infinity
+  const hi = max ?? Infinity
+  return Math.min(hi, Math.max(lo, value))
 }
 
-const canDecrement = computed(() => modelValue.value > min && !disabled)
-const canIncrement = computed(() => modelValue.value < max && !disabled)
+const canDecrement = computed(
+  () => modelValue.value > (min ?? -Infinity) && !disabled
+)
+const canIncrement = computed(
+  () => modelValue.value < (max ?? Infinity) && !disabled
+)
+
+const dragging = ref(false)
+const dragDelta = ref(0)
+const hasDragged = ref(false)
 
 function handleBlur(e: Event) {
   const target = e.target as HTMLInputElement
@@ -127,27 +135,41 @@ function handleBlur(e: Event) {
   textEdit.value = false
 }
 
-let dragDelta = 0
-function handlePointerUp() {
-  if (isSwiping.value) return
-
-  textEdit.value = true
-  inputField.value?.focus()
-  inputField.value?.select()
+function handlePointerDown(e: PointerEvent) {
+  if (e.button !== 0) return
+  if (disabled) return
+  const target = e.target as HTMLElement
+  target.setPointerCapture(e.pointerId)
+  dragging.value = true
+  dragDelta.value = 0
+  hasDragged.value = false
 }
 
-const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
-  onSwipeEnd: () => (dragDelta = 0)
-})
+function handlePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragDelta.value += e.movementX
+  const steps = (dragDelta.value / 10) | 0
+  if (steps === 0) return
+  hasDragged.value = true
+  const unclipped = modelValue.value + steps * step
+  dragDelta.value %= 10
+  modelValue.value = clamp(unclipped)
+}
 
-whenever(distanceX, () => {
-  if (disabled) return
-  const delta = ((distanceX.value - dragDelta) / 10) | 0
-  dragDelta += delta * 10
-  modelValue.value = clamp(modelValue.value - delta * step)
-})
+function handlePointerUp() {
+  if (!dragging.value) return
 
-function updateValueBy(delta: number) {
-  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
+  if (!hasDragged.value) {
+    textEdit.value = true
+    inputField.value?.focus()
+    inputField.value?.select()
+  }
+
+  resetDrag()
+}
+
+function resetDrag() {
+  dragging.value = false
+  dragDelta.value = 0
 }
 </script>

src/components/common/SearchBox.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
+
+const meta: GenericMeta<typeof SearchBox> = {
+  title: 'Components/Input/SearchBox',
+  component: SearchBox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Toggle border prop'
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the search box'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Search...',
+    showBorder: false,
+    size: 'md'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SearchBox },
+    setup() {
+      const searchText = ref('')
+      return { searchText, args }
+    },
+    template: `
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
+      </div>
+    `
+  })
+}
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: false
+  }
+}
+
+export const MediumSize: Story = {
+  ...Default,
+  args: {
+    size: 'md',
+    showBorder: false
+  }
+}
+
+export const LargeSize: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: false
+  }
+}
+
+export const LargeSizeWithBorder: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: true
+  }
+}

src/components/common/SearchBox.test.ts

@@ -0,0 +1,193 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      templateWidgets: {
+        sort: {
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  }
+})
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(SearchBox, {
+      props: {
+        modelValue: '',
+        ...props
+      },
+      global: {
+        plugins: [i18n]
+      }
+    })
+  }
+
+  describe('debounced search functionality', () => {
+    it('should debounce search input by 300ms', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type search query
+      await input.setValue('test')
+
+      // Model should not update immediately
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 299ms (just before debounce delay)
+      await vi.advanceTimersByTimeAsync(299)
+      await nextTick()
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 1ms more (reaching 300ms)
+      await vi.advanceTimersByTimeAsync(1)
+      await nextTick()
+
+      // Model should now be updated
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test'])
+    })
+
+    it('should reset debounce timer on each keystroke', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type first character
+      await input.setValue('t')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type second character (should reset timer)
+      await input.setValue('te')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type third character (should reset timer again)
+      await input.setValue('tes')
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      // Should not have emitted yet (only 200ms passed since last keystroke)
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance final 100ms to reach 300ms
+      await vi.advanceTimersByTimeAsync(100)
+      await nextTick()
+
+      // Should now emit with final value
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
+    })
+
+    it('should only emit final value after rapid typing', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Simulate rapid typing
+      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
+      for (const term of searchTerms) {
+        await input.setValue(term)
+        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
+      }
+      await nextTick()
+
+      // Should not have emitted yet
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Complete the debounce delay
+      await vi.advanceTimersByTimeAsync(350)
+      await nextTick()
+
+      // Should emit only once with final value
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
+    })
+
+    describe('bidirectional model sync', () => {
+      it('should sync external model changes to internal state', async () => {
+        const wrapper = createWrapper({ modelValue: 'initial' })
+        const input = wrapper.find('input')
+
+        expect(input.element.value).toBe('initial')
+
+        // Update model externally
+        await wrapper.setProps({ modelValue: 'external update' })
+        await nextTick()
+
+        // Internal state should sync
+        expect(input.element.value).toBe('external update')
+      })
+    })
+
+    describe('placeholder', () => {
+      it('should use custom placeholder when provided', () => {
+        const wrapper = createWrapper({ placeholder: 'Custom search...' })
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Custom search...')
+        expect(input.attributes('aria-label')).toBe('Custom search...')
+      })
+
+      it('should use default placeholder when not provided', () => {
+        const wrapper = createWrapper()
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Search...')
+        expect(input.attributes('aria-label')).toBe('Search...')
+      })
+    })
+
+    describe('autofocus', () => {
+      it('should focus input when autofocus is true', async () => {
+        const wrapper = createWrapper({ autofocus: true })
+        await nextTick()
+
+        const input = wrapper.find('input')
+        const inputElement = input.element as HTMLInputElement
+
+        // Note: In JSDOM, focus() doesn't actually set document.activeElement
+        // We can only verify that the focus method exists and doesn't throw
+        expect(inputElement.focus).toBeDefined()
+      })
+
+      it('should not autofocus when autofocus is false', () => {
+        const wrapper = createWrapper({ autofocus: false })
+        const input = wrapper.find('input')
+
+        expect(document.activeElement).not.toBe(input.element)
+      })
+    })
+
+    describe('click to focus', () => {
+      it('should focus input when wrapper is clicked', async () => {
+        const wrapper = createWrapper()
+        const wrapperDiv = wrapper.find('[class*="flex"]')
+
+        await wrapperDiv.trigger('click')
+        await nextTick()
+
+        // Input should receive focus
+        const input = wrapper.find('input').element as HTMLInputElement
+        expect(input.focus).toBeDefined()
+      })
+    })
+  })
+})

src/components/common/SearchBox.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
+        customClass,
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      :class="
+        cn(
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
+          isLarge ? 'pl-11' : 'pl-8'
+        )
+      "
+      :aria-label="placeholder"
+    />
+    <Button
+      v-if="filterIcon"
+      size="icon"
+      variant="textonly"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
+      @click="$emit('showFilter', $event)"
+    >
+      <i :class="filterIcon" />
+    </Button>
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      :class="cn('clear-button absolute', isLarge ? 'left-2' : 'left-0')"
+      variant="textonly"
+      size="icon"
+      @click="modelValue = ''"
+    >
+      <i class="icon-[lucide--x] size-4" />
+    </Button>
+  </div>
+  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+    <SearchFilterChip
+      v-for="filter in filters"
+      :key="filter.id"
+      :text="filter.text"
+      :badge="filter.badge"
+      :badge-class="filter.badgeClass"
+      @remove="$emit('removeFilter', filter)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" generic="TFilter extends SearchFilter">
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { computed, ref } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
+const {
+  placeholder = 'Search...',
+  icon = 'pi pi-search',
+  debounceTime = 300,
+  filterIcon,
+  filters = [],
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: customClass
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  filterIcon?: string
+  filters?: TFilter[]
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const isLarge = computed(() => size === 'lg')
+
+const emit = defineEmits<{
+  (e: 'search', value: string, filters: TFilter[]): void
+  (e: 'showFilter', event: Event): void
+  (e: 'removeFilter', filter: TFilter): void
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref()
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
+
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn(
+      'box-border rounded-sm border border-solid border-border-default p-2',
+      isLarge.value ? 'h-10' : 'h-8'
+    )
+  }
+
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
+</script>
+
+<style scoped>
+:deep(.p-inputtext) {
+  --p-form-field-padding-x: 0.625rem;
+}
+</style>

src/components/common/SearchBoxV2.test.ts

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SearchBoxV2 from './SearchBoxV2.vue'
+
+vi.mock('@vueuse/core', () => ({
+  watchDebounced: vi.fn(() => vi.fn())
+}))
+
+describe('SearchBoxV2', () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          clear: 'Clear',
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  })
+
+  function mountComponent(props = {}) {
+    return mount(SearchBoxV2, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          ComboboxRoot: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxAnchor: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxInput: {
+            template:
+              '<input :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+            props: ['placeholder', 'modelValue', 'autoFocus']
+          }
+        }
+      },
+      props: {
+        modelValue: '',
+        ...props
+      }
+    })
+  }
+
+  it('uses i18n placeholder when no placeholder prop provided', () => {
+    const wrapper = mountComponent()
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Search...')
+  })
+
+  it('uses custom placeholder when provided', () => {
+    const wrapper = mountComponent({
+      placeholder: 'Custom placeholder'
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Custom placeholder')
+  })
+
+  it('shows search icon when search term is empty', () => {
+    const wrapper = mountComponent({ modelValue: '' })
+    expect(wrapper.find('i.icon-\\[lucide--search\\]').exists()).toBe(true)
+  })
+
+  it('shows clear button when search term is not empty', () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('clears search term when clear button is clicked', async () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    const clearButton = wrapper.find('button')
+    await clearButton.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
+  })
+
+  it('applies large size classes when size is lg', () => {
+    const wrapper = mountComponent({ size: 'lg' })
+    expect(wrapper.html()).toContain('size-5')
+  })
+
+  it('applies medium size classes when size is md', () => {
+    const wrapper = mountComponent({ size: 'md' })
+    expect(wrapper.html()).toContain('size-4')
+  })
+})

src/components/common/SearchBoxV2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-auto flex-col gap-2">
+    <ComboboxRoot :ignore-filter="true" :open="false">
+      <ComboboxAnchor
+        :class="
+          cn(
+            'relative flex w-full cursor-text items-center',
+            'rounded-lg bg-comfy-input text-comfy-input-foreground',
+            showBorder &&
+              'box-border border border-solid border-border-default',
+            sizeClasses,
+            className
+          )
+        "
+      >
+        <i
+          v-if="!searchTerm"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
+        />
+        <Button
+          v-else
+          class="absolute left-2"
+          variant="textonly"
+          size="icon"
+          :aria-label="$t('g.clear')"
+          @click="clearSearch"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </Button>
+
+        <ComboboxInput
+          ref="inputRef"
+          v-model="searchTerm"
+          :class="
+            cn(
+              'size-full border-none bg-transparent text-sm outline-none',
+              inputPadding
+            )
+          "
+          :placeholder="placeholderText"
+          :auto-focus="autofocus"
+        />
+      </ComboboxAnchor>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+import { watchDebounced } from '@vueuse/core'
+import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  debounceTime = 300,
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const searchTerm = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+const isLarge = computed(() => size === 'lg')
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+const sizeClasses = computed(() => {
+  if (showBorder) {
+    return isLarge.value ? 'h-10 p-2' : 'h-8 p-2'
+  }
+  return isLarge.value ? 'h-12 px-4 py-2' : 'h-10 px-4 py-2'
+})
+
+const iconClass = computed(() => (isLarge.value ? 'size-5' : 'size-4'))
+const inputPadding = computed(() => (isLarge.value ? 'pl-8' : 'pl-6'))
+
+function clearSearch() {
+  searchTerm.value = ''
+}
+
+watchDebounced(
+  searchTerm,
+  (value: string) => {
+    emit('search', value)
+  },
+  { debounce: debounceTime }
+)
+</script>

src/components/common/SystemStatsPanel.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <div class="mb-4 flex items-center gap-2">
-        <h2 class="text-2xl font-semibold">
-          {{ $t('g.systemInfo') }}
-        </h2>
-        <Button variant="secondary" @click="copySystemInfo">
-          <i class="pi pi-copy" />
-          {{ $t('g.copySystemInfo') }}
-        </Button>
-      </div>
+      <h2 class="mb-4 text-2xl font-semibold">
+        {{ $t('g.systemInfo') }}
+      </h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
           <div :class="cn('font-medium', isOutdated(col) && 'text-danger-100')">
@@ -52,8 +46,6 @@ import TabView from 'primevue/tabview'
 import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
@@ -63,8 +55,6 @@ const props = defineProps<{
   stats: SystemStats
 }>()
 
-const { copyToClipboard } = useCopyToClipboard()
-
 const systemInfo = computed(() => ({
   ...props.stats.system,
   argv: props.stats.system.argv.join(' ')
@@ -118,7 +108,7 @@ function isOutdated(column: ColumnDef): boolean {
   return !!installed && !!required && installed !== required
 }
 
-function getDisplayValue(column: ColumnDef) {
+const getDisplayValue = (column: ColumnDef) => {
   const value = systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {
     return column.formatNumber(value)
@@ -128,33 +118,4 @@ function getDisplayValue(column: ColumnDef) {
   }
   return value
 }
-
-function formatSystemInfoText(): string {
-  const lines: string[] = ['## System Info']
-
-  for (const col of systemColumns.value) {
-    const display = getDisplayValue(col)
-    if (display !== undefined && display !== '') {
-      lines.push(`${col.header}: ${display}`)
-    }
-  }
-
-  if (hasDevices.value) {
-    lines.push('')
-    lines.push('## Devices')
-    for (const device of props.stats.devices) {
-      lines.push(`- ${device.name} (${device.type})`)
-      lines.push(`  VRAM Total: ${formatSize(device.vram_total)}`)
-      lines.push(`  VRAM Free: ${formatSize(device.vram_free)}`)
-      lines.push(`  Torch VRAM Total: ${formatSize(device.torch_vram_total)}`)
-      lines.push(`  Torch VRAM Free: ${formatSize(device.torch_vram_free)}`)
-    }
-  }
-
-  return lines.join('\n')
-}
-
-function copySystemInfo() {
-  copyToClipboard(formatSystemInfoText())
-}
 </script>

src/components/common/TreeExplorerV2Node.vue

@@ -8,7 +8,6 @@
     <!-- Node -->
     <div
       v-if="item.value.type === 'node'"
-      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       draggable="true"
@@ -49,7 +48,6 @@
     <!-- Folder -->
     <div
       v-else
-      v-bind="$attrs"
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
@@ -100,10 +98,6 @@ import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const ROW_CLASS =
   'group/tree-node flex cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
 

src/components/common/VirtualGrid.test.ts

@@ -155,93 +155,6 @@ describe('VirtualGrid', () => {
     wrapper.unmount()
   })
 
-  it('emits approach-end for single-column list when scrolled near bottom', async () => {
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        maxColumns: 1,
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    // Scroll near the end: 50 items * 48px = 2400px total
-    // viewRows = ceil(600/48) = 13, buffer = 1
-    // Need toCol >= items.length - cols*bufferRows = 50 - 1 = 49
-    // toCol = (offsetRows + bufferRows + viewRows) * cols
-    // offsetRows = floor(scrollY / 48)
-    // Need (offsetRows + 1 + 13) * 1 >= 49 → offsetRows >= 35
-    // scrollY = 35 * 48 = 1680
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
-  })
-
-  it('does not emit approach-end without maxColumns in single-column layout', async () => {
-    // Demonstrates the bug: without maxColumns=1, cols is calculated
-    // from width/itemWidth (400/200 = 2), causing incorrect row math
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    // Same scroll position as the passing test
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
-    // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
-    // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
-  })
-
   it('forces cols to maxColumns when maxColumns is finite', async () => {
     mockedWidth.value = 100
     mockedHeight.value = 200

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,10 +14,10 @@
     </template>
 
     <template #header>
-      <SearchInput
+      <SearchBox
         v-model="searchQuery"
         size="lg"
-        class="max-w-96 flex-1"
+        class="max-w-[384px]"
         autofocus
       />
     </template>
@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="tall"
+            size="compact"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,20 +318,6 @@
                       </Button>
                     </div>
                   </div>
-                  <div class="flex">
-                    <span
-                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
-                    >
-                      <template v-if="isAppTemplate(template)">
-                        <i class="icon-[lucide--panels-top-left]" />
-                        {{ $t('builderToolbar.app', 'App') }}
-                      </template>
-                      <template v-else>
-                        <i class="icon-[lucide--workflow]" />
-                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
-                      </template>
-                    </span>
-                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -403,7 +389,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
@@ -497,8 +483,6 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
-const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
-
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -155,7 +155,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { KeybindingImpl } from '@/platform/keybindings/keybinding'

src/components/error/ErrorOverlay.vue

@@ -50,9 +50,7 @@
             {{ t('g.dismiss') }}
           </Button>
           <Button variant="secondary" size="lg" @click="seeErrors">
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ t('errorOverlay.seeErrors') }}
           </Button>
         </div>
       </div>
@@ -71,8 +69,6 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-defineProps<{ appMode?: boolean }>()
-
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -98,7 +94,6 @@ function dismiss() {
 }
 
 function seeErrors() {
-  canvasStore.linearMode = false
   if (canvasStore.canvas) {
     canvasStore.canvas.deselectAll()
     canvasStore.updateSelectedItems()

src/components/graph/CanvasModeSelector.test.ts

@@ -1,153 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import CanvasModeSelector from '@/components/graph/CanvasModeSelector.vue'
-
-const mockExecute = vi.fn()
-const mockGetCommand = vi.fn().mockReturnValue({
-  keybinding: {
-    combo: {
-      getKeySequences: () => ['V']
-    }
-  }
-})
-const mockFormatKeySequence = vi.fn().mockReturnValue('V')
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    execute: mockExecute,
-    getCommand: mockGetCommand,
-    formatKeySequence: mockFormatKeySequence
-  })
-}))
-
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({
-    canvas: { read_only: false }
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      graphCanvasMenu: {
-        select: 'Select',
-        hand: 'Hand',
-        canvasMode: 'Canvas Mode'
-      }
-    }
-  }
-})
-
-const mockPopoverHide = vi.fn()
-
-function createWrapper() {
-  return mount(CanvasModeSelector, {
-    global: {
-      plugins: [i18n],
-      stubs: {
-        Popover: {
-          template: '<div><slot /></div>',
-          methods: {
-            toggle: vi.fn(),
-            hide: mockPopoverHide
-          }
-        }
-      }
-    }
-  })
-}
-
-describe('CanvasModeSelector', () => {
-  it('should render menu with menuitemradio roles and aria-checked', () => {
-    const wrapper = createWrapper()
-
-    const menu = wrapper.find('[role="menu"]')
-    expect(menu.exists()).toBe(true)
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    expect(menuItems).toHaveLength(2)
-
-    // Select mode is active (read_only: false), so select is checked
-    expect(menuItems[0].attributes('aria-checked')).toBe('true')
-    expect(menuItems[1].attributes('aria-checked')).toBe('false')
-  })
-
-  it('should render menu items as buttons with aria-labels', () => {
-    const wrapper = createWrapper()
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    menuItems.forEach((btn) => {
-      expect(btn.element.tagName).toBe('BUTTON')
-      expect(btn.attributes('type')).toBe('button')
-    })
-    expect(menuItems[0].attributes('aria-label')).toBe('Select')
-    expect(menuItems[1].attributes('aria-label')).toBe('Hand')
-  })
-
-  it('should use roving tabindex based on active mode', () => {
-    const wrapper = createWrapper()
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    // Select is active (read_only: false) → tabindex 0
-    expect(menuItems[0].attributes('tabindex')).toBe('0')
-    // Hand is inactive → tabindex -1
-    expect(menuItems[1].attributes('tabindex')).toBe('-1')
-  })
-
-  it('should mark icons as aria-hidden', () => {
-    const wrapper = createWrapper()
-
-    const icons = wrapper.findAll('[role="menuitemradio"] i')
-    icons.forEach((icon) => {
-      expect(icon.attributes('aria-hidden')).toBe('true')
-    })
-  })
-
-  it('should expose trigger button with aria-haspopup and aria-expanded', () => {
-    const wrapper = createWrapper()
-
-    const trigger = wrapper.find('[aria-haspopup="menu"]')
-    expect(trigger.exists()).toBe(true)
-    expect(trigger.attributes('aria-label')).toBe('Canvas Mode')
-    expect(trigger.attributes('aria-expanded')).toBe('false')
-  })
-
-  it('should call focus on next item when ArrowDown is pressed', async () => {
-    const wrapper = createWrapper()
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    const secondItemEl = menuItems[1].element as HTMLElement
-    const focusSpy = vi.spyOn(secondItemEl, 'focus')
-
-    await menuItems[0].trigger('keydown', { key: 'ArrowDown' })
-    expect(focusSpy).toHaveBeenCalled()
-  })
-
-  it('should call focus on previous item when ArrowUp is pressed', async () => {
-    const wrapper = createWrapper()
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    const firstItemEl = menuItems[0].element as HTMLElement
-    const focusSpy = vi.spyOn(firstItemEl, 'focus')
-
-    await menuItems[1].trigger('keydown', { key: 'ArrowUp' })
-    expect(focusSpy).toHaveBeenCalled()
-  })
-
-  it('should close popover on Escape and restore focus to trigger', async () => {
-    const wrapper = createWrapper()
-
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    const trigger = wrapper.find('[aria-haspopup="menu"]')
-    const triggerEl = trigger.element as HTMLElement
-    const focusSpy = vi.spyOn(triggerEl, 'focus')
-
-    await menuItems[0].trigger('keydown', { key: 'Escape' })
-    expect(mockPopoverHide).toHaveBeenCalled()
-    expect(focusSpy).toHaveBeenCalled()
-  })
-})

src/components/graph/CanvasModeSelector.vue

@@ -4,21 +4,15 @@
     variant="secondary"
     class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
     :style="buttonStyles"
-    :aria-label="$t('graphCanvasMenu.canvasMode')"
-    aria-haspopup="menu"
-    :aria-expanded="isOpen"
     @click="toggle"
   >
     <div class="flex items-center gap-1 pr-0.5">
       <div
         class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
       >
-        <i :class="currentModeIcon" class="block size-4" aria-hidden="true" />
+        <i :class="currentModeIcon" class="block size-4" />
       </div>
-      <i
-        class="icon-[lucide--chevron-down] block size-4 pr-1.5"
-        aria-hidden="true"
-      />
+      <i class="icon-[lucide--chevron-down] block size-4 pr-1.5" />
     </div>
   </Button>
 
@@ -30,54 +24,31 @@
     :close-on-escape="true"
     unstyled
     :pt="popoverPt"
-    @show="onPopoverShow"
-    @hide="onPopoverHide"
   >
-    <div
-      ref="menuRef"
-      class="flex flex-col gap-1"
-      role="menu"
-      :aria-label="$t('graphCanvasMenu.canvasMode')"
-    >
-      <button
-        type="button"
-        role="menuitemradio"
-        :aria-checked="!isCanvasReadOnly"
-        :tabindex="!isCanvasReadOnly ? 0 : -1"
-        class="flex w-full cursor-pointer items-center justify-between rounded-sm border-none bg-transparent px-3 py-2 text-sm text-text-primary outline-none hover:bg-node-component-surface-hovered focus-visible:bg-node-component-surface-hovered"
-        :aria-label="$t('graphCanvasMenu.select')"
+    <div class="flex flex-col gap-1">
+      <div
+        class="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
         @click="setMode('select')"
-        @keydown.arrow-down.prevent="focusNextItem"
-        @keydown.arrow-up.prevent="focusPrevItem"
-        @keydown.escape.prevent="closeAndRestoreFocus"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--mouse-pointer-2] size-4" aria-hidden="true" />
+          <i class="icon-[lucide--mouse-pointer-2] size-4" />
           <span>{{ $t('graphCanvasMenu.select') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{
           unlockCommandText
         }}</span>
-      </button>
+      </div>
 
-      <button
-        type="button"
-        role="menuitemradio"
-        :aria-checked="isCanvasReadOnly"
-        :tabindex="isCanvasReadOnly ? 0 : -1"
-        class="flex w-full cursor-pointer items-center justify-between rounded-sm border-none bg-transparent px-3 py-2 text-sm text-text-primary outline-none hover:bg-node-component-surface-hovered focus-visible:bg-node-component-surface-hovered"
-        :aria-label="$t('graphCanvasMenu.hand')"
+      <div
+        class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
         @click="setMode('hand')"
-        @keydown.arrow-down.prevent="focusNextItem"
-        @keydown.arrow-up.prevent="focusPrevItem"
-        @keydown.escape.prevent="closeAndRestoreFocus"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--hand] size-4" aria-hidden="true" />
+          <i class="icon-[lucide--hand] size-4" />
           <span>{{ $t('graphCanvasMenu.hand') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
-      </button>
+      </div>
     </div>
   </Popover>
 </template>
@@ -85,7 +56,7 @@
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import type { ComponentPublicInstance } from 'vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -98,8 +69,6 @@ interface Props {
 defineProps<Props>()
 const buttonRef = ref<ComponentPublicInstance | null>(null)
 const popover = ref<InstanceType<typeof Popover>>()
-const menuRef = ref<HTMLElement | null>(null)
-const isOpen = ref(false)
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
@@ -137,43 +106,6 @@ const setMode = (mode: 'select' | 'hand') => {
   popover.value?.hide()
 }
 
-async function onPopoverShow() {
-  isOpen.value = true
-  await nextTick()
-  const checkedItem = menuRef.value?.querySelector<HTMLElement>(
-    '[aria-checked="true"]'
-  )
-  checkedItem?.focus()
-}
-
-function onPopoverHide() {
-  isOpen.value = false
-}
-
-function closeAndRestoreFocus() {
-  popover.value?.hide()
-  const el = buttonRef.value?.$el || buttonRef.value
-  ;(el as HTMLElement)?.focus()
-}
-
-function focusNextItem(event: KeyboardEvent) {
-  const items = getMenuItems(event)
-  const index = items.indexOf(event.target as HTMLElement)
-  items[(index + 1) % items.length]?.focus()
-}
-
-function focusPrevItem(event: KeyboardEvent) {
-  const items = getMenuItems(event)
-  const index = items.indexOf(event.target as HTMLElement)
-  items[(index - 1 + items.length) % items.length]?.focus()
-}
-
-function getMenuItems(event: KeyboardEvent): HTMLElement[] {
-  const menu = (event.target as HTMLElement).closest('[role="menu"]')
-  if (!menu) return []
-  return Array.from(menu.querySelectorAll('[role="menuitemradio"]'))
-}
-
 const popoverPt = computed(() => ({
   root: {
     class: 'absolute z-50 -translate-y-2'

src/components/graph/GraphCanvas.vue

@@ -479,53 +479,50 @@ useEventListener(
 onMounted(async () => {
   comfyApp.vueAppReady = true
   workspaceStore.spinner = true
-  try {
-    // ChangeTracker needs to be initialized before setup, as it will overwrite
-    // some listeners of litegraph canvas.
-    ChangeTracker.init()
+  // ChangeTracker needs to be initialized before setup, as it will overwrite
+  // some listeners of litegraph canvas.
+  ChangeTracker.init()
 
-    await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
+  await until(() => isSettingsReady.value || !!settingsError.value).toBe(true)
 
-    if (settingsError.value) {
-      if (settingsError.value instanceof UnauthorizedError) {
-        localStorage.removeItem('Comfy.userId')
-        localStorage.removeItem('Comfy.userName')
-        window.location.reload()
-        return
-      }
-      throw settingsError.value
+  if (settingsError.value) {
+    if (settingsError.value instanceof UnauthorizedError) {
+      localStorage.removeItem('Comfy.userId')
+      localStorage.removeItem('Comfy.userName')
+      window.location.reload()
+      return
     }
-
-    // Register core settings immediately after settings are ready
-    CORE_SETTINGS.forEach(settingStore.addSetting)
-
-    await Promise.all([
-      until(() => isI18nReady.value || !!i18nError.value).toBe(true),
-      useNewUserService().initializeIfNewUser()
-    ])
-    if (i18nError.value) {
-      console.warn(
-        '[GraphCanvas] Failed to load custom nodes i18n:',
-        i18nError.value
-      )
-    }
-
-    // @ts-expect-error fixme ts strict error
-    await comfyApp.setup(canvasRef.value)
-    canvasStore.canvas = comfyApp.canvas
-    canvasStore.canvas.render_canvas_border = false
-    useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
-
-    window.app = comfyApp
-    window.graph = comfyApp.graph
-
-    comfyAppReady.value = true
-
-    vueNodeLifecycle.setupEmptyGraphListener()
-  } finally {
-    workspaceStore.spinner = false
+    throw settingsError.value
   }
 
+  // Register core settings immediately after settings are ready
+  CORE_SETTINGS.forEach(settingStore.addSetting)
+
+  await Promise.all([
+    until(() => isI18nReady.value || !!i18nError.value).toBe(true),
+    useNewUserService().initializeIfNewUser()
+  ])
+  if (i18nError.value) {
+    console.warn(
+      '[GraphCanvas] Failed to load custom nodes i18n:',
+      i18nError.value
+    )
+  }
+
+  // @ts-expect-error fixme ts strict error
+  await comfyApp.setup(canvasRef.value)
+  canvasStore.canvas = comfyApp.canvas
+  canvasStore.canvas.render_canvas_border = false
+  workspaceStore.spinner = false
+  useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
+
+  window.app = comfyApp
+  window.graph = comfyApp.graph
+
+  comfyAppReady.value = true
+
+  vueNodeLifecycle.setupEmptyGraphListener()
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()

src/components/graph/GraphCanvasMenu.vue

@@ -10,8 +10,6 @@
     ></div>
 
     <ButtonGroup
-      role="toolbar"
-      :aria-label="t('graphCanvasMenu.canvasToolbar')"
       class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
@@ -32,7 +30,7 @@
         class="size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <i class="icon-[lucide--focus] size-4" aria-hidden="true" />
+        <i class="icon-[lucide--focus] size-4" />
       </Button>
 
       <Button
@@ -46,7 +44,7 @@
       >
         <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down] size-4" aria-hidden="true" />
+          <i class="icon-[lucide--chevron-down] size-4" />
         </span>
       </Button>
 
@@ -61,7 +59,7 @@
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <i class="icon-[lucide--map] size-4" aria-hidden="true" />
+        <i class="icon-[lucide--map] size-4" />
       </Button>
 
       <Button
@@ -80,7 +78,7 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <i class="icon-[lucide--route-off] size-4" aria-hidden="true" />
+        <i class="icon-[lucide--route-off] size-4" />
       </Button>
     </ButtonGroup>
   </div>

src/components/honeyToast/HoneyToast.vue

@@ -26,18 +26,15 @@ function toggle() {
         v-if="visible"
         role="status"
         aria-live="polite"
-        :class="
-          cn(
-            'fixed inset-x-4 bottom-6 z-9999 mx-auto w-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg transition-all duration-300 sm:inset-x-0',
-            isExpanded ? 'sm:w-[max(400px,40vw)]' : 'sm:w-fit'
-          )
-        "
+        class="fixed inset-x-4 bottom-6 z-9999 mx-auto w-auto max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg transition-all duration-300 sm:inset-x-0 sm:w-min sm:min-w-0"
       >
         <div
           :class="
             cn(
               'max-w-full min-w-0 overflow-hidden transition-all duration-300',
-              isExpanded ? 'max-h-100 w-full' : 'max-h-0 w-0'
+              isExpanded
+                ? 'max-h-100 w-full sm:w-[max(400px,40vw)]'
+                : 'max-h-0 w-0'
             )
           "
         >

src/components/input/MultiSelect.stories.ts

@@ -1,33 +1,73 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
 import type { SelectOption } from './types'
 
-const meta: Meta<typeof MultiSelect> = {
-  title: 'Components/Select/MultiSelect',
+// Combine our component props with PrimeVue MultiSelect props
+// Since we use v-bind="$attrs", all PrimeVue props are available
+interface ExtendedProps extends Partial<MultiSelectProps> {
+  // Our custom props
+  label?: string
+  showSearchBox?: boolean
+  showSelectedCount?: boolean
+  showClearButton?: boolean
+  searchPlaceholder?: string
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
+  // Override modelValue type to match our Option type
+  modelValue?: SelectOption[]
+}
+
+const meta: Meta<ExtendedProps> = {
+  title: 'Components/Input/MultiSelect',
   component: MultiSelect,
   tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  decorators: [
-    () => ({
-      template: '<div class="pt-4"><story /></div>'
-    })
-  ],
   argTypes: {
-    label: { control: 'text' },
-    size: {
-      control: { type: 'select' },
-      options: ['lg', 'md']
+    label: {
+      control: 'text'
     },
-    showSearchBox: { control: 'boolean' },
-    showSelectedCount: { control: 'boolean' },
-    showClearButton: { control: 'boolean' },
-    searchPlaceholder: { control: 'text' }
+    options: {
+      control: 'object'
+    },
+    showSearchBox: {
+      control: 'boolean',
+      description: 'Toggle searchBar visibility'
+    },
+    showSelectedCount: {
+      control: 'boolean',
+      description: 'Toggle selected count visibility'
+    },
+    showClearButton: {
+      control: 'boolean',
+      description: 'Toggle clear button visibility'
+    },
+    searchPlaceholder: {
+      control: 'text'
+    },
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown list'
+    },
+    popoverMinWidth: {
+      control: 'text',
+      description: 'Minimum width of the popover'
+    },
+    popoverMaxWidth: {
+      control: 'text',
+      description: 'Maximum width of the popover'
+    }
   },
   args: {
-    label: 'Category',
-    size: 'lg',
+    label: 'Select',
+    options: [
+      { name: 'Vue', value: 'vue' },
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Svelte', value: 'svelte' }
+    ],
     showSearchBox: false,
     showSelectedCount: false,
     showClearButton: false,
@@ -38,125 +78,352 @@ const meta: Meta<typeof MultiSelect> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const sampleOptions: SelectOption[] = [
-  { name: 'Vue', value: 'vue' },
-  { name: 'React', value: 'react' },
-  { name: 'Angular', value: 'angular' },
-  { name: 'Svelte', value: 'svelte' }
-]
-
 export const Default: Story = {
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const selected = ref<SelectOption[]>([])
-      return { selected, sampleOptions, args }
+      const selected = ref([])
+      const options = args.options || [
+        { name: 'Vue', value: 'vue' },
+        { name: 'React', value: 'react' },
+        { name: 'Angular', value: 'angular' },
+        { name: 'Svelte', value: 'svelte' }
+      ]
+      return { selected, options, args }
     },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" :label="args.label" :size="args.size" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
+    template: `
+      <div>
+        <MultiSelect 
+          v-model="selected" 
+          :options="options"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
+        />
+        <div class="mt-4 p-3 bg-base-background rounded">
+          <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
+        </div>
+      </div>
+    `
   })
 }
 
-export const MediumSize: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([sampleOptions[0]])
-      return { selected, sampleOptions }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
 export const WithPreselectedValues: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([sampleOptions[0], sampleOptions[1]])
-      return { selected, sampleOptions }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const Disabled: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([sampleOptions[0]])
-      return { selected, sampleOptions }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const WithSearchBox: Story = {
-  args: { showSearchBox: true },
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const selected = ref<SelectOption[]>([])
-      return { selected, sampleOptions, args }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" />'
-  })
-}
-
-export const AllHeaderFeatures: Story = {
-  args: {
-    showSearchBox: true,
-    showSelectedCount: true,
-    showClearButton: true
-  },
-  render: (args) => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([])
-      return { selected, sampleOptions, args }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
-  })
-}
-
-export const AllStates: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const a = ref<SelectOption[]>([])
-      const b = ref<SelectOption[]>([sampleOptions[0]])
-      const c = ref<SelectOption[]>([sampleOptions[0]])
-      return { sampleOptions, a, b, c }
+      const options = args.options || [
+        { name: 'JavaScript', value: 'js' },
+        { name: 'TypeScript', value: 'ts' },
+        { name: 'Python', value: 'python' },
+        { name: 'Go', value: 'go' },
+        { name: 'Rust', value: 'rust' }
+      ]
+      const selected = ref([options[0], options[1]])
+      return { selected, options, args }
     },
     template: `
-      <div class="flex flex-col gap-6">
-        <div>
-          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
-          <div class="flex flex-col gap-3">
-            <MultiSelect v-model="a" :options="sampleOptions" label="Default" />
-            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" />
-            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" disabled />
-          </div>
+      <div>
+        <MultiSelect 
+          v-model="selected" 
+          :options="options"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
+        />
+        <div class="mt-4 p-3 bg-base-background rounded">
+          <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
         </div>
-        <div>
-          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
-          <div class="flex flex-col gap-3">
-            <MultiSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
-            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" size="md" />
-            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" size="md" disabled />
+      </div>
+    `
+  }),
+  args: {
+    label: 'Select Languages',
+    options: [
+      { name: 'JavaScript', value: 'js' },
+      { name: 'TypeScript', value: 'ts' },
+      { name: 'Python', value: 'python' },
+      { name: 'Go', value: 'go' },
+      { name: 'Rust', value: 'rust' }
+    ],
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
+}
+
+export const MultipleSelectors: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const frameworkOptions = ref([
+        { name: 'Vue', value: 'vue' },
+        { name: 'React', value: 'react' },
+        { name: 'Angular', value: 'angular' },
+        { name: 'Svelte', value: 'svelte' }
+      ])
+
+      const projectOptions = ref([
+        { name: 'Project A', value: 'proj-a' },
+        { name: 'Project B', value: 'proj-b' },
+        { name: 'Project C', value: 'proj-c' },
+        { name: 'Project D', value: 'proj-d' }
+      ])
+
+      const tagOptions = ref([
+        { name: 'Frontend', value: 'frontend' },
+        { name: 'Backend', value: 'backend' },
+        { name: 'Database', value: 'database' },
+        { name: 'DevOps', value: 'devops' },
+        { name: 'Testing', value: 'testing' }
+      ])
+
+      const selectedFrameworks = ref([])
+      const selectedProjects = ref([])
+      const selectedTags = ref([])
+
+      return {
+        frameworkOptions,
+        projectOptions,
+        tagOptions,
+        selectedFrameworks,
+        selectedProjects,
+        selectedTags,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <MultiSelect 
+            v-model="selectedFrameworks" 
+            :options="frameworkOptions"
+            label="Select Frameworks"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
+          />
+          <MultiSelect 
+            v-model="selectedProjects" 
+            :options="projectOptions"
+            label="Select Projects"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
+          />
+          <MultiSelect 
+            v-model="selectedTags" 
+            :options="tagOptions"
+            label="Select Tags"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
+          />
+        </div>
+        
+        <div class="p-4 bg-base-background rounded">
+          <h4 class="font-medium mt-0">Current Selection:</h4>
+          <div class="flex flex-col text-sm">
+            <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
+            <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
+            <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>
           </div>
         </div>
       </div>
     `
   }),
-  parameters: {
-    controls: { disable: true }
+  args: {
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
+}
+
+export const WithSearchBox: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true
+  }
+}
+
+export const WithSelectedCount: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSelectedCount: true
+  }
+}
+
+export const WithClearButton: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showClearButton: true
+  }
+}
+
+export const AllHeaderFeatures: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  }
+}
+
+export const CustomSearchPlaceholder: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showSearchBox: true,
+    searchPlaceholder: 'Filter packages...'
+  }
+}
+
+export const CustomMaxHeight: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+        name: `Option ${i + 1}`,
+        value: `option${i + 1}`
+      }))
+      return { selected1, selected2, selected3, manyOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
+          <MultiSelect 
+            v-model="selected1" 
+            :options="manyOptions" 
+            label="Small Dropdown" 
+            list-max-height="10rem"
+            show-selected-count 
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
+          <MultiSelect 
+            v-model="selected2" 
+            :options="manyOptions" 
+            label="Default Dropdown"
+            list-max-height="28rem"
+            show-selected-count 
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
+          <MultiSelect 
+            v-model="selected3" 
+            :options="manyOptions" 
+            label="Large Dropdown" 
+            list-max-height="32rem"
+            show-selected-count 
+          />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMinWidth: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const options = [
+        { name: 'A', value: 'a' },
+        { name: 'B', value: 'b' },
+        { name: 'Very Long Option Name Here', value: 'long' }
+      ]
+      return { selected1, selected2, selected3, options }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <MultiSelect v-model="selected1" :options="options" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 18rem</h3>
+          <MultiSelect v-model="selected2" :options="options" label="Min 18rem" popover-min-width="18rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 28rem</h3>
+          <MultiSelect v-model="selected3" :options="options" label="Min 28rem" popover-min-width="28rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxWidth: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const longOptions = [
+        { name: 'Short', value: 'short' },
+        {
+          name: 'This is a very long option name that would normally expand the dropdown',
+          value: 'long1'
+        },
+        {
+          name: 'Another extremely long option that demonstrates max-width constraint',
+          value: 'long2'
+        }
+      ]
+      return { selected1, selected2, selected3, longOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <MultiSelect v-model="selected1" :options="longOptions" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Max Width 18rem</h3>
+          <MultiSelect v-model="selected2" :options="longOptions" label="Max 18rem" popover-max-width="18rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min 12rem Max 22rem</h3>
+          <MultiSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="12rem" popover-max-width="22rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
   }
 }

src/components/input/MultiSelect.vue

@@ -16,23 +16,20 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'relative inline-flex cursor-pointer select-none',
-          size === 'md' ? 'h-8' : 'h-10',
+          'relative inline-flex h-10 cursor-pointer select-none',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
-          'focus-within:border-base-foreground',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
+          selectedCount > 0
+            ? 'border-node-component-border'
+            : 'border-transparent',
+          'focus-within:border-node-component-border',
+          { 'cursor-default opacity-60': props.disabled }
         )
       }),
       labelContainer: {
-        class: cn(
-          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
+        class:
+          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
       },
       label: {
         class: 'p-0'
@@ -96,12 +93,13 @@
       #header
     >
       <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
+        <SearchBox
           v-if="showSearchBox"
           v-model="searchQuery"
           :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
+          :show-order="true"
+          :show-border="true"
+          :place-holder="searchPlaceholder"
         />
         <div
           v-if="showSelectedCount || showClearButton"
@@ -132,12 +130,12 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+      <span class="text-sm">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
       >
         {{ selectedCount }}
       </span>
@@ -184,7 +182,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
@@ -200,8 +198,6 @@ defineOptions({
 interface Props {
   /** Input label shown on the trigger button */
   label?: string
-  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
-  size?: 'lg' | 'md'
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -221,7 +217,6 @@ interface Props {
 }
 const {
   label,
-  size = 'lg',
   showSearchBox = false,
   showSelectedCount = false,
   showClearButton = false,

src/components/input/SelectDropdown.stories.ts

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import MultiSelect from './MultiSelect.vue'
-import SingleSelect from './SingleSelect.vue'
-import type { SelectOption } from './types'
-
-const meta: Meta = {
-  title: 'Components/Select/SelectDropdown',
-  tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  decorators: [
-    () => ({
-      template: '<div class="pt-4"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const modelOptions: SelectOption[] = [
-  { name: 'ACE-Step', value: 'ace-step' },
-  { name: 'Anima', value: 'anima' },
-  { name: 'BRIA', value: 'bria' },
-  { name: 'ByteDance', value: 'bytedance' },
-  { name: 'Capybara', value: 'capybara' },
-  { name: 'Chatter Box', value: 'chatter-box' },
-  { name: 'Chroma', value: 'chroma' },
-  { name: 'ChronoEdit', value: 'chronoedit' },
-  { name: 'DWPose', value: 'dwpose' },
-  { name: 'Depth Anything v2', value: 'depth-anything-v2' },
-  { name: 'ElevenLabs', value: 'elevenlabs' },
-  { name: 'Flux', value: 'flux' },
-  { name: 'HunyuanVideo', value: 'hunyuan-video' },
-  { name: 'Stable Diffusion', value: 'stable-diffusion' },
-  { name: 'SDXL', value: 'sdxl' }
-]
-
-const useCaseOptions: SelectOption[] = [
-  { name: 'Text to Image', value: 'text-to-image' },
-  { name: 'Image to Image', value: 'image-to-image' },
-  { name: 'Inpainting', value: 'inpainting' },
-  { name: 'Upscaling', value: 'upscaling' },
-  { name: 'Video Generation', value: 'video-generation' },
-  { name: 'Audio Generation', value: 'audio-generation' },
-  { name: '3D Generation', value: '3d-generation' }
-]
-
-const sortOptions: SelectOption[] = [
-  { name: 'Default', value: 'default' },
-  { name: 'Recommended', value: 'recommended' },
-  { name: 'Popular', value: 'popular' },
-  { name: 'Newest', value: 'newest' },
-  { name: 'VRAM Usage (Low to High)', value: 'vram-low-to-high' },
-  { name: 'Model Size (Low to High)', value: 'model-size-low-to-high' },
-  { name: 'Alphabetical (A-Z)', value: 'alphabetical' }
-]
-
-export const ModelFilter: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([
-        modelOptions[1],
-        modelOptions[2],
-        modelOptions[3]
-      ])
-      return { selected, modelOptions }
-    },
-    template: `
-      <MultiSelect
-        v-model="selected"
-        :options="modelOptions"
-        :label="selected.length === 0 ? 'Models' : selected.length === 1 ? selected[0].name : selected.length + ' Models'"
-        show-search-box
-        show-selected-count
-        show-clear-button
-        class="w-[250px]"
-      >
-        <template #icon>
-          <i class="icon-[lucide--cpu]" />
-        </template>
-      </MultiSelect>
-    `
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const UseCaseFilter: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([])
-      return { selected, useCaseOptions }
-    },
-    template: `
-      <MultiSelect
-        v-model="selected"
-        :options="useCaseOptions"
-        :label="selected.length === 0 ? 'Use Case' : selected.length === 1 ? selected[0].name : selected.length + ' Use Cases'"
-        show-search-box
-        show-selected-count
-        show-clear-button
-      >
-        <template #icon>
-          <i class="icon-[lucide--target]" />
-        </template>
-      </MultiSelect>
-    `
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const SortDropdown: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | undefined>('default')
-      return { selected, sortOptions }
-    },
-    template: `
-      <SingleSelect
-        v-model="selected"
-        :options="sortOptions"
-        label="Sort by"
-        class="w-62.5"
-      >
-        <template #icon>
-          <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
-        </template>
-      </SingleSelect>
-    `
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const TemplateFilterBar: Story = {
-  render: () => ({
-    components: { MultiSelect, SingleSelect },
-    setup() {
-      const selectedModels = ref<SelectOption[]>([
-        modelOptions[1],
-        modelOptions[2],
-        modelOptions[3]
-      ])
-      const selectedUseCases = ref<SelectOption[]>([])
-      const sortBy = ref<string | undefined>('default')
-
-      const modelLabel = () => {
-        if (selectedModels.value.length === 0) return 'Models'
-        if (selectedModels.value.length === 1)
-          return selectedModels.value[0].name
-        return selectedModels.value.length + ' Models'
-      }
-      const useCaseLabel = () => {
-        if (selectedUseCases.value.length === 0) return 'Use Case'
-        if (selectedUseCases.value.length === 1)
-          return selectedUseCases.value[0].name
-        return selectedUseCases.value.length + ' Use Cases'
-      }
-
-      return {
-        selectedModels,
-        selectedUseCases,
-        sortBy,
-        modelOptions,
-        useCaseOptions,
-        sortOptions,
-        modelLabel,
-        useCaseLabel
-      }
-    },
-    template: `
-      <div class="flex flex-wrap items-center justify-between gap-2" style="min-width: 700px;">
-        <div class="flex flex-wrap gap-2">
-          <MultiSelect
-            v-model="selectedModels"
-            :options="modelOptions"
-            :label="modelLabel()"
-            show-search-box
-            show-selected-count
-            show-clear-button
-            class="w-[250px]"
-          >
-            <template #icon>
-              <i class="icon-[lucide--cpu]" />
-            </template>
-          </MultiSelect>
-
-          <MultiSelect
-            v-model="selectedUseCases"
-            :options="useCaseOptions"
-            :label="useCaseLabel()"
-            show-search-box
-            show-selected-count
-            show-clear-button
-          >
-            <template #icon>
-              <i class="icon-[lucide--target]" />
-            </template>
-          </MultiSelect>
-        </div>
-
-        <SingleSelect
-          v-model="sortBy"
-          :options="sortOptions"
-          label="Sort by"
-          class="w-62.5"
-        >
-          <template #icon>
-            <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
-          </template>
-        </SingleSelect>
-      </div>
-    `
-  }),
-  parameters: { controls: { disable: true } }
-}

src/components/input/SingleSelect.stories.ts

@@ -3,31 +3,29 @@ import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
 
+// SingleSelect already includes options prop, so no need to extend
 const meta: Meta<typeof SingleSelect> = {
-  title: 'Components/Select/SingleSelect',
+  title: 'Components/Input/SingleSelect',
   component: SingleSelect,
   tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  decorators: [
-    () => ({
-      template: '<div class="pt-4"><story /></div>'
-    })
-  ],
   argTypes: {
     label: { control: 'text' },
     options: { control: 'object' },
-    size: {
-      control: { type: 'select' },
-      options: ['lg', 'md']
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown list'
     },
-    invalid: { control: 'boolean' },
-    loading: { control: 'boolean' }
+    popoverMinWidth: {
+      control: 'text',
+      description: 'Minimum width of the popover'
+    },
+    popoverMaxWidth: {
+      control: 'text',
+      description: 'Maximum width of the popover'
+    }
   },
   args: {
-    label: 'Category',
-    size: 'lg',
-    invalid: false,
-    loading: false,
+    label: 'Sorting Type',
     options: [
       { name: 'Popular', value: 'popular' },
       { name: 'Newest', value: 'newest' },
@@ -39,7 +37,7 @@ const meta: Meta<typeof SingleSelect> = {
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+export type Story = StoryObj<typeof meta>
 
 const sampleOptions = [
   { name: 'Popular', value: 'popular' },
@@ -54,118 +52,205 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      return { selected, args }
+      const options = args.options || sampleOptions
+      return { selected, options, args }
     },
-    template:
-      '<SingleSelect v-model="selected" :options="args.options" :label="args.label" :size="args.size" :invalid="args.invalid" :loading="args.loading" />'
+    template: `
+      <div>
+        <SingleSelect v-model="selected" :options="options" :label="args.label" />
+        <div class="mt-4 p-3 bg-base-background rounded">
+          <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
+        </div>
+      </div>
+    `
   })
 }
 
-export const MediumSize: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
-    },
-    template:
-      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
 export const WithIcon: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
+      const options = sampleOptions
+      return { selected, options }
     },
     template: `
-      <SingleSelect v-model="selected" :options="sampleOptions" label="Sorting Type">
-        <template #icon>
-          <i class="icon-[lucide--arrow-up-down] size-3.5" />
-        </template>
-      </SingleSelect>
-    `
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const Disabled: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
-    },
-    template:
-      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const Invalid: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
-    },
-    template:
-      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" invalid />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const Loading: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
-    },
-    template:
-      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" loading />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const AllStates: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const a = ref<string | null>('popular')
-      const b = ref<string | null>('popular')
-      const c = ref<string | null>('popular')
-      const d = ref<string | null>('popular')
-      const e = ref<string | null>('popular')
-      return { sampleOptions, a, b, c, d, e }
-    },
-    template: `
-      <div class="flex flex-col gap-6">
-        <div>
-          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
-          <div class="flex flex-col gap-3">
-            <SingleSelect v-model="a" :options="sampleOptions" label="Default" />
-            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" disabled />
-            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" invalid />
-            <SingleSelect v-model="d" :options="sampleOptions" label="Loading" loading />
-          </div>
+      <div>
+        <SingleSelect v-model="selected" :options="options" label="Sorting Type">
+          <template #icon>
+            <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
+          </template>
+        </SingleSelect>
+        <div class="mt-4 p-3 bg-base-background rounded">
+          <p class="text-sm">Selected: {{ selected }}</p>
         </div>
-        <div>
-          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
-          <div class="flex flex-col gap-3">
-            <SingleSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
-            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" size="md" disabled />
-            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" size="md" invalid />
-            <SingleSelect v-model="e" :options="sampleOptions" label="Loading" size="md" loading />
-          </div>
+      </div>
+    `
+  })
+}
+
+export const Preselected: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('newest')
+      const options = sampleOptions
+      return { selected, options }
+    },
+    template: `
+      <SingleSelect v-model="selected" :options="options" label="Sorting Type" />
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const options = sampleOptions
+      const a = ref<string | null>(null)
+      const b = ref<string | null>('popular')
+      const c = ref<string | null>('az')
+      return { options, a, b, c }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="a" :options="options" label="No Icon" />
+        </div>
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="b" :options="options" label="With Icon">
+            <template #icon>
+              <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
+            </template>
+          </SingleSelect>
+        </div>
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="c" :options="options" label="Preselected (A→Z)" />
         </div>
       </div>
     `
   }),
   parameters: {
-    controls: { disable: true }
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxHeight: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>(null)
+      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+        name: `Option ${i + 1}`,
+        value: `option${i + 1}`
+      }))
+      return { selected, manyOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Small Dropdown" list-max-height="10rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Default Dropdown" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Large Dropdown" list-max-height="32rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMinWidth: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected1 = ref<string | null>(null)
+      const selected2 = ref<string | null>(null)
+      const selected3 = ref<string | null>(null)
+      const options = [
+        { name: 'A', value: 'a' },
+        { name: 'B', value: 'b' },
+        { name: 'Very Long Option Name Here', value: 'long' }
+      ]
+      return { selected1, selected2, selected3, options }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <SingleSelect v-model="selected1" :options="options" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 15rem</h3>
+          <SingleSelect v-model="selected2" :options="options" label="Min 15rem" popover-min-width="15rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 25rem</h3>
+          <SingleSelect v-model="selected3" :options="options" label="Min 25rem" popover-min-width="25rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxWidth: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected1 = ref<string | null>(null)
+      const selected2 = ref<string | null>(null)
+      const selected3 = ref<string | null>(null)
+      const longOptions = [
+        { name: 'Short', value: 'short' },
+        {
+          name: 'This is a very long option name that would normally expand the dropdown',
+          value: 'long1'
+        },
+        {
+          name: 'Another extremely long option that demonstrates max-width constraint',
+          value: 'long2'
+        }
+      ]
+      return { selected1, selected2, selected3, longOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <SingleSelect v-model="selected1" :options="longOptions" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Max Width 15rem</h3>
+          <SingleSelect v-model="selected2" :options="longOptions" label="Max 15rem" popover-max-width="15rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min 10rem Max 20rem</h3>
+          <SingleSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="10rem" popover-max-width="20rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
   }
 }

src/components/input/SingleSelect.vue

@@ -15,26 +15,23 @@
     unstyled
     :pt="{
       root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
-          'relative inline-flex cursor-pointer items-center select-none',
-          size === 'md' ? 'h-8' : 'h-10',
+        class: [
+          // container
+          'h-10 relative inline-flex cursor-pointer select-none items-center',
+          // trigger surface
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
+          'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
-          'border-[2.5px] border-solid',
-          invalid
-            ? 'border-destructive-background'
-            : 'border-transparent focus-within:border-node-component-border',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
-        )
+          'focus-within:border-node-component-border',
+          // disabled
+          { 'opacity-60 cursor-default': props.disabled }
+        ]
       }),
       label: {
-        class: cn(
-          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
+        class:
+          // Align with MultiSelect labelContainer spacing
+          'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
       },
       dropdown: {
         class:
@@ -80,8 +77,6 @@
       }
     }"
     :aria-label="label || t('g.singleSelectDropdown')"
-    :aria-busy="loading || undefined"
-    :aria-invalid="invalid || undefined"
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
@@ -89,16 +84,8 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div
-        :class="
-          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
-        "
-      >
-        <i
-          v-if="loading"
-          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
-        />
-        <slot v-else name="icon" />
+      <div class="flex items-center gap-2 text-sm">
+        <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
           class="text-base-foreground"
@@ -111,12 +98,9 @@
       </div>
     </template>
 
-    <!-- Trigger caret (hidden when loading) -->
+    <!-- Trigger caret -->
     <template #dropdownicon>
-      <i
-        v-if="!loading"
-        class="icon-[lucide--chevron-down] text-muted-foreground"
-      />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Option row -->
@@ -149,9 +133,6 @@ defineOptions({
 const {
   label,
   options,
-  size = 'lg',
-  invalid = false,
-  loading = false,
   listMaxHeight = '28rem',
   popoverMinWidth,
   popoverMaxWidth
@@ -163,12 +144,6 @@ const {
    * in getLabel() to map values to their display names.
    */
   options?: SelectOption[]
-  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
-  size?: 'lg' | 'md'
-  /** Show invalid (destructive) border */
-  invalid?: boolean
-  /** Show loading spinner instead of chevron */
-  loading?: boolean
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */

src/components/loader/LogoCFillLoader.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import LogoCFillLoader from './LogoCFillLoader.vue'
+
+const meta: Meta<typeof LogoCFillLoader> = {
+  title: 'Components/Loader/LogoCFillLoader',
+  component: LogoCFillLoader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'dark' }
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl']
+    },
+    color: {
+      control: 'select',
+      options: ['yellow', 'blue', 'white', 'black']
+    },
+    bordered: {
+      control: 'boolean'
+    },
+    disableAnimation: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+  args: { size: 'sm' }
+}
+
+export const Large: Story = {
+  args: { size: 'lg' }
+}
+
+export const ExtraLarge: Story = {
+  args: { size: 'xl' }
+}
+
+export const NoBorder: Story = {
+  args: { bordered: false }
+}
+
+export const Static: Story = {
+  args: { disableAnimation: true }
+}
+
+export const BrandColors: Story = {
+  render: () => ({
+    components: { LogoCFillLoader },
+    template: `
+      <div class="flex items-end gap-12">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">Yellow</span>
+          <LogoCFillLoader size="lg" color="yellow" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">Blue</span>
+          <LogoCFillLoader size="lg" color="blue" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">White</span>
+          <LogoCFillLoader size="lg" color="white" />
+        </div>
+        <div class="p-4 bg-white rounded" style="background: white">
+          <div class="flex flex-col items-center gap-2">
+            <span class="text-xs text-neutral-600">Black</span>
+            <LogoCFillLoader size="lg" color="black" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { LogoCFillLoader },
+    template: `
+      <div class="flex items-end gap-8">
+        <LogoCFillLoader size="sm" color="yellow" />
+        <LogoCFillLoader size="md" color="yellow" />
+        <LogoCFillLoader size="lg" color="yellow" />
+        <LogoCFillLoader size="xl" color="yellow" />
+      </div>
+    `
+  })
+}

src/components/loader/LogoCFillLoader.vue

@@ -0,0 +1,100 @@
+<template>
+  <span role="status" :class="cn('inline-flex', colorClass)">
+    <svg
+      :width="Math.round(heightMap[size] * (VB_W / VB_H))"
+      :height="heightMap[size]"
+      :viewBox="`0 0 ${VB_W} ${VB_H}`"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <mask :id="maskId">
+          <path :d="C_PATH" fill="white" />
+        </mask>
+      </defs>
+      <path
+        v-if="bordered"
+        :d="C_PATH"
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        opacity="0.4"
+      />
+      <g :mask="`url(#${maskId})`">
+        <rect
+          :class="disableAnimation ? undefined : 'c-fill-rect'"
+          :x="-BLEED"
+          :y="-BLEED"
+          :width="VB_W + BLEED * 2"
+          :height="VB_H + BLEED * 2"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+    <span class="sr-only">{{ t('g.loading') }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useId, computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+
+const {
+  size = 'md',
+  color = 'black',
+  bordered = true,
+  disableAnimation = false
+} = defineProps<{
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'yellow' | 'blue' | 'white' | 'black'
+  bordered?: boolean
+  disableAnimation?: boolean
+}>()
+
+const { t } = useI18n()
+const maskId = `c-mask-${useId()}`
+
+const VB_W = 185
+const VB_H = 201
+const BLEED = 1
+
+// Larger than LogoComfyWaveLoader because the C logo is near-square (185×201)
+// while the COMFY wordmark is wide (879×284), so larger heights are needed
+// for visually comparable perceived size.
+const heightMap = { sm: 48, md: 80, lg: 120, xl: 200 } as const
+const colorMap = {
+  yellow: 'text-brand-yellow',
+  blue: 'text-brand-blue',
+  white: 'text-white',
+  black: 'text-black'
+} as const
+
+const colorClass = computed(() => colorMap[color])
+
+const C_PATH =
+  'M42.1217 200.812C37.367 200.812 33.5304 199.045 31.0285 195.703C28.4569 192.27 27.7864 187.477 29.1882 182.557L34.8172 162.791C35.2661 161.217 34.9537 159.523 33.9747 158.214C32.9958 156.908 31.464 156.139 29.8371 156.139L13.6525 156.139C8.89521 156.139 5.05862 154.374 2.55797 151.032C-0.0136533 147.597-0.684085 142.804 0.71869 137.883L20.0565 70.289L22.1916 62.8625C25.0617 52.7847 35.5288 44.5943 45.528 44.5943L64.8938 44.5943C67.2048 44.5943 69.2376 43.0535 69.8738 40.8175L76.2782 18.3344C79.1454 8.26681 89.6127 0.0763962 99.6117 0.0763945L141.029 0.00258328L171.349-2.99253e-05C176.104-3.0756e-05 179.941 1.765 182.442 5.10626C185.013 8.53932 185.684 13.3324 184.282 18.2528L175.612 48.6947C172.746 58.7597 162.279 66.9475 152.28 66.9475L110.771 67.0265L91.4113 67.0265C89.1029 67.0265 87.0727 68.5647 86.4326 70.7983L70.2909 127.179C69.8394 128.756 70.1518 130.454 71.1334 131.763C72.1123 133.07 73.6441 133.839 75.2697 133.839C75.2736 133.839 102.699 133.785 102.699 133.785L132.929 133.785C137.685 133.785 141.522 135.55 144.023 138.892C146.594 142.327 147.265 147.12 145.862 152.041L137.192 182.478C134.326 192.545 123.859 200.733 113.86 200.733L72.3517 200.812L42.1217 200.812Z'
+</script>
+
+<style scoped>
+.c-fill-rect {
+  animation: c-fill-up 2.5s cubic-bezier(0.25, 0, 0.3, 1) forwards;
+  will-change: transform;
+}
+
+@keyframes c-fill-up {
+  0% {
+    transform: translateY(calc(v-bind(VB_H) * 1px + v-bind(BLEED) * 1px));
+  }
+  100% {
+    transform: translateY(calc(v-bind(BLEED) * -1px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-fill-rect {
+    animation: none;
+  }
+}
+</style>

src/components/queue/job/JobFilterActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-w-0 items-center gap-2">
-    <SearchInput
+    <SearchBox
       v-if="showSearch"
       :model-value="searchQuery"
       class="min-w-0 flex-1"
@@ -116,7 +116,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,5 +1,5 @@
-import { computed, reactive, ref, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }
 
 export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
+  searchQuery: Ref<string>,
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = toValue(searchQuery).trim()
+    const query = searchQuery.value.trim()
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -18,8 +18,6 @@
       class="flex-1"
       :items="assetItems"
       :grid-style="listGridStyle"
-      :max-columns="1"
-      :default-item-height="48"
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -170,9 +170,9 @@
       </div>
     </template>
   </SidebarTabTemplate>
-  <ResultGallery
+  <MediaViewer
     v-model:active-index="galleryActiveIndex"
-    :all-gallery-items="galleryItems"
+    :items="previewableVisibleAssets"
   />
   <MediaAssetContextMenu
     v-if="contextMenuAsset"
@@ -221,12 +221,12 @@ import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridVi
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
+import MediaViewer from '@/platform/assets/components/MediaViewer.vue'
 import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
@@ -240,7 +240,6 @@ import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
-import { ResultItemImpl } from '@/stores/queueStore'
 import {
   formatDuration,
   getMediaTypeFromFilename,
@@ -454,28 +453,6 @@ watch(galleryActiveIndex, (index) => {
   }
 })
 
-const galleryItems = computed(() => {
-  return previewableVisibleAssets.value.map((asset) => {
-    const mediaType = getMediaTypeFromFilename(asset.name)
-    const resultItem = new ResultItemImpl({
-      filename: asset.name,
-      subfolder: '',
-      type: 'output',
-      nodeId: '0',
-      mediaType: mediaType === 'image' ? 'images' : mediaType
-    })
-
-    Object.defineProperty(resultItem, 'url', {
-      get() {
-        return asset.preview_url || ''
-      },
-      configurable: true
-    })
-
-    return resultItem
-  })
-})
-
 const refreshAssets = async () => {
   await currentAssets.value.fetchMediaList()
   if (error.value) {

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           class="workflows-search-box"
@@ -146,7 +146,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -22,7 +22,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           :placeholder="
@@ -56,7 +56,7 @@
 import { Divider } from 'primevue'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -86,40 +86,18 @@
       </template>
       <template #header>
         <div class="px-2 2xl:px-4">
-          <div class="flex items-center gap-1">
-            <SearchInput
-              ref="searchBoxRef"
-              v-model="searchQuery"
-              data-testid="node-library-search"
-              class="node-lib-search-box"
-              :placeholder="
-                $t('g.searchPlaceholder', { subject: $t('g.nodes') })
-              "
-              @search="handleSearch"
-            />
-            <Button
-              variant="textonly"
-              size="icon"
-              class="filter-button shrink-0"
-              :aria-label="$t('g.filter')"
-              @click="(e: Event) => searchFilter?.toggle(e)"
-            >
-              <i class="pi pi-filter" />
-            </Button>
-          </div>
-          <div
-            v-if="filters?.length"
-            class="search-filters flex flex-wrap gap-2 pt-2"
-          >
-            <SearchFilterChip
-              v-for="filter in filters"
-              :key="filter.id"
-              :text="filter.text"
-              :badge="filter.badge"
-              :badge-class="filter.badgeClass"
-              @remove="onRemoveFilter(filter)"
-            />
-          </div>
+          <SearchBox
+            ref="searchBoxRef"
+            v-model:model-value="searchQuery"
+            data-testid="node-library-search"
+            class="node-lib-search-box"
+            :placeholder="$t('g.searchPlaceholder', { subject: $t('g.nodes') })"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
+          />
 
           <Popover ref="searchFilter" class="ml-[-13px]">
             <NodeSearchFilter @add-filter="onAddFilter" />
@@ -177,9 +155,8 @@ import {
 } from 'vue'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchFilterChip from '@/components/common/SearchFilterChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts

@@ -69,7 +69,7 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
   }
 }))
 
-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
+vi.mock('@/components/common/SearchBoxV2.vue', () => ({
   default: {
     name: 'SearchBox',
     template: '<input data-testid="search-box" />',

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -3,7 +3,7 @@
     <template #header>
       <TabsRoot v-model="selectedTab" class="flex flex-col">
         <div class="flex items-center justify-between gap-2 px-2 pb-2 2xl:px-4">
-          <SearchInput
+          <SearchBox
             ref="searchBoxRef"
             v-model="searchQuery"
             :placeholder="$t('g.search') + '...'"
@@ -180,7 +180,7 @@ import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBoxV2.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
@@ -253,7 +253,7 @@ const filterOptions = ref<Record<NodeCategoryId, boolean>>({
 
 const { t } = useI18n()
 
-const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
   essentials: [],

src/components/topbar/CurrentUserButton.test.ts

@@ -9,18 +9,6 @@ import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserButton from './CurrentUserButton.vue'
 
-const mockFeatureFlags = vi.hoisted(() => ({
-  teamWorkspacesEnabled: false
-}))
-
-const mockTeamWorkspaceStore = vi.hoisted(() => ({
-  workspaceName: { value: '' },
-  initState: { value: 'idle' },
-  isInPersonalWorkspace: { value: false }
-}))
-
-const mockIsCloud = vi.hoisted(() => ({ value: false }))
-
 // Mock all firebase modules
 vi.mock('firebase/app', () => ({
   initializeApp: vi.fn(),
@@ -44,19 +32,16 @@ vi.mock('pinia', () => ({
 // Mock the useFeatureFlags composable
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => ({
-    flags: mockFeatureFlags
+    flags: { teamWorkspacesEnabled: false }
   }))
 }))
 
 // Mock the useTeamWorkspaceStore
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: vi.fn(() => mockTeamWorkspaceStore)
-}))
-
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return mockIsCloud.value
-  }
+  useTeamWorkspaceStore: vi.fn(() => ({
+    workspaceName: { value: '' },
+    initState: { value: 'idle' }
+  }))
 }))
 
 // Mock the useCurrentUser composable
@@ -79,16 +64,6 @@ vi.mock('@/components/common/UserAvatar.vue', () => ({
   }
 }))
 
-// Mock the WorkspaceProfilePic component
-vi.mock('@/platform/workspace/components/WorkspaceProfilePic.vue', () => ({
-  default: {
-    name: 'WorkspaceProfilePicMock',
-    render() {
-      return h('div', 'WorkspaceProfilePic')
-    }
-  }
-}))
-
 // Mock the CurrentUserPopoverLegacy component
 vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
   default: {
@@ -103,15 +78,9 @@ vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
 describe('CurrentUserButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockFeatureFlags.teamWorkspacesEnabled = false
-    mockTeamWorkspaceStore.workspaceName.value = ''
-    mockTeamWorkspaceStore.initState.value = 'idle'
-    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
-    mockIsCloud.value = false
   })
 
-  const mountComponent = (options?: { stubButton?: boolean }): VueWrapper => {
-    const { stubButton = true } = options ?? {}
+  const mountComponent = (): VueWrapper => {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -130,7 +99,7 @@ describe('CurrentUserButton', () => {
               hide: vi.fn()
             }
           },
-          ...(stubButton ? { Button: true } : {})
+          Button: true
         }
       }
     })
@@ -168,27 +137,4 @@ describe('CurrentUserButton', () => {
     // Verify that popover.hide was called
     expect(popoverHideSpy).toHaveBeenCalled()
   })
-
-  it('shows UserAvatar in personal workspace', () => {
-    mockIsCloud.value = true
-    mockFeatureFlags.teamWorkspacesEnabled = true
-    mockTeamWorkspaceStore.initState.value = 'ready'
-    mockTeamWorkspaceStore.isInPersonalWorkspace.value = true
-
-    const wrapper = mountComponent({ stubButton: false })
-    expect(wrapper.html()).toContain('Avatar')
-    expect(wrapper.html()).not.toContain('WorkspaceProfilePic')
-  })
-
-  it('shows WorkspaceProfilePic in team workspace', () => {
-    mockIsCloud.value = true
-    mockFeatureFlags.teamWorkspacesEnabled = true
-    mockTeamWorkspaceStore.initState.value = 'ready'
-    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
-    mockTeamWorkspaceStore.workspaceName.value = 'My Team'
-
-    const wrapper = mountComponent({ stubButton: false })
-    expect(wrapper.html()).toContain('WorkspaceProfilePic')
-    expect(wrapper.html()).not.toContain('Avatar')
-  })
 })

src/components/topbar/CurrentUserButton.vue

@@ -98,21 +98,15 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const {
-  workspaceName: teamWorkspaceName,
-  initState,
-  isInPersonalWorkspace
-} = storeToRefs(useTeamWorkspaceStore())
+const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
+  useTeamWorkspaceStore()
+)
 
 const showWorkspaceSkeleton = computed(
   () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
 )
 const showWorkspaceIcon = computed(
-  () =>
-    isCloud &&
-    teamWorkspacesEnabled.value &&
-    initState.value === 'ready' &&
-    !isInPersonalWorkspace.value
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
 )
 
 const workspaceName = computed(() => {

src/components/ui/ZoomPane.vue

@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {
 
 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0 && e.button !== 1) return
+  if (e.button !== 0) return
 
   const zoomPaneEl = zoomPane.value
   if (!zoomPaneEl) return

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/components/ui/search-input/SearchAutocomplete.vue

@@ -1,213 +0,0 @@
-<template>
-  <ComboboxRoot
-    v-model="modelValue"
-    v-model:open="isOpen"
-    ignore-filter
-    :disabled
-    :class="className"
-  >
-    <ComboboxAnchor
-      :class="
-        cn(
-          searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50'
-        )
-      "
-      @click="focus"
-    >
-      <Button
-        v-if="modelValue"
-        :class="cn('absolute', sizeConfig.clearPos)"
-        variant="textonly"
-        size="icon-sm"
-        :aria-label="$t('g.clear')"
-        @click.stop="clearSearch"
-      >
-        <i :class="cn('icon-[lucide--x]', sizeConfig.icon)" />
-      </Button>
-      <i
-        v-else-if="loading"
-        :class="
-          cn(
-            'pointer-events-none absolute icon-[lucide--loader-circle] animate-spin',
-            sizeConfig.iconPos,
-            sizeConfig.icon
-          )
-        "
-      />
-      <i
-        v-else
-        :class="
-          cn(
-            'pointer-events-none absolute',
-            sizeConfig.iconPos,
-            sizeConfig.icon,
-            icon
-          )
-        "
-      />
-
-      <ComboboxInput
-        ref="inputRef"
-        v-model="modelValue"
-        :class="
-          cn(
-            'size-full border-none bg-transparent outline-none',
-            sizeConfig.inputPl,
-            sizeConfig.inputText
-          )
-        "
-        :placeholder="placeholderText"
-        :auto-focus="autofocus"
-        @compositionstart="isComposing = true"
-        @compositionend="isComposing = false"
-        @keydown.enter="onEnterKey"
-      />
-    </ComboboxAnchor>
-
-    <ComboboxContent
-      v-if="suggestions.length > 0"
-      position="popper"
-      :side-offset="4"
-      :class="
-        cn(
-          'z-50 max-h-60 w-(--reka-combobox-trigger-width) overflow-y-auto',
-          'rounded-lg border border-border-default bg-base-background p-1 shadow-lg'
-        )
-      "
-    >
-      <ComboboxItem
-        v-for="(suggestion, index) in suggestions"
-        :key="suggestionKey(suggestion, index)"
-        :value="suggestionValue(suggestion)"
-        :class="
-          cn(
-            'cursor-pointer rounded-sm px-3 py-2 text-sm outline-none',
-            'data-highlighted:bg-secondary-background-hover'
-          )
-        "
-        @select.prevent="onSelectSuggestion(suggestion)"
-      >
-        <slot name="suggestion" :suggestion>
-          {{ suggestionLabel(suggestion) }}
-        </slot>
-      </ComboboxItem>
-    </ComboboxContent>
-  </ComboboxRoot>
-</template>
-
-<script setup lang="ts" generic="T">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-import {
-  ComboboxAnchor,
-  ComboboxContent,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxRoot
-} from 'reka-ui'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import type { SearchInputVariants } from './searchInput.variants'
-import {
-  searchInputSizeConfig,
-  searchInputVariants
-} from './searchInput.variants'
-
-const { t } = useI18n()
-
-const {
-  placeholder,
-  icon = 'icon-[lucide--search]',
-  autofocus = false,
-  loading = false,
-  disabled = false,
-  size = 'md',
-  suggestions = [],
-  optionLabel,
-  optionKey,
-  class: className
-} = defineProps<{
-  placeholder?: string
-  icon?: string
-  autofocus?: boolean
-  loading?: boolean
-  disabled?: boolean
-  size?: SearchInputVariants['size']
-  suggestions?: T[]
-  optionLabel?: keyof T & string
-  optionKey?: keyof T & string
-  class?: HTMLAttributes['class']
-}>()
-
-const emit = defineEmits<{
-  select: [item: T]
-}>()
-
-const sizeConfig = computed(() => searchInputSizeConfig[size])
-
-const modelValue = defineModel<string>({ required: true })
-
-const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
-const isOpen = ref(false)
-const isComposing = ref(false)
-
-function focus() {
-  inputRef.value?.$el?.focus()
-}
-
-defineExpose({ focus })
-
-const placeholderText = computed(
-  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
-)
-
-function clearSearch() {
-  modelValue.value = ''
-  focus()
-}
-
-function getItemProperty(item: T, key: keyof T & string): string {
-  if (typeof item === 'object' && item !== null) {
-    return String(item[key])
-  }
-  return String(item)
-}
-
-function suggestionLabel(item: T): string {
-  if (optionLabel) return getItemProperty(item, optionLabel)
-  return String(item)
-}
-
-function suggestionKey(item: T, index: number): string {
-  if (optionKey) return getItemProperty(item, optionKey)
-  return `${suggestionLabel(item)}-${index}`
-}
-
-function suggestionValue(item: T): string {
-  return suggestionLabel(item)
-}
-
-function onSelectSuggestion(item: T) {
-  modelValue.value = suggestionLabel(item)
-  isOpen.value = false
-  emit('select', item)
-}
-
-function onEnterKey(e: KeyboardEvent) {
-  if (isComposing.value) {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-}
-
-watch(
-  () => suggestions,
-  (items) => {
-    isOpen.value = items.length > 0 && !!modelValue.value
-  }
-)
-</script>

src/components/ui/search-input/SearchInput.test.ts

@@ -1,202 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, watch } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SearchInput from './SearchInput.vue'
-
-vi.mock('@vueuse/core', () => ({
-  watchDebounced: vi.fn((source, cb, opts) => {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    return watch(source, (val: string) => {
-      if (timer) clearTimeout(timer)
-      timer = setTimeout(() => cb(val), opts?.debounce ?? 300)
-    })
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        clear: 'Clear',
-        searchPlaceholder: 'Search...'
-      }
-    }
-  }
-})
-
-describe('SearchInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.useRealTimers()
-  })
-
-  function mountComponent(props = {}) {
-    return mount(SearchInput, {
-      global: {
-        plugins: [i18n],
-        stubs: {
-          ComboboxRoot: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxAnchor: {
-            template: '<div @click="$emit(\'click\')"><slot /></div>',
-            emits: ['click']
-          },
-          ComboboxInput: {
-            template:
-              '<input :placeholder="placeholder" :value="modelValue" :autofocus="autoFocus || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ['placeholder', 'modelValue', 'autoFocus']
-          }
-        }
-      },
-      props: {
-        modelValue: '',
-        ...props
-      }
-    })
-  }
-
-  describe('debounced search', () => {
-    it('should debounce search input by 300ms', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('test')
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(299)
-      await nextTick()
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(1)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toEqual([['test']])
-    })
-
-    it('should reset debounce timer on each keystroke', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('t')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('te')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('tes')
-      await vi.advanceTimersByTimeAsync(200)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(100)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeTruthy()
-      expect(wrapper.emitted('search')?.[0]).toEqual(['tes'])
-    })
-
-    it('should only emit final value after rapid typing', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
-      for (const term of searchTerms) {
-        await input.setValue(term)
-        await vi.advanceTimersByTimeAsync(50)
-      }
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(350)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toHaveLength(1)
-      expect(wrapper.emitted('search')?.[0]).toEqual(['search'])
-    })
-  })
-
-  describe('model sync', () => {
-    it('should sync external model changes to internal state', async () => {
-      const wrapper = mountComponent({ modelValue: 'initial' })
-      const input = wrapper.find('input')
-
-      expect(input.element.value).toBe('initial')
-
-      await wrapper.setProps({ modelValue: 'external update' })
-      await nextTick()
-
-      expect(input.element.value).toBe('external update')
-    })
-  })
-
-  describe('placeholder', () => {
-    it('should use custom placeholder when provided', () => {
-      const wrapper = mountComponent({ placeholder: 'Custom search...' })
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Custom search...')
-    })
-
-    it('should use i18n placeholder when not provided', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Search...')
-    })
-  })
-
-  describe('autofocus', () => {
-    it('should pass autofocus prop to ComboboxInput', () => {
-      const wrapper = mountComponent({ autofocus: true })
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeDefined()
-    })
-
-    it('should not autofocus by default', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeUndefined()
-    })
-  })
-
-  describe('focus method', () => {
-    it('should expose focus method via ref', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.vm.focus).toBeDefined()
-    })
-  })
-
-  describe('clear button', () => {
-    it('shows search icon when value is empty', () => {
-      const wrapper = mountComponent({ modelValue: '' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(false)
-    })
-
-    it('shows clear button when value is not empty', () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(true)
-    })
-
-    it('clears value when clear button is clicked', async () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      const clearButton = wrapper.find('button')
-      await clearButton.trigger('click')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
-    })
-  })
-})

src/components/ui/search-input/SearchInput.vue

@@ -1,10 +1,11 @@
 <template>
-  <ComboboxRoot :open="false" ignore-filter :disabled :class="className">
+  <ComboboxRoot :ignore-filter="true" :open="false" :disabled="disabled">
     <ComboboxAnchor
       :class="
         cn(
           searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50'
+          disabled && 'pointer-events-none opacity-50',
+          className
         )
       "
       @click="focus"

src/components/ui/select/Select.stories.ts

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Select from './Select.vue'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectLabel from './SelectLabel.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Selected value'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, disables the select'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' }
+  }
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref(args.modelValue || '')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+          <SelectItem value="grape">Grape</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="mt-4 text-sm text-muted-foreground">
+        Selected: {{ value || 'None' }}
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const WithPlaceholder: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Choose an option..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('apple')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" disabled>
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  })
+}
+
+export const WithGroups: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectGroup,
+      SelectItem,
+      SelectLabel,
+      SelectSeparator,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select a model type" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Checkpoints</SelectLabel>
+            <SelectItem value="sd15">SD 1.5</SelectItem>
+            <SelectItem value="sdxl">SDXL</SelectItem>
+            <SelectItem value="flux">Flux</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>LoRAs</SelectLabel>
+            <SelectItem value="lora-style">Style LoRA</SelectItem>
+            <SelectItem value="lora-character">Character LoRA</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Other</SelectLabel>
+            <SelectItem value="vae">VAE</SelectItem>
+            <SelectItem value="embedding">Embedding</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <div class="mt-4 text-sm text-muted-foreground">
+        Selected: {{ value || 'None' }}
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const Scrollable: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      const items = Array.from({ length: 20 }, (_, i) => ({
+        value: `item-${i + 1}`,
+        label: `Option ${i + 1}`
+      }))
+      return { value, items, args }
+    },
+    template: `
+      <Select v-model="value" :disabled="args.disabled">
+        <SelectTrigger class="w-56">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem
+            v-for="item in items"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}
+
+export const CustomWidth: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue
+    },
+    setup() {
+      const value = ref('')
+      return { value, args }
+    },
+    template: `
+      <div class="space-y-4">
+        <Select v-model="value" :disabled="args.disabled">
+          <SelectTrigger class="w-32">
+            <SelectValue placeholder="Small" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="a">A</SelectItem>
+            <SelectItem value="b">B</SelectItem>
+            <SelectItem value="c">C</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select v-model="value" :disabled="args.disabled">
+          <SelectTrigger class="w-full">
+            <SelectValue placeholder="Full width select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    `
+  }),
+  args: {
+    disabled: false
+  }
+}

src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import { SelectGroup } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectGroupProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectGroup :class="cn('w-full', className)" v-bind="restProps">
+    <slot />
+  </SelectGroup>
+</template>

src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
+import { SelectLabel } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectLabelProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectLabel
+    v-bind="restProps"
+    :class="
+      cn(
+        'px-3 py-2 text-xs tracking-wide text-muted-foreground uppercase',
+        className
+      )
+    "
+  >
+    <slot />
+  </SelectLabel>
+</template>

src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import { SelectSeparator } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restProps } = defineProps<
+  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="restProps"
+    :class="cn('-mx-1 my-1 h-px bg-border-default', className)"
+  />
+</template>

src/components/ui/select/SelectTrigger.vue

@@ -5,41 +5,24 @@ import type { HTMLAttributes } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const {
-  class: className,
-  size = 'lg',
-  invalid = false,
-  ...restProps
-} = defineProps<
-  SelectTriggerProps & {
-    class?: HTMLAttributes['class']
-    /** Trigger size: 'lg' (40px) or 'md' (32px) */
-    size?: 'lg' | 'md'
-    /** Show invalid (destructive) border */
-    invalid?: boolean
-  }
+const { class: className, ...restProps } = defineProps<
+  SelectTriggerProps & { class?: HTMLAttributes['class'] }
 >()
 </script>
 
 <template>
   <SelectTrigger
     v-bind="restProps"
-    :aria-invalid="invalid || undefined"
     :class="
       cn(
-        'flex w-full cursor-pointer items-center justify-between select-none',
-        size === 'md' ? 'h-8 px-3 py-1 text-xs' : 'h-10 px-4 py-2 text-sm',
-        'rounded-lg',
+        'flex h-10 w-full cursor-pointer items-center justify-between select-none',
+        'rounded-lg px-4 py-2 text-sm',
         'bg-secondary-background text-base-foreground',
+        'border-[2.5px] border-solid border-transparent',
         'transition-all duration-200 ease-in-out',
-        'hover:bg-secondary-background-hover',
-        'border-[2.5px] border-solid',
-        invalid
-          ? 'border-destructive-background'
-          : 'border-transparent focus:border-node-component-border',
-        'focus:outline-none',
+        'focus:border-node-component-border focus:outline-none',
         'data-placeholder:text-muted-foreground',
-        'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-secondary-background',
+        'disabled:cursor-not-allowed disabled:opacity-60',
         '[&>span]:truncate',
         className
       )

src/components/ui/slider/Slider.stories.ts

@@ -1,77 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { computed, ref, toRefs } from 'vue'
-
-import Slider from './Slider.vue'
-
-interface StoryArgs extends ComponentPropsAndSlots<typeof Slider> {
-  disabled: boolean
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' }
-  },
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false
-  },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div class="w-72"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}

src/components/widget/SampleModelSelector.vue

@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchInput v-model="searchQuery" size="lg" class="max-w-96 flex-1" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -130,7 +130,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -8,7 +8,7 @@ import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
@@ -68,7 +68,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
   components: {
     BaseModalLayout,
     LeftSidePanel,
-    SearchInput,
+    SearchBox,
     MultiSelect,
     SingleSelect,
     Button,
@@ -186,7 +186,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"
@@ -309,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"

src/components/widget/nav/NavItem.vue

@@ -25,7 +25,7 @@
       :label="String(badge)"
       severity="contrast"
       variant="circle"
-      class="ml-auto min-h-5 min-w-5 px-1 text-base-background"
+      class="ml-auto"
     />
   </div>
 </template>

src/composables/graph/useGraphNodeManager.ts

@@ -324,8 +324,7 @@ function safeWidgetMapper(
             }
           : (extractWidgetDisplayOptions(effectiveWidget) ?? options),
         slotMetadata: slotInfo,
-        slotName: name !== widget.name ? widget.name : undefined,
-        tooltip: widget.tooltip
+        slotName: name !== widget.name ? widget.name : undefined
       }
     } catch (error) {
       return {

src/composables/useLoad3dViewer.ts

@@ -357,8 +357,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
   }
 
   /**
-   * Initialize viewer in standalone mode (for asset preview).
-   * Creates the Load3d instance once; subsequent calls reuse it.
+   * Initialize viewer in standalone mode (for asset preview)
    */
   const initializeStandaloneViewer = async (
     containerRef: HTMLElement,
@@ -367,11 +366,6 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     if (!containerRef) return
 
     try {
-      if (load3d) {
-        await loadStandaloneModel(modelUrl)
-        return
-      }
-
       isStandaloneMode.value = true
 
       load3d = new Load3d(containerRef, {
@@ -398,23 +392,6 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
       setupAnimationEvents()
     } catch (error) {
       console.error('Error initializing standalone 3D viewer:', error)
-      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
-    }
-  }
-
-  /**
-   * Load a new model into an existing standalone viewer,
-   * reusing the same WebGLRenderer.
-   */
-  const loadStandaloneModel = async (modelUrl: string) => {
-    if (!load3d) return
-
-    try {
-      await load3d.loadModel(modelUrl)
-      isSplatModel.value = load3d.isSplatModel()
-      isPlyModel.value = load3d.isPlyModel()
-    } catch (error) {
-      console.error('Error loading model in standalone viewer:', error)
       useToastStore().addAlert('Failed to load 3D model')
     }
   }

src/core/graph/widgets/dynamicWidgets.test.ts

@@ -27,7 +27,7 @@ function addDynamicCombo(node: LGraphNode, inputs: DynamicInputs) {
         `${namePrefix}.${depth}.${inputIndex}`,
         Array.isArray(input)
           ? ['COMFY_DYNAMICCOMBO_V3', { options: getSpec(input, depth + 1) }]
-          : [input, { tooltip: `${groupIndex}` }]
+          : [input, {}]
       ])
       return {
         key: `${groupIndex}`,
@@ -106,13 +106,6 @@ describe('Dynamic Combos', () => {
     expect(node.inputs[1].name).toBe('0.0.0.0')
     expect(node.inputs[3].name).toBe('2.2.0.0')
   })
-  test('Dynamically added widgets have tooltips', () => {
-    const node = testNode()
-    addDynamicCombo(node, [['INT'], ['STRING']])
-    expect.soft(node.widgets[1].tooltip).toBe('0')
-    node.widgets[0].value = '1'
-    expect.soft(node.widgets[1].tooltip).toBe('1')
-  })
 })
 describe('Autogrow', () => {
   const inputsSpec = { required: { image: ['IMAGE', {}] } }

src/extensions/core/imageCompare.ts

@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { NodeOutputWith } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
@@ -28,6 +29,7 @@ useExtensionService().registerExtension({
 
       const toUrl = (record: Record<string, string>) => {
         const params = new URLSearchParams(record)
+        appendCloudResParam(params, record.filename)
         return api.apiURL(`/view?${params}${rand}`)
       }
 

src/locales/en/main.json

@@ -93,7 +93,6 @@
     "reportIssueTooltip": "Submit the error report to Comfy Org",
     "reportSent": "Report Submitted",
     "copyToClipboard": "Copy to Clipboard",
-    "copySystemInfo": "Copy System Info",
     "copyAll": "Copy All",
     "openNewIssue": "Open New Issue",
     "showReport": "Show Report",
@@ -340,8 +339,7 @@
       "conflicting": "Conflicting",
       "inWorkflowSection": "IN WORKFLOW",
       "allInWorkflow": "All in: {workflowName}",
-      "missingNodes": "Missing Nodes",
-      "unresolvedNodes": "Unresolved Nodes"
+      "missingNodes": "Missing Nodes"
     },
     "infoPanelEmpty": "Click an item to see the info",
     "applyChanges": "Apply Changes",
@@ -406,10 +404,6 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All",
-    "unresolvedNodes": {
-      "title": "Unresolved Missing Nodes",
-      "message": "The following nodes are not installed and could not be found in the registry."
-    },
     "allMissingNodesInstalled": "All missing nodes have been successfully installed",
     "packsSelected": "packs selected",
     "mixedSelectionMessage": "Cannot perform bulk action on mixed selection",
@@ -1052,8 +1046,6 @@
     "logoProviderSeparator": " & "
   },
   "graphCanvasMenu": {
-    "canvasMode": "Canvas Mode",
-    "canvasToolbar": "Canvas Toolbar",
     "zoomIn": "Zoom In",
     "zoomOut": "Zoom Out",
     "resetView": "Reset View",
@@ -3188,8 +3180,6 @@
     "cancelThisRun": "Cancel this run",
     "deleteAllAssets": "Delete all assets from this run",
     "hasCreditCost": "Requires additional credits",
-    "viewGraph": "View node graph",
-    "mobileNoWorkflow": "This workflow hasn't been built for app mode. Try a different one.",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3234,19 +3224,6 @@
       "outputPlaceholder": "Output nodes will show up here",
       "outputRequiredPlaceholder": "At least one node is required"
     },
-    "error": {
-      "header": "This app encountered an error",
-      "log": "Error Logs",
-      "mobileFixable": "Check {0} for errors",
-      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
-      "promptVisitGraph": "View the node graph to see the full error.",
-      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
-      "goto": "Show errors in graph",
-      "github": "submit a GitHub issue",
-      "guide": "troubleshooting guide",
-      "support": "contact our support",
-      "promptShow": "Show error report"
-    },
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"

src/platform/assets/components/AssetBrowserModal.vue

@@ -26,12 +26,12 @@
         class="flex w-full items-center justify-between gap-2"
         @click.self="focusedAsset = null"
       >
-        <SearchInput
+        <SearchBox
           v-model="searchQuery"
           :autofocus="true"
           size="lg"
           :placeholder="$t('g.searchPlaceholder', { subject: '' })"
-          class="max-w-lg flex-1"
+          class="max-w-96"
         />
         <Button
           v-if="isUploadButtonEnabled"
@@ -88,7 +88,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'

src/platform/assets/components/MediaAssetCard.stories.ts

@@ -1,17 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
-
 import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
 import type { AssetItem } from '../schemas/assetSchema'
 import MediaAssetCard from './MediaAssetCard.vue'
+import MediaViewer from './MediaViewer.vue'
 
 const meta: Meta<typeof MediaAssetCard> = {
   title: 'Platform/Assets/MediaAssetCard',
   component: MediaAssetCard,
   decorators: [
     () => ({
-      components: { ResultGallery },
+      components: { MediaViewer },
       setup() {
         const galleryStore = useMediaAssetGalleryStore()
         return { galleryStore }
@@ -19,9 +18,9 @@ const meta: Meta<typeof MediaAssetCard> = {
       template: `
         <div>
           <story />
-          <ResultGallery 
+          <MediaViewer
             v-model:active-index="galleryStore.activeIndex"
-            :all-gallery-items="galleryStore.items"
+            :items="galleryStore.items"
           />
         </div>
       `

src/platform/assets/components/MediaAssetCard.vue

@@ -236,7 +236,7 @@ const adaptedAsset = computed(() => {
     name: asset.name,
     display_name: asset.display_name,
     kind: fileKind.value,
-    src: asset.thumbnail_url || asset.preview_url || '',
+    src: asset.preview_url || '',
     size: asset.size,
     tags: asset.tags || [],
     created_at: asset.created_at,

src/platform/assets/components/MediaAssetFilterBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center gap-3">
-    <SearchInput
+    <SearchBox
       :model-value="searchQuery"
       :placeholder="
         $t('g.searchPlaceholder', { subject: $t('sideToolbar.labels.assets') })
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'
 
 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'

src/platform/assets/components/MediaViewer.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { AssetItem } from '../schemas/assetSchema'
+import MediaViewer from './MediaViewer.vue'
+
+const SAMPLE_MEDIA = {
+  image1: 'https://i.imgur.com/OB0y6MR.jpg',
+  image2: 'https://i.imgur.com/CzXTtJV.jpg',
+  image3: 'https://farm9.staticflickr.com/8505/8441256181_4e98d8bff5_z_d.jpg',
+  video:
+    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
+}
+
+function makeAsset(
+  overrides: Partial<AssetItem> & { id: string; name: string }
+): AssetItem {
+  return {
+    size: 0,
+    created_at: new Date().toISOString(),
+    tags: ['output'],
+    preview_url: '',
+    ...overrides
+  }
+}
+
+const singleImage: AssetItem[] = [
+  makeAsset({
+    id: 'img-1',
+    name: 'landscape.jpg',
+    preview_url: SAMPLE_MEDIA.image1
+  })
+]
+
+const multipleImages: AssetItem[] = [
+  makeAsset({
+    id: 'img-1',
+    name: 'landscape.jpg',
+    preview_url: SAMPLE_MEDIA.image1
+  }),
+  makeAsset({
+    id: 'img-2',
+    name: 'portrait.jpg',
+    preview_url: SAMPLE_MEDIA.image2
+  }),
+  makeAsset({
+    id: 'img-3',
+    name: 'nature.jpg',
+    preview_url: SAMPLE_MEDIA.image3
+  })
+]
+
+const mixedMedia: AssetItem[] = [
+  makeAsset({
+    id: 'img-1',
+    name: 'photo.jpg',
+    preview_url: SAMPLE_MEDIA.image1
+  }),
+  makeAsset({
+    id: 'vid-1',
+    name: 'clip.mp4',
+    preview_url: SAMPLE_MEDIA.video
+  }),
+  makeAsset({
+    id: 'aud-1',
+    name: 'song.mp3',
+    preview_url: SAMPLE_MEDIA.audio
+  })
+]
+
+const meta: Meta<typeof MediaViewer> = {
+  title: 'Platform/Assets/MediaViewer',
+  component: MediaViewer,
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    activeIndex: { control: { type: 'number', min: -1, max: 10 } }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleImage: Story = {
+  args: {
+    items: singleImage,
+    activeIndex: 0
+  }
+}
+
+export const MultipleImages: Story = {
+  args: {
+    items: multipleImages,
+    activeIndex: 0
+  }
+}
+
+export const VideoPlayer: Story = {
+  args: {
+    items: [
+      makeAsset({
+        id: 'vid-1',
+        name: 'big-buck-bunny.mp4',
+        preview_url: SAMPLE_MEDIA.video
+      })
+    ],
+    activeIndex: 0
+  }
+}
+
+export const AudioPlayer: Story = {
+  args: {
+    items: [
+      makeAsset({
+        id: 'aud-1',
+        name: 'soundtrack.mp3',
+        preview_url: SAMPLE_MEDIA.audio
+      })
+    ],
+    activeIndex: 0
+  }
+}
+
+export const MixedMedia: Story = {
+  args: {
+    items: mixedMedia,
+    activeIndex: 0
+  }
+}
+
+export const Closed: Story = {
+  args: {
+    items: singleImage,
+    activeIndex: -1
+  }
+}

src/platform/assets/components/MediaViewer.vue

@@ -0,0 +1,122 @@
+<template>
+  <DialogRoot :open="isOpen" @update:open="handleOpenChange">
+    <DialogPortal>
+      <DialogOverlay class="fixed inset-0 z-50 bg-black/80" />
+      <DialogContent
+        class="fixed inset-0 z-50 flex items-center justify-center outline-none"
+        :aria-describedby="undefined"
+      >
+        <VisuallyHidden as-child>
+          <DialogTitle>{{ currentItem?.name ?? '' }}</DialogTitle>
+        </VisuallyHidden>
+
+        <!-- Close button -->
+        <DialogClose
+          class="absolute top-4 right-4 z-10 cursor-pointer rounded-full bg-black/50 p-2 text-white hover:bg-black/70"
+          :aria-label="$t('g.close')"
+        >
+          <i class="icon-[lucide--x] size-5" />
+        </DialogClose>
+
+        <!-- Previous button -->
+        <button
+          v-if="hasMultiple"
+          class="absolute left-4 z-10 cursor-pointer rounded-full bg-black/50 p-2 text-white hover:bg-black/70"
+          @click="navigate(-1)"
+        >
+          <i class="icon-[lucide--chevron-left] size-6" />
+        </button>
+
+        <!-- Media content -->
+        <ComfyImage
+          v-if="currentMediaType === 'image'"
+          :key="currentItem?.id"
+          :src="currentItem?.preview_url ?? ''"
+          :contain="false"
+          :alt="currentItem?.name ?? ''"
+          class="max-h-screen max-w-full object-contain"
+        />
+        <video
+          v-else-if="currentMediaType === 'video'"
+          :key="currentItem?.id"
+          :src="currentItem?.preview_url ?? ''"
+          controls
+          class="max-h-screen max-w-full"
+        />
+        <audio
+          v-else-if="currentMediaType === 'audio'"
+          :key="currentItem?.id"
+          :src="currentItem?.preview_url ?? ''"
+          controls
+        />
+
+        <!-- Next button -->
+        <button
+          v-if="hasMultiple"
+          class="absolute right-4 z-10 cursor-pointer rounded-full bg-black/50 p-2 text-white hover:bg-black/70"
+          @click="navigate(1)"
+        >
+          <i class="icon-[lucide--chevron-right] size-6" />
+        </button>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  VisuallyHidden
+} from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+
+import ComfyImage from '@/components/common/ComfyImage.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getMediaTypeFromFilename } from '@/utils/formatUtil'
+
+const { items = [], activeIndex = -1 } = defineProps<{
+  items?: AssetItem[]
+  activeIndex?: number
+}>()
+
+const emit = defineEmits<{
+  'update:activeIndex': [value: number]
+}>()
+
+const isOpen = computed(() => activeIndex >= 0 && activeIndex < items.length)
+
+const currentItem = computed(() =>
+  isOpen.value ? items[activeIndex] : undefined
+)
+
+const currentMediaType = computed(() =>
+  currentItem.value ? getMediaTypeFromFilename(currentItem.value.name) : ''
+)
+
+const hasMultiple = computed(() => items.length > 1)
+
+function handleOpenChange(open: boolean) {
+  if (!open) {
+    emit('update:activeIndex', -1)
+  }
+}
+
+function navigate(direction: number) {
+  const newIndex = (activeIndex + direction + items.length) % items.length
+  emit('update:activeIndex', newIndex)
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isOpen.value) return
+  if (event.key === 'ArrowLeft') navigate(-1)
+  else if (event.key === 'ArrowRight') navigate(1)
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeyDown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeyDown))
+</script>

src/platform/assets/composables/media/assetMappers.ts

@@ -45,8 +45,7 @@ export function mapTaskOutputToAssetItem(
       ? new Date(taskItem.executionStartTimestamp).toISOString()
       : new Date().toISOString(),
     tags: ['output'],
-    thumbnail_url: output.previewUrl,
-    preview_url: output.url,
+    preview_url: output.previewUrl,
     user_metadata: metadata
   }
 }
@@ -64,7 +63,6 @@ export function mapInputFileToAssetItem(
   directory: 'input' | 'output' = 'input'
 ): AssetItem {
   const params = new URLSearchParams({ filename, type: directory })
-  const preview_url = api.apiURL(`/view?${params}`)
   appendCloudResParam(params, filename)
 
   return {
@@ -73,7 +71,6 @@ export function mapInputFileToAssetItem(
     size: 0,
     created_at: new Date().toISOString(),
     tags: [directory],
-    thumbnail_url: api.apiURL(`/view?${params}`),
-    preview_url
+    preview_url: api.apiURL(`/view?${params}`)
   }
 }

src/platform/assets/composables/useMediaAssetGalleryStore.test.ts

@@ -1,161 +1,76 @@
 import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { ResultItemImpl } from '@/stores/queueStore'
-
-import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import type { AssetItem } from '../schemas/assetSchema'
 import { useMediaAssetGalleryStore } from './useMediaAssetGalleryStore'
 
-vi.mock('@/stores/queueStore', () => ({
-  ResultItemImpl: vi
-    .fn<typeof ResultItemImpl>()
-    .mockImplementation(function (data) {
-      Object.assign(this, {
-        ...data,
-        url: ''
-      })
-    })
-}))
-
 describe('useMediaAssetGalleryStore', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
 
   describe('openSingle', () => {
-    it('should convert AssetMeta to ResultItemImpl format', () => {
+    it('should set items and activeIndex', () => {
       const store = useMediaAssetGalleryStore()
-      const mockAsset: AssetMeta = {
+      const asset: AssetItem = {
         id: 'test-1',
         name: 'test-image.png',
-        kind: 'image',
-        src: 'https://example.com/image.png',
         size: 1024,
-        tags: [],
+        preview_url: 'https://example.com/image.png',
+        tags: ['output'],
         created_at: '2025-01-01'
       }
 
-      store.openSingle(mockAsset)
+      store.openSingle(asset)
 
-      expect(ResultItemImpl).toHaveBeenCalledWith({
-        filename: 'test-image.png',
-        subfolder: '',
-        type: 'output',
-        nodeId: '0',
-        mediaType: 'images'
-      })
       expect(store.items).toHaveLength(1)
+      expect(store.items[0]).toBe(asset)
       expect(store.activeIndex).toBe(0)
     })
 
-    it('should set correct mediaType for video assets', () => {
+    it('should preserve asset properties', () => {
       const store = useMediaAssetGalleryStore()
-      const mockVideoAsset: AssetMeta = {
+      const asset: AssetItem = {
         id: 'test-2',
         name: 'test-video.mp4',
-        kind: 'video',
-        src: 'https://example.com/video.mp4',
         size: 2048,
-        tags: [],
+        preview_url: 'https://example.com/video.mp4',
+        tags: ['output'],
         created_at: '2025-01-01'
       }
 
-      store.openSingle(mockVideoAsset)
+      store.openSingle(asset)
 
-      expect(ResultItemImpl).toHaveBeenCalledWith(
-        expect.objectContaining({
-          filename: 'test-video.mp4',
-          mediaType: 'video'
-        })
-      )
+      expect(store.items[0].name).toBe('test-video.mp4')
+      expect(store.items[0].preview_url).toBe('https://example.com/video.mp4')
     })
 
-    it('should set correct mediaType for audio assets', () => {
+    it('should replace previous items when called multiple times', () => {
       const store = useMediaAssetGalleryStore()
-      const mockAudioAsset: AssetMeta = {
-        id: 'test-3',
-        name: 'test-audio.mp3',
-        kind: 'audio',
-        src: 'https://example.com/audio.mp3',
-        size: 512,
-        tags: [],
-        created_at: '2025-01-01'
-      }
-
-      store.openSingle(mockAudioAsset)
-
-      expect(ResultItemImpl).toHaveBeenCalledWith(
-        expect.objectContaining({
-          filename: 'test-audio.mp3',
-          mediaType: 'audio'
-        })
-      )
-    })
-
-    it('should override url getter with asset.src', () => {
-      const store = useMediaAssetGalleryStore()
-      const mockAsset: AssetMeta = {
-        id: 'test-4',
-        name: 'test.png',
-        kind: 'image',
-        src: 'https://example.com/custom-url.png',
-        size: 1024,
-        tags: [],
-        created_at: '2025-01-01'
-      }
-
-      store.openSingle(mockAsset)
-
-      const resultItem = store.items[0]
-      expect(resultItem.url).toBe('https://example.com/custom-url.png')
-    })
-
-    it('should handle assets without src gracefully', () => {
-      const store = useMediaAssetGalleryStore()
-      const mockAsset: AssetMeta = {
-        id: 'test-5',
-        name: 'no-src.png',
-        kind: 'image',
-        src: '',
-        size: 1024,
-        tags: [],
-        created_at: '2025-01-01'
-      }
-
-      store.openSingle(mockAsset)
-
-      const resultItem = store.items[0]
-      expect(resultItem.url).toBe('')
-    })
-
-    it('should update activeIndex and items when called multiple times', () => {
-      const store = useMediaAssetGalleryStore()
-      const asset1: AssetMeta = {
+      const asset1: AssetItem = {
         id: '1',
         name: 'first.png',
-        kind: 'image',
-        src: 'url1',
         size: 100,
+        preview_url: 'url1',
         tags: [],
         created_at: '2025-01-01'
       }
-      const asset2: AssetMeta = {
+      const asset2: AssetItem = {
         id: '2',
         name: 'second.png',
-        kind: 'image',
-        src: 'url2',
         size: 200,
+        preview_url: 'url2',
         tags: [],
         created_at: '2025-01-01'
       }
 
       store.openSingle(asset1)
       expect(store.items).toHaveLength(1)
-      expect(store.items[0].filename).toBe('first.png')
+      expect(store.items[0].name).toBe('first.png')
 
       store.openSingle(asset2)
       expect(store.items).toHaveLength(1)
-      expect(store.items[0].filename).toBe('second.png')
+      expect(store.items[0].name).toBe('second.png')
       expect(store.activeIndex).toBe(0)
     })
   })
@@ -163,17 +78,16 @@ describe('useMediaAssetGalleryStore', () => {
   describe('close', () => {
     it('should reset activeIndex to -1', () => {
       const store = useMediaAssetGalleryStore()
-      const mockAsset: AssetMeta = {
+      const asset: AssetItem = {
         id: 'test',
         name: 'test.png',
-        kind: 'image',
-        src: 'test-url',
         size: 1024,
+        preview_url: 'test-url',
         tags: [],
         created_at: '2025-01-01'
       }
 
-      store.openSingle(mockAsset)
+      store.openSingle(asset)
       expect(store.activeIndex).toBe(0)
 
       store.close()

src/platform/assets/composables/useMediaAssetGalleryStore.ts

@@ -1,39 +1,20 @@
 import { defineStore } from 'pinia'
 import { ref, shallowRef } from 'vue'
 
-import { ResultItemImpl } from '@/stores/queueStore'
-
-import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import type { AssetItem } from '../schemas/assetSchema'
 
 export const useMediaAssetGalleryStore = defineStore(
   'mediaAssetGallery',
   () => {
     const activeIndex = ref(-1)
-    const items = shallowRef<ResultItemImpl[]>([])
+    const items = shallowRef<AssetItem[]>([])
 
     const close = () => {
       activeIndex.value = -1
     }
 
-    const openSingle = (asset: AssetMeta) => {
-      // Convert AssetMeta to ResultItemImpl format
-      const resultItem = new ResultItemImpl({
-        filename: asset.name,
-        subfolder: '',
-        type: 'output',
-        nodeId: '0',
-        mediaType: asset.kind === 'image' ? 'images' : asset.kind
-      })
-
-      // Override the url getter to use asset.src
-      Object.defineProperty(resultItem, 'url', {
-        get() {
-          return asset.src || ''
-        },
-        configurable: true
-      })
-
-      items.value = [resultItem]
+    const openSingle = (asset: AssetItem) => {
+      items.value = [asset]
       activeIndex.value = 0
     }
 

src/platform/assets/schemas/assetSchema.ts

@@ -11,13 +11,13 @@ const zAsset = z.object({
   preview_id: z.string().nullable().optional(),
   display_name: z.string().optional(),
   preview_url: z.string().optional(),
-  thumbnail_url: z.string().optional(),
   created_at: z.string().optional(),
   updated_at: z.string().optional(),
   is_immutable: z.boolean().optional(),
   last_access_time: z.string().optional(),
   metadata: z.record(z.unknown()).optional(), // API allows arbitrary key-value pairs
-  user_metadata: z.record(z.unknown()).optional() // API allows arbitrary key-value pairs
+  user_metadata: z.record(z.unknown()).optional(), // API allows arbitrary key-value pairs
+  prompt_id: z.string().nullish()
 })
 
 const zAssetResponse = z.object({

src/platform/assets/services/assetService.ts

@@ -31,6 +31,9 @@ export interface PaginationOptions {
 interface AssetRequestOptions extends PaginationOptions {
   includeTags: string[]
   includePublic?: boolean
+  jobIds?: string[]
+  sort?: string
+  order?: 'asc' | 'desc'
 }
 
 interface AssetExportOptions {
@@ -202,7 +205,10 @@ function createAssetService() {
       includeTags,
       limit = DEFAULT_LIMIT,
       offset,
-      includePublic
+      includePublic,
+      jobIds,
+      sort,
+      order
     } = options
     const queryParams = new URLSearchParams({
       include_tags: includeTags.join(','),
@@ -214,6 +220,15 @@ function createAssetService() {
     if (includePublic !== undefined) {
       queryParams.set('include_public', includePublic ? 'true' : 'false')
     }
+    if (jobIds?.length) {
+      queryParams.set('job_ids', jobIds.join(','))
+    }
+    if (sort) {
+      queryParams.set('sort', sort)
+    }
+    if (order) {
+      queryParams.set('order', order)
+    }
 
     const url = `${ASSETS_ENDPOINT}?${queryParams.toString()}`
     const res = await api.fetchApi(url)
@@ -754,6 +769,25 @@ function createAssetService() {
     return await res.json()
   }
 
+  async function getOutputAssets(
+    options?: PaginationOptions & { sort?: string; order?: 'asc' | 'desc' }
+  ): Promise<AssetResponse> {
+    return handleAssetRequest(
+      { includeTags: ['output'], ...options },
+      'output assets'
+    )
+  }
+
+  async function getAssetsByJobIds(
+    jobIds: string[],
+    options?: PaginationOptions
+  ): Promise<AssetResponse> {
+    return handleAssetRequest(
+      { includeTags: ['output'], jobIds, ...options },
+      'job assets'
+    )
+  }
+
   return {
     getAssetModelFolders,
     getAssetModels,
@@ -772,7 +806,9 @@ function createAssetService() {
     uploadAssetFromBase64,
     uploadAssetAsync,
     createAssetExport,
-    getExportDownloadUrl
+    getExportDownloadUrl,
+    getOutputAssets,
+    getAssetsByJobIds
   }
 }
 

src/platform/assets/utils/outputAssetUtil.ts

@@ -73,8 +73,7 @@ function mapOutputsToAssetItems({
       size: 0,
       created_at: createdAtValue,
       tags: ['output'],
-      thumbnail_url: output.previewUrl,
-      preview_url: output.url,
+      preview_url: output.previewUrl,
       user_metadata: {
         jobId,
         nodeId: output.nodeId,

src/platform/cloud/onboarding/components/CloudLayoutView.vue

@@ -8,14 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 
 import CloudTemplate from './CloudTemplate.vue'
-
-onMounted(() => {
-  document.getElementById('splash-loader')?.remove()
-})
 </script>

src/platform/cloud/onboarding/onboardingCloudRoutes.ts

@@ -31,19 +31,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         path: 'signup',
         name: 'cloud-signup',
         component: () =>
-          import('@/platform/cloud/onboarding/CloudSignupView.vue'),
-        beforeEnter: async (to, _from, next) => {
-          if (!to.query.switchAccount) {
-            const { useCurrentUser } =
-              await import('@/composables/auth/useCurrentUser')
-            const { isLoggedIn } = useCurrentUser()
-
-            if (isLoggedIn.value) {
-              return next({ name: 'cloud-user-check' })
-            }
-          }
-          next()
-        }
+          import('@/platform/cloud/onboarding/CloudSignupView.vue')
       },
       {
         path: 'forgot-password',

src/platform/remote/comfyui/jobs/fetchJobs.test.ts

@@ -150,41 +150,6 @@ describe('fetchJobs', () => {
 
       expect(result).toEqual([])
     })
-
-    it('parses batch containing text-only preview outputs', async () => {
-      const mockFetch = vi.fn().mockResolvedValue({
-        ok: true,
-        json: () =>
-          Promise.resolve(
-            createMockResponse([
-              createMockJob('image-job', 'completed', {
-                preview_output: {
-                  filename: 'output.png',
-                  subfolder: '',
-                  type: 'output',
-                  nodeId: '1',
-                  mediaType: 'images'
-                }
-              }),
-              createMockJob('text-job', 'completed', {
-                preview_output: {
-                  content: 'some generated text',
-                  nodeId: '5',
-                  mediaType: 'text'
-                }
-              }),
-              createMockJob('no-preview-job', 'completed')
-            ])
-          )
-      })
-
-      const result = await fetchHistory(mockFetch)
-
-      expect(result).toHaveLength(3)
-      expect(result[0].id).toBe('image-job')
-      expect(result[1].id).toBe('text-job')
-      expect(result[2].id).toBe('no-preview-job')
-    })
   })
 
   describe('fetchQueue', () => {

src/platform/remote/comfyui/jobs/jobTypes.ts

@@ -18,16 +18,14 @@ const zJobStatus = z.enum([
   'cancelled'
 ])
 
-const zPreviewOutput = z
-  .object({
-    filename: z.string().optional(),
-    subfolder: z.string().optional(),
-    type: resultItemType.optional(),
-    nodeId: z.string(),
-    mediaType: z.string(),
-    display_name: z.string().optional()
-  })
-  .passthrough()
+const zPreviewOutput = z.object({
+  filename: z.string(),
+  subfolder: z.string(),
+  type: resultItemType,
+  nodeId: z.string(),
+  mediaType: z.string(),
+  display_name: z.string().optional()
+})
 
 /**
  * Execution error from Jobs API.

src/platform/remoteConfig/types.ts

@@ -31,7 +31,6 @@ export type RemoteConfig = {
   mixpanel_token?: string
   posthog_project_token?: string
   posthog_api_host?: string
-  posthog_debug?: boolean
   subscription_required?: boolean
   server_health_alert?: ServerHealthAlert
   max_upload_size?: number

src/platform/settings/components/ExtensionPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="extension-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.extensions') })"
     />
@@ -92,7 +92,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'

src/platform/settings/components/SettingDialog.vue

@@ -7,7 +7,7 @@
 
     <template #leftPanel>
       <div class="px-3">
-        <SearchInput
+        <SearchBox
           v-model:model-value="searchQuery"
           size="md"
           :placeholder="$t('g.searchSettings') + '...'"
@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import NavItem from '@/components/widget/nav/NavItem.vue'

src/platform/telemetry/TelemetryRegistry.ts

@@ -3,9 +3,7 @@ import type { AuditLog } from '@/services/customerEventsService'
 import type {
   AuthMetadata,
   BeginCheckoutMetadata,
-  DefaultViewSetMetadata,
   EnterLinearMetadata,
-  ShareFlowMetadata,
   ExecutionErrorMetadata,
   ExecutionSuccessMetadata,
   ExecutionTriggerSource,
@@ -28,8 +26,7 @@ import type {
   TemplateMetadata,
   UiButtonClickMetadata,
   WorkflowCreatedMetadata,
-  WorkflowImportMetadata,
-  WorkflowSavedMetadata
+  WorkflowImportMetadata
 } from './types'
 
 /**
@@ -159,22 +156,10 @@ export class TelemetryRegistry implements TelemetryDispatcher {
     this.dispatch((provider) => provider.trackWorkflowOpened?.(metadata))
   }
 
-  trackWorkflowSaved(metadata: WorkflowSavedMetadata): void {
-    this.dispatch((provider) => provider.trackWorkflowSaved?.(metadata))
-  }
-
-  trackDefaultViewSet(metadata: DefaultViewSetMetadata): void {
-    this.dispatch((provider) => provider.trackDefaultViewSet?.(metadata))
-  }
-
   trackEnterLinear(metadata: EnterLinearMetadata): void {
     this.dispatch((provider) => provider.trackEnterLinear?.(metadata))
   }
 
-  trackShareFlow(metadata: ShareFlowMetadata): void {
-    this.dispatch((provider) => provider.trackShareFlow?.(metadata))
-  }
-
   trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
     this.dispatch((provider) => provider.trackPageVisibilityChanged?.(metadata))
   }

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -14,9 +14,7 @@ import { getExecutionContext } from '../../utils/getExecutionContext'
 import type {
   AuthMetadata,
   CreditTopupMetadata,
-  DefaultViewSetMetadata,
   EnterLinearMetadata,
-  ShareFlowMetadata,
   ExecutionContext,
   ExecutionTriggerSource,
   ExecutionErrorMetadata,
@@ -41,8 +39,7 @@ import type {
   TemplateMetadata,
   UiButtonClickMetadata,
   WorkflowCreatedMetadata,
-  WorkflowImportMetadata,
-  WorkflowSavedMetadata
+  WorkflowImportMetadata
 } from '../../types'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'
@@ -361,22 +358,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.WORKFLOW_OPENED, metadata)
   }
 
-  trackWorkflowSaved(metadata: WorkflowSavedMetadata): void {
-    this.trackEvent(TelemetryEvents.WORKFLOW_SAVED, metadata)
-  }
-
-  trackDefaultViewSet(metadata: DefaultViewSetMetadata): void {
-    this.trackEvent(TelemetryEvents.DEFAULT_VIEW_SET, metadata)
-  }
-
   trackEnterLinear(metadata: EnterLinearMetadata): void {
     this.trackEvent(TelemetryEvents.ENTER_LINEAR_MODE, metadata)
   }
 
-  trackShareFlow(metadata: ShareFlowMetadata): void {
-    this.trackEvent(TelemetryEvents.SHARE_FLOW, metadata)
-  }
-
   trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
     this.trackEvent(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
   }

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts

@@ -80,30 +80,26 @@ describe('PostHogTelemetryProvider', () => {
       createProvider()
       await vi.dynamicImportSettled()
 
-      expect(hoisted.mockInit).toHaveBeenCalledWith(
-        'phc_test_token',
-        expect.objectContaining({
-          api_host: 'https://t.comfy.org',
-          ui_host: 'https://us.posthog.com',
-          autocapture: false,
-          capture_pageview: false,
-          capture_pageleave: false,
-          persistence: 'localStorage+cookie'
-        })
-      )
+      expect(hoisted.mockInit).toHaveBeenCalledWith('phc_test_token', {
+        api_host: 'https://ph.comfy.org',
+        autocapture: false,
+        capture_pageview: false,
+        capture_pageleave: false,
+        persistence: 'localStorage+cookie'
+      })
     })
 
-    it('enables debug mode when posthog_debug is true in config', async () => {
+    it('uses custom api_host from config when provided', async () => {
       window.__CONFIG__ = {
         posthog_project_token: 'phc_test_token',
-        posthog_debug: true
+        posthog_api_host: 'https://custom.host.com'
       } as typeof window.__CONFIG__
       new PostHogTelemetryProvider()
       await vi.dynamicImportSettled()
 
       expect(hoisted.mockInit).toHaveBeenCalledWith(
         'phc_test_token',
-        expect.objectContaining({ debug: true })
+        expect.objectContaining({ api_host: 'https://custom.host.com' })
       )
     })
 

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts

@@ -7,9 +7,7 @@ import type { RemoteConfig } from '@/platform/remoteConfig/types'
 
 import type {
   AuthMetadata,
-  DefaultViewSetMetadata,
   EnterLinearMetadata,
-  ShareFlowMetadata,
   ExecutionContext,
   ExecutionErrorMetadata,
   ExecutionSuccessMetadata,
@@ -35,8 +33,7 @@ import type {
   TemplateMetadata,
   UiButtonClickMetadata,
   WorkflowCreatedMetadata,
-  WorkflowImportMetadata,
-  WorkflowSavedMetadata
+  WorkflowImportMetadata
 } from '../../types'
 import { TelemetryEvents } from '../../types'
 import { getExecutionContext } from '../../utils/getExecutionContext'
@@ -103,15 +100,11 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
             this.posthog = posthogModule.default
             this.posthog!.init(apiKey, {
               api_host:
-                window.__CONFIG__?.posthog_api_host || 'https://t.comfy.org',
-              ui_host: 'https://us.posthog.com',
+                window.__CONFIG__?.posthog_api_host || 'https://ph.comfy.org',
               autocapture: false,
               capture_pageview: false,
               capture_pageleave: false,
-              persistence: 'localStorage+cookie',
-              debug:
-                window.__CONFIG__?.posthog_debug ??
-                import.meta.env.VITE_POSTHOG_DEBUG === 'true'
+              persistence: 'localStorage+cookie'
             })
             this.isInitialized = true
             this.flushEventQueue()
@@ -349,22 +342,10 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.WORKFLOW_OPENED, metadata)
   }
 
-  trackWorkflowSaved(metadata: WorkflowSavedMetadata): void {
-    this.trackEvent(TelemetryEvents.WORKFLOW_SAVED, metadata)
-  }
-
-  trackDefaultViewSet(metadata: DefaultViewSetMetadata): void {
-    this.trackEvent(TelemetryEvents.DEFAULT_VIEW_SET, metadata)
-  }
-
   trackEnterLinear(metadata: EnterLinearMetadata): void {
     this.trackEvent(TelemetryEvents.ENTER_LINEAR_MODE, metadata)
   }
 
-  trackShareFlow(metadata: ShareFlowMetadata): void {
-    this.trackEvent(TelemetryEvents.SHARE_FLOW, metadata)
-  }
-
   trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
     this.trackEvent(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
   }

src/platform/telemetry/types.ts

@@ -137,38 +137,13 @@ export interface WorkflowImportMetadata {
   /**
    * The source of the workflow open/import action
    */
-  open_source?:
-    | 'file_button'
-    | 'file_drop'
-    | 'template'
-    | 'shared_url'
-    | 'unknown'
+  open_source?: 'file_button' | 'file_drop' | 'template' | 'unknown'
 }
 
 export interface EnterLinearMetadata {
   source?: string
 }
 
-export interface WorkflowSavedMetadata {
-  is_app: boolean
-  is_new: boolean
-}
-
-export interface DefaultViewSetMetadata {
-  default_view: 'app' | 'graph'
-}
-
-type ShareFlowStep =
-  | 'dialog_opened'
-  | 'save_prompted'
-  | 'link_created'
-  | 'link_copied'
-
-export interface ShareFlowMetadata {
-  step: ShareFlowStep
-  source?: 'app_mode' | 'graph_mode'
-}
-
 /**
  * Workflow open metadata
  */
@@ -386,10 +361,7 @@ export interface TelemetryProvider {
   // Workflow management events
   trackWorkflowImported?(metadata: WorkflowImportMetadata): void
   trackWorkflowOpened?(metadata: WorkflowImportMetadata): void
-  trackWorkflowSaved?(metadata: WorkflowSavedMetadata): void
-  trackDefaultViewSet?(metadata: DefaultViewSetMetadata): void
   trackEnterLinear?(metadata: EnterLinearMetadata): void
-  trackShareFlow?(metadata: ShareFlowMetadata): void
 
   // Page visibility events
   trackPageVisibilityChanged?(metadata: PageVisibilityMetadata): void
@@ -475,8 +447,7 @@ export const TelemetryEvents = {
   // Workflow Management
   WORKFLOW_IMPORTED: 'app:workflow_imported',
   WORKFLOW_OPENED: 'app:workflow_opened',
-  ENTER_LINEAR_MODE: 'app:app_mode_opened',
-  SHARE_FLOW: 'app:share_flow',
+  ENTER_LINEAR_MODE: 'app:toggle_linear_mode',
 
   // Page Visibility
   PAGE_VISIBILITY_CHANGED: 'app:page_visibility_changed',
@@ -501,8 +472,6 @@ export const TelemetryEvents = {
 
   // Workflow Creation
   WORKFLOW_CREATED: 'app:workflow_created',
-  WORKFLOW_SAVED: 'app:workflow_saved',
-  DEFAULT_VIEW_SET: 'app:default_view_set',
 
   // Execution Lifecycle
   EXECUTION_START: 'execution_start',
@@ -552,7 +521,4 @@ export type TelemetryEventProperties =
   | HelpCenterClosedMetadata
   | WorkflowCreatedMetadata
   | EnterLinearMetadata
-  | ShareFlowMetadata
-  | WorkflowSavedMetadata
-  | DefaultViewSetMetadata
   | SubscriptionMetadata