diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss index c195b0b864..9e4a0f2d7c 100644 --- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss +++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss @@ -396,9 +396,7 @@ &__background-command-list-item-button { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; + align-items: center; width: 100%; padding: var(--openbitfun-space-2); border: 0; @@ -492,18 +490,27 @@ opacity: 0.82; } - span:not([data-overflow-content]) { + span:not([data-overflow-content]):not(.flowchat-header__background-command-icon) { min-width: 0; overflow: hidden; } } - &__background-command-list-meta { - width: 100%; - font-size: var(--openbitfun-type-flow-support-font-size); - color: var(--openbitfun-color-content-secondary); - white-space: nowrap; - overflow: hidden; + &__background-command-icon { + position: relative; + display: inline-flex; + flex: 0 0 auto; + + &[data-running='true']::after { + content: ''; + position: absolute; + right: -1px; + bottom: -1px; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--openbitfun-color-status-success-emphasis); + } } // ==================== Actions ==================== diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx index c2dc39710d..86f5f6ea6f 100644 --- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx +++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx @@ -439,7 +439,7 @@ describe('FlowChatHeader', () => { expect(items[2]?.querySelector('svg')).toBeNull(); expect(panel?.querySelector('[data-testid="flowchat-header-session-tree-content"]')).not.toBeNull(); expect(panel?.querySelector('[data-testid="flowchat-header-background-empty"]')?.textContent) - .toBe('flowChatHeader.backgroundTerminalEmpty'); + .toBe('flowChatHeader.backgroundCommandEmpty'); expect(panel?.querySelector('[data-testid="flowchat-header-pull-requests-empty"]')?.textContent) .toBe('flowChatHeader.pullRequestEmpty'); expect(panel?.querySelector('[data-testid="flowchat-header-session-overview-back"]')).toBeNull(); @@ -468,7 +468,7 @@ describe('FlowChatHeader', () => { ); const panel = document.querySelector('.flowchat-header__session-overview-panel'); - expect(commandSection?.textContent).toContain('flowChatHeader.backgroundTerminalEmpty'); + expect(commandSection?.textContent).toContain('flowChatHeader.backgroundCommandEmpty'); expect(panel?.parentElement?.getAttribute('data-openbitfun-overlay-host')).toBe('true'); expect(panel?.style.visibility).toBe('visible'); expect(panel?.hasAttribute('data-openbitfun-view')).toBe(false); diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx index d64528bc31..ae3f8765ec 100644 --- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx +++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx @@ -548,7 +548,7 @@ export const FlowChatHeader: React.FC = ({ ? t('flowChatHeader.sessionOverviewBackgroundFinished', { count: backgroundCommandCount, }) - : t('flowChatHeader.backgroundTerminalEmpty'); + : t('flowChatHeader.backgroundCommandEmpty'); let pullRequestOverviewSummary: string; switch (pullRequestOverview.status) { case 'loading': @@ -807,9 +807,6 @@ export const FlowChatHeader: React.FC = ({ > {t('flowChatHeader.backgroundCommandOverview')} - {runningBackgroundCommandCount > 0 ? ( -