Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix: should allow autoCols=true when server doesn't provide size (#7132)
## Summary

set autoCols = true by default for Logs Terminal

## Changes
Previously, the logs terminal had autoCols: false to preserve
server-side progress bar rendering, However, this caused large black
empty areas when the server terminal was narrower than the UI panel,
Many server environments don't provide terminal size at all, making this
tradeoff not worthwhile.

The original implementation set autoCols: false because the server
renders progress bars based on its own terminal width. If the frontend
used a different column count, progress bars would display incorrectly
(e.g., wrapped or truncated).

However, this created a poor user experience:
1. The terminal only filled a portion of the panel width (often 80
columns)
  2. The remaining space appeared as a large black empty area
3. Many backend environments don't provide size data at all, making the
fixed-width approach pointless

fix #7117

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce

after

https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a)
by [Unito](https://www.unito.io)
  • Loading branch information
jtydhr88 authored and github-actions[bot] committed Dec 8, 2025
commit 4195b29bdb8df2da86a9d0a82037dead2bdabe97
19 changes: 7 additions & 12 deletions src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import type { Ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'

import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
import { api } from '@/scripts/api'
import { useExecutionStore } from '@/stores/executionStore'

Expand All @@ -32,27 +32,22 @@ const terminalCreated = (
{ terminal, useAutoSize }: ReturnType<typeof useTerminal>,
root: Ref<HTMLElement | undefined>
) => {
// `autoCols` is false because we don't want the progress bar in the terminal
// to render incorrectly as the progress bar is rendered based on the
// server's terminal size.
// Apply a min cols of 80 for colab environments
// Auto-size terminal to fill container width.
// minCols: 80 ensures minimum width for colab environments.
// See https://github.com/comfyanonymous/ComfyUI/issues/6396
useAutoSize({ root, autoRows: true, autoCols: false, minCols: 80 })
useAutoSize({ root, autoRows: true, autoCols: true, minCols: 80 })

const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
if (size) {
terminal.resize(size.cols, terminal.rows)
}
const update = (entries: Array<LogEntry>) => {
terminal.write(entries.map((e) => e.m).join(''))
}

const logReceived = (e: CustomEvent<LogsWsMessage>) => {
update(e.detail.entries, e.detail.size)
update(e.detail.entries)
}

const loadLogEntries = async () => {
const logs = await api.getRawLogs()
update(logs.entries, logs.size)
update(logs.entries)
}

const watchLogs = async () => {
Expand Down
Loading