Skip to content

fix(mobile): show branch control under label on new-session form - #6447

Merged
iscekic merged 5 commits into
mainfrom
kwf/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc-7ff1
Sep 22, 2026
Merged

iscekic merged 5 commits into
mainfrom
kwf/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc-7ff1

Conversation

@iscekic

@iscekic iscekic commented Sep 20, 2026

Copy link
Copy Markdown
Collaborator

Changelog for users

  • Choosing a repository now shows the Branch label with its branch control directly beneath it, instead of an orphan label over a blank gap.
  • The provider connect card appears below the branch row without covering it.

Changelog for maintainers

  • CollapsibleSection and DisclosureLayout take animateLayout (default true); false drops only the layout transition.
  • The opt-out keeps the content fade-in and the controlled expand/collapse behavior.
  • The new-session connect card opts out, so the branch row that mounts above it is never painted over; security-agent callers keep the 200 ms transition.
  • Reduced motion still drops the transition independently of the new prop.
  • Cause: Reanimated paints a layout-transitioning box at its pre-change position until the transition ends, so the card hid the newly inserted branch row and left the reserved gap.
  • Two unit tests cover the opt-out: one asserts the connect card carries no layout prop and still fades in; the other asserts the opt-out drops the transition while the default keeps the 200 ms one.
  • No locale keys changed, so no i18n check is required.

E2E proof

[e1] ux-check: After selecting a repository, the provider connect card renders below the branch control without overlapping it, and the vertical gap between that card and the following 'Changes' section… — android emulator-5554, head df66203, fresh run 2026-09-20 23:27 UTC: e1-scene.log shows 'SCENE e1 OK' with the digest line 'android.widget.Button Branch: main tappable [37,1448][1043,1559]' above 'android.widget.Button Connect GitLab tappable [76,1626][1004,1672]' and 'android.widget.TextView Changes tappable [37,2020][1045,2066]'; the same moment's hierarchy (e1-hierarchy.txt, cited in e1-layout.log) gives the card box [37,1587][1043,1974], so the gap above the card is 28 px and below it 46 px, identical to the form's normal gaps (1356->1384 = 28 px, 1130->1176 = 46 px) — no overlap, no…

new-session repository section, Android (the diff has one cross-platform component and no Platform.OS branch): with no repository chosen there is no orphan Branch label; after picking a GitHub… — e1.png

[e4] ux-check: Collapse then expand a provider connect card on the new-task-ready form: the Branch label and its control stay fully visible and are never covered, and the form below does not momentarily… — Android emulator-5554: collapse then expand the Connect GitLab card on the same form; e4-collapsed.txt and e4-expanded.txt both carry 'content-desc="Branch: main"' with identical 'bounds="[37,1448][1043,1559]"' and the card header below it at [76,1626][1004,1672], while Changes moves 'bounds="[37,1757][1045,1803]"' (collapsed) to 'bounds="[37,2020][1045,2066]"' (expanded), so the Branch label and its control stay fully visible and are never covered or moved by the collapse/expand; the momentary transition and any layout shift are capture claims for the visual reviewer (e4-collapsed.png…

ux-check: Collapse then expand a provider connect card on the new-task-ready form: the Branch label and its control stay fully visible and are never covered, and the form below does not momentarily… — e4-expanded.png

[e1] ux-check: After selecting a repository, the provider connect card renders below the branch control without overlapping it, and the vertical gap between that card and the following 'Changes' section…

[e1] ux-check: After selecting a repository, the provider connect card renders below the branch control without overlapping it, and the vertical gap between that card and the following 'Changes' section… — e2e-mobile-app/e1.png

[e4] ux-check: Collapse then expand a provider connect card on the new-task-ready form: the Branch label and its control stay fully visible and are never covered, and the form below does not momentarily…

[e4] ux-check: Collapse then expand a provider connect card on the new-task-ready form: the Branch label and its control stay fully visible and are never covered, and the form below does not momentarily… — prior/e4-collapsed.png

[e2] ux-check: new-task-ready branch label has a visible control beneath it — Digest after selecting GitHub iscekic/panon-deking reads in order "Branch" (e19), Button "Branch: main" (e20), "main" (e21), "Default" (e22), "Changes" (e23) — a trigger row directly beneath the label and no blank gap before the next card (e2-repo-selected.png; the changed connect card is absent because every provider is connected, see e2-connect-card-context.log).

[e2] ux-check: new-task-ready branch label has a visible control beneath it — prior/e2-repo-selected.png

[e5] ux-check: branch placeholder swaps to the trigger without moving the label or the card below — With nextjs stalled (fault-stall.log) the row showed the "Loading branches" placeholder (e20), the dropped request settled to "Couldn't load branches" with a working "Retry", and Retry swapped in "Branch: master" at the same row slot while the "Branch" label stayed e19 and the next card stayed directly after it (e5-branch-loading.png, e5-branch-error.png, e5-branch-loaded.png).

[e5] ux-check: branch placeholder swaps to the trigger without moving the label or the card below — prior/e5-branch-loading.png

[e5] ux-check: branch placeholder swaps to the trigger without moving the label or the card below

[e5] ux-check: branch placeholder swaps to the trigger without moving the label or the card below — prior/e5-branch-error.png

E2E proof — log excerpts

[e1] ux-check: After selecting a repository, the provider connect card renders b -> pass :: android emulator-5554, head df66203, fresh run 2026-09-20 23:27 UTC: e1-scene.log shows 'SCENE e1 OK' with the digest line 'android.widget.Button Branch: main tappable [37,1448][1043,1559]' above 'android.widget.Button Connect GitLab tappable [76,1626][1004,1672]' and 'android.widget.TextView Changes tappable [37,2020][1045,2066]'; the same moment's hierarchy (e1-hierarchy.txt, cited in e1-layout.log) gives the card box [37,1587][1043,1974], so the gap above the card is 28 px and below it 46 px, identical to the form's normal gaps (1356->1384 = 28 px, 1130->1176 = 46 px) — no overlap, no empty reserved slot; state created by temporarily removing the personal gitlab integration row and re-ins
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc-7ff1/e2e-mobile-app/e1-scene.log
android.widget.TextView Cloud Agent tappable [67,951][844,1007]
android.widget.Button Refresh tappable [928,921][1043,1037]
android.widget.TextView Run `kilo remote` on your computer, or `/remote` in a running CLI session, to control a local kilo process. tappable [36,1056][1044,1130]
android.widget.TextView Repository tappable [37,1176][1045,1222]
android.widget.Button Repository: GitHub · iscekic/panon-deking tappable [37,1240][1043,1356]
android.widget.TextView GitHub · iscekic/panon-deking tappable [67,1270][978,1326]
android.widget.TextView Branch tappable [37,1384][1045,1430]
android.widget.Button Branch: main tappable [37,1448][1043,1559]
android.widget.TextView main tappable [67,1475][850,1531]
android.widget.TextView Default tappable [867,1484][958,1521]
android.widget.Button Connect GitLab tappable [76,1626][1004,1672]
android.widget.TextView Connect GitLab tappable [76,1626][944,1672]
android.widget.TextView Connect GitLab in your browser, then return here to pick a repository. tappable [76,1700][1004,1792]
android.widget.Button Open GitLab tappable [76,1820][870,1935]
android.widget.TextView Open GitLab tappable [412,1854][594,1900]
android.widget.Button Refresh repositories tappable [888,1820][1004,1935]
android.widget.TextView Changes tappable [37,2020][1045,2066]
android.view.View Changes tappable [37,2084][1043,2203]
android.widget.RadioButton Leave changes tappable [46,2093][540,2194]
android.widget.TextView Leave changes tappable [182,2120][403,2166]
android.widget.RadioButton Commit and push tappable [540,2093][1034,2194]
android.widget.TextView Commit and push tappable [656,2120][917,2166]
android.widget.TextView Environment tappable [37,2250][1045,2296]
android.widget.TextView Default environment tappable [37,2314][1045,2337]
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc-7ff1/e2e-mobile-app/e1-hierarchy.txt
<redacted>
                                      </android.widget.RadioButton>
<redacted>
<redacted>
                                    </android.view.ViewGroup>
                                  </android.widget.ScrollView>
                                </android.view.ViewGroup>
                              </android.view.ViewGroup>
                            </android.widget.ScrollView>
                          </android.view.ViewGroup>
                        </android.view.ViewGroup>
                      </android.view.ViewGroup>
<redacted>
                    </android.view.ViewGroup>
                  </android.view.ViewGroup>
                </android.view.ViewGroup>
              </android.widget.FrameLayout>
            </android.widget.FrameLayout>
          </android.widget.FrameLayout>
        </android.widget.LinearLayout>
      </android.widget.FrameLayout>
    </android.widget.LinearLayout>
  </android.widget.FrameLayout>
</hierarchy>
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc-7ff1/e2e-mobile-app/e1-layout.log
e1 layout measurement — new-session form, android emulator-5554, 2026-09-20 23:27 UTC
source: e1-hierarchy.txt (appium.sh hierarchy dump of the same screen as e1.png)
Branch control (Button "Branch: main")   bounds=[37,1448][1043,1559]   bottom=1559
Connect GitLab card (android.view.ViewGroup, card box) bounds=[37,1587][1043,1974]
Changes section label (TextView "Changes") bounds=[37,2020][1045,2066]  top=2020
Repository label (TextView "Repository")  bounds=[37,1176][1045,1222]
Repository control (Button)                bounds=[37,1240][1043,1356]  bottom=1356
Branch label (TextView "Branch")           bounds=[37,1384][1045,1430]  top=1384
"Run on" help text (TextView)              bounds=[36,1056][1044,1130]   bottom=1130
derived gaps:
  branch control bottom 1559 -> card box top 1587     = 28 px
  card box bottom 1974      -> Changes label top 2020 = 46 px
  repository control bottom 1356 -> Branch label top 1384 = 28 px   (form's normal inter-section gap)
  "Run on" help bottom 1130 -> Repository label top 1176  = 46 px   (form's normal inter-section gap)
card box top 1587 > branch control bottom 1559: the card starts 28 px below the branch
control, i.e. it does not overlap the branch row. Both surrounding gaps (28 px above,
46 px below) equal the same gaps elsewhere in the form, so no empty reserved slot is
left where the card sits.
Owner request

Explorer finding: new-task-ready: Once the repository is chosen, a 'Branch' label sits above no visible branch control, leaving an orphan label and an empty gap in the form.

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: new-task-ready
Found on revision: f2181ae

Repro:

  1. set this state first: fresh; uimode day; size 900x1800; density 280; battery 47 discharging; relaunch; credits 12; the device in light mode
  2. open the app on emulator-5602
  3. reach new-task-ready
  4. the capture shows the defect named below

Observed: Once the repository is chosen, a 'Branch' label sits above no visible branch control, leaving an orphan label and an empty gap in the form.
Expected: the screen renders without this defect

Evidence (from the device run):

Follow-ups (not changed here)

  • not proved live: ux-check: After selecting a repository, the provider connect card renders below the branch control without overlapping it, and the vertical gap between that card and the following 'Changes' section equals the form's normal section spacing (no leftover empty reserved slot). (no capture cited it)
  • not proved live: ux-check: Choose a repository while branches are still loading: the branch row shows a same-height placeholder that swaps to the trigger without moving the label or the connect card below it. (no capture cited it)
  • not proved live: ux-check: In new-task-ready, select a repository (e.g. GitHub · owner/repo): the 'Branch' label has a visible control directly beneath it — a branch trigger row (branch name + chevron), a loading skeleton, or a note row — with no blank gap between the label and the next card. (no capture cited it)

Open findings (not fixed here)

  • not proved live: new-task-ready.png is no longer on the host that took it, so no publish can carry it

e5-branch-loaded

Explorer finding: new-task-ready: Once the repository is chosen, a 'Branch' label sits above no visible branch control, leaving an orphan label and an empty gap in the form.

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: new-task-ready
Found on revision: f2181ae

Repro:
1. set this state first: fresh; uimode day; size 900x1800; density 280; battery 47 discharging; relaunch; credits 12; the device in light mode
2. open the app on emulator-5602
3. reach new-task-ready
4. the capture shows the defect named below

Observed: Once the repository is chosen, a 'Branch' label sits above no visible branch control, leaving an orphan label and an empty gap in the form.
Expected: the screen renders without this defect

Evidence (from the device run):
- ~/.local/share/kwf/findings/explorer-new-task-ready-once-the-repository-is-chosen-a-b-cacfc929/new-task-ready.png
@kilo-code-bot

kilo-code-bot Bot commented Sep 20, 2026 •

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Reviewed the new animateLayout opt-out on CollapsibleSection/DisclosureLayout, its use on the new-session connect card, and the accompanying unit tests. The default stays true, so existing security-agent callers are unaffected, and the opt-out still honors reduced motion. No runtime, logic, security, or data-contract issues found on the changed lines.

Files Reviewed (4 files)
  • apps/mobile/src/components/security-agent/collapsible-section.tsx
  • apps/mobile/src/components/agents/new-session-repository-section.tsx
  • apps/mobile/src/components/security-agent/collapsible-section.mounted.test.tsx
  • apps/mobile/src/components/agents/new-session-repository-section.test.ts

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

Review guidance: REVIEW.md from base branch main

@iscekic

iscekic commented Sep 20, 2026

Copy link
Copy Markdown
Collaborator Author

This description names a scenario the proof did not capture:

  • not proved live: ux-check: After selecting a repository, the provider connect card renders below the branch control without overlapping it, and the vertical gap between that card and the following 'Changes' section equals the form's normal section spacing (no leftover empty reserved slot). (no capture cited it)

A repeated proof run rebuilds the same evidence, so no proof run is dispatched for a named gap. Merging with this gap open is your decision.

@iscekic iscekic added the human-ready The PR is ready for human review. label Sep 20, 2026
@iscekic iscekic self-assigned this Sep 20, 2026

@eshurakov eshurakov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved after a shallow triage pass. No blocking findings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

human-ready The PR is ready for human review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants