From c1aa2180c46985ca0b8e5a18d822a637d93004a3 Mon Sep 17 00:00:00 2001
From: claude-code-best <claude-code-best@proton.me>
Date: Sun, 14 Jun 2026 14:38:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(effort):=20=E9=9D=A2=E6=9D=BF=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E4=B8=8E=E9=85=8D=E8=89=B2=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 对齐：用 Box width={SEGMENT} + justifyContent="center" 让 ▲ 与档位名严格居中对齐，
  替代之前 string padEnd(11) 与 SEGMENT=12 不一致导致的 1 列偏移
- 配色：所有面板文字改用 theme.claude（Claude Orange rgb(215,119,87)），
  替代终端默认紫；分隔线/副标签/底栏用 theme.subtle；env 警告用 theme.warning
- 光标档位的档位名也加粗，强化视觉焦点

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>
---
 src/components/EffortPanel/EffortPanel.tsx | 75 ++++++++++++----------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/components/EffortPanel/EffortPanel.tsx b/src/components/EffortPanel/EffortPanel.tsx
index b79555e0e..7fd42ea91 100644
--- a/src/components/EffortPanel/EffortPanel.tsx
+++ b/src/components/EffortPanel/EffortPanel.tsx
@@ -15,8 +15,9 @@ import { executeEffort } from '../../commands/effort/effort.js';
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
 import { useSetAppState } from '../../state/AppState.js';
 
-// 终端 ≥ 80 cols 时使用；窄屏适配第二阶段处理
-const PANEL_WIDTH = 76;
+// 每档固定宽度，Ink Box 自动对齐。PANEL_WIDTH = SEGMENT * 6。
+const SEGMENT = 12;
+const PANEL_WIDTH = SEGMENT * PANEL_POSITIONS.length;
 const SUBLABEL_ULTRACODE = 'xhigh + workflows';
 
 type Props = {
@@ -24,19 +25,6 @@ type Props = {
   onDone: (message: string) => void;
 };
 
-// ▲ 落在每档中心列：均匀分布
-function cursorColumn(cursor: PanelPosition): number {
-  const segment = Math.floor(PANEL_WIDTH / PANEL_POSITIONS.length);
-  const idx = PANEL_POSITIONS.indexOf(cursor);
-  return segment * idx + Math.floor(segment / 2);
-}
-
-function renderPaddedLine(cursor: PanelPosition): string {
-  const col = cursorColumn(cursor);
-  // ▲ 上方的"分隔线 + 光标"行：左侧 ─，到列处 ▲，右侧继续 ─
-  return `${'─'.repeat(col)}▲${'─'.repeat(Math.max(0, PANEL_WIDTH - col - 1))}`;
-}
-
 export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode {
   const setAppState = useSetAppState();
   const model = useMainLoopModel();
@@ -82,28 +70,47 @@ export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode
   const envActive = envOverride !== null && envOverride !== undefined;
   const envRaw = process.env.CLAUDE_CODE_EFFORT_LEVEL;
 
-  // 两极文字行：左 Faster + 中间空格 + 右 Smarter
-  const fasterLen = 'Faster'.length;
-  const smarterLen = 'Smarter'.length;
-  const gap = Math.max(0, PANEL_WIDTH - fasterLen - smarterLen);
-  const poleLine = `Faster${' '.repeat(gap)}Smarter`;
-
   return (
-    <Box flexDirection="column" paddingX={1}>
-      <Text bold>Effort</Text>
-      {envActive && <Text color="ansi:yellow">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
-      <Box marginTop={1}>
-        <Text>{poleLine}</Text>
-      </Box>
-      <Text>{renderPaddedLine(cursor)}</Text>
-      <Text>
-        {PANEL_POSITIONS.map(p => (p as string).padEnd(11))
-          .join('')
-          .trimEnd()}
+    <Box flexDirection="column" paddingX={1} width={PANEL_WIDTH + 2}>
+      <Text bold color="claude">
+        Effort
       </Text>
-      <Text dimColor>{`${' '.repeat(Math.max(0, PANEL_WIDTH - SUBLABEL_ULTRACODE.length))}${SUBLABEL_ULTRACODE}`}</Text>
+      {envActive && <Text color="warning">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
+      <Box marginTop={1} flexDirection="row" justifyContent="space-between">
+        <Text color="claude">Faster</Text>
+        <Text color="claude">Smarter</Text>
+      </Box>
+      {/* 分隔线 */}
+      <Text color="subtle">{'─'.repeat(PANEL_WIDTH)}</Text>
+      {/* ▲ 行：每段独立居中，与下方档位文字严格对齐 */}
+      <Box flexDirection="row">
+        {PANEL_POSITIONS.map(p => (
+          <Box key={`cursor-${p}`} width={SEGMENT} justifyContent="center">
+            <Text bold color="claude">
+              {cursor === p ? '▲' : ' '}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+      {/* 档位名 */}
+      <Box flexDirection="row">
+        {PANEL_POSITIONS.map(p => (
+          <Box key={`label-${p}`} width={SEGMENT} justifyContent="center">
+            <Text bold={cursor === p} color="claude">
+              {p}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+      {/* ultracode 副标签：右对齐到最末段 */}
+      <Box flexDirection="row">
+        <Box width={SEGMENT * (PANEL_POSITIONS.length - 1)} />
+        <Box width={SEGMENT} justifyContent="center">
+          <Text color="subtle">{SUBLABEL_ULTRACODE}</Text>
+        </Box>
+      </Box>
       <Box marginTop={1}>
-        <Text dimColor>←/→ adjust · Enter confirm · Esc cancel</Text>
+        <Text color="subtle">←/→ adjust · Enter confirm · Esc cancel</Text>
       </Box>
     </Box>
   );