Design Decision — Where Does Status Live?
Option A: Separate text pill
not chosen
1
code.domian.network/?folder=kpmg
● live
A standalone pill with text label sits inside the header.
✗Header is already tight at 32dp. At 3–4 panes (DENSE mode) there is no space.
✗Text labels ("● live") add visual noise next to the already text-heavy URL chip.
✗Collides with active-pane orange border (Q10).
✗Text labels ("● live") add visual noise next to the already text-heavy URL chip.
✗Collides with active-pane orange border (Q10).
Option B: Status embedded in badge (chosen)
✓ chosen
1
code.domian.network/?folder=kpmg
The index badge background + border + glow communicates session state. Orange border = focused pane (unchanged). No new elements, no location conflict.
✓Zero new real estate required.
✓Status and identity co-located (the badge already says "which pane").
✓Works in DENSE mode (18dp badge) without legibility loss.
✓Status and identity co-located (the badge already says "which pane").
✓Works in DENSE mode (18dp badge) without legibility loss.
4 States × 2 Pane Types
LIVE
1
inactive
2
active
Claude session is actively generating output. Pulsing green ring on the badge.
Data source: sessions endpoint
tier: "active" + recent activityIDLE
1
inactive
2
active
Session exists but is waiting for input. Default/rest state. No animation.
Data source: sessions endpoint
tier: "active" + idle periodDISC.
1
inactive
2
active
Network error or WebView load failure. Red badge ring. No pulse.
Data source: WebViewClient
onReceivedError()STALE
1
inactive
2
active
Session was active but inactive >30min. Yellow corner dot. No animation.
Data source: sessions endpoint
tier: "recent" stateIn-Context: 3-Pane View on Fold Inner Display
Terminal Pane: Connected / Disconnected States
Shell connected
connected
T
[TERMINAL]
tmux: argus
claude@evo:~/kpmg$ |
Badge shows
T (Terminal marker). Green fill = connected. Pulsing = ttyd websocket active.
Shell disconnected / ttyd unreachable
disconnected
T
[TERMINAL]
disconnected
Connection lost. Tap ⟳ to retry.
Header border turns red. Badge shows red ring. Reload icon becomes primary affordance.
Animation Specification
LIVE pulse — property
box-shadow (outer ring)
Glow ring expands from 0 to 4px radius
LIVE pulse — duration
900ms
Matches existing session-dot spec
LIVE pulse — easing
ease-in-out
Android: AccelerateDecelerateInterpolator
LIVE pulse — mode
infinite, alternate
Breathes: in → out → in, not restart
LIVE alpha range
1.0 → 0.82
Subtle opacity shift on the badge itself
State transition
180ms crossfade
IDLE↔LIVE: fade badge color. DISCONNECTED: immediate (error state)
Android API
ObjectAnimator
Animate View.alpha + custom BoxShadow drawable on badge background
Terminal pulse
Same 900ms spec
Green ring same timing as session dot — one mental model
Implementation note for Android Views: The badge is a custom
TextView or View with a LayerDrawable background. The outer ring is a second layer animated via ObjectAnimator on the ring drawable's radius property. Use RepeatMode.REVERSE + infinite to get the alternate breathing behavior. Stop the animator when the pane is paused to avoid battery drain. See deliverable 09 for the full timing spec and Android XML interpolator mappings.