Skip to content

refactor(flowchat): Simplify background commands #2969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wsp1911 merged 1 commit into from
Sep 11, 2026
Merged

refactor(flowchat): Simplify background commands #2969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 17 additions & 10 deletions src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 ====================
Expand Down
4 changes: 2 additions & 2 deletions src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -468,7 +468,7 @@ describe('FlowChatHeader', () => {
);

const panel = document.querySelector<HTMLElement>('.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);
Expand Down
26 changes: 12 additions & 14 deletions src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
? t('flowChatHeader.sessionOverviewBackgroundFinished', {
count: backgroundCommandCount,
})
: t('flowChatHeader.backgroundTerminalEmpty');
: t('flowChatHeader.backgroundCommandEmpty');
let pullRequestOverviewSummary: string;
switch (pullRequestOverview.status) {
case 'loading':
Expand Down Expand Up @@ -807,9 +807,6 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
>
<span className="flowchat-header__session-overview-section-title">
<OverflowText>{t('flowChatHeader.backgroundCommandOverview')}</OverflowText>
{runningBackgroundCommandCount > 0 ? (
<span className="flowchat-header__session-overview-section-status" aria-hidden="true" />
) : null}
</span>
<span className="flowchat-header__session-overview-section-count" aria-hidden="true">
{backgroundCommandCount}
Expand Down Expand Up @@ -871,19 +868,20 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
type="button"
className="flowchat-header__background-command-list-item-button flowchat-header__background-command-open-button"
onClick={() => handleCommandSelect(command)}
aria-label={`${command.title}, ${t(command.status === 'running'
? 'flowChatHeader.backgroundCommandStatusRunning'
: 'flowChatHeader.backgroundCommandStatusFinished')}`}
>
<span className="flowchat-header__background-command-list-title">
<Icon name="terminal" size="xs" aria-hidden="true" />
<span
className="flowchat-header__background-command-icon"
data-running={command.status === 'running' ? 'true' : undefined}
aria-hidden="true"
>
<Icon name="terminal" size="xs" />
</span>
<OverflowText>{command.title}</OverflowText>
</span>
<OverflowText className="flowchat-header__background-command-list-meta">
{[
t('flowChatHeader.backgroundCommandSession', { id: command.execSessionId }),
command.status === 'running'
? t('flowChatHeader.backgroundCommandStatusRunning')
: t('flowChatHeader.backgroundCommandStatusFinished'),
].filter(Boolean).join(' · ')}
</OverflowText>
</button>
{renderBackgroundCommandActions(command)}
</div>
Expand All @@ -897,7 +895,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
data-openbitfun-state="empty"
data-testid="flowchat-header-background-empty"
>
{t('flowChatHeader.backgroundTerminalEmpty')}
{t('flowChatHeader.backgroundCommandEmpty')}
</div>
)}
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/web-ui/src/locales/en-US/flow-chat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1404,12 +1404,10 @@
"error": "$t(shared:statuses.failed)",
"idle": "Idle"
},
"backgroundCommandOverview": "Background terminals",
"backgroundCommandOverview": "Background commands",
"backgroundCommands": "Background commands ({{count}})",
"backgroundCommandEmpty": "No background commands",
"backgroundTerminalEmpty": "No background terminals",
"backgroundCommandUntitled": "Background command",
"backgroundCommandSession": "Session #{{id}}",
"backgroundCommandStatusRunning": "Active",
"backgroundCommandStatusFinished": "Finished",
"backgroundCommandActions": "Command actions",
Expand Down
4 changes: 1 addition & 3 deletions src/web-ui/src/locales/zh-CN/flow-chat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1404,12 +1404,10 @@
"error": "$t(shared:statuses.failed)",
"idle": "空闲"
},
"backgroundCommandOverview": "后台终端",
"backgroundCommandOverview": "后台命令",
"backgroundCommands": "后台命令（{{count}}）",
"backgroundCommandEmpty": "暂无后台命令",
"backgroundTerminalEmpty": "暂无后台终端",
"backgroundCommandUntitled": "后台命令",
"backgroundCommandSession": "会话 #{{id}}",
"backgroundCommandStatusRunning": "进行中",
"backgroundCommandStatusFinished": "已结束",
"backgroundCommandActions": "命令操作",
Expand Down
4 changes: 1 addition & 3 deletions src/web-ui/src/locales/zh-TW/flow-chat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1404,12 +1404,10 @@
"error": "$t(shared:statuses.failed)",
"idle": "閒置"
},
"backgroundCommandOverview": "背景終端",
"backgroundCommandOverview": "背景命令",
"backgroundCommands": "背景命令（{{count}}）",
"backgroundCommandEmpty": "目前沒有背景命令",
"backgroundTerminalEmpty": "目前沒有背景終端",
"backgroundCommandUntitled": "背景命令",
"backgroundCommandSession": "會話 #{{id}}",
"backgroundCommandStatusRunning": "進行中",
"backgroundCommandStatusFinished": "已結束",
"backgroundCommandActions": "命令操作",
Expand Down
Loading