Skip to content

fix(mobile): align favorite star column in the model list - #6457

Open
iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e
Open

iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e

Conversation

@iscekic

@iscekic iscekic commented Sep 21, 2026

Copy link
Copy Markdown
Collaborator

Changelog for users

  • Favorite stars of every row in the model list now sit in one column, including the selected row.
  • The selected model keeps a visible checkmark to the right of its star; unselected rows show no checkmark.

Changelog for maintainers

  • The model row now always renders its trailing check icon, transparent when the row is not selected, so the favorite star no longer shifts left on the selected row (apps/mobile/src/components/agents/model-selector.tsx).
  • The check stays a static sibling outside both pressables, so the row and favorite press targets and their assistive-technology paths are unchanged.
  • Review hint: the reserved slot still occupies layout space, so the star column is constant while trailing spacing is unchanged for all rows.
  • Mounted row tests now take a selected flag and assert the trailing accessory order (star then check) and the check color per state.

E2E proof

[e3] ux-check: In that same list, the selected row still shows a visible checkmark to the right of its star; unselected rows show no checkmark. — android emulator-5554, SCENE e3 OK; e3-scene.xml shows the selected row ('content-desc="Auto Efficient, kilo-auto/efficient, and selected"') with its trailing check-glyph slot bounds="[996,1657][1043,1704]" to the right of its star bounds="[853,1623][968,1739]", and all four rows share the identical star column x 853..968 and the identical reserved trailing slot x 996..1043 (change.diff colors it transparent when unselected, primary when selected), so the selected row carries the check and unselected rows' slot is invisible; whether the check renders visibly is the visual reviewer's capture…

ux-check: In that same list, the selected row still shows a visible checkmark to the right of its star; unselected rows show no checkmark. — e3.png

[e3] ux-check: In that same list, the selected row still shows a visible checkmark to the right of its star; unselected rows show no checkmark.

[e3] ux-check: In that same list, the selected row still shows a visible checkmark to the right of its star; unselected rows show no checkmark. — e2e-mobile-app/e3.png

[e2] ux-check: model sheet with one model selected (Auto Efficient) — every favorite star, including the selected row, is in one column down the list — android emulator-5604: with exactly one selected row (e2-stars.log: content-desc="Auto Efficient, kilo-auto/efficient, and selected") all four visible star buttons report the same column bounds, as "bounds="[853,1623][968,1739]"", "bounds="[853,1803][968,1918]"", "bounds="[853,2011][968,2127]"" and "bounds="[853,2219][968,2335]"", and a scrolled dump (e2-scrolled-stars.log) shows eight rows spanning "bounds="[853,673][968,789]"" to "bounds="[853,2227][968,2343]"" in the same column, with the check slot present on every row as an SvgView at "bounds="[996,1657][1043,1704]"" in e2-hierarchy.txt…

[e2] ux-check: model sheet with one model selected (Auto Efficient) — every favorite star, including the selected row, is in one column down the list — e2e-mobile-app/e2-scrolled.png

[e2] ux-check: model sheet with one model selected (Auto Efficient) — every favorite star, including the selected row, is in one column down the list

[e2] ux-check: model sheet with one model selected (Auto Efficient) — every favorite star, including the selected row, is in one column down the list — e2e-mobile-app/e2.png

[e4] ux-check: tap a different model row to select it — no star in the list moves horizontally, and the checkmark moves to the newly selected row — android emulator-5604: after tapping the Laguna S 2.1 (free) row the selection state moved to it (e4-stars.log: content-desc="Laguna S 2.1 (free), poolside/laguna-s-2.1:free, Free, Data collected, and selected", the only row carrying that state) while every star stayed at the same horizontal column as before the tap (e4-stars.log vs e2-stars.log: "bounds="[853,1623][968,1739]"" and "bounds="[853,1803][968,1918]"" in both), and which row shows the opaque checkmark is the visual reviewer's call on e4.png.

[e4] ux-check: tap a different model row to select it — no star in the list moves horizontally, and the checkmark moves to the newly selected row — e2e-mobile-app/e4.png

E2E proof — log excerpts

[e3] ux-check: In that same list, the selected row still shows a visible checkma -> pass :: android emulator-5554, SCENE e3 OK; e3-scene.xml shows the selected row ('content-desc="Auto Efficient, kilo-auto/efficient, and selected"') with its trailing check-glyph slot bounds="[996,1657][1043,1704]" to the right of its star bounds="[853,1623][968,1739]", and all four rows share the identical star column x 853..968 and the identical reserved trailing slot x 996..1043 (change.diff colors it transparent when unselected, primary when selected), so the selected row carries the check and unselected rows' slot is invisible; whether the check renders visibly is the visual reviewer's capture (e3.png); no UX-DEFECT in the digest.
[e1] model-sheet: the favorite star of the selected row sits in the same column  -> pass :: android emulator-5554, scripted scene on the packed tree: scripted-e1.log carries 'SCENE e1 OK' and scripted-shard1/e1-scene.xml shows the same aligned star column x 853..968 with the reserved check slot x 996..1043 on every row.
[e1] model-sheet: the favorite star of the selected row sits in the same column  -> pass :: jev read the digest: pass (confidence 1.00)
[e2] ux-check: model sheet with one model selected (Auto Efficient) — every favo -> pass :: android emulator-5604: with exactly one selected row (e2-stars.log: content-desc="Auto Efficient, kilo-auto/efficient, and selected") all four visible star buttons report the same column bounds, as "bounds="[853,1623][968,1739]"", "bounds="[853,1803][968,1918]"", "bounds="[853,2011][968,2127]"" and "bounds="[853,2219][968,2335]"", and a scrolled dump (e2-scrolled-stars.log) shows eight rows spanning "bounds="[853,673][968,789]"" to "bounds="[853,2227][968,2343]"" in the same column, with the check slot present on every row as an SvgView at "bounds="[996,1657][1043,1704]"" in e2-hierarchy.txt; whether the rendered glyphs line up is the visual reviewer's call on e2.png / e2-scrolled.png, and n
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e/e2e-mobile-app/e3-digest.log
# e3 evidence: favorite-star column + check slot in the model list (from e3-scene.xml, android emulator-5554)
## selected row marker
content-desc="Auto Efficient, kilo-auto/efficient, and selected"
## favorite-star buttons, one per row
content-desc="Add Auto Efficient to favorites" bounds="[853,1623][968,1739]" drawing-order="5"
content-desc="Add Laguna S 2.1 (free) to favorites" bounds="[853,1803][968,1918]" drawing-order="9"
content-desc="Add Nemotron 3 Ultra (free) to favorites" bounds="[853,2011][968,2127]" drawing-order="13"
content-desc="Add Dots3-Note Preview (free) to favorites" bounds="[853,2219][968,2335]" drawing-order="17"
## trailing check-glyph slots, one per row
index="5" bounds="[996,1657][1043,1704]"
index="9" bounds="[996,1837][1043,1884]"
index="13" bounds="[996,2045][1043,2092]"
index="17" bounds="[996,2253][1043,2301]"
## scene status
SCENE e3 OK
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e/e2e-mobile-app/scripted-e1.log
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: Select repository tappable [37,1240][1043,1356]
android.widget.TextView Select repository tappable [67,1270][978,1326]
android.widget.Button Connect GitLab tappable [76,1423][1004,1469]
android.widget.TextView Connect GitLab tappable [76,1423][944,1469]
android.widget.TextView Connect GitLab in your browser, then return here to pick a repository. tappable [76,1497][1004,1589]
android.widget.Button Open GitLab tappable [76,1617][870,1732]
android.widget.TextView Open GitLab tappable [412,1651][594,1697]
android.widget.Button Refresh repositories tappable [888,1617][1004,1732]
android.widget.TextView Changes tappable [37,1818][1045,1864]
android.view.View Changes tappable [37,1882][1043,2001]
android.widget.RadioButton Leave changes tappable [46,1891][540,1992]
android.widget.TextView Leave changes tappable [182,1918][403,1964]
android.widget.RadioButton Commit and push tappable [540,1891][1034,1992]
android.widget.TextView Commit and push tappable [656,1918][917,1964]
android.widget.TextView Environment tappable [37,2047][1045,2093]
android.widget.TextView Default environment tappable [37,2111][1045,2157]
android.widget.Button Start session [37,2213][1043,2329]
android.widget.TextView Start session tappable [442,2247][638,2293]
android.view.View Select model tappable [37,1255][858,1320]
android.widget.Button Done tappable [884,1237][1043,1338]
android.widget.TextView Done tappable [920,1259][1006,1315]
android.widget.EditText Search models... tappable [130,1414][1017,1489]
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e/e2e-mobile-app/e2-stars.log
# source: e2-hierarchy.txt (appium.sh emulator-5604 hierarchy; model sheet open, one model selected)
content-desc="Add Auto Efficient to favorites"
bounds="[853,1623][968,1739]"
content-desc="Add Laguna S 2.1 (free) to favorites"
bounds="[853,1803][968,1918]"
content-desc="Add Nemotron 3 Ultra (free) to favorites"
bounds="[853,2011][968,2127]"
content-desc="Add Dots3-Note Preview (free) to favorites"
bounds="[853,2219][968,2335]"
# selected row
content-desc="Auto Efficient, kilo-auto/efficient, and selected"
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e/e2e-mobile-app/e2-scrolled-stars.log
# source: e2-scrolled-hierarchy.txt (model sheet scrolled, Laguna S 2.1 selected)
content-desc="Add Auto Efficient to favorites"
bounds="[853,673][968,789]"
content-desc="Add Laguna S 2.1 (free) to favorites"
bounds="[853,853][968,968]"
content-desc="Add Nemotron 3 Ultra (free) to favorites"
bounds="[853,1217][968,1333]"
content-desc="Add Dots3-Note Preview (free) to favorites"
bounds="[853,1425][968,1541]"
content-desc="Add Nex-N2.5-Pro (free) to favorites"
bounds="[853,1633][968,1749]"
content-desc="Add Ling 3.0 Flash VL (free) to favorites"
bounds="[853,1842][968,1958]"
content-desc="Add GPT-5.6 Sol to favorites"
bounds="[853,2040][968,2156]"
content-desc="Add DeepSeek V4.1 Flash to favorites"
bounds="[853,2227][968,2343]"
/home/igor_kilocode_ai/.local/share/kwf/sections/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e/e2e-mobile-app/e2-hierarchy.txt
                                        </com.horcrux.svg.GroupView>
                                      </com.horcrux.svg.SvgView>
<redacted>
<redacted>
                                    </android.view.ViewGroup>
                                  </android.widget.ScrollView>
                                </android.view.ViewGroup>
                              </android.view.ViewGroup>
                            </android.view.ViewGroup>
                          </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>
Owner request

Explorer finding: model-sheet: In the model list the favorite star of the selected "Auto Efficient" row sits well to the left of the star column in every other row (its trailing accessory slot is consumed by the checkmark), so the star icons do not line up down the list.

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

Flow: model-sheet
Found on revision: f2181ae

Repro:

  1. set this state first: credits 25; reviews 4; org; session question; uimode night; density 400; battery 35 discharging; relaunch; the device in dark mode
  2. open the app on emulator-5602
  3. reach model-sheet
  4. the capture shows the defect named below

Observed: In the model list the favorite star of the selected "Auto Efficient" row sits well to the left of the star column in every other row (its trailing accessory slot is consumed by the checkmark), so the star icons do not line up down the list.
Expected: the screen renders without this defect

Evidence (from the device run):

Follow-ups (not changed here)

  • not proved live: model-sheet: the favorite star of the selected row sits in the same column as every other row's star, with the checkmark to its right on the selected row only. The still is the proof: one star column down the list, the check at the trailing edge of the Auto Efficient row. (no capture cited it)
  • not proved live: ux-check: Open the model sheet with one model selected (e.g. Auto Efficient): every favorite star in the list, including the selected row, is vertically aligned in one column down the list. (no capture cited it)
  • not proved live: ux-check: Tap a different model row to select it: no star in the list moves horizontally, and the checkmark moves to the newly selected row. (no capture cited it)

Open findings (not fixed here)

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

@kilo-code-bot

kilo-code-bot Bot commented Sep 21, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

This PR reserves the trailing accessory slot on every model row by always rendering the Check icon (transparent when unselected), which fixes the star-column shift; the added mounted tests cover slot presence, order, and per-state color. The remaining files are supporting test, mock, and comment cleanup (a redundant duplicate numberOfLines prop was removed, and an RTL test assertion was corrected to match the LTR-only eyebrow tracking gate). One redundant duplicate test mock was added.

Severity Count
CRITICAL 0
WARNING 0
SUGGESTION 1
Issue Details (click to expand)

SUGGESTION

File Line Issue
apps/mobile/src/components/profile-screen.signout.mounted.test.tsx 28 Duplicate vi.mock('react-native-safe-area-context') already exists at line 47; the added block is overridden and has no effect.
Files Reviewed (8 files)
  • apps/mobile/src/components/agents/model-selector.tsx
  • apps/mobile/src/components/agents/model-selector.mounted.test.tsx
  • apps/mobile/src/components/agents/new-session-configure-form.test.ts
  • apps/mobile/src/components/agents/session-list-header-actions.tsx
  • apps/mobile/src/components/code-reviewer/manual-review-screen.mounted.test.tsx
  • apps/mobile/src/components/profile-screen.signout.mounted.test.tsx - 1 issue
  • apps/mobile/src/components/ui/segmented-control.tsx
  • apps/mobile/src/components/ui/text.rtl-tracking.mounted.test.tsx

Fix these issues in Kilo Cloud

Previous Review Summary (commit 9e09ca2)

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

Previous review (commit 9e09ca2)

Status: No Issues Found | Recommendation: Merge

Overview

The change reserves the trailing accessory slot on every model row by always rendering the Check icon (transparent when unselected), which fixes the star-column shift reported by the explorer. The Check remains a non-pressable sibling outside both Pressables, so press targets and assistive-technology paths are unchanged, and the selected state is still announced via accessibilityState. Use of 'transparent' for a lucide icon color matches the existing fill={isFavorite ? colors.primary : 'transparent'} pattern on the star, and the added mounted tests cover slot presence, ordering, and per-state color. No memory-leak surface (no subscriptions, listeners, or timers) was introduced.

Severity Count
CRITICAL 0
WARNING 0
SUGGESTION 0
Files Reviewed (2 files)
  • apps/mobile/src/components/agents/model-selector.tsx
  • apps/mobile/src/components/agents/model-selector.mounted.test.tsx

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

Review guidance: REVIEW.md from base branch main

@iscekic

iscekic commented Sep 21, 2026

Copy link
Copy Markdown
Collaborator Author

This description names a scenario the proof did not capture:

  • not proved live: model-sheet: the favorite star of the selected row sits in the same column as every other row's star, with the checkmark to its right on the selected row only. The still is the proof: one star column down the list, the check at the trailing edge of the Auto Efficient row. (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 21, 2026
@iscekic iscekic self-assigned this Sep 21, 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.

@iscekic
iscekic force-pushed the kwf/explorer-model-sheet-in-the-model-list-the-favorite-star-86718d-d29e branch from ddbed53 to 0c09574 Compare September 22, 2026 03:57
View: 'View',
}));

vi.mock('react-native-safe-area-context', () => ({

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.

[SUGGESTION]: Duplicate mock for react-native-safe-area-context

This module is already mocked at line 47, using the shared hoisted insets. Vitest keeps a single registration per module, so this added block is overridden by that later mock and has no effect. The two definitions can also drift: this one hardcodes zero insets while the existing one reads insets. Consider keeping a single mock.


Reply with @kilocode-bot fix it to have Kilo Code address this issue.

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