feat(ui): add customizable status line with /statusline command

packages/cli/src/commands/channel/pidfile.test.ts

@@ -86,7 +86,7 @@ describe('writeServiceInfo + readServiceInfo', () => {
     writeServiceInfo(['telegram']);
 
     // Now simulate dead process
-     
+
     process.kill = vi.fn(() => {
       throw new Error('ESRCH');
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -122,7 +122,6 @@ describe('signalService', () => {
   });
 
   it('returns false when process is not found', () => {
-
     process.kill = vi.fn(() => {
       throw new Error('ESRCH');
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -140,7 +139,6 @@ describe('signalService', () => {
 
 describe('waitForExit', () => {
   it('returns true immediately if process is already dead', async () => {
-
     process.kill = vi.fn(() => {
       throw new Error('ESRCH');
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -152,7 +150,7 @@ describe('waitForExit', () => {
 
   it('returns true when process dies within timeout', async () => {
     let alive = true;
-     
+
     process.kill = vi.fn(() => {
       if (!alive) throw new Error('ESRCH');
       return true;

packages/cli/src/config/settingsSchema.ts

@@ -429,6 +429,17 @@ const SETTINGS_SCHEMA = {
         description: 'The color theme for the UI.',
         showInDialog: true,
       },
+      statusLine: {
+        type: 'object',
+        label: 'Status Line',
+        category: 'UI',
+        requiresRestart: false,
+        default: undefined as
+          | { type: 'command'; command: string; padding?: number }
+          | undefined,
+        description: 'Custom status line display configuration.',
+        showInDialog: false,
+      },
       customThemes: {
         type: 'object',
         label: 'Custom Themes',

packages/cli/src/services/BuiltinCommandLoader.ts

@@ -47,6 +47,7 @@ import { toolsCommand } from '../ui/commands/toolsCommand.js';
 import { vimCommand } from '../ui/commands/vimCommand.js';
 import { setupGithubCommand } from '../ui/commands/setupGithubCommand.js';
 import { insightCommand } from '../ui/commands/insightCommand.js';
+import { statuslineCommand } from '../ui/commands/statuslineCommand.js';
 
 const builtinDebugLogger = createDebugLogger('BUILTIN_COMMAND_LOADER');
 
@@ -118,6 +119,7 @@ export class BuiltinCommandLoader implements ICommandLoader {
       setupGithubCommand,
       terminalSetupCommand,
       insightCommand,
+      statuslineCommand,
     ];
 
     return allDefinitions.filter((cmd): cmd is SlashCommand => cmd !== null);

packages/cli/src/ui/commands/statuslineCommand.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { SlashCommand, SubmitPromptActionReturn } from './types.js';
+import { CommandKind } from './types.js';
+import { t } from '../../i18n/index.js';
+
+export const statuslineCommand: SlashCommand = {
+  name: 'statusline',
+  get description() {
+    return t("Set up Qwen Code's status line UI");
+  },
+  kind: CommandKind.BUILT_IN,
+  action: (_context, args): SubmitPromptActionReturn => {
+    const prompt =
+      args.trim() || 'Configure my statusLine from my shell PS1 configuration';
+    return {
+      type: 'submit_prompt',
+      content: [
+        {
+          text: `Create an Agent with subagent_type "statusline-setup" and the following prompt:\n\n${prompt}`,
+        },
+      ],
+    };
+  },
+};

packages/cli/src/ui/components/Footer.test.tsx

@@ -11,6 +11,7 @@ import * as useTerminalSize from '../hooks/useTerminalSize.js';
 import { type UIState, UIStateContext } from '../contexts/UIStateContext.js';
 import { ConfigContext } from '../contexts/ConfigContext.js';
 import { VimModeProvider } from '../contexts/VimModeContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
 import type { LoadedSettings } from '../../config/settings.js';
 
 vi.mock('../hooks/useTerminalSize.js');
@@ -52,14 +53,17 @@ const createMockSettings = (): LoadedSettings =>
 
 const renderWithWidth = (width: number, uiState: UIState) => {
   useTerminalSizeMock.mockReturnValue({ columns: width, rows: 24 });
+  const mockSettings = createMockSettings();
   return render(
-    <ConfigContext.Provider value={createMockConfig() as never}>
-      <VimModeProvider settings={createMockSettings()}>
-        <UIStateContext.Provider value={uiState}>
-          <Footer />
-        </UIStateContext.Provider>
-      </VimModeProvider>
-    </ConfigContext.Provider>,
+    <SettingsContext.Provider value={mockSettings}>
+      <ConfigContext.Provider value={createMockConfig() as never}>
+        <VimModeProvider settings={mockSettings}>
+          <UIStateContext.Provider value={uiState}>
+            <Footer />
+          </UIStateContext.Provider>
+        </VimModeProvider>
+      </ConfigContext.Provider>
+    </SettingsContext.Provider>,
   );
 };
 

packages/cli/src/ui/components/Footer.tsx

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2025 Qwen
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -13,6 +13,7 @@ import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
+import { useStatusLine } from '../hooks/useStatusLine.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
 import { useVimMode } from '../contexts/VimModeContext.js';
@@ -23,6 +24,7 @@ export const Footer: React.FC = () => {
   const uiState = useUIState();
   const config = useConfig();
   const { vimEnabled, vimMode } = useVimMode();
+  const { text: statusLineText, padding: statusLinePadding } = useStatusLine();
 
   const { promptTokenCount, showAutoAcceptIndicator } = {
     promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
@@ -48,7 +50,8 @@ export const Footer: React.FC = () => {
   const contextWindowSize =
     config.getContentGeneratorConfig()?.contextWindowSize;
 
-  // Left section should show exactly ONE thing at any time, in priority order.
+  // Left section shows one item in priority order, or nothing when a custom
+  // status line is active (status line occupies its own row below).
   const leftContent = uiState.ctrlCPressedOnce ? (
     <Text color={theme.status.warning}>{t('Press Ctrl+C again to exit.')}</Text>
   ) : uiState.ctrlDPressedOnce ? (
@@ -62,7 +65,7 @@ export const Footer: React.FC = () => {
   ) : showAutoAcceptIndicator !== undefined &&
     showAutoAcceptIndicator !== ApprovalMode.DEFAULT ? (
     <AutoAcceptIndicator approvalMode={showAutoAcceptIndicator} />
-  ) : (
+  ) : statusLineText ? null : (
     <Text color={theme.text.secondary}>{t('? for shortcuts')}</Text>
   );
 
@@ -93,32 +96,46 @@ export const Footer: React.FC = () => {
       ),
     });
   }
+
+  // When a custom status line is configured, render it as a dedicated row
+  // beneath the standard footer (matching upstream placement).
   return (
-    <Box
-      justifyContent="space-between"
-      width="100%"
-      flexDirection="row"
-      alignItems="center"
-    >
-      {/* Left Section: Exactly one status line (exit prompts / mode indicator / default hint) */}
+    <Box flexDirection="column" width="100%">
       <Box
-        marginLeft={2}
-        justifyContent="flex-start"
-        flexDirection={isNarrow ? 'column' : 'row'}
-        alignItems={isNarrow ? 'flex-start' : 'center'}
+        justifyContent="space-between"
+        width="100%"
+        flexDirection="row"
+        alignItems="center"
       >
-        {leftContent}
-      </Box>
+        {/* Left Section */}
+        <Box
+          marginLeft={2}
+          justifyContent="flex-start"
+          flexDirection={isNarrow ? 'column' : 'row'}
+          alignItems={isNarrow ? 'flex-start' : 'center'}
+        >
+          {leftContent}
+        </Box>
 
-      {/* Right Section: Sandbox Info, Debug Mode, Context Usage, and Console Summary */}
-      <Box alignItems="center" justifyContent="flex-end" marginRight={2}>
-        {rightItems.map(({ key, node }, index) => (
-          <Box key={key} alignItems="center">
-            {index > 0 && <Text color={theme.text.secondary}> | </Text>}
-            {node}
-          </Box>
-        ))}
+        {/* Right Section */}
+        <Box alignItems="center" justifyContent="flex-end" marginRight={2}>
+          {rightItems.map(({ key, node }, index) => (
+            <Box key={key} alignItems="center">
+              {index > 0 && <Text color={theme.text.secondary}> | </Text>}
+              {node}
+            </Box>
+          ))}
+        </Box>
       </Box>
+
+      {/* Custom status line row */}
+      {statusLineText && (
+        <Box paddingX={statusLinePadding}>
+          <Text dimColor wrap="truncate">
+            {statusLineText}
+          </Text>
+        </Box>
+      )}
     </Box>
   );
 };