[feat] Show "Finished in" duration for completed jobs in cloud #6895

benceruleanlu · 2025-11-24T21:25:40Z

Summary

In cloud distribution, completed jobs now show "Finished in Xh Ym Zs" as the primary text instead of the filename.

Uses formatDuration to display time as 1h 30m 45s, 30m 45s, or 45s
Gated with isCloud - non-cloud continues to show filename
Added i18n key queue.completedIn for localization

Filename is not fetchable right now in cloud. This is what design wanted as the alternative.

In cloud distribution, completed jobs now show "Finished in Xh Ym Zs" instead of the filename as the primary text. Non-cloud continues to show the filename. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

coderabbitai · 2025-11-24T21:25:53Z

📝 Walkthrough

Walkthrough

The changes add cloud-aware rendering for completed jobs in the queue. When a job finishes in a cloud distribution context, the display shows "Finished in {duration}" instead of the filename or title. The isCloud flag is threaded from the composable through the display utilities, with a new translation entry supporting the feature.

Changes

Cohort / File(s)	Summary
Cloud-aware job completion display `src/composables/queue/useJobList.ts`, `src/utils/queueDisplay.ts`, `src/locales/en/main.json`	Added `isCloud?: boolean` to `BuildJobDisplayCtx` type. Updated completion state rendering to show localized "Finished in {duration}" when `isCloud` is true, falling back to filename or title otherwise. Threaded `isCloud` through composable to display utilities. Added translation entry for completed job duration.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/cloud-completed-duration-text

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between df373af and 3c8b4b6.

📒 Files selected for processing (3)

src/composables/queue/useJobList.ts (2 hunks)
src/locales/en/main.json (1 hunks)
src/utils/queueDisplay.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (14)

**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursorrules)

Use es-toolkit for utility functions

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

Use TypeScript for type safety

**/*.{ts,tsx}: Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (.cursorrules)

Implement proper error handling in components and services

**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in .prettierrc
Organize imports by sorting and grouping by plugin, and run pnpm format before committing

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use camelCase for variable and setting names in TypeScript/Vue files

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,vue}: Use const settingStore = useSettingStore() and settingStore.get('Comfy.SomeSetting') to retrieve settings in TypeScript/Vue files
Use await settingStore.set('Comfy.SomeSetting', newValue) to update settings in TypeScript/Vue files
Check server capabilities using api.serverSupportsFeature('feature_name') before using enhanced features
Use api.getServerFeature('config_name', defaultValue) to retrieve server feature configuration

Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
Use defaultsByInstallVersion property for gradual feature rollout based on version in settings configuration

Files:

src/utils/queueDisplay.ts
src/composables/queue/useJobList.ts

src/**/*.{ts,tsx,vue}