## Summary
Implements stale-while-revalidate pattern for AssetBrowserModal to show
cached assets immediately while refreshing in background.
## Changes
### AssetBrowserModal.vue
- Reads assets directly from store cache via computed properties
- Shows loading spinner only when loading AND no cached data exists
- Simplified refresh logic: single `refreshAssets()` call on mount
### assetsStore.ts
- Added `updateModelsForTag(tag)` for tag-based fetching
- Added `updateModelsForKey()` internal helper to unify node type and
tag fetching
- Cache key convention: node types as-is, tags prefixed with `tag:`
- Added `isEqual` check before cache updates to prevent unnecessary
re-renders
### useModelUpload.ts
- Simplified signature from `UseAsyncStateReturn<...>['execute']` to `()
=> Promise<unknown> | void`
## UX Improvement
| Scenario | Before | After |
|----------|--------|-------|
| First open | Spinner → Assets | Spinner → Assets |
| Re-open same type | Spinner → Assets | Instant + silent refresh |
| Re-open after download | Spinner → Assets | Cached + auto-update |
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7880-feat-Stale-while-revalidate-pattern-for-AssetBrowserModal-2e16d73d365081ba93f4d6e0415ebfae)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
## Summary
- Define `touch:` Tailwind variant using `@media (hover: none)` to
target touch devices
- Add `touch:opacity-100` to `TreeExplorerTreeNode` for node action
buttons
- Add `useMediaQuery('(hover: none)')` to `MediaAssetCard` for action
overlay visibility
## Problem
On touch devices, sidebar buttons that appear on hover are inaccessible
because:
1. The `touch:` Tailwind variant was used but never defined (classes
silently ignored)
2. `TreeExplorerTreeNode` had no touch support for action buttons
3. `MediaAssetCard` used JS-based `useElementHover` which doesn't work
on touch
## Screenshots (Touch Device Emulation)
### Before (main branch)
- No "Generated"/"Imported" tabs visible in header
- Only duration chips shown on cards, no action buttons (zoom, menu)
### After (with fix)
- "Generated"/"Imported" tabs visible in header
- Action buttons (zoom, menu) visible on left of cards
- Duration chips moved to right side
## Test plan
- [ ] On touch device: verify Media Assets sidebar
"Imported"/"Generated" tabs are visible
- [ ] On touch device: verify Node Library filter buttons are visible
- [ ] On touch device: verify tree node action buttons (bookmark, help)
are visible
- [ ] On touch device: verify media asset card zoom/menu buttons are
visible
- [ ] On desktop with mouse: verify hover behavior still works as
expected
## Summary
Replace single `asset_update_options_enabled` feature flag with two
granular flags:
- `asset_deletion_enabled`: controls delete button visibility
- `asset_rename_enabled`: controls rename button visibility
The context menu only shows when at least one flag is enabled.
## Changes
- Updated `ServerFeatureFlag` enum with new flag names
- Updated `RemoteConfig` type with new properties
- Updated `AssetCard.vue` to conditionally show rename/delete buttons
based on their respective flags
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7864-feat-split-asset_update_options_enabled-into-separate-deletion-and-rename-flags-2e06d73d365081f9ac0afa12b87bd988)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Amp <amp@ampcode.com>
## Summary
- Adds asynchronous model upload support with HTTP 202 responses
- Implements WebSocket-based real-time download progress tracking via
`asset_download` events
- Creates `assetDownloadStore` for centralized download state management
and toast notifications
- Updates upload wizard UI to show "processing" state when downloads
continue in background
## Changes
- **Core**: New `assetDownloadStore` for managing async downloads with
WebSocket events
- **API**: Support for HTTP 202 async upload responses with task
tracking
- **UI**: Upload wizard now shows "processing" state and allows closing
dialog during download
- **Progress**: Periodic toast notifications (every 5s) during active
downloads with completion/error toasts
- **Schema**: Updated task statuses (`created`, `running`, `completed`,
`failed`) and WebSocket message types
## Review Focus
- WebSocket event handling and download state management in
`assetDownloadStore`
- Upload flow UX - users can now close the dialog and download continues
in background
- Toast notification frequency and timing
- Schema alignment with backend async upload API
Fixes#7748
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7746-feat-Add-async-model-upload-with-WebSocket-progress-tracking-2d36d73d3650811cb79ae06f470dcded)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
## Summary
Migrates all unit tests from `tests-ui/` to colocate with their source
files in `src/`, improving discoverability and maintainability.
## Changes
- **What**: Relocated all unit tests to be adjacent to the code they
test, following the `<source>.test.ts` naming convention
- **Config**: Updated `vitest.config.ts` to remove `tests-ui` include
pattern and `@tests-ui` alias
- **Docs**: Moved testing documentation to `docs/testing/` with updated
paths and patterns
## Review Focus
- Migration patterns documented in
`temp/plans/migrate-tests-ui-to-src.md`
- Tests use `@/` path aliases instead of relative imports
- Shared fixtures placed in `__fixtures__/` directories
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7811-chore-migrate-tests-from-tests-ui-to-colocate-with-source-files-2da6d73d36508147a4cce85365dee614)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
## Summary
Adds HuggingFace as a model import source alongside CivitAI, with
improved UX for model type selection and UTF-8 filename support.
## Changes
- **Import Sources**: Implemented extensible import source handler
pattern supporting both CivitAI and HuggingFace
- **UTF-8 Support**: Decode URL-encoded filenames to properly display
international characters (e.g., Chinese)
- **UX**: Sort model types alphabetically for easier selection
- **Feature Flag**: Added `huggingfaceModelImportEnabled` flag for
gradual rollout
- **i18n**: Use proper template parameters for localized error messages
## Technical Details
- Created `ImportSourceHandler` interface for extensibility
- Refactored existing CivitAI logic into handler pattern
- Added URL validation per source
- Filename decoding handles malformed URLs gracefully
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7540-feat-Add-HuggingFace-model-import-support-2cb6d73d3650818f966cca89244e8c36)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
## Summary
Setup the variants and migrate existing uses of
TextButton/TextIconButton/IconButton to a single Button component.
Still a work in progress.
## Changes
- **What**: Add a new Button
- **What**: Migrate old buttons
- **What**: Delete old buttons
- **Dependencies**: CVA, upgrade Storybook
## Review Focus
<!-- Critical design decisions or edge cases that need attention -->
<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->
## Screenshots (if applicable)
<!-- Add screenshots or video recording to help explain your changes -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7537-WIP-Component-Button-migration-2cb6d73d36508156a81bfc7bbddb36e9)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
## Summary
Stores and displays base64-encoded preview images from Civitai during
the model upload flow, uploading the preview as a separate asset linked
to the model.
## Changes
- **Schema**: Added `preview_image` field to `AssetMetadata` schema
- **Service**: Added `uploadAssetFromBase64` method to convert base64
data to blob and upload via FormData
- **Upload Flow**: Modified wizard to first upload preview image as
asset, then link it to model via `preview_id`
- **UI**: Display 56x56px preview thumbnail alongside model filename in
confirmation and success steps
## Review Focus
- Base64 to blob conversion and FormData upload implementation
- Sequential upload flow (preview first, then model with preview_id
reference)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7274-feat-display-and-upload-Civitai-preview-images-in-model-upload-flow-2c46d73d365081ff9b74c1791d23f6dd)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Adds a dropdown filter to the model browser that allows users to filter
assets by ownership (All, My models, Public models), based on the
`is_immutable` property.
## Changes
- **Filter UI**: Added ownership dropdown in
[AssetFilterBar.vue](src/platform/assets/components/AssetFilterBar.vue#L30-L38)
that only appears when user has uploaded models
- **Filter Logic**: Implemented `filterByOwnership` function in
[useAssetBrowser.ts](src/platform/assets/composables/useAssetBrowser.ts#L38-L45)
to filter by `is_immutable` property
- **i18n**: Added translation strings for ownership filter options
- **Tests**: Added comprehensive tests for ownership filtering in both
composable and component test files
## Review Focus
- The ownership filter visibility logic correctly checks for mutable
assets (`!is_immutable`)
- Default filter value is 'all' to show all models initially
- Filter integrates cleanly with existing file format and base model
filters
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7201-feat-Add-ownership-filter-to-model-browser-2c16d73d365081f280f6d1e42e5400af)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
## Summary
Unify the current sidebar tabs, structurally and aesthetically.
## Changes
- Removes the Assets only Layout
- Standardizes the title styling and spacing across the tabs.
## Review Focus
<!-- Critical design decisions or edge cases that need attention -->
<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->
## Screenshots (if applicable)
<!-- Add screenshots or video recording to help explain your changes -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde)
by [Unito](https://www.unito.io)
## Summary
Adds an interactive video tutorial dialog to help users find CivitAI
model URLs during the Upload Model wizard.
## Changes
- **New Component**: Created reusable `VideoHelpDialog.vue` component
- Full-width video player with floating close button
- Configurable props: `videoUrl`, `loop`, `showControls`
- Custom ESC key handling to prevent parent dialog from closing
- Click backdrop to dismiss
- 70% dark backdrop for better video focus
- **Upload Model Flow**: Integrated video help button in step 1 footer
- "How do I find this?" button opens tutorial video
- Video demonstrates finding model URLs on CivitAI
- PostHog tracking attribute maintained (`upload-model-step1-help-link`)
## Review Focus
- ESC key event handling uses capture phase to prevent propagation to
parent dialogs
- Component follows existing patterns from `MediaVideoTop.vue` and
`BaseModalLayout.vue`
- Video player accessibility (ARIA labels, keyboard navigation)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7177-feat-Add-video-help-dialog-to-Upload-Model-flow-2c06d73d36508148963ad9ee60038ea3)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Adds step-specific `data-attr` attributes throughout the Upload Model
wizard to enable PostHog analytics tracking and action creation,
following PostHog's recommended best practices for element labeling.
## Changes
- **What**: Added `data-attr` attributes to all key interactive elements
in the Upload Model flow (buttons, inputs, selectors)
- **Step-based naming**: Attributes include step numbers for funnel
analysis (e.g., `upload-model-step1-continue-button`)
- **Coverage**: Entry button, URL input, help link, navigation buttons
(cancel/back/continue/confirm/finish), and model type selector
## Benefits
- Enables creation of stable PostHog actions using CSS selectors like
`[data-attr="upload-model-step2-confirm-button"]`
- Allows funnel analysis to track user progression through the 3-step
upload wizard
- Identifies drop-off points and help-seeking behavior
- Follows PostHog best practice of using data attributes over CSS
classes (especially important with Tailwind)
## Review Focus
- Naming consistency and clarity of data-attr values
- Completeness of coverage across the upload flow
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7173-feat-Add-PostHog-data-attr-attributes-to-Upload-Model-flow-2c06d73d365081699861d3d910250e32)
by [Unito](https://www.unito.io)
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Adds a dedicated upgrade modal that appears when users without private
models access try to upload models, providing a clear path to upgrade
their subscription.
## Changes
- **New upgrade modal**: Created `UploadModelUpgradeModal` with
dedicated body, header, and footer components
- **Conditional rendering**: Modified `AssetBrowserModal` to show
upgrade modal when `privateModelsEnabled` flag is false
- **Subscription integration**: Connected upgrade flow to existing
subscription system via `showSubscriptionDialog()`
- **Localization**: Added localization keys for upgrade messaging
## Review Focus
- Conditional logic in `AssetBrowserModal.handleUploadClick()` based on
feature flags
- Component naming consistency (all upgrade-related components prefixed
with `UploadModelUpgrade`)
- Footer component refactoring maintains existing upload wizard behavior
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7124-feat-add-upgrade-modal-for-model-upload-when-private-models-disabled-2be6d73d36508147b72eea8a1d6ab772)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
## Summary
- Add right-click context menu functionality to MediaAssetCard
- Separate context menu into its own component
(MediaAssetContextMenu.vue)
- Ensure only one context menu is visible at a time within the same tab
## Changes
- Add `MediaAssetContextMenu.vue` - new component for context menu
- Update `MediaAssetCard.vue` - show context menu on right-click and
more button click
- Delete `MediaAssetMoreMenu.vue` - consolidated into context menu
- Delete `MediaAssetButtonDivider.vue` - unused
- Update `AssetsSidebarTab.vue` - add context menu state management
- Refactor `useMediaAssetActions.ts`
## Screenshot
[screen-capture.webm](https://github.com/user-attachments/assets/6fe414ef-b134-4fbe-98aa-6437bb354b41)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Catch more user visible (or audible) text that isn't
internationalizable.
## Changes
- **What**: Linter now checks other attributes for raw text.
## Review Focus
What other properties have leaked English text to non-English locales
that aren't in here?
## Summary
Fixed an issue where users had to click twice to continue after pasting
a URL in the upload model dialog - once to blur the input, then again to
click the button.
## Changes
- **What**: Replaced `UrlInput` with plain `InputText` in
`UploadModelUrlInput` to emit value immediately on input instead of only
on blur
- **Cleanup**: Moved URL cleaning/normalization to the `fetchMetadata`
handler, removed unused `disableValidation` prop from `UrlInput`
component
## Review Focus
- URL normalization logic in `useUploadModelWizard.ts`
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6801-bugfix-Fix-double-click-required-after-pasting-URL-in-upload-model-dialog-2b26d73d3650811881aed0cc064efcc7)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Adds a complete model upload workflow that allows users to import models
from Civitai URLs directly into their library.
## Changes
- **Multi-step wizard**: URL input → metadata confirmation → upload
progress
- **Components**: UploadModelDialog, UploadModelUrlInput,
UploadModelConfirmation, UploadModelProgress, UploadModelDialogHeader
- **API integration**: New assetService methods for metadata retrieval
and URL-based uploads
- **Model type management**: useModelTypes composable for fetching and
formatting available model types
- **UX improvements**: Optional validation bypass for UrlInput component
- **Localization**: 26 new i18n strings for the upload workflow
## Review Focus
- Error handling for failed uploads and metadata retrieval
- Model type detection and selection logic
- Dialog state management across multi-step workflow
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6694-feat-Add-Civitai-model-upload-wizard-2ab6d73d36508193b3b1dd67c7cc5a09)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Implements design feedback for the asset panel, improving visual
hierarchy, contrast, and responsiveness based on design tokens update.
## Changes
### 🎨 Design System Updates (style.css)
- **New tokens for MediaAssetCard states:**
- `--modal-card-background-hovered`: Hover state background
- `--modal-card-border-highlighted`: Selected state border color
- **Updated tag contrast:**
- Light mode: `smoke-200` → `smoke-400`
- Dark mode: `charcoal-200` → `ash-800`
- **Registered tokens in Tailwind** via `@theme inline` for proper class
generation
### 🖼️ MediaAssetCard Improvements
- **Added tooltips** to all interactive buttons:
- Zoom button: "Inspect"
- More button: "More options"
- Output count button: "See more outputs"
- **Fixed tooltip event conflicts** by wrapping buttons in tooltip divs
- **Updated hover/selected states:**
- Hover: Uses `--modal-card-background-hovered` for subtle highlight
- Selected: Uses `--modal-card-border-highlighted` for border only (no
background)
- **Updated placeholder background** to use
`--modal-card-placeholder-background`
- **Tag styling:** Changed from `variant="light"` to `variant="gray"`
for better contrast
### 📦 SquareChip Component
- **Added `gray` variant** that uses `--modal-card-tag-background` token
- Maintains consistency with design system tokens
### 📱 AssetsSidebarTab Responsive Footer
- **Responsive button display:**
- Width > 350px: Shows icon + text buttons
- Width ≤ 350px: Shows icon-only buttons
- **Text alignment:** Left-aligns selection count text in compact mode
- **Uses `useResizeObserver`** for automatic width detection
### 🌐 Internationalization
- Added new i18n keys for tooltips:
- `mediaAsset.actions.inspect`
- `mediaAsset.actions.more`
- `mediaAsset.actions.seeMoreOutputs`
### 🔧 Minor Fixes
- **Media3DTop:** Improved text size and icon color for better visual
hierarchy
## Visual Changes
- **Increased contrast** for asset card tags (more visible in both
themes)
- **Hover state** now provides clear visual feedback
- **Selected state** uses border highlight instead of background fill
- **Sidebar footer** gracefully adapts to narrow widths
## Related
- Addresses feedback from:
https://www.notion.so/comfy-org/Asset-panel-feedback-2aa6d73d3650800baacaf739a49360b3
- Design token updates by @Alex Tov
## Test Plan
- [ ] Verify asset card hover states in both light and dark themes
- [ ] Verify asset card selected states show highlighted border
- [ ] Test tooltips on all MediaAssetCard buttons
- [ ] Resize sidebar to < 350px and verify footer shows icon-only
buttons
- [ ] Resize sidebar to > 350px and verify footer shows icon + text
buttons
- [ ] Verify tag contrast improvement in both themes
- [ ] Test 3D asset placeholder appearance
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6749-feat-Improve-MediaAssetCard-design-and-add-responsive-sidebar-footer-2b06d73d365081019b90e110df2f1ae8)
by [Unito](https://www.unito.io)
## Summary
- Prevent text selection when clicking or dragging MediaAssetCard
- Add `select-none` Tailwind class to prevent unwanted text highlighting
## Changes
- Changed class from `gap-1` to `gap-1 select-none` in MediaAssetCard
container
## Problem
When users click or drag on a MediaAssetCard, the text content (tags,
titles, descriptions, buttons) gets selected and highlighted, which
creates a poor user experience.
## Solution
Added the `select-none` Tailwind CSS class which applies `user-select:
none` to prevent text selection within the card during mouse
interactions.
## Test plan
- [x] Click on MediaAssetCard and verify text is not selected
- [x] Drag across MediaAssetCard and verify text is not highlighted
- [x] Verify card selection still works properly
- [x] Verify buttons and interactive elements still work
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6708-fix-Prevent-text-selection-in-MediaAssetCard-2ac6d73d365081f6bec2ffebad7cb7ed)
by [Unito](https://www.unito.io)
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Add generation time-based sorting options to the Media Asset Panel
## Changes
- **New sorting options**:
- Generation time (longest first) - Sort by longest execution time
- Generation time (fastest first) - Sort by shortest execution time
- **Show only in Generated tab**:
- Generation time sorting is only meaningful for output assets with
`executionTimeInSeconds` metadata
- Implemented conditional rendering via `showGenerationTimeSort` prop
## Technical Details
- `useMediaAssetFiltering.ts`:
- Added `'longest'` and `'fastest'` to `SortOption` type
- Added `getAssetExecutionTime` helper function
- Implemented sorting logic using switch-case pattern
- `MediaAssetSortMenu.vue`:
- Added `showGenerationTimeSort` prop
- Generation time sort buttons placed inside `<template
v-if="showGenerationTimeSort">`
- `MediaAssetFilterBar.vue`:
- Receives `showGenerationTimeSort` prop and passes it to
`MediaAssetSortMenu`
- `AssetsSidebarTab.vue`:
- Passes `showGenerationTimeSort` prop based on `activeTab === 'output'`
- `src/locales/en/main.json`:
- Added `sortLongestFirst`: "Generation time (longest first)"
- Added `sortFastestFirst`: "Generation time (fastest first)"
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
## Overview
Adds sort functionality to the Media Asset Panel. Users can sort assets
by creation time in Cloud environments.
## Key Changes
### 1. Sort Functionality (Cloud Only)
- "Newest first" (most recent)
- "Oldest first" (oldest)
- Sorting based on `create_time` field (output assets)
- Sorting based on `created_at` field (input assets)
- Sort button is only displayed in Cloud environments
### 2. create_time Field Integration
**Related PR**: #6092
Implemented sort functionality using the `create_time` field introduced
in PR #6092. Applied the code from that PR directly to the following
files:
- `src/schemas/apiSchema.ts`: Added `create_time` field to `zExtraData`
- `src/stores/queueStore.ts`: Added `createTime` getter to
`TaskItemImpl`
- `src/platform/remote/comfyui/history/types/historyV2Types.ts`: Added
`create_time` to History V2 API response types
- `src/platform/remote/comfyui/history/adapters/v2ToV1Adapter.ts`: Pass
through `create_time` in V2→V1 adapter
- `src/platform/assets/composables/media/assetMappers.ts`: Include
`create_time` in asset metadata
### 3. Component Structure Improvements
Created new components following existing component styles for
consistency:
- **`MediaAssetSearchBar.vue`**: Component combining existing SearchBox
with sort button
- **`AssetSortButton.vue`**: Same structure as `MoreButton.vue`
(IconButton + Popover)
- **`MediaAssetSortMenu.vue`**: Same style as `MediaAssetMoreMenu.vue`
(using IconTextButton)
- **`AssetsSidebarTab.vue`**: Refactored to use `MediaAssetSearchBar`
### 4. Utility Usage
- Improved sort logic using `es-toolkit`'s `sortBy`
- Follows project guidelines (CLAUDE.md)
## Technical Details
### History V2 API's create_time
- Cloud backend provides `create_time` (in milliseconds) through History
V2 API
- Enables accurate sorting by creation time
- For input assets, uses existing `created_at` (ISO string)
### Sort Implementation
Uses `es-toolkit`'s `sortBy` in `useMediaAssetFiltering` composable:
```typescript
// Get timestamp from asset (either create_time or created_at)
const getAssetTime = (asset: AssetItem): number => {
return (
(asset.user_metadata?.create_time as number) ??
(asset.created_at ? new Date(asset.created_at).getTime() : 0)
)
}
// Sort by time
if (sortBy.value === 'oldest') {
return sortByUtil(searchFiltered.value, [getAssetTime])
} else {
return sortByUtil(searchFiltered.value, [(asset) => -getAssetTime(asset)])
}
```
## Testing
- ✅ Typecheck passed
- ✅ Lint passed
- ✅ Format passed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6695-feat-Add-sort-functionality-to-Media-Asset-Panel-2ab6d73d3650818c818ff3559875d869)
by [Unito](https://www.unito.io)
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
- Implement pagination for media assets history to handle large datasets
efficiently
- Add infinite scroll support with approach-end event handler
- Support offset parameter in history API for both V1 and V2 endpoints
## Changes
- Add offset parameter support to `api.getHistory()` method
- Update history fetchers (V1/V2) to include offset in API requests
- Implement `loadMoreHistory()` in assetsStore with pagination state
management
- Add `loadMore`, `hasMore`, and `isLoadingMore` to IAssetsProvider
interface
- Add approach-end handler in AssetsSidebarTab for infinite scroll
- Set BATCH_SIZE to 200 for efficient loading
## Implementation Improvements
Simplified offset-based pagination by removing unnecessary
reconciliation logic:
- Remove `reconcileHistory`, `taskItemsMap`, `lastKnownQueueIndex`
(offset is sufficient)
- Replace `assetItemsByPromptId` Map → `loadedIds` Set (store IDs only)
- Replace `findInsertionIndex` binary search → push + sort (faster for
batch operations)
- Replace `loadingPromise` → `isLoadingMore` boolean (simpler state
management)
- Fix memory leak by cleaning up Set together with array slice
## Test Plan
- [x] TypeScript compilation passes
- [x] ESLint and Prettier formatting applied
- [x] Test infinite scroll in media assets tab
- [x] Verify network requests include correct offset parameter
- [x] Confirm no duplicate items when loading more
🤖 Generated with [Claude Code](https://claude.ai/code)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Adds an upload button to the asset browser modal, controlled by the
`model_upload_button_enabled` backend feature flag.
## Changes
- **What**: Added upload button with PrimeVue primary styling to asset
browser header
- **Feature Flag**: Button only appears when backend returns
`model_upload_button_enabled: true`
- **Localization**: Added `assetBrowser.uploadModel` translation key
- **Click Handler**: Currently logs to console (implementation pending)
## Review Focus
- Feature flag integration using `useFeatureFlags` composable
- Button styling matches PrimeVue primary color scheme
- Proper placement in header with flexbox layout
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6665-feat-Add-feature-flagged-upload-button-to-asset-browser-2a96d73d365081c7a05bdc33bed7f7fd)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
- Reorganized media asset card layout for improved UX
- Moved duration/format chips to top-left (visible in default state)
- Replaced multiple action buttons with zoom + more menu pattern
- Repositioned output count to top-right for better visibility
## Changes
1. **Duration & format chips**: Moved from bottom-left to top-left,
shown when card is not hovered and media is not playing
2. **Media actions**: Simplified to zoom button + more menu (contains
delete, download options), shown on hover or during playback
3. **Output count**: Relocated from bottom-right to top-right for
consistent positioning
## Test plan
- [x] Verify duration/format chips appear in top-left when card is idle
- [x] Confirm action buttons (zoom + more) appear on hover
- [x] Check output count displays correctly in top-right
- [x] Test transitions between hover/non-hover states
- [x] Verify media playback doesn't interfere with UI elements
🤖 Generated with [Claude Code](https://claude.ai/code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6541-UI-Redesign-media-asset-card-layout-29f6d73d365081eb8614d5dc9b2dc214)
by [Unito](https://www.unito.io)
This pull request introduces a comprehensive update to the design
system's color management, focusing on establishing semantic color
tokens for both light and dark themes. It replaces many hardcoded color
values and legacy CSS classes throughout the codebase with new semantic
CSS variables, ensuring consistent theming and easier future
maintenance. The changes affect core CSS files as well as numerous Vue
components, aligning their styling with the new design system.
**Design System Foundation**
* Added a wide range of new color variables to `style.css`, including
base colors (e.g., `--color-white`, `--color-black`), additional shades
for sand, azure, cobalt, gold, coral, and magenta, and new alpha
(transparency) colors.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L52-R87)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R119-R123)
* Introduced semantic color tokens for both light and dark modes
(`--base-background`, `--primary-background`,
`--destructive-background`, etc.), mapping them to the new base colors
for consistent usage across the application.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R219-R239)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R301-R321)
* Exposed semantic tokens as CSS variables (e.g.,
`--color-base-foreground`, `--color-secondary-background`) for use
throughout the app.
**Component Refactoring to Semantic Tokens**
* Updated Vue components and their tests to use the new semantic color
classes (e.g., `bg-base-background`, `text-base-foreground`,
`bg-secondary-background`) instead of hardcoded colors or legacy
dark-theme classes. This affects components such as
`WorkflowTemplateSelectorDialog.vue`, `BypassButton.vue`,
`ExecuteButton.vue`, `MenuOptionItem.vue`, `AssetCard.vue`,
`MediaAssetMoreMenu.vue`, `MediaTitle.vue`, `WidgetFileUpload.vue`,
`WidgetRecordAudio.vue`, `AudioPreviewPlayer.vue`, and
`FormDropdownMenuActions.vue`.
[[1]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL149-R149)
[[2]](diffhunk://#diff-8ec606ef1100f3a56945ed24cbdc1965050932cd744d4172a3868cdfd23894c0L95-R95)
[[3]](diffhunk://#diff-80b781aeba31712968ae157bb70194e4b72bc73430d1cca6a79d718d839daed6L10-R10)
[[4]](diffhunk://#diff-55fd9056d35e50249dc9f2280017dc99294221fdbe56d8399cea60f8bac499b5L7-R7)
[[5]](diffhunk://#diff-c5e6830e63e2441d2dc70d2ecf7c9b56d0a93821f827e9c5377fc10ae6016f18L30-R32)
[[6]](diffhunk://#diff-a1091d53a4b5d493e045aab5960188d2e7c3b80002e7178427268835fadb5809L30-R30)
[[7]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL6-R6)
[[8]](diffhunk://#diff-7ef9ebd48e6f38a644c1a4e7bae1c7bb818bb959b2d20985974824e299ea5c34L3-R3)
[[9]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L115-R115)
[[10]](diffhunk://#diff-7bee4b453fc869f546e7150a6e39992ab6442987f80c10f8260b8f3715491997L51-R51)
[[11]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL41-R41)
[[12]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L24-R24)
**Consistency and Maintainability**
* Ensured hover, active, and selected states use semantic background and
foreground colors for both light and dark themes, improving visual
consistency and simplifying future updates.
[[1]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL183-R183)
[[2]](diffhunk://#diff-a1091d53a4b5d493e045aab5960188d2e7c3b80002e7178427268835fadb5809L115-R114)
[[3]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL18-R18)
[[4]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL29-R29)
[[5]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL43-R43)
[[6]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL55-R55)
[[7]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL69-R69)
[[8]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL83-R83)
[[9]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL328-R328)
[[10]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L138-R138)
[[11]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL119-R119)
[[12]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL137-R137)
[[13]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L53-R53)
[[14]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L153-R153)
**Removal of Legacy Styles**
* Removed legacy dark-theme class usage and hardcoded color values,
replacing them with semantic tokens to unify the styling approach.
[[1]](diffhunk://#diff-c5e6830e63e2441d2dc70d2ecf7c9b56d0a93821f827e9c5377fc10ae6016f18L30-R32)
[[2]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L24-R24)
[[3]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L53-R53)
[[4]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L153-R153)
These changes lay the groundwork for a scalable and maintainable design
system, making it easier to implement future theme changes and ensuring
a consistent look and feel across all components.
## Summary
Implements file explorer-style multi-selection functionality for media
assets in the AssetsSidebarTab component.
## Changes
### Multi-Selection Interactions
- **Normal click**: Single selection (clears previous, selects new)
- **Shift + click**: Range selection (from last selected to current)
- **Ctrl/Cmd + click**: Toggle individual selection
### State Management
- Added `assetSelectionStore` to manage selected asset IDs using Set
- Created `useAssetSelection` composable for selection logic and
keyboard state
### UI Enhancements
- Display selection count in footer (output tab only)
- Interactive selection count that shows "Deselect all" on hover
- Added bulk action buttons for download/delete (UI only)
### Translation Keys
Added new keys under `mediaAsset.selection`:
- `selectedCount`: "{count} selected"
- `deselectAll`: "Deselect all"
- `downloadSelected`: "Download"
- `deleteSelected`: "Delete"
## Test Plan
- [x] Open Assets sidebar tab
- [x] Switch to Generated tab
- [x] Test single selection with normal click
- [x] Test range selection with Shift + click
- [x] Test toggle selection with Ctrl/Cmd + click
- [x] Verify selection count updates correctly
- [x] Test hover interaction on selection count
- [x] Click "Deselect all" to clear selection
- [x] Test bulk action buttons (UI only)
## Notes
- Bulk download/delete functionality to be implemented in separate PR
- Selection UI currently only shows in output (Generated) tab
[screen-capture.webm](https://github.com/user-attachments/assets/740315bd-9254-4af3-a0be-10846d810d65)
## 📋 Overview
Implemented a new Media Assets sidebar tab in ComfyUI for managing
user-uploaded input files and generated output files. This feature
supports both local and cloud environments and is currently enabled only
in development mode.
## 🎯 Key Features
### 1. Media Assets Sidebar Tab
- **Imported** / **Generated** files separated by tabs
- Visual display with file preview cards
- Gallery view support (navigable with arrow keys)
### 2. Environment-Specific Implementation
- **`useInternalMediaAssets`**: For local environment
- Fetches file list via `/files` API
- Retrieves generation task execution time via `/history` API
- Processes history data using the same logic as QueueSidebarTab
- **`useCloudMediaAssets`**: For cloud environment
- File retrieval through assetService
- History data processing using TaskItemImpl
- Auto-truncation of long filenames over 20 characters (e.g.,
`very_long_filename_here.png` → `very_long_...here.png`)
### 3. Execution Time Display
- Shows task execution time on generated image cards (e.g., "2.3s")
- Calculated from History API's `execution_start` and
`execution_success` messages
- Displayed at MediaAssetCard's duration chip location
### 4. Gallery Feature
- Full-screen gallery mode on image click
- Navigate between images with keyboard arrows
- Exit gallery with ESC key
- Reuses ResultGallery component from QueueSidebarTab
### 5. Development Mode Only
- Excluded from production builds using `import.meta.env.DEV` condition
- Feature in development, scheduled for official release after
stabilization
## 🛠️ Technical Changes
### New Files Added
- `src/components/sidebar/tabs/AssetsSidebarTab.vue` - Main sidebar tab
component
- `src/composables/sidebarTabs/useAssetsSidebarTab.ts` - Sidebar tab
definition
- `src/composables/useInternalMediaAssets.ts` - Local environment
implementation
- `src/composables/useCloudMediaAssets.ts` - Cloud environment
implementation
- `packages/design-system/src/icons/image-ai-edit.svg` - Icon addition
### Modified Files
- `src/stores/workspace/sidebarTabStore.ts` - Added dev mode only tab
display logic
- `src/platform/assets/components/MediaAssetCard.vue` - Added execution
time display, zoom event
- `src/platform/assets/components/MediaImageTop.vue` - Added image
dimension detection
- `packages/shared-frontend-utils/src/formatUtil.ts` - Added media type
determination utility functions
- `src/locales/en/main.json` - Added translation keys
[media_asset_OSS_cloud.webm](https://github.com/user-attachments/assets/a6ee3b49-19ed-4735-baad-c2ac2da868ef)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>
