mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-04-28 11:41:04 +00:00
cecc960254
- Add AgentHeader component showing model, path, and git branch - Separate modelId and modelName in RegisteredAgent for cleaner display - Simplify worktree branch naming from worktrees/session/name to base-session-name - Change loading text from "Agent is working…" to "Thinking…" - Make agent footer always visible (not just when input is active) This improves the agent collaboration UX by providing context about each agent's environment and simplifies the git worktree management. Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Qwen Team
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Compact header for agent tabs, visually distinct from the
|
|
* main view's boxed logo header. Shows model, working directory, and git
|
|
* branch in a bordered info panel.
|
|
*/
|
|
|
|
import type React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import { shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
|
|
import { theme } from '../../semantic-colors.js';
|
|
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
|
|
|
|
interface AgentHeaderProps {
|
|
modelId: string;
|
|
modelName?: string;
|
|
workingDirectory: string;
|
|
gitBranch?: string;
|
|
}
|
|
|
|
export const AgentHeader: React.FC<AgentHeaderProps> = ({
|
|
modelId,
|
|
modelName,
|
|
workingDirectory,
|
|
gitBranch,
|
|
}) => {
|
|
const { columns: terminalWidth } = useTerminalSize();
|
|
const maxPathLen = Math.max(20, terminalWidth - 12);
|
|
const displayPath = shortenPath(tildeifyPath(workingDirectory), maxPathLen);
|
|
|
|
const modelText =
|
|
modelName && modelName !== modelId ? `${modelId} (${modelName})` : modelId;
|
|
|
|
return (
|
|
<Box
|
|
flexDirection="column"
|
|
marginX={2}
|
|
marginTop={1}
|
|
borderStyle="round"
|
|
borderColor={theme.border.default}
|
|
paddingX={1}
|
|
>
|
|
<Text>
|
|
<Text color={theme.text.secondary}>{'Model: '}</Text>
|
|
<Text color={theme.text.primary}>{modelText}</Text>
|
|
</Text>
|
|
<Text>
|
|
<Text color={theme.text.secondary}>{'Path: '}</Text>
|
|
<Text color={theme.text.primary}>{displayPath}</Text>
|
|
</Text>
|
|
{gitBranch && (
|
|
<Text>
|
|
<Text color={theme.text.secondary}>{'Branch: '}</Text>
|
|
<Text color={theme.text.primary}>{gitBranch}</Text>
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|