fix(tui): honor status_line toggles and calm the shimmer sweep

Gate the status bar model, effort, and mode chips on their status_line
settings, drop the effort suffix when thinking is off, and paint the
yolo badge with the error token. Slow the shimmer sweep and alternate
the mission-control peak with a warning highlight; remove the dead
frame option in favor of a documented bandHalfWidth.

Author: elkaix

.changeset/tui-signature-design.md

@@ -2,4 +2,4 @@
 "@pythoughts/pythinker-code": minor
 ---
 
-Redesign core TUI surfaces: tool cards get state-tinted backgrounds (running, success, error — three new theme tokens), a status bar with a per-session accent color appears above the input box, the input border reflects yolo and auto permission modes, and the working-label shimmer uses a smoother constant-velocity sweep.
+Redesign core TUI surfaces: tool cards get state-tinted backgrounds with three new theme tokens, a status bar with a per-session accent color appears between the input box and footer, and the input border reflects yolo and auto permission modes. The working-label shimmer uses a calmer constant-velocity sweep with alternating mission-control highlights.

apps/pythinker-code/src/tui/components/chrome/activity-loader.ts

@@ -89,7 +89,6 @@ export class ActivityLoader extends Text {
       ? shimmerText(this.label, {
           baseToken: 'primary',
           shimmerToken: 'primaryShimmer',
-          frame: this.animationFrame,
         })
       : this.label;
     this.displayText = label ? `${coloredFrame} ${label}` : coloredFrame;

apps/pythinker-code/src/tui/components/chrome/status-bar.ts

@@ -3,6 +3,7 @@ import { sep } from 'node:path';
 import { truncateToWidth, visibleWidth, type Component } from '@earendil-works/pi-tui';
 import chalk from 'chalk';
 
+import type { StatusLineConfig } from '#/tui/config';
 import type { FooterStatus } from '#/tui/runtime/footer/footer-model';
 import { currentTheme } from '#/tui/theme';
 import { themeFromHexChannels } from '#/tui/theme/terminal-background';
@@ -22,6 +23,7 @@ export type StatusBarStatus = Pick<
 > & {
   readonly extras: readonly string[];
   readonly sessionKey: string;
+  readonly statusLine: StatusLineConfig;
 };
 
 export class StatusBarComponent implements Component {
@@ -35,13 +37,16 @@ export class StatusBarComponent implements Component {
     const status = this.status;
     if (status === undefined) return [];
 
-    const modelChip = chip(
-      `${currentTheme.fg('text', status.model)}${currentTheme.fg('textDim', ' · ')}${currentTheme.fg(
-        effortColorToken(status.thinkingLevel),
-        shortEffortLabel(status.thinkingLevel),
-      )}`,
-    );
-    let modesChip = renderModesChip(status);
+    const effortSuffix = status.statusLine.showEffort && status.thinkingLevel !== 'off'
+      ? `${currentTheme.fg('textDim', ' · ')}${currentTheme.fg(
+          effortColorToken(status.thinkingLevel),
+          shortEffortLabel(status.thinkingLevel),
+        )}`
+      : '';
+    const modelChip = status.statusLine.showModel
+      ? chip(`${currentTheme.fg('text', status.model)}${effortSuffix}`)
+      : undefined;
+    let modesChip = status.statusLine.showModes ? renderModesChip(status) : undefined;
     const extraChips = status.extras.map((extra) =>
       chip(currentTheme.fg('textDim', extra)),
     );
@@ -95,7 +100,7 @@ function renderModesChip(status: StatusBarStatus): string | undefined {
   const modes: string[] = [];
   if (status.planMode) modes.push(currentTheme.fg('modePlan', 'plan'));
   if (status.permissionMode === 'auto') modes.push(currentTheme.fg('modePermission', 'auto'));
-  if (status.permissionMode === 'yolo') modes.push(currentTheme.fg('modeAutoAccept', 'yolo'));
+  if (status.permissionMode === 'yolo') modes.push(currentTheme.fg('error', 'yolo'));
   if (status.fastMode) modes.push(currentTheme.fg('modeFast', '↯ fast'));
   if (status.dynamicWorkflowMode) modes.push(currentTheme.fg('accent', 'workflow'));
   return modes.length === 0 ? undefined : chip(modes.join(' '));

apps/pythinker-code/src/tui/components/dialogs/compaction.ts

@@ -182,7 +182,6 @@ export class CompactionComponent extends Container {
       shimmerText('Compacting conversation…', {
         baseToken: 'primary',
         shimmerToken: 'primaryShimmer',
-        frame: this.animationFrame,
       }),
     );
     return `${label}${currentTheme.dim(` (${String(this.elapsedSeconds())}s)`)}`;

apps/pythinker-code/src/tui/components/messages/dynamic-workflow-mission-control.ts

@@ -538,15 +538,10 @@ export class DynamicWorkflowMissionControlComponent implements Component {
     const label = terminal
       ? currentTheme.fg('text', requestPhaseLabel(this.model.requestPhase))
       : shimmerText(finalizing ? FINALIZING_LABEL : ORCHESTRATING_LABEL, {
-          // `primary` / `primaryShimmer` are a designed pair, so the sweep stays
-          // periwinkle throughout; the old grey `text` base washed it out.
           baseToken: 'primary',
           shimmerToken: 'primaryShimmer',
-          frame: Math.floor(
-            Math.max(0, nowMs - this.model.startedAtMs) /
-              DYNAMIC_WORKFLOW_RENDERING.aggregateShimmerFrameMs,
-          ),
-          windowSize: 4,
+          altShimmerToken: 'warningShimmer',
+          bandHalfWidth: 4,
         });
     const paddedLabel = padToWidth(label, LIVE_LABEL_WIDTH);
     const prefix = `${loader} ${paddedLabel}`;

apps/pythinker-code/src/tui/components/messages/thinking.ts

@@ -100,8 +100,7 @@ export class ThinkingComponent implements Component {
       const label = shimmerText(formatThinkingSpinnerLabel(), {
         baseToken: 'primary',
         shimmerToken: 'primaryShimmer',
-        frame: this.animationFrame,
-        windowSize: 4,
+        bandHalfWidth: 4,
       });
       return ['', spinner + label, ...visibleLines.map((line) => MESSAGE_INDENT + line)];
     }

apps/pythinker-code/src/tui/pythinker-tui.ts

@@ -1406,6 +1406,7 @@ export class PythinkerTUI {
         this.state.appState.sessionTitle?.trim() ||
         this.state.appState.sessionId ||
         this.state.appState.workDir,
+      statusLine: this.state.appState.statusLine,
     });
   }
 

apps/pythinker-code/src/tui/utils/shimmer.ts

@@ -3,12 +3,13 @@ import { currentTheme, type ColorToken } from '#/tui/theme';
 export interface ShimmerTextOptions {
   baseToken: ColorToken;
   shimmerToken: ColorToken;
-  frame: number;
-  windowSize?: number;
+  altShimmerToken?: ColorToken;
+  /** Half-width of the cosine shimmer band, in terminal cells. */
+  bandHalfWidth?: number;
   phaseOffset?: number;
 }
 
-const CELLS_PER_SECOND = 30;
+const CELLS_PER_SECOND = 20;
 const BAND_HALF_WIDTH = 6;
 
 type ShimmerTier = 'dim' | 'base' | 'shimmer';
@@ -17,11 +18,14 @@ export function shimmerText(text: string, options: ShimmerTextOptions): string {
   const chars = Array.from(text);
   if (chars.length === 0) return '';
 
-  const halfWidth = Math.max(1, options.windowSize ?? BAND_HALF_WIDTH);
+  const halfWidth = Math.max(1, options.bandHalfWidth ?? BAND_HALF_WIDTH);
   const cycleLength = chars.length + halfWidth * 2;
-  const center =
-    ((Date.now() / 1_000 * CELLS_PER_SECOND + (options.phaseOffset ?? 0)) % cycleLength) -
-    halfWidth;
+  const rawPosition = Date.now() / 1_000 * CELLS_PER_SECOND + (options.phaseOffset ?? 0);
+  const center = rawPosition % cycleLength - halfWidth;
+  const passIndex = Math.floor(rawPosition / cycleLength);
+  const peakToken = options.altShimmerToken !== undefined && passIndex % 2 !== 0
+    ? options.altShimmerToken
+    : options.shimmerToken;
 
   let result = '';
   let segment = '';
@@ -46,20 +50,25 @@ export function shimmerText(text: string, options: ShimmerTextOptions): string {
       continue;
     }
 
-    result += paintTier(activeTier, segment, options);
+    result += paintTier(activeTier, segment, options.baseToken, peakToken);
     activeTier = tier;
     segment = char;
   }
 
   if (activeTier !== undefined) {
-    result += paintTier(activeTier, segment, options);
+    result += paintTier(activeTier, segment, options.baseToken, peakToken);
   }
 
   return result;
 }
 
-function paintTier(tier: ShimmerTier, text: string, options: ShimmerTextOptions): string {
+function paintTier(
+  tier: ShimmerTier,
+  text: string,
+  baseToken: ColorToken,
+  peakToken: ColorToken,
+): string {
   if (tier === 'dim') return currentTheme.fg('textDim', text);
-  if (tier === 'shimmer') return currentTheme.boldFg(options.shimmerToken, text);
-  return currentTheme.fg(options.baseToken, text);
+  if (tier === 'shimmer') return currentTheme.boldFg(peakToken, text);
+  return currentTheme.fg(baseToken, text);
 }

apps/pythinker-code/test/tui/components/messages/dynamic-workflow-mission-control.test.ts

@@ -417,7 +417,7 @@ describe('DynamicWorkflowMissionControlComponent', () => {
       expect(first).toContain(chalk.hex(darkColors.primary)('◐'));
       expect(second).toContain(chalk.hex(darkColors.primary)('◓'));
       expect(first).toContain(chalk.hex(darkColors.primary)('RUN'));
-      vi.setSystemTime(BRAILLE_SPINNER_INTERVAL_MS);
+      vi.setSystemTime(BRAILLE_SPINNER_INTERVAL_MS * 1.5);
 
       const aggregate = aggregateLine(component.render(100).join('\n'));
       expect(strip(aggregate)).toContain('Orchestrating');

apps/pythinker-code/test/tui/components/status-bar.test.ts

@@ -1,12 +1,13 @@
 import { visibleWidth } from '@earendil-works/pi-tui';
 import chalk from 'chalk';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import {
   StatusBarComponent,
   type StatusBarStatus,
 } from '#/tui/components/chrome/status-bar';
-import { shimmerText } from '#/tui/utils/shimmer';
+import { DEFAULT_STATUS_LINE_CONFIG } from '#/tui/config';
+import { currentTheme, darkColors } from '#/tui/theme';
 
 function stripAnsi(text: string): string {
   return text.replaceAll(/\u001B\[[0-9;]*m/gu, '');
@@ -24,6 +25,7 @@ function status(overrides: Partial<StatusBarStatus> = {}): StatusBarStatus {
     dynamicWorkflowMode: true,
     extras: [],
     sessionKey: 'session-alpha',
+    statusLine: DEFAULT_STATUS_LINE_CONFIG,
     ...overrides,
   };
 }
@@ -39,6 +41,67 @@ describe('StatusBarComponent', () => {
     expect(stripAnsi(lines[0] ?? '')).toContain('Model Alpha · high');
   });
 
+  it('omits the effort suffix when thinking is off', () => {
+    const component = new StatusBarComponent();
+    component.update(status({ thinkingLevel: 'off' }));
+
+    const line = stripAnsi(component.render(80)[0] ?? '');
+
+    expect(line).toContain('Model Alpha');
+    expect(line).not.toContain('· off');
+  });
+
+  it('hides the model chip when showModel is false', () => {
+    const component = new StatusBarComponent();
+    component.update(status({
+      statusLine: { ...DEFAULT_STATUS_LINE_CONFIG, showModel: false },
+    }));
+
+    expect(stripAnsi(component.render(80)[0] ?? '')).not.toContain('Model Alpha');
+  });
+
+  it('hides the modes chip when showModes is false', () => {
+    const component = new StatusBarComponent();
+    component.update(status({
+      statusLine: { ...DEFAULT_STATUS_LINE_CONFIG, showModes: false },
+    }));
+
+    const line = stripAnsi(component.render(80)[0] ?? '');
+
+    expect(line).not.toContain('plan');
+    expect(line).not.toContain('auto');
+    expect(line).not.toContain('workflow');
+  });
+
+  it('hides only the effort suffix when showEffort is false', () => {
+    const component = new StatusBarComponent();
+    component.update(status({
+      statusLine: { ...DEFAULT_STATUS_LINE_CONFIG, showEffort: false },
+    }));
+
+    const line = stripAnsi(component.render(80)[0] ?? '');
+
+    expect(line).toContain('Model Alpha');
+    expect(line).not.toContain('· high');
+  });
+
+  it('renders yolo with the error colour', () => {
+    const previousLevel = chalk.level;
+    const previousPalette = currentTheme.palette;
+    chalk.level = 3;
+    currentTheme.setPalette(darkColors);
+
+    try {
+      const component = new StatusBarComponent();
+      component.update(status({ permissionMode: 'yolo' }));
+
+      expect(component.render(80)[0] ?? '').toContain(chalk.hex(darkColors.error)('yolo'));
+    } finally {
+      chalk.level = previousLevel;
+      currentTheme.setPalette(previousPalette);
+    }
+  });
+
   it('drops the gap, modes, and cwd in that order as width shrinks', () => {
     const component = new StatusBarComponent();
     component.update(status());
@@ -122,48 +185,3 @@ describe('StatusBarComponent', () => {
     expect(stripAnsi(component.render(240)[0] ?? '')).toContain(expected);
   });
 });
-
-describe('shimmerText', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('preserves the input text when ANSI is removed', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(0);
-    const text = 'Thinking carefully';
-
-    expect(
-      stripAnsi(
-        shimmerText(text, {
-          baseToken: 'primary',
-          shimmerToken: 'primaryShimmer',
-          frame: 0,
-        }),
-      ),
-    ).toBe(text);
-  });
-
-  it('moves the cosine band with wall-clock time', () => {
-    const previousLevel = chalk.level;
-    chalk.level = 3;
-    const now = vi.spyOn(Date, 'now');
-    try {
-      now.mockReturnValue(0);
-      const first = shimmerText('abcdefghijklmno', {
-        baseToken: 'primary',
-        shimmerToken: 'primaryShimmer',
-        frame: 0,
-      });
-      now.mockReturnValue(100);
-      const second = shimmerText('abcdefghijklmno', {
-        baseToken: 'primary',
-        shimmerToken: 'primaryShimmer',
-        frame: 0,
-      });
-
-      expect(second).not.toBe(first);
-    } finally {
-      chalk.level = previousLevel;
-    }
-  });
-});