fix(tui): make phone status readable

[OmarB97]

Summary

• split the TUI status rule into a compact two-line layout on narrow phone terminals
• keep model, context used/window/percent, session count, voice state, duration, and cwd legible instead of compressing them into one row
• keep the existing wide terminal layout unchanged

Verification

• npm test -- appChromeStatusRule statusRule statusBarTicker
• npx eslint src/components/appChrome.tsx src/__tests__/appChromeStatusRule.test.tsx
• npm run build

[OmarB97]

Follow-up pushed in c41bcbc after live phone testing:

• compact phone status now renders as two pre-fitted strings instead of many adjacent Ink nodes, preventing mid-token spillover/wrap on narrow terminals;
• compact busy state no longer uses the padded rotating inference verb, preserving width for model/context;
• local/OpenAI-compatible providers that do not return usage now expose the rough request-context estimate to the TUI, and live thinking/status events carry that usage so ctx does not stay stuck at 0 during a turn;
• compact UI marks estimated context with ~ until real provider usage is available.

Verified:

• npm test -- appChromeStatusRule createGatewayEventHandler statusRule statusBarTicker -> 60 passed
• npx eslint src/components/appChrome.tsx src/app/createGatewayEventHandler.ts src/gatewayTypes.ts src/types.ts src/__tests__/appChromeStatusRule.test.tsx src/__tests__/createGatewayEventHandler.test.ts
• npm run build
• python3 -m pytest tests/test_tui_gateway_server.py -q -k "status_callback or get_usage" -> 4 passed
• python3 -m py_compile tui_gateway/server.py agent/conversation_loop.py

[OmarB97]

Second follow-up pushed in 0d38cae after another live phone capture:

• first compact line now uses - ready | dflash | ... rather than - | ready | ...;
• initial idle context now estimates system/tool schema pressure, so the bar no longer starts at ctx 0/... when the model has not returned provider usage yet;
• live taro restart now shows - ready | dflash | ctx ~13.4k/262.1k 5% and the second line remains dur ... | voice off | 1 session | ~/Workspaces.

Re-verified locally and on taro:

• UI focused tests: 60 passed
• gateway focused tests: 5 passed
• python3 -m py_compile tui_gateway/server.py agent/conversation_loop.py
• npm run build locally, deployed rebuilt ui-tui/dist/entry.js to taro.

[OmarB97]

Updated this PR with a compact status-bar color pass.

What changed:

• renders compact phone status as semantic colored segments instead of one monochrome string
• colors status, model, context, duration, voice, session count, background jobs, cost, and cwd independently
• context now uses low/moderate/high tones (green/amber/red) while preserving the two-line phone layout and no word spillover

Verification:

• npm test -- --run src/__tests__/appChromeStatusRule.test.tsx src/__tests__/statusRule.test.ts src/__tests__/statusBarTicker.test.ts
• npx eslint src/components/appChrome.tsx src/__tests__/appChromeStatusRule.test.tsx
• npm run build

Fork mirror: OmarB97#55 (opened because the prior mirror #53 had already merged before this commit).

[mxnstrexgl]

LGTM — automated review passed. No security, quality, or test coverage issues detected.

[OmarB97]

Superseded by #40850 (approved mobile status-bar layout) for the UI half and #39370 (live token.usage stream) for the context data path. Closing in favor of those.