feat(tui): default context gauge, short cwd chip, braille orchestrating loader

Author: elkaix

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

@@ -102,7 +102,17 @@ function renderModesChip(status: StatusBarStatus): string | undefined {
 }
 
 function shortenCwd(cwd: string, homeDir: string | null): string {
-  if (homeDir === null || homeDir.length === 0) return cwd;
-  if (cwd === homeDir) return '~';
-  return cwd.startsWith(`${homeDir}${sep}`) ? `~${cwd.slice(homeDir.length)}` : cwd;
+  const path = homeDir !== null && homeDir.length > 0
+    ? cwd === homeDir
+      ? '~'
+      : cwd.startsWith(`${homeDir}${sep}`)
+        ? `~${cwd.slice(homeDir.length)}`
+        : cwd
+    : cwd;
+  const segments = path.startsWith(`~${sep}`)
+    ? path.slice(2).split(sep)
+    : path.startsWith(sep)
+      ? path.slice(1).split(sep)
+      : [];
+  return segments.length > 2 ? `…${sep}${segments.slice(-2).join(sep)}` : path;
 }

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

@@ -1,6 +1,10 @@
 import { truncateToWidth, visibleWidth, type Component } from '@earendil-works/pi-tui';
 
-import { DYNAMIC_WORKFLOW_RENDERING } from '#/tui/constant/rendering';
+import {
+  BRAILLE_SPINNER_FRAMES,
+  BRAILLE_SPINNER_INTERVAL_MS,
+  DYNAMIC_WORKFLOW_RENDERING,
+} from '#/tui/constant/rendering';
 import { currentTheme } from '#/tui/theme';
 import { shimmerText } from '#/tui/utils/shimmer';
 
@@ -509,17 +513,15 @@ export class DynamicWorkflowMissionControlComponent implements Component {
     const terminal = isTerminalRequestPhase(this.model.requestPhase);
     const frame = Math.floor(
       Math.max(0, nowMs - this.model.startedAtMs) /
-        DYNAMIC_WORKFLOW_RENDERING.progressFrameMs,
+        BRAILLE_SPINNER_INTERVAL_MS,
     );
     const loader = terminal
       ? currentTheme.fg(requestPhaseColor(this.model.requestPhase), requestPhaseSymbol(this.model.requestPhase))
       : this.activitySpinnerText === undefined
         ? currentTheme.fg('primary', '●')
         : currentTheme.fg(
             'primary',
-            DYNAMIC_WORKFLOW_RENDERING.progressFrames[
-              frame % DYNAMIC_WORKFLOW_RENDERING.progressFrames.length
-            ] ?? DYNAMIC_WORKFLOW_RENDERING.progressFrames[0],
+            BRAILLE_SPINNER_FRAMES[frame % BRAILLE_SPINNER_FRAMES.length]!,
           );
     const aggregateMembers = this.aggregateMembers();
     // All spawned agents are done but the tool result has not arrived yet:

apps/pythinker-code/src/tui/runtime/footer/footer-model.ts

@@ -562,11 +562,11 @@ export function selectStatusBarExtras(
 ): string[] {
   const parts = selectStatusItemParts(state, clockMs, statusLine);
   const items = [
+    parts.context,
+    parts.git,
     parts.update,
     parts.speed,
     parts.spend,
-    parts.context,
-    parts.git,
     parts.elapsed,
     parts.goal,
   ].filter((item): item is string => item !== null);

apps/pythinker-code/test/tui/activity-pane.test.ts

@@ -220,7 +220,7 @@ describe('updateActivityPane terminal progress', () => {
       expect(state.activityContainer.children).toHaveLength(0);
       expect(vi.getTimerCount()).toBe(timersBeforeMissionControl);
       const output = strip(missionControl.render(100).join('\n'));
-      expect(output).toMatch(/[◐◓◑◒] Orchestrating/);
+      expect(output).toMatch(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏] Orchestrating/);
       expect(output).not.toContain(formatThinkingSpinnerLabel());
 
       state.activitySpinner?.instance.stop();
@@ -369,7 +369,9 @@ describe('updateActivityPane terminal progress', () => {
       state.livePane = { ...state.livePane, mode: 'tool' };
       driver.updateActivityPane();
       const missionControl = startDynamicWorkflow(driver, state);
-      expect(strip(missionControl.render(100).join('\n'))).toMatch(/[◐◓◑◒] Orchestrating/);
+      expect(strip(missionControl.render(100).join('\n'))).toMatch(
+        /[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏] Orchestrating/,
+      );
 
       cleanup(driver);
       driver.updateActivityPane();

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

@@ -356,7 +356,7 @@ describe('DynamicWorkflowMissionControlComponent', () => {
     expect(vi.getTimerCount()).toBe(timerCount);
   });
 
-  it('shimmers Orchestrating without changing its text or creating a timer', () => {
+  it('animates the braille header and shimmers Orchestrating without creating a timer', () => {
     vi.useFakeTimers();
     vi.setSystemTime(0);
     const previousLevel = chalk.level;
@@ -373,8 +373,11 @@ describe('DynamicWorkflowMissionControlComponent', () => {
       vi.setSystemTime(BRAILLE_SPINNER_INTERVAL_MS);
       const after = aggregateLine(component.render(100).join('\n'));
 
-      expect(strip(after)).toBe(strip(before));
+      expect(strip(after).replace(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/u, '')).toBe(
+        strip(before).replace(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/u, ''),
+      );
       expect(after).not.toBe(before);
+      expect(strip(after)).toMatch(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏] Orchestrating/);
       expect(strip(after)).toContain('Orchestrating');
       expect(vi.getTimerCount()).toBe(timerCount);
     } finally {
@@ -671,8 +674,8 @@ describe('DynamicWorkflowMissionControlComponent', () => {
         vi.setSystemTime(time);
         const line = component.render(100).find((candidate) => strip(candidate).includes('001'));
         expect(line).toContain(chalk.hex(darkColors.primary)(glyph));
-        expect(aggregateLine(component.render(100).join('\n'))).toContain(
-          chalk.hex(darkColors.primary)(glyph),
+        expect(strip(aggregateLine(component.render(100).join('\n')))).toMatch(
+          /[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏] Orchestrating/,
         );
       }
 

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

@@ -105,6 +105,22 @@ describe('StatusBarComponent', () => {
     expect(line).toContain('workflow');
     expect(line).toContain('~/project');
   });
+
+  it.each([
+    [
+      '/Users/test/Projects/active/pythinker-code-tsc/apps/pythinker-code',
+      '/Users/test',
+      '…/apps/pythinker-code',
+    ],
+    ['/Users/test/Projects/active', '/Users/test', '~/Projects/active'],
+    ['/Users/test', '/Users/test', '~'],
+    ['/a/b/c/d', '/Users/test', '…/c/d'],
+  ])('shortens cwd %s to %s', (cwd, homeDir, expected) => {
+    const component = new StatusBarComponent();
+    component.update(status({ cwd, homeDir }));
+
+    expect(stripAnsi(component.render(240)[0] ?? '')).toContain(expected);
+  });
 });
 
 describe('shimmerText', () => {

apps/pythinker-code/test/tui/runtime/footer-model.test.ts

@@ -302,7 +302,7 @@ describe('footer model', () => {
     });
   });
 
-  it('projects status-bar extras without the model and modes items', () => {
+  it('projects status-bar extras in priority order without the model and modes items', () => {
     const state = foldFooterEvents(
       createFooterState({
         model: 'DeepSeek V4 Flash',
@@ -317,13 +317,8 @@ describe('footer model', () => {
         },
       ],
     );
-    const status = selectFooterViewModel(state, CLOCK_MS).rows.at(-1);
-    if (status?.kind !== 'status') throw new Error('Expected a status row');
-
     expect(selectStatusBarExtras(state, CLOCK_MS, DEFAULT_STATUS_LINE_CONFIG)).toEqual(
-      status.items.filter(
-        (item) => item !== 'DeepSeek V4 Flash' && item !== 'workflow',
-      ),
+      ['▱▱▱▱▱▱▱▱ 5%', 'main ↑15', '↑ v0.11.0'],
     );
   });