From 41ac377aa6677aed3b9c90b4487b815d6a2235a4 Mon Sep 17 00:00:00 2001
From: NeilJo-GY <43027886+NeilJo-GY@users.noreply.github.com>
Date: Fri, 4 Sep 2026 20:05:17 +0800
Subject: [PATCH] fix(composer): keep listing visible while official shelf
 loads

Catalog paging used to replace the whole listbox with an ellipsis whenever
only the listing SKU was present, hiding the model the user can already
send. Show current options and append a loading row instead.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/ranch-shell/RanchChatShell.tsx        | 125 ++++++++++--------
 1 file changed, 71 insertions(+), 54 deletions(-)

diff --git a/packages/agent-chat/src/ranch-shell/RanchChatShell.tsx b/packages/agent-chat/src/ranch-shell/RanchChatShell.tsx
index f27c92e..ffd6224 100644
--- a/packages/agent-chat/src/ranch-shell/RanchChatShell.tsx
+++ b/packages/agent-chat/src/ranch-shell/RanchChatShell.tsx
@@ -5025,6 +5025,9 @@ export function RanchChatShell(props: RanchChatShellProps) {
                               />
                               <ul
                                 role="listbox"
+                                aria-busy={
+                                  composerCatalogLoading && (official || openRouterByo)
+                                }
                                 style={{
                                   margin: 0,
                                   padding: 4,
@@ -5033,66 +5036,80 @@ export function RanchChatShell(props: RanchChatShellProps) {
                                   overflowY: "auto",
                                 }}
                               >
-                                {composerCatalogLoading && (official || openRouterByo) && options.length <= 1 ? (
-                                  <li style={{ padding: "8px", fontSize: 12, color: colors.muted }}>
-                                    …
-                                  </li>
-                                ) : visible.length === 0 ? (
+                                {visible.length === 0 &&
+                                !(
+                                  composerCatalogLoading &&
+                                  (official || openRouterByo)
+                                ) ? (
                                   <li style={{ padding: "8px", fontSize: 12, color: colors.muted }}>
                                     {t.myAgentsPricingOfficialEmpty}
                                   </li>
                                 ) : (
-                                  visible.map((id) => {
-                                    const selected = sameModelId(id, value);
-                                    const rowPrice = priceFor(id);
-                                    return (
-                                      <li key={id} role="none">
-                                        <button
-                                          type="button"
-                                          role="option"
-                                          aria-selected={selected}
-                                          onClick={() => {
-                                            setSelectedModelId(id);
-                                            if (active?.chat_id) {
-                                              writeComposerModelPick(active.chat_id, id);
-                                            }
-                                            setComposerMenuOpen(false);
-                                          }}
-                                          style={{
-                                            display: "flex",
-                                            alignItems: "baseline",
-                                            justifyContent: "space-between",
-                                            gap: 12,
-                                            width: "100%",
-                                            padding: "6px 8px",
-                                            border: "none",
-                                            borderRadius: 8,
-                                            background: selected
-                                              ? colors.hover
-                                              : "transparent",
-                                            color: colors.text,
-                                            cursor: "pointer",
-                                            textAlign: "left",
-                                          }}
-                                        >
-                                          <span style={{ fontWeight: 600, fontSize: 13 }}>
-                                            {shortModelLabel(id) || id}
-                                          </span>
-                                          {rowPrice ? (
-                                            <span
-                                              style={{
-                                                color: colors.muted,
-                                                fontSize: 11,
-                                                whiteSpace: "nowrap",
-                                              }}
-                                            >
-                                              {rowPrice}
+                                  <>
+                                    {visible.map((id) => {
+                                      const selected = sameModelId(id, value);
+                                      const rowPrice = priceFor(id);
+                                      return (
+                                        <li key={id} role="none">
+                                          <button
+                                            type="button"
+                                            role="option"
+                                            aria-selected={selected}
+                                            onClick={() => {
+                                              setSelectedModelId(id);
+                                              if (active?.chat_id) {
+                                                writeComposerModelPick(active.chat_id, id);
+                                              }
+                                              setComposerMenuOpen(false);
+                                            }}
+                                            style={{
+                                              display: "flex",
+                                              alignItems: "baseline",
+                                              justifyContent: "space-between",
+                                              gap: 12,
+                                              width: "100%",
+                                              padding: "6px 8px",
+                                              border: "none",
+                                              borderRadius: 8,
+                                              background: selected
+                                                ? colors.hover
+                                                : "transparent",
+                                              color: colors.text,
+                                              cursor: "pointer",
+                                              textAlign: "left",
+                                            }}
+                                          >
+                                            <span style={{ fontWeight: 600, fontSize: 13 }}>
+                                              {shortModelLabel(id) || id}
                                             </span>
-                                          ) : null}
-                                        </button>
+                                            {rowPrice ? (
+                                              <span
+                                                style={{
+                                                  color: colors.muted,
+                                                  fontSize: 11,
+                                                  whiteSpace: "nowrap",
+                                                }}
+                                              >
+                                                {rowPrice}
+                                              </span>
+                                            ) : null}
+                                          </button>
+                                        </li>
+                                      );
+                                    })}
+                                    {composerCatalogLoading &&
+                                    (official || openRouterByo) ? (
+                                      <li
+                                        style={{
+                                          padding: "8px",
+                                          fontSize: 12,
+                                          color: colors.muted,
+                                        }}
+                                      >
+                                        {t.loading}
                                       </li>
-                                    );
-                                  })
+                                    ) : null}
+                                  </>
                                 )}
                               </ul>
                             </div>