feat(flow-chat): keep background commands accessible when idle

src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss

@@ -269,6 +269,17 @@
     scrollbar-gutter: stable;
   }
 
+  &__background-command-empty-state {
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $size-gap-3;
+    color: var(--bf-appearance-token-color-text-secondary);
+    font-size: var(--bf-appearance-token-flowchat-font-size-xs);
+    text-align: center;
+  }
+
   &__background-command-list-item-button {
     display: flex;
     flex-direction: column;

src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx

@@ -157,6 +157,24 @@ describe('FlowChatHeader', () => {
     expect(treeContainer?.nextElementSibling).toBe(commandContainer);
   });
 
+  it('opens the background command panel when no commands exist', () => {
+    act(() => {
+      root.render(<FlowChatHeader {...createProps()} />);
+    });
+
+    const commandButton = container.querySelector<HTMLButtonElement>(
+      '[data-testid="flowchat-header-background-commands"]',
+    );
+    expect(commandButton?.disabled).toBe(false);
+
+    act(() => {
+      commandButton?.click();
+    });
+
+    const panel = container.querySelector('.flowchat-header__background-command-panel');
+    expect(panel?.textContent).toContain('flowChatHeader.backgroundCommandEmpty');
+  });
+
   it('renders background command menus in a portal outside the scrollable panel', () => {
     const onStopBackgroundCommand = vi.fn();
     const onStopAllBackgroundCommands = vi.fn();

src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx

@@ -220,12 +220,11 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
   }, [searchOpenRequest]);
 
   useEffect(() => {
-    if (!hasBackgroundCommands) {
-      setIsBackgroundCommandPanelOpen(false);
-      setIsBackgroundCommandSectionMenuOpen(false);
-      setOpenBackgroundCommandMenuId(null);
-      setBackgroundCommandMenuPosition(null);
-    }
+    if (hasBackgroundCommands) return;
+
+    setIsBackgroundCommandSectionMenuOpen(false);
+    setOpenBackgroundCommandMenuId(null);
+    setBackgroundCommandMenuPosition(null);
   }, [hasBackgroundCommands]);
 
   useEffect(() => {
@@ -299,7 +298,6 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
   );
 
   const handleToggleBackgroundCommandPanel = () => {
-    if (!hasBackgroundCommands) return;
     setIsBackgroundCommandSectionMenuOpen(false);
     setOpenBackgroundCommandMenuId(null);
     setIsBackgroundCommandPanelOpen(prev => !prev);
@@ -535,7 +533,6 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
             size="xs"
             onClick={handleToggleBackgroundCommandPanel}
             tooltip={backgroundCommandLabel}
-            disabled={!hasBackgroundCommands}
             aria-label={backgroundCommandLabel}
             aria-expanded={isBackgroundCommandPanelOpen}
             aria-haspopup="dialog"
@@ -552,7 +549,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
             </span>
           </IconButton>
 
-          {isBackgroundCommandPanelOpen && hasBackgroundCommands && (
+          {isBackgroundCommandPanelOpen && (
             <div
               className="flowchat-header__background-command-panel"
               data-bf-component="flow-chat-header"
@@ -563,7 +560,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
               <div className="flowchat-header__background-command-panel-header">
                 <span>{backgroundCommandLabel}</span>
                 <div className="flowchat-header__background-command-panel-header-actions">
-                  {onStopAllBackgroundCommands ? (
+                  {hasBackgroundCommands && onStopAllBackgroundCommands ? (
                     <IconButton
                       className="flowchat-header__background-command-menu-button"
                       variant="ghost"
@@ -612,7 +609,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
                 data-bf-component="flow-chat-header"
                 data-bf-part="activitySection"
               >
-                {displayBackgroundCommands.map((command) => (
+                {hasBackgroundCommands ? displayBackgroundCommands.map((command) => (
                   <div
                     key={command.execSessionKey}
                     className="flowchat-header__background-command-list-item"
@@ -637,7 +634,11 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
                     </button>
                     {renderBackgroundCommandActions(command)}
                   </div>
-                ))}
+                )) : (
+                  <div className="flowchat-header__background-command-empty-state">
+                    {t('flowChatHeader.backgroundCommandEmpty')}
+                  </div>
+                )}
               </div>
             </div>
           )}

src/web-ui/src/locales/en-US/flow-chat.json

@@ -1257,6 +1257,7 @@
       "idle": "Idle"
     },
     "backgroundCommands": "Background commands ({{count}})",
+    "backgroundCommandEmpty": "No background commands",
     "backgroundCommandUntitled": "Background command",
     "backgroundCommandSession": "Session #{{id}}",
     "backgroundCommandStatusRunning": "Active",

src/web-ui/src/locales/zh-CN/flow-chat.json

@@ -1257,6 +1257,7 @@
       "idle": "空闲"
     },
     "backgroundCommands": "后台命令（{{count}}）",
+    "backgroundCommandEmpty": "暂无后台命令",
     "backgroundCommandUntitled": "后台命令",
     "backgroundCommandSession": "会话 #{{id}}",
     "backgroundCommandStatusRunning": "进行中",

src/web-ui/src/locales/zh-TW/flow-chat.json

@@ -1257,6 +1257,7 @@
       "idle": "閒置"
     },
     "backgroundCommands": "背景命令（{{count}}）",
+    "backgroundCommandEmpty": "目前沒有背景命令",
     "backgroundCommandUntitled": "背景命令",
     "backgroundCommandSession": "會話 #{{id}}",
     "backgroundCommandStatusRunning": "進行中",