fix(tui): refresh terminal interface design

Author: elkaix

.agents/skills/write-tui/DESIGN.md

@@ -83,13 +83,13 @@
  Select a model  (type to search)
  Tab toggle provider · ↑↓ navigate · Enter select · Esc cancel   ← hint 首项即 Tab 切换
                                             ← 空行
- All   Pythinker Code   openai                   ← tab 条：激活项填充背景（primary 底 + text 字 + bold），其余 textMuted
+ All   Pythinker Code   openai                   ← tab 条：激活项填充背景（selectionBg 底 + inverseText 字 + bold），其余 textMuted
                                             ← 空行
   ❯ ...
 ```
 
 - tab 条位置：**在 hint 行下方**，且**上下各一空行**（与 hint、与列表都隔开）。
-- 激活 tab：`chalk.bgHex(colors.primary).hex(colors.text).bold(\` ${label} \`)`；非激活：`chalk.hex(colors.textMuted)`。两者可见宽度一致，切换不抖动。
+- 激活 tab：`chalk.bgHex(colors.selectionBg).hex(colors.inverseText).bold(\` ${label} \`)`；非激活：`chalk.hex(colors.textMuted)`。两者可见宽度一致，切换不抖动。
 - 第一个 tab 恒为 `All`（聚合所有 provider）；**默认停在 `All`**。仅当显式传 `initialTabId`（如 `/provider` 新增完跳转）才停在指定 provider tab。
 - `Tab` / `Shift+Tab` 循环切换；hint 行首项即 `Tab toggle provider`。
 - 当前模型在所在 tab 内仍以 `❯` + ` ← current` 标记，切 tab 不丢失定位。

.changeset/refresh-cli-tui.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Update the terminal interface colors, transcript hierarchy, welcome panel, and workflow progress states.

apps/pythinker-code/src/tui/components/chrome/footer.ts

@@ -33,7 +33,19 @@ import {
   usagePercentFromRatio,
 } from '#/utils/usage/usage-format';
 
-const DEFAULT_STATUS_LINE_ITEMS = ['mode', 'goal', 'model', 'tasks', 'cwd', 'git'] as const;
+const DEFAULT_STATUS_LINE_LAYOUT = [
+  { slot: 'mode', collapsePriority: null },
+  { slot: 'goal', collapsePriority: null },
+  { slot: 'model', collapsePriority: 2 },
+  { slot: 'tasks', collapsePriority: 1 },
+  { slot: 'cwd', collapsePriority: 3 },
+  { slot: 'git', collapsePriority: 0 },
+] as const;
+const DEFAULT_STATUS_LINE_ITEMS = DEFAULT_STATUS_LINE_LAYOUT.map(({ slot }) => slot);
+const DEFAULT_STATUS_LINE_COLLAPSE_ORDER = DEFAULT_STATUS_LINE_LAYOUT
+  .filter(({ collapsePriority }) => collapsePriority !== null)
+  .toSorted((left, right) => left.collapsePriority! - right.collapsePriority!)
+  .map(({ slot }) => slot);
 
 const MAX_CWD_SEGMENTS = 3;
 const GOAL_TIMER_INTERVAL_MS = 1_000;
@@ -313,13 +325,23 @@ export class FooterComponent implements Component {
       const slots = this.buildSlots(colors);
       const configured = this.state.statusLine?.items ?? null;
       const order: readonly string[] = configured ?? DEFAULT_STATUS_LINE_ITEMS;
-      const left: string[] = [];
+      let left: Array<{ slot: string; piece: string }> = [];
       for (const slot of order) {
         const pieces = slots[slot as keyof typeof slots];
-        if (pieces !== undefined) left.push(...pieces);
+        if (pieces !== undefined) {
+          left.push(...pieces.map((piece) => ({ slot, piece })));
+        }
+      }
+
+      let leftLine = left.map(({ piece }) => piece).join('  ');
+      if (configured === null) {
+        for (const slot of DEFAULT_STATUS_LINE_COLLAPSE_ORDER) {
+          if (visibleWidth(leftLine) <= width) break;
+          left = left.filter((entry) => entry.slot !== slot);
+          leftLine = left.map(({ piece }) => piece).join('  ');
+        }
       }
 
-      const leftLine = left.join('  ');
       const leftWidth = visibleWidth(leftLine);
 
       // Rotating hint tips stay on the right unless they were given an
@@ -405,9 +427,13 @@ export class FooterComponent implements Component {
     }
 
     const modes: string[] = [];
-    if (state.permissionMode === 'auto') modes.push(chalk.hex(colors.warning).bold('auto'));
-    if (state.permissionMode === 'yolo') modes.push(chalk.hex(colors.warning).bold('yolo'));
-    if (state.planMode) modes.push(chalk.hex(colors.primary).bold('plan'));
+    if (state.permissionMode === 'auto') {
+      modes.push(chalk.hex(colors.modeAutoAccept).bold('auto'));
+    }
+    if (state.permissionMode === 'yolo') {
+      modes.push(chalk.hex(colors.modePermission).bold('yolo'));
+    }
+    if (state.planMode) modes.push(chalk.hex(colors.modePlan).bold('plan'));
     if (state.dynamicWorkflowMode) modes.push(chalk.hex(colors.accent).bold('dynamic_workflow'));
     if (state.towerMode) modes.push(chalk.hex(colors.accent).bold('tower'));
     if (modes.length > 0) slots['mode'] = [modes.join(' ')];
@@ -430,12 +456,10 @@ export class FooterComponent implements Component {
             ? ` thinking: ${effort}`
             : ' thinking'
           : '';
-      const modelLabel = `${model}${thinkingLabel}`;
-      let renderedModelLabel = chalk.hex(colors.text)(modelLabel);
-      if (isRainbowHatching()) {
-        renderedModelLabel = renderHatchFooterModel(modelLabel);
-      }
-      slots['model'] = [renderedModelLabel];
+      const renderedModel = isRainbowHatching()
+        ? renderHatchFooterModel(model)
+        : chalk.hex(colors.primary)(model);
+      slots['model'] = [renderedModel + chalk.hex(colors.textDim)(thinkingLabel)];
     }
 
     // Background-task badges. `bash-*` tasks (shell processes) and `agent-*`

apps/pythinker-code/src/tui/components/chrome/welcome-banner.ts

@@ -164,16 +164,22 @@ function wrapPlain(text: string, maxWidth: number): string[] {
 }
 
 function valueStyleForLabel(label: string, level: WelcomeInfoLevel): ColorToken {
-  if (level === 'warn') return 'warning';
-  if (level === 'error') return 'error';
+  switch (level) {
+    case 'warn':
+      return 'warning';
+    case 'error':
+      return 'error';
+    case 'info':
+      break;
+  }
   switch (label.trim()) {
     case 'Directory':
       return 'accent';
     case 'Session':
     case 'Branch':
       return 'textDim';
     case 'Model':
-      return 'warning';
+      return 'primary';
     case 'Auto-save':
       return 'textMuted';
     default:
@@ -393,10 +399,10 @@ export function renderWelcomeBanner(options: RenderWelcomeBannerOptions): string
     const modelItem = options.infoItems.find((item) => item.name === 'Model');
     if (modelItem !== undefined) {
       const value = asciiMode ? applyAsciiFallback(modelItem.value) : modelItem.value;
-      const modelLine =
-        modelItem.level === 'warn'
-          ? `Model: ${currentTheme.fg('warning', value)}`
-          : `Model: ${value}`;
+      const modelLine = `Model: ${currentTheme.fg(
+        valueStyleForLabel('Model', modelItem.level ?? 'info'),
+        value,
+      )}`;
       lines.push(truncateToWidth(modelLine, safeWidth, ellipsis));
     }
     return lines;

apps/pythinker-code/src/tui/components/dialogs/question-dialog.ts

@@ -610,7 +610,7 @@ export class QuestionDialogComponent extends Container implements Focusable {
   private pushTabs(lines: string[]): void {
     const dim = (text: string) => currentTheme.fg('textDim', text);
     const active = (text: string) =>
-      currentTheme.bg('primary', currentTheme.boldFg('text', text));
+      currentTheme.bg('selectionBg', currentTheme.boldFg('inverseText', text));
 
     const tabs: string[] = [];
     for (let i = 0; i < this.request.data.questions.length; i++) {

apps/pythinker-code/src/tui/components/messages/agent-group.ts

@@ -166,15 +166,15 @@ export class AgentGroupComponent extends Container {
       const totalTools = snapshots.reduce((acc, s) => acc + s.toolCount, 0);
       const totalTokens = snapshots.reduce((acc, s) => acc + s.tokens, 0);
       const tail = formatHeaderTail({ toolCount: totalTools, tokens: totalTokens, elapsedSeconds });
-      return `${bullet}${currentTheme.boldFg('primary', headerLabel)}${tail}`;
+      return `${bullet}${currentTheme.boldFg('textStrong', headerLabel)}${tail}`;
     }
 
     const parts = formatBreakdownParts(counts);
     const headerText = parts.length > 0
       ? `Running ${String(total)} agents (${parts.join(', ')})`
       : `Running ${String(total)} agents`;
     const tail = formatHeaderTail({ toolCount: 0, tokens: 0, elapsedSeconds });
-    return `${bullet}${currentTheme.boldFg('primary', headerText)}${tail}`;
+    return `${bullet}${currentTheme.boldFg('textStrong', headerText)}${tail}`;
   }
 
   private appendLines(snap: ToolCallSubagentSnapshot, isLast: boolean): void {

apps/pythinker-code/src/tui/components/messages/assistant-message.ts

@@ -1,7 +1,7 @@
 /**
  * Renders an assistant message using pi-tui Markdown.
  *
- * Displays a white bullet prefix with markdown content indented
+ * Displays a neutral bullet prefix with markdown content indented
  * to align after the bullet.
  */
 
@@ -122,7 +122,7 @@ export class AssistantMessageComponent implements Component {
     const lines: string[] = [''];
     for (let i = 0; i < contentLines.length; i++) {
       const p =
-        i === 0 && this.showBullet ? currentTheme.fg('text', STATUS_BULLET) : MESSAGE_INDENT;
+        i === 0 && this.showBullet ? currentTheme.fg('textDim', STATUS_BULLET) : MESSAGE_INDENT;
       lines.push(p + contentLines[i]);
     }
     const rendered = markOsc133Zone(lines.map((line) => truncateToWidth(line, safeWidth, '…')));

apps/pythinker-code/src/tui/components/messages/read-group.ts

@@ -135,7 +135,7 @@ export class ReadGroupComponent extends Container {
 
     if (pending > 0) {
       const bullet = currentTheme.fg('text', STATUS_BULLET);
-      const label = currentTheme.boldFg('primary', `Reading ${String(total)} files…`);
+      const label = currentTheme.boldFg('textStrong', `Reading ${String(total)} files…`);
       return `${bullet}${label}`;
     }
 
@@ -147,7 +147,7 @@ export class ReadGroupComponent extends Container {
     }
 
     const bullet = currentTheme.fg('success', STATUS_BULLET);
-    const label = currentTheme.boldFg('primary', `Read ${String(total)} files`);
+    const label = currentTheme.boldFg('textStrong', `Read ${String(total)} files`);
     const linesPart = dim(` · ${String(totalLines)} ${totalLines === 1 ? 'line' : 'lines'}`);
     const failPart = failed > 0 ? currentTheme.fg('error', ` · ${String(failed)} failed`) : '';
     return `${bullet}${label}${linesPart}${failPart}`;

apps/pythinker-code/src/tui/components/messages/tool-call.ts

@@ -710,7 +710,7 @@ export class ToolCallComponent extends Container {
           : 'toolPendingBg'
         : this.result.is_error === true
           ? 'toolErrorBg'
-          : 'toolSuccessBg';
+          : undefined;
     const rendered =
       background === undefined
         ? out
@@ -1523,7 +1523,7 @@ export class ToolCallComponent extends Container {
         return `${bullet}${currentTheme.fg('error', 'Truncated')} ${currentTheme.boldFg('primary', 'Bash')}`;
       }
       const label = isFinished ? 'Ran a command' : 'Running a command';
-      const tone = isError ? 'error' : 'primary';
+      const tone = isError ? 'error' : 'textStrong';
       const chipStr = isFinished && result !== undefined ? this.buildHeaderChip(result) : '';
       return `${bullet}${currentTheme.boldFg(tone, label)}${chipStr}`;
     }

apps/pythinker-code/src/tui/components/messages/user-message.ts

@@ -50,7 +50,8 @@ export class UserMessageComponent implements Component {
     }
 
     const marker = this.bullet ?? USER_MESSAGE_BULLET;
-    const bullet = marker.length > 0 ? currentTheme.boldFg('roleUser', marker) : '';
+    const isRoleMessage = marker.length > 0;
+    const bullet = isRoleMessage ? currentTheme.boldFg('roleUser', marker) : '';
     const bulletWidth = visibleWidth(bullet);
     const contentWidth = Math.max(1, safeWidth - bulletWidth);
 
@@ -63,11 +64,19 @@ export class UserMessageComponent implements Component {
 
     // Text is re-dyed from the current theme; invalidate() (theme change) clears
     // the render cache so the new colours are picked up on the next render.
-    const coloredText = currentTheme.boldFg('roleUser', this.text);
+    const coloredText = isRoleMessage ? currentTheme.fg('textStrong', this.text) : this.text;
     const textLines = new Text(coloredText, 0, 0).render(contentWidth);
     for (let i = 0; i < textLines.length; i++) {
       const prefix = i === 0 ? bullet : ' '.repeat(bulletWidth);
-      lines.push(prefix + textLines[i]);
+      const line = prefix + textLines[i];
+      lines.push(
+        isRoleMessage
+          ? currentTheme.bg(
+              'surfaceHighlight',
+              line + ' '.repeat(Math.max(0, safeWidth - visibleWidth(line))),
+            )
+          : line,
+      );
     }
 
     // Images — indented to align with text after the bullet