fix(mobile): session header pill spacing, centering, hide on load

[iscekic]

Summary

Three visual fixes to the session page header pill (SessionContextMetrics, the element holding the context ring + percentage + session cost):

1. Horizontal breathing room — the ring read cramped against the pill's left edge and the text (gap-1.5→gap-2, px-2.5→px-3).
2. Vertical centering — the ring is a 28×28 raw-pixel SVG that sat in an h-7 w-7 wrapper (≈24.5px at NativeWind's rem≈14px in this app). The SVG drew from the wrapper's top-left origin and overflowed 3.5px right/bottom, so its visible center sat ~1.75px low. The wrapper Views are deleted and ContextUsageRing now renders directly as a flex child; the pill's existing items-center centers its explicit 28px layout box exactly.
3. Hidden while loading, no CLS — a new loading?: boolean prop renders the pill with opacity-0 (layout box reserved, non-pressable, hidden from accessibility) while the session page loads. Both call sites pass it: the route-level sessionQuery.isPending branch in [session-id].tsx and session-detail-content.tsx (loading={shouldShowLoading}).

Why: the pill was optically off-center and cramped, and during loading it showed a meaningless track-only ring that popped into real content on load.

How: one mechanism in the component — loading gates pressable and applies opacity-0 + a11y-hiding props on the existing non-pressable View return. No third return branch, no call-site divergence.

Simpler-shape decision (recorded from plan review): a pure getHeaderPillRenderState helper + unit tests was considered and rejected — the loading state is one boolean gate on an RN component the node test harness cannot render, so the helper was API surface without product value. Consequently there are no test changes: the new behavior is visual-only, covered by the E2E evidence below. The pinned test "keeps a fixed non-interactive pill when context usage is unresolved" is deliberately untouched — it pins unresolved-but-loaded behavior, which is preserved; loading is a component prop, not a getHeaderPillContent input.

CLS contract (precise, not overclaimed): the hidden loading pill reserves its content-sized box (route path: ring-only ~45px; in-content path may include outgoing cost text). Guaranteed: header height and the anchor positions (x/y origins) of the back button and title are identical loading → loaded. Explicitly not claimed: pill-width or title-width equality — the pill is content-sized and the title text changes at load; that is accepted, documented behavior, not a regression. A guessed fixed-width reservation was considered and rejected as redesign.

Verification

• pnpm format && pnpm typecheck && pnpm lint && pnpm check:unused && pnpm test from apps/mobile/ — all green (283 files / 2434 tests, no suite changes)
• E2E (iPhone 17 Pro simulator, iOS 26.5, real kilo-auto/efficient session content — no mocking): loaded pill shows ring + percentage + cost; tap opens the context sheet (interactivity regression check passed)
• E2E: route-level loading state (kill -STOP nextjs suspend protocol, strictly scoped) — header title + skeleton visible, pill region pixel-uniform (0 drawn pixels), pill absent from the a11y tree
• E2E: in-content loading state captured on the first attempt — skeleton + composer, hidden pill (same pixel/a11y checks)
• E2E CLS (Maestro hierarchy, loading vs loaded): identical in all three states — back button [10,80][34,104], title origin (41,79), header container [0,0][402,124]. Single-line-title precondition met (session renamed to "T"; loaded title 25pt tall = 1 line). Width equality not asserted per the CLS contract.

Objective pill measurements (3x screenshot pixel analysis): ring annulus exactly 28.0×28.0pt; ring y-center −0.17pt off pill center (sub-pixel — optically centered); ring→text visual gap 8.0pt (gap-2); ring 12.3pt from pill left edge, text 11.3pt from right edge (px-3).

Visual Changes

After-only evidence per the brief (the before state is the one described in the user request; reproducing it would need a second stack on a baseline worktree — disproportionate for a spacing change).

Before	After
Ring cramped/off-center; track-only ring pill visible during loading	Loaded — ring clear of text and edges, optically centered:
	Loaded, header close-up:
	Route-level loading — no pill, no header shift:
	In-content loading — no pill, skeleton + composer:
	Tap opens context sheet (interactivity unchanged):

Reviewer Notes

• loading hidden-wins semantics: if shouldShowLoading is true while contextInfo already exists, the pill hides — consistent with the loading definition.
• The 44px touch target and pill fixed height are unchanged in every state.
• No Android-specific work; the change is shared RN code. E2E evidence is iOS-only.
• Includes one workflow learning from the E2E run (.kilo_workflow/learnings/mobile-remote-cli-model-id-prefix.md): remote-cli.sh needs the CLI id kilo/kilo-auto/efficient, not the in-app id; fresh E2E accounts need seeded credits.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Incremental update only adds a documentation/workflow-learnings note (.kilo_workflow/learnings/mobile-remote-cli-model-id-prefix.md); the previously reviewed mobile files (session header pill spacing, ring centering, loading-hide) are unchanged since the last review, and no new correctness, security, or breaking-change issues were found.

Files Reviewed (1 file)

• .kilo_workflow/learnings/mobile-remote-cli-model-id-prefix.md (new, docs-only)

Previous Review Summary (commit 5814bbc)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 5814bbc)

Status: No Issues Found | Recommendation: Merge

Executive Summary

Reviewed a small, well-scoped visual fix to the session header pill (spacing, ring centering, loading-hide behavior) and found no correctness, security, or breaking-change issues in the changed lines.

Files Reviewed (3 files)

• apps/mobile/src/app/(app)/agent-chat/[session-id].tsx
• apps/mobile/src/components/agents/session-context-metrics.tsx
• apps/mobile/src/components/agents/session-detail-content.tsx

---

_{Reviewed by claude-sonnet-5 · Input: 32 · Output: 4.8K · Cached: 739.5K}

_{Review guidance: REVIEW.md from base branch main}