fix(mobile): show connection status in the floating pill instead of a second one

[juliusmarminge]

Problem

While an environment is disconnected, mobile shows the connection state in its own
pill anchored above the composer, and the floating working pill hides itself
entirely (connectionStateLabel !== "connected" returned null). So a dropped
connection mid-turn swapped a centered glass pill for a differently-styled,
left-aligned one in a different place, dropped the working timer, and covered the
last feed row. The feed also shifted, because the floating control stops reserving
its space.

What changed

One pill. connectionFloatingStatus maps the connection phase into the floating
pill's status, so connection, syncing, compacting, and working all swap labels in
place inside the same capsule. The composer's ComposerConnectionStatusPill and
its connectionError / onReconnectEnvironment props are gone.

Making one capsule change width needed three fixes:

• The capsule's Reanimated layout transition moved its left edge, and labels laid
  out from that edge slid with it. Labels are now absolute children centered by
  the capsule, and an in-flow sizer animates to the measured label width.
• The native GlassView only takes a size from a real layout pass, so an animated
  width set on it left the material stuck at its mounted size — the pill rendered
  as a bare label with a stray circle behind it until the first label swap forced
  a re-layout. The sizer drives the width so the glass gets a genuine layout.
• Labels cross-fade staggered (exit 100 ms, enter 160 ms after 80 ms) since both
  rows now occupy the same centered spot.

Before / after

Same thread, same environment, same scroll and viewport, connection cut at the
same point by killing a TCP proxy in front of the server. iOS 26 simulator, dark.

Before (main) — working pill disappears, a left-aligned pill takes over lower
down and covers "Thinking", and the feed shifts:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/d63e91c34a63230b/pr-clip-before.mp4

After — one capsule resizes in place through
working → failed to connect → syncing → working:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/72200c880a081030/pr-clip-after.mp4

The glass regression caught during review of my own recordings, before (stuck
capsule showing through as a circle) and after:

Verification

• vp test run apps/mobile/src/features/threads/floating-working-status.test.ts —
  5 passing, covering every connection phase, the missing-label fallback, and the
  reconnect handler. The mapping moved to a pure module so it is testable without
  the native view stack.
• Measured the capsule's pixel extent frame by frame through a swap: growing from
  404 px to 907 px, its center held at 662.5–663 px on every frame.
• Checked at mount, through both swap directions, after the pill goes away and
  returns, and with the scroll-to-end button both merged and separated.
• Typecheck and lint clean on the touched files. (tsgo reports 63 pre-existing
  navigation-typing errors on main too; the repo's typecheck script uses tsc.)

Limits

Verified on the iOS 26 simulator, where the native liquid-glass path runs. The
non-glass fallback branch got the same layout treatment but was not exercised on
a device.

Opus 5 via Claude Code.

Notes for review

Precedence with pending approvals. The floating pill used to be suppressed
whenever an approval or user-input card was up, and it now returns the connection
status first, so it renders in that state too. That is not new information on
screen: the composer pill it replaces had no such suppression, so a disconnected
environment with a pending approval already showed a pill. It is the same single
pill, just in the floating control's position now.

Why the UI paths are not unit-tested. Every existing test under
apps/mobile/src covers pure modules, and the repo guidance is explicit about not
rendering components to assert props or attributes. The animation and glass work
here is only meaningful against real UIKit — the stuck-glass bug in particular was
invisible to anything but a device, since it came from the native view taking its
size from a layout pass. So the mapping is unit-tested and the rendering is
covered by the simulator captures above, including a frame-by-frame measurement of
the capsule's center through a resize.

[macroscopeapp]

Approvability

Verdict: Approved at a300584

Macroscope's review found this PR approvable — This is a focused mobile UI fix that removes the duplicate connection pill and displays the existing connection states in the established floating control, with reconnect behavior preserved and mapping tests added. Its animation and sizing changes are localized to that control and do not affect data, schemas, infrastructure, or sensitive functionality.

^{You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.6 KiB	13.6 KiB	+34 B (+0.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	7.0 KiB	7.0 KiB	−8 B (−0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.5 KiB	6.5 KiB	+42 B (+0.6%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	57.0 KiB	57.1 KiB	+88 B (+0.2%)	66.4 KiB	✅
Codex	Live turn messages	8	10	+2 (+25.0%)	21	✅
Claude	Total thread wire	13.6 KiB	13.6 KiB	+7 B (+0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	7.0 KiB	7.0 KiB	−2 B (−0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	+9 B (+0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	57.9 KiB	57.9 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	10	10	0 (0.0%)	21	✅

Baseline: e1230d6 · PR result: a300584 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 015131d3-f992-4354-b577-67e6263259b6

📥 Commits

Reviewing files that changed from the base of the PR and between e1230d6 and a300584.

📒 Files selected for processing (5)

• apps/mobile/src/features/threads/ThreadComposer.tsx
• apps/mobile/src/features/threads/ThreadDetailScreen.tsx
• apps/mobile/src/features/threads/floating-working-control.tsx
• apps/mobile/src/features/threads/floating-working-status.test.ts
• apps/mobile/src/features/threads/floating-working-status.ts

Included review availability: 9 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 10 reviews per hour.

---

📝 Walkthrough

Walkthrough

The mobile thread UI moves connection status from ThreadComposer to the floating working control. A shared mapper defines connection labels and reconnect actions. The floating control now measures and animates status labels.

Changes

Thread connection status

Layer / File(s)	Summary
Status contract and connection mapping apps/mobile/src/features/threads/floating-working-status.ts, apps/mobile/src/features/threads/floating-working-status.test.ts	Adds the shared FloatingWorkingStatus type and maps connection phases to labels, tones, and reconnect actions. Tests cover connection states and callback behavior.
Floating status control rendering apps/mobile/src/features/threads/floating-working-control.tsx	Uses the shared status type. Measures capsule content and animates label transitions. Reconnecting labels support press handling and accessibility semantics.
Thread screen and composer wiring apps/mobile/src/features/threads/ThreadDetailScreen.tsx, apps/mobile/src/features/threads/ThreadComposer.tsx	ThreadDetailScreen places connection status before other floating states. ThreadComposer removes connection-status props, computation, and rendering.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to a3005

The connection status is consolidated into the floating pill while preserving reconnect behavior and working-state presentation. Current evidence identifies no merge-blocking user or production risk.

Sequence Diagram(s)

sequenceDiagram
  participant ThreadDetailScreen
  participant connectionFloatingStatus
  participant FloatingWorkingControl
  participant ThreadComposer
  ThreadDetailScreen->>connectionFloatingStatus: evaluate connection state
  connectionFloatingStatus-->>ThreadDetailScreen: return status or null
  ThreadDetailScreen->>FloatingWorkingControl: render floating status
  ThreadDetailScreen->>ThreadComposer: render composer without connection props
  FloatingWorkingControl->>ThreadDetailScreen: invoke reconnect handler

Loading

Suggested reviewers: t3dotgg, maria-rcks, chrisdeeming

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: consolidating connection status into the floating pill instead of using a separate composer pill.
Description check	✅ Passed	The description clearly explains the problem, implementation, UI changes, verification, limitations, and includes before/after images and videos. It does not use the template headings exactly and omit…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch t3code/c1809e4e

---

_{Comment @coderabbitai help to get the list of available commands.}