feat(arena): improve agent UI with header info and simplify worktree branches

- 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>

packages/cli/src/ui/components/agent-view/AgentHeader.tsx

@@ -0,0 +1,64 @@
+/**
+ * @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>
+  );
+};