fix(chat): hide starred models the catalog no longer serves

A starred model a provider stopped serving kept rendering as starred
through the synthesized row for the current selection: rows otherwise
come only from the available models, so dead stars were already
invisible everywhere else.

RecommendedModelList now takes the raw catalog (catalogModels) and
honors starred state only for models present in it. The dropped current
model stays visible and selectable but renders unstarred, without a
star toggle (a dead model cannot be favorited). Stored entries are kept,
so a star returns if the provider serves the model again; hard pruning
was rejected because loading/partial-catalog states could wipe stars.

Tests: a starred current model dropped by its provider renders
unstarred with no toggle or divider (verified red without the fix),
and a star for a model absent from the list renders no row while its
entry survives.

Co-authored-by: Goose <opensource@block.xyz>

Author: NickTitle

src/features/chat/ui/AgentModelPicker.tsx

@@ -703,6 +703,7 @@ export function AgentModelPicker({
                   key={selectedAgentId}
                   ref={modelListRef}
                   models={displayedModels}
+                  catalogModels={availableModels}
                   currentModelId={currentModelId}
                   currentModelProviderId={currentModelProviderId}
                   selectedAgentId={selectedAgentId}

src/features/chat/ui/AgentModelPickerLists.tsx

@@ -134,6 +134,14 @@ function sortModels(
 
 interface ModelListProps {
   models: ModelOption[];
+  /**
+   * The authoritative catalog the rows were built from, without any
+   * synthesized rows for the current selection. Starred state is only
+   * honored for models present here, so favorited models a provider no
+   * longer serves stop rendering as starred. Omit to treat every row as
+   * existing.
+   */
+  catalogModels?: ModelOption[];
   currentModelId: string | null;
   currentModelProviderId: string | null;
   selectedAgentId: string;
@@ -157,6 +165,7 @@ export const RecommendedModelList = forwardRef<
 >(function RecommendedModelList(
   {
     models,
+    catalogModels,
     currentModelId,
     currentModelProviderId,
     selectedAgentId,
@@ -166,7 +175,33 @@ export const RecommendedModelList = forwardRef<
   },
   ref,
 ) {
-  const { isStarred, toggleStar, starredKeys } = useStarredModels();
+  const { toggleStar, starredKeys } = useStarredModels();
+  // Rows include a synthesized entry for the current selection when the
+  // catalog no longer serves it. Honoring starred state only for catalog
+  // models keeps a favorited model a provider dropped from rendering as
+  // starred; the stored entry survives so the star returns if the model does.
+  const existingModelKeys = useMemo(() => {
+    if (!catalogModels) {
+      return null;
+    }
+    return new Set(
+      catalogModels.map((model) =>
+        modelStarKey(model.providerId ?? selectedAgentId, model.id),
+      ),
+    );
+  }, [catalogModels, selectedAgentId]);
+  const liveStarredKeys = useMemo(() => {
+    if (!existingModelKeys) {
+      return starredKeys;
+    }
+    const live = new Set<string>();
+    for (const key of starredKeys) {
+      if (existingModelKeys.has(key)) {
+        live.add(key);
+      }
+    }
+    return live;
+  }, [existingModelKeys, starredKeys]);
   const [searchOpen, setSearchOpen] = useState(false);
   const [showAll, setShowAll] = useState(false);
   const [query, setQuery] = useState("");
@@ -191,7 +226,7 @@ export const RecommendedModelList = forwardRef<
   const recencyMap = useModelRecency();
   const recommended = useMemo(() => {
     const starred = models.filter((model) =>
-      starredKeys.has(
+      liveStarredKeys.has(
         modelStarKey(model.providerId ?? selectedAgentId, model.id),
       ),
     );
@@ -208,7 +243,7 @@ export const RecommendedModelList = forwardRef<
             currentModelId,
             currentModelProviderId,
           ) &&
-          !starredKeys.has(
+          !liveStarredKeys.has(
             modelStarKey(
               entry.model.providerId ?? selectedAgentId,
               entry.model.id,
@@ -229,7 +264,9 @@ export const RecommendedModelList = forwardRef<
       .filter(
         (m) =>
           !recent.some((r) => r.id === m.id && r.providerId === m.providerId) &&
-          !starredKeys.has(modelStarKey(m.providerId ?? selectedAgentId, m.id)),
+          !liveStarredKeys.has(
+            modelStarKey(m.providerId ?? selectedAgentId, m.id),
+          ),
       );
     const shortlist = [...recent, ...rec];
     if (
@@ -251,7 +288,7 @@ export const RecommendedModelList = forwardRef<
     }
     const unstarredFallback = models.filter(
       (model) =>
-        !starredKeys.has(
+        !liveStarredKeys.has(
           modelStarKey(model.providerId ?? selectedAgentId, model.id),
         ),
     );
@@ -265,7 +302,7 @@ export const RecommendedModelList = forwardRef<
     currentModelProviderId,
     recencyMap,
     selectedAgentId,
-    starredKeys,
+    liveStarredKeys,
   ]);
 
   useEffect(() => {
@@ -313,7 +350,7 @@ export const RecommendedModelList = forwardRef<
     const unstarred: ModelOption[] = [];
     for (const model of visibleModels) {
       const scopeId = model.providerId ?? selectedAgentId;
-      (starredKeys.has(modelStarKey(scopeId, model.id))
+      (liveStarredKeys.has(modelStarKey(scopeId, model.id))
         ? starred
         : unstarred
       ).push(model);
@@ -334,7 +371,7 @@ export const RecommendedModelList = forwardRef<
     currentModelProviderId,
     recencyMap,
     selectedAgentId,
-    starredKeys,
+    liveStarredKeys,
   ]);
   const sorted = [...grouped.starred, ...grouped.unstarred];
 
@@ -449,15 +486,18 @@ export const RecommendedModelList = forwardRef<
                 currentModelProviderId,
               );
               const scopeId = model.providerId ?? selectedAgentId;
-              const starred = isStarred(scopeId, model.id);
+              const modelKey = modelStarKey(scopeId, model.id);
+              const starred = liveStarredKeys.has(modelKey);
+              const existsInCatalog =
+                !existingModelKeys || existingModelKeys.has(modelKey);
               const showStarredDivider =
                 index === grouped.starred.length - 1 &&
                 grouped.unstarred.length > 0;
               return (
-                <div key={modelStarKey(scopeId, model.id)}>
+                <div key={modelKey}>
                   <div
                     className="group flex min-w-0 items-center gap-1"
-                    data-model-key={modelStarKey(scopeId, model.id)}
+                    data-model-key={modelKey}
                     data-starred={starred || undefined}
                   >
                     <PickerItem
@@ -485,28 +525,30 @@ export const RecommendedModelList = forwardRef<
                         <IconCheck className="size-4 shrink-0 text-muted-foreground" />
                       ) : null}
                     </PickerItem>
-                    <Button
-                      variant="ghost"
-                      size="icon-xs"
-                      selected={starred}
-                      onClick={() => toggleStar(scopeId, model.id)}
-                      // Hover-reveal keeps rows calm; keyboard users still
-                      // reach the control through row focus
-                      // (group-focus-within) or direct focus. The idle
-                      // (unstarred) star rests on the ghost icon contract's
-                      // muted-foreground — ≈5.7:1 light / ≈6.1:1 dark against
-                      // the popover, above the 3:1 WCAG non-text bar
-                      // (enforced in globals.test.ts) — and favorited rows
-                      // soften to foreground/80 via the selected flag.
-                      className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
-                      aria-label={t(
-                        starred ? "toolbar.unstarModel" : "toolbar.starModel",
-                        { model: getModelDisplayName(model) },
-                      )}
-                      aria-pressed={starred}
-                    >
-                      {starred ? <IconStarFilled /> : <IconStar />}
-                    </Button>
+                    {existsInCatalog ? (
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        selected={starred}
+                        onClick={() => toggleStar(scopeId, model.id)}
+                        // Hover-reveal keeps rows calm; keyboard users still
+                        // reach the control through row focus
+                        // (group-focus-within) or direct focus. The idle
+                        // (unstarred) star rests on the ghost icon contract's
+                        // muted-foreground — ≈5.7:1 light / ≈6.1:1 dark against
+                        // the popover, above the 3:1 WCAG non-text bar
+                        // (enforced in globals.test.ts) — and favorited rows
+                        // soften to foreground/80 via the selected flag.
+                        className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
+                        aria-label={t(
+                          starred ? "toolbar.unstarModel" : "toolbar.starModel",
+                          { model: getModelDisplayName(model) },
+                        )}
+                        aria-pressed={starred}
+                      >
+                        {starred ? <IconStarFilled /> : <IconStar />}
+                      </Button>
+                    ) : null}
                   </div>
                   {showStarredDivider ? (
                     <Separator

src/features/chat/ui/__tests__/AgentModelPicker.test.tsx

@@ -2108,4 +2108,89 @@ describe("AgentModelPicker starred models", () => {
       removeItemSpy.mockRestore();
     }
   });
+  it("renders a starred current model unstarred once its provider drops it", async () => {
+    seedStar("prov-a", "ghost");
+    __resetStarredModelsCacheForTests();
+    const user = userEvent.setup();
+    render(
+      <AgentModelPicker
+        agents={AGENTS}
+        selectedAgentId="goose"
+        onAgentChange={vi.fn()}
+        currentModelId="ghost"
+        currentModelName="Ghost"
+        currentModelProviderId="prov-a"
+        availableModels={[
+          {
+            id: "preferred",
+            name: "Preferred",
+            recommended: true,
+            providerId: "prov-a",
+          },
+          { id: "other", name: "Other", providerId: "prov-a" },
+        ]}
+        onModelChange={vi.fn()}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /choose agent and model/i }),
+    );
+    screen.getByRole("dialog");
+
+    // The dropped selection stays visible so the user can see what is in use...
+    const ghostRow = document.querySelector(
+      '[data-model-key=\'["prov-a","ghost"]\']',
+    );
+    expect(ghostRow).toBeInTheDocument();
+    // ...but it is no longer a favorite: no star state, no toggle, no divider.
+    expect(ghostRow).not.toHaveAttribute("data-starred");
+    expect(
+      within(ghostRow as HTMLElement).queryByRole("button", {
+        name: /star ghost/i,
+      }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("starred-models-divider"),
+    ).not.toBeInTheDocument();
+    // The stored entry survives so the star returns if the model does.
+    expect(
+      localStorage.getItem(
+        starredModelStorageKey(modelStarKey("prov-a", "ghost")),
+      ),
+    ).toBe("1");
+  });
+
+  it("hides a starred model that is no longer in the available list", async () => {
+    seedStar("goose", "ghost");
+    __resetStarredModelsCacheForTests();
+    const user = userEvent.setup();
+    render(
+      <AgentModelPicker
+        agents={AGENTS}
+        selectedAgentId="goose"
+        onAgentChange={vi.fn()}
+        currentModelId="preferred"
+        currentModelName="Preferred"
+        availableModels={[
+          { id: "preferred", name: "Preferred", recommended: true },
+          { id: "other", name: "Other" },
+        ]}
+        onModelChange={vi.fn()}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /choose agent and model/i }),
+    );
+
+    expect(
+      document.querySelector('[data-model-key=\'["goose","ghost"]\']'),
+    ).not.toBeInTheDocument();
+    expect(
+      localStorage.getItem(
+        starredModelStorageKey(modelStarKey("goose", "ghost")),
+      ),
+    ).toBe("1");
+  });
 });