fix(mobile): keep the KiloClaw tab stable and shape the live-session placeholder

[iscekic]

Changelog for users

• The bottom navigation keeps the KiloClaw tab for the rest of the session once it appears, so the bar no longer changes from four tabs to three between screens.
• With no KiloClaw instance, the tab stays hidden and the next launch still starts with three tabs.
• The LIVE NOW section shows a row-shaped loading placeholder instead of a large blank grey card, and the card no longer jumps when the real session arrives.

Changelog for maintainers

• apps/mobile/src/lib/hooks/use-kiloclaw-tab-visible.ts — Finding 1 (agents-empty) accepted: a fetched empty instance list removed a tab the persisted answer had already shown, so the bar's shape depended on which screen you were on. The entry now latches on for the session; the fetched answer is still persisted so the next launch hides it.
• apps/mobile/src/components/home/agent-sessions-section.tsx — Finding 2 (uia2-warm-emulator-5602) accepted: the pending branch drew one full-width grey skeleton block. It now draws a reserved 72px card using the real session row's box.
• Where to look first: the tab latch in use-kiloclaw-tab-visible.ts and the placeholder geometry in agent-sessions-section.tsx.
• Risk: a stale tab can now stay visible for the rest of a session until the next cold launch; the new mounted hook test states that trade-off.
• The placeholder reuses the row's own padding and 3px leading edge strip, so the arriving row cannot shift the section's text.
• The live-section tests now expect three skeletons and assert the pending row box matches the loaded row box.

E2E proof

[e2] Finding 2 loading: the LIVE NOW section shows the designed loading card, not a blank grey block (needs:fault: stall nextjs after the signed-in-home state is restored, then cold-open so… — android: the prescribed cold-open under fault.sh stall nextjs was live (e2-stall.log: "fault.sh: stalled pids [691707] for 240s") but the section's fetch timed out to the retryable error card rather than staying pending (e2-scene.log: "SCENE e2 OK" then "android.widget.TextView Couldn't load active sessions"), so the designed pending placeholder was captured under a temporary forced pending branch that was then reverted (git status clean, no committed hack) — e2-loading.txt shows the LIVE NOW section in its loading state ('text="LIVE NOW"' and 'text="SEE ALL"') with no "Couldn't load" text…

[e4] Finding 2 retryable unhappy: the Home live surface shows its load failure with a working Retry (needs:fault: down nextjs after the signed-in-home state is restored; then `fault.sh up… — android: with nextjs down the Home cold-open shows the live load failure and its Retry (e4-error.log: "SCENE e4 OK", "android.widget.TextView Couldn't load active sessions", "android.widget.Button Retry"), tapping Retry re-fires the request (e2-scene.log:43 "android.widget.Button Retry, busy"), and once the service is restored the surface recovers to content (e4-recovered.txt: 'text="LIVE NOW"' and 'text="Nothing running right now"'), screenshots e4-error.png and e4-recovered.png.

[p2] Finding 2 non-retryable unhappy: the LIVE NOW section shows the permission state with 'Back to profile' — android emulator-5554; fixture: db.sh removed the signed-in member's (857f9ef4-...) organization_memberships row in the w4c-org-pair org 'Acme Corp' (p2-fixture.log) so activeSessions.list returns FORBIDDEN for the org the app holds as its context; after a Home pull-to-refresh the LIVE NOW section digest shows 'Access denied' / "You don't have permission to view this." with the 'Back to profile' control (p2-script.log, still p2.png), and that control navigates to the Profile tab (p2-profile.png); no functional UX defect — the state gives a specific message and one working next action, and the…

[p2] Finding 2 non-retryable unhappy: the LIVE NOW section shows the permission state with 'Back to profile'

[e1] ux-check: placeholder text-line left edge aligns with the loaded row's text left edge and the leading mark's width is unchanged — Loaded row title bounds [87,373][950,419] (e1-scene.log, SCENE e1 OK) and pending-placeholder skeleton lines [87,329][704,357] and [87,375][395,403] and row/placeholder leading marks [40,295][48,437] and [40,295][48,537] (e1-pending.xml, e1-loaded.xml) show the same text left edge x=87 and the same leading-mark x=40 width 8px, so the title does not shift; no UX-DEFECT observed.

[e2] Finding 2 loading: the LIVE NOW section shows the designed loading card, not a blank grey block (needs:fault: stall nextjs after the signed-in-home state is restored, then cold-open so…

E2E proof — log excerpts

[e1] ux-check: placeholder text-line left edge aligns with the loaded row's text -> pass :: Loaded row title bounds [87,373][950,419] (e1-scene.log, SCENE e1 OK) and pending-placeholder skeleton lines [87,329][704,357] and [87,375][395,403] and row/placeholder leading marks [40,295][48,437] and [40,295][48,537] (e1-pending.xml, e1-loaded.xml) show the same text left edge x=87 and the same leading-mark x=40 width 8px, so the title does not shift; no UX-DEFECT observed.
[f1] Bottom navigation tab set (owner-request finding 1; no scenario in the plan -> pass :: Verified with a temporary db.sh-seeded kiloclaw_instances row (deleted afterwards): after the list re-fetched empty, the bar read Home, tab 1 of 4 / KiloClaw, tab 2 of 4 / Agents, tab 3 of 4 / Profile, tab 4 of 4 identically on all four screens (e1tabs-scene.log lines 35-41), so the bar no longer changes shape; the plan omits a scenario for this finding.
[e1] Finding 1: the bottom nav shows the same tab set on Home, Agents and Profil -> pass :: jev read the digest: pass (confidence 1.00)

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-2-visual-defects-on-android-the-bottom-navigatio-cee04-9f3d/e2e-mobile-app/e1-scene.log

android.widget.TextView CLOUD tappable [87,329][686,366]
android.widget.TextView 5 MINUTES AGO tappable [730,329][949,366]
android.widget.TextView Untitled session tappable [87,373][950,419]
android.widget.TextView kwf/explorer-2-visual-defects-on-android-the-bottom-navigatio-cee04-9f3d tappable [87,429][950,503]
android.widget.Button New coding task tappable [37,595][1043,711]
android.widget.TextView New coding task tappable [450,629][696,675]
android.widget.Button New task from a picture tappable [37,729][1043,845]
android.widget.TextView New task from a picture tappable [396,763][749,809]
android.widget.TextView EXPLORE tappable [36,881][1044,918]
android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,937][1043,1081]
android.widget.TextView Code Reviewer tappable [171,965][953,1011]
android.widget.TextView Automatic PR reviews tappable [171,1015][953,1052]
android.widget.Button Security Agent, Find and remediate vulnerabilities tappable [37,1099][1043,1243]
android.widget.TextView Security Agent tappable [171,1127][953,1173]
android.widget.TextView Find and remediate vulnerabilities tappable [171,1177][953,1214]
android.widget.Button PR Review, Review pull requests on mobile tappable [37,1262][1043,1385]
android.widget.TextView PR Review tappable [171,1290][953,1336]
android.widget.TextView Review pull requests on mobile tappable [171,1340][953,1377]
android.widget.Button Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.widget.TextView HOME tappable [13,2281][347,2320]
android.widget.Button Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.widget.TextView AGENTS tappable [373,2281][707,2320]
android.widget.Button Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
android.widget.TextView PROFILE tappable [733,2281][1067,2320]

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-2-visual-defects-on-android-the-bottom-navigatio-cee04-9f3d/e2e-mobile-app/e1tabs-scene.log

android.widget.Button Security Agent, Find and remediate vulnerabilities tappable [37,1009][1043,1152]
android.widget.TextView Security Agent tappable [171,1037][953,1083]
android.widget.TextView Find and remediate vulnerabilities tappable [171,1087][953,1124]
android.widget.TextView REVIEWS tappable [37,1207][1045,1251]
android.widget.Button PR Review, Review pull requests on mobile tappable [37,1279][1043,1422]
android.widget.TextView PR Review tappable [171,1307][953,1353]
android.widget.TextView Review pull requests on mobile tappable [171,1357][953,1394]
android.widget.TextView APP tappable [37,1477][1045,1521]
android.widget.Button Preferences, Appearance, notifications, thinking, and screen behavior tappable [37,1549][1043,1693]
android.widget.TextView Preferences tappable [171,1577][953,1623]
android.widget.TextView Appearance, notifications, thinking, and screen behavior tappable [171,1627][953,1664]
android.widget.Button Tutorial tappable [37,1720][1043,1854]
android.widget.TextView Tutorial tappable [171,1764][953,1810]
android.widget.TextView LINKED ACCOUNTS tappable [37,1909][1045,1953]
android.widget.TextView Email tappable [171,2009][1017,2055]
android.widget.TextView e2e-mobile-explorer-2-visual-defects-on-android-the-bottom-navigatio-cee04-9f3d-android@example.com tappable [171,2059][1017,2096]
android.widget.TextView Test Account tappable [171,2180][1017,2195]
android.widget.Button Home, tab, 1 of 4 tappable [0,2195][270,2337]
android.widget.TextView HOME tappable [13,2281][257,2320]
android.widget.Button KiloClaw, tab, 2 of 4 tappable [270,2195][540,2337]
android.widget.TextView KILOCLAW tappable [283,2281][527,2320]
android.widget.Button Agents, tab, 3 of 4 tappable [540,2195][810,2337]
android.widget.TextView AGENTS tappable [553,2281][797,2320]

/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-2-visual-defects-on-android-the-bottom-navigatio-cee04-9f3d/e2e-mobile-app/scripted-e1.log

android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,1016][1043,1160]
android.widget.TextView Code Reviewer tappable [171,1044][953,1090]
android.widget.TextView Automatic PR reviews tappable [171,1094][953,1131]
android.widget.Button Security Agent, Find and remediate vulnerabilities tappable [37,1187][1043,1330]
android.widget.TextView Security Agent tappable [171,1215][953,1261]
android.widget.TextView Find and remediate vulnerabilities tappable [171,1265][953,1302]
android.widget.TextView REVIEWS tappable [37,1385][1045,1429]
android.widget.Button PR Review, Review pull requests on mobile tappable [37,1457][1043,1600]
android.widget.TextView PR Review tappable [171,1485][953,1531]
android.widget.TextView Review pull requests on mobile tappable [171,1535][953,1572]
android.widget.TextView APP tappable [37,1654][1045,1698]
android.widget.Button Preferences, Appearance, notifications, thinking, and screen behavior tappable [37,1726][1043,1870]
android.widget.TextView Preferences tappable [171,1754][953,1800]
android.widget.TextView Appearance, notifications, thinking, and screen behavior tappable [171,1804][953,1841]
android.widget.Button Tutorial tappable [37,1897][1043,2031]
android.widget.TextView Tutorial tappable [171,1941][953,1987]
android.widget.TextView LINKED ACCOUNTS tappable [37,2086][1045,2130]
android.widget.TextView Email tappable [171,2186][1017,2195]
android.widget.Button Home, tab, 1 of 3 tappable [0,2195][360,2337]
android.widget.TextView HOME tappable [13,2281][347,2320]
android.widget.Button Agents, tab, 2 of 3 tappable [360,2195][720,2337]
android.widget.TextView AGENTS tappable [373,2281][707,2320]
android.widget.Button Profile, tab, 3 of 3 tappable [720,2195][1080,2337]
android.widget.TextView PROFILE tappable [733,2281][1067,2320]

Owner request

Surface: mobile-app

Explorer finding: 2 visual defects on android: The bottom navigation renders only three; The LIVE NOW section renders a large bla

The user-agent explorer found these 2 while using the app like a user. They are one kind of defect on one platform, so they are ONE item: the pull request must fix and prove every one of them.
One must-run scenario per finding: the plan needs 2 musts, one for each finding below.
The explorer never edits product code.

Evidence (from the device runs):

--- Finding 1 of 2: agents-empty: The bottom navigation renders only three tabs (HOME, AGENTS, PROFILE) here and on Profile, while the Home and KiloClaw screens of the same app render four (HOME, KILOCLAW, AGENTS, PROFILE), so the tab bar changes shape from screen to screen.
Flow: agents-empty
Found on revision: d846cc7
Repro:

1. set this state first: uimode day; battery 74 discharging; reviews 5; credits 18; relaunch; deeplink kiloapp://expo-development-client/?url=http%3A%2F%2Flocalhost%3A20081; resume
2. open the app on emulator-5602
3. reach agents-empty
4. the capture shows the defect named below
   Observed: The bottom navigation renders only three tabs (HOME, AGENTS, PROFILE) here and on Profile, while the Home and KiloClaw screens of the same app render four (HOME, KILOCLAW, AGENTS, PROFILE), so the tab bar changes shape from screen to screen.
   Expected: the screen renders without this defect

--- Finding 2 of 2: uia2-warm-emulator-5602: The LIVE NOW section renders a large blank grey card with no text, spinner or content, an undesigned empty/loading state that neither explains itself nor invites an action.
Flow: uia2-warm-emulator-5602
Found on revision: d846cc7
Repro:

1. set this state first: uimode day; battery 74 discharging; reviews 5; credits 18; relaunch; deeplink kiloapp://expo-development-client/?url=http%3A%2F%2Flocalhost%3A20081; resume
2. open the app on emulator-5602
3. reach uia2-warm-emulator-5602
4. the capture shows the defect named below
   Observed: The LIVE NOW section renders a large blank grey card with no text, spinner or content, an undesigned empty/loading state that neither explains itself nor invites an action.
   Expected: the screen renders without this defect

[e5] ux-check: LIVE NOW loading state on cold-open Home (android emulator-5606) — Cold-open Home with the session source stalled: the LIVE NOW section renders its reserved card box [37,357][1043,546] holding a leading mark [40,360][48,502] and two text-line shapes [87,394][704,422] / [87,440][395,468], with 'Nothing running right now' count 0 (e5-loading.log from e5-pending.txt); the settled frame keeps the identical card box, so nothing reflows (e5-settled.txt); captures e5-pending.png/e5-settled.png are for the visual reviewer; no UX-DEFECT.

[e6] ux-check: the LIVE NOW loading card keeps the same 72px-min frame and the buttons below stay at the same y — Android emulator-5554: the pending placeholder ViewGroup is [37,292][1043,481] (189 px = 72 dp), identical to the settled empty card's [37,292][1043,481], and 'New coding task' [37,537][1043,653] and 'New task from a picture' [37,671][1043,787] keep the same y in both states (e6-geometry.log, extracted from e6-loaded.txt and e6-loading.txt; capture e6-loading.png), so no vertical jump; the pending branch was held with a temporary hardcode (content='pending', reverted, git clean) because the live stack resolves it sub-second — stalling services only yields the error or empty branch. No…

Follow-ups (not changed here)

• not proved live: Finding 1: the bottom nav shows the same tab set on Home, Agents and Profile (state signed-in-home; this account owns no KiloClaw instance, so every screen shows HOME, AGENTS, PROFILE and the 'of N' totals must match across the three stills). (no capture cited it)
• not proved live: [advisory] Finding 2 non-retryable unhappy: the LIVE NOW section shows the permission state with 'Back to profile' (needs:seed: the signed-in user in an organization whose activeSessions.list returns FORBIDDEN). (no capture cited it)
• not proved live: ux-check: After the real rows load, the placeholder's text-line left edge aligns with the loaded row's text left edge (within a few px) and the leading mark's width does not change between placeholder and row; pass only if the loaded row's title does not shift horizontally when the placeholder is replaced. (no capture cited it)
• not proved live: ux-check: Cold-open Home on Android so the LIVE NOW section is in its loading state: the section shows a bordered, rounded card with visible inner skeleton content (a leading mark plus text-line shapes), not a blank grey block; pass only if the loading card has inner shapes and does not show 'Nothing running right now'. (no capture cited it)
• not proved live: ux-check: On that same loading state, the LIVE NOW card occupies the same ~72px-min frame as the empty/row cards, and the buttons below it (New task / New task from picture) stay at the same y before and after the real rows or the empty card replace the placeholder (no vertical jump). (no capture cited it)

Open findings (not fixed here)

• not proved live: agents-empty.png is no longer on the host that took it, so no publish can carry it
• not proved live: uia2-warm-emulator-5602.png is no longer on the host that took it, so no publish can carry it

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Reviewed the KiloClaw tab latch (use-kiloclaw-tab-visible.ts) and the reserved LIVE NOW pending placeholder (agent-sessions-section.tsx), plus the accompanying test updates. The latch (previous || owned) matches the documented trade-off, the persistence/sign-out guards in kiloclaw-tab-ownership.ts still hold, and the placeholder reuses the real row geometry (relative flex-row items-start gap-3 py-[13px] pl-[18px] pr-3) and card frame (min-h-[72px] overflow-hidden rounded-2xl border border-border bg-card). No security, memory-leak, or correctness issues were found in the changed lines.

Files Reviewed (5 files)

• apps/mobile/src/components/home/agent-sessions-section.tsx
• apps/mobile/src/components/home/agent-sessions-section.test.ts
• apps/mobile/src/components/home/home-screen.mounted.test.tsx
• apps/mobile/src/lib/hooks/use-kiloclaw-tab-visible.ts
• apps/mobile/src/lib/hooks/use-kiloclaw-tab-visible.mounted.test.tsx

---

_{Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0}

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