Proposal H, Step 2 PR 2b: requested-printing badge + Confirm affordance in the display rail (#102)

Wires EditorSearchResponse.degradedQueries end to end for the first time on the
frontend (previously captured by the API but discarded before reaching Redux):
APIEditorSearch now returns {results, degradedQueries} instead of discarding the
latter, searchResultsSlice accumulates degradedQueryHashKeys across paginated
search requests, and a new selectIsSearchQueryDegraded selector answers "did this
printing-filtered query get retried unfiltered" for a given slot's query.

The display rail's always-visible header consumes that selector: the requested-
printing badge switches from bg-secondary to a bg-warning degraded style (plus a
warning icon and explanatory title) when the backend reports the filter as
degraded, per the design doc's §2/§5. Bootswatch's Superhero theme is known to
hardcode some component colors past the CSS-variable layer (see PR #91), so the
new Playwright test verifies actual computed background-color, not just the class
name, to confirm the degraded state really renders distinctly.

The header also mounts the real DeckbuilderConfirmAffordance - the same component
CardSlot.tsx already mounts, adapted only via its onOpenGridSelector prop: the
rail has no modal to open, so N expands (or keeps expanded) the Choose Image
accordion section instead of opening GridSelectorModal.


Claude-Session: https://claude.ai/code/session_01MHapYojTkT5wenrQwGbGYk

Co-authored-by: Claude <noreply@anthropic.com>

Author: WilfordGrimley

frontend/src/common/types.ts

@@ -111,6 +111,11 @@ export interface SearchResults {
 
 export interface SearchResultsState extends ThunkStateBase {
   searchResults: SearchResults;
+  // Hash keys (matching `searchResults`' own keys) of queries whose printing-specific filter
+  // (expansionCode/collectorNumber) found nothing and were retried unfiltered by the backend -
+  // mirrors EditorSearchResponse.degradedQueries (schema_types.ts). Client-side search results
+  // never populate this - only the remote backend can report a degraded search.
+  degradedQueryHashKeys: Array<string>;
 }
 
 export interface BackendState {

frontend/src/features/display/DisplayPage.tsx

@@ -5,9 +5,14 @@
  * + accordion (AutofillCollapse, per the owner's accordion amendment). Choose Image is wired to
  * the real candidate/version picker (Step 2 PR 2a - see ChooseImageSection below, and
  * useGridSelectorSearch.ts/GridSelectorResults.tsx, extracted from GridSelectorModal.tsx so both
- * surfaces share one real search implementation). Every other accordion section still renders a
- * labeled stub - see each section's own comment for which later PR fills it in, per the design
- * doc's §6 migration/sequencing plan.
+ * surfaces share one real search implementation). The always-visible header now carries the real
+ * requested-printing badge (Step 2 PR 2b - degraded-style variant keyed off
+ * EditorSearchResponse.degradedQueries, wired end to end through searchResultsSlice's
+ * selectIsSearchQueryDegraded) and the real DeckbuilderConfirmAffordance (same component
+ * CardSlot.tsx mounts, adapted only via its onOpenGridSelector prop - the rail has no modal to
+ * open, so N expands the Choose Image section instead). Every other accordion section still
+ * renders a labeled stub - see each section's own comment for which later PR fills it in, per
+ * the design doc's §6 migration/sequencing plan.
  *
  * Deliberately NOT built here (see the design doc + this task's relay reports for the full
  * reasoning): the tablet off-canvas drawer and mobile bottom-sheet overlay interaction patterns
@@ -38,6 +43,7 @@ import {
   useAppSelector,
 } from "@/common/types";
 import { AutofillCollapse } from "@/components/AutofillCollapse";
+import { DeckbuilderConfirmAffordance } from "@/features/card/DeckbuilderConfirmAffordance";
 import { paginateSlotsForDisplay } from "@/features/display/displayPagination";
 import { GridSelectorResults } from "@/features/gridSelector/GridSelectorResults";
 import { useGridSelectorSearch } from "@/features/gridSelector/useGridSelectorSearch";
@@ -55,7 +61,10 @@ import {
   selectProjectMembers,
   setSelectedImages,
 } from "@/store/slices/projectSlice";
-import { selectSearchResultsForQueryOrDefault } from "@/store/slices/searchResultsSlice";
+import {
+  selectIsSearchQueryDegraded,
+  selectSearchResultsForQueryOrDefault,
+} from "@/store/slices/searchResultsSlice";
 import {
   selectFrontsVisible,
   toggleFaces,
@@ -140,13 +149,25 @@ interface RailHeaderProps {
   slot: number;
   cardName: string | undefined;
   printingBadge: string | undefined;
+  // Whether this slot's printing-specific search (expansionCode/collectorNumber) found nothing
+  // and the backend retried it unfiltered - EditorSearchResponse.degradedQueries, wired end to
+  // end in Step 2's second instrument PR (see selectIsSearchQueryDegraded). Meaningless when
+  // printingBadge is undefined (no printing filter to have degraded in the first place).
+  isDegraded: boolean;
+  cardIdentifier: string | undefined;
+  searchQuery: SearchQuery | undefined;
+  onOpenChooseImage: () => void;
 }
 
 const RailHeader = ({
   face,
   slot,
   cardName,
   printingBadge,
+  isDegraded,
+  cardIdentifier,
+  searchQuery,
+  onOpenChooseImage,
 }: RailHeaderProps) => (
   <div className="p-2 border-bottom" data-testid="display-rail-header">
     <div className="fw-bold">
@@ -160,16 +181,34 @@ const RailHeader = ({
     </div>
     {printingBadge != null && (
       <span
-        className="badge bg-secondary mt-1"
+        className={`badge mt-1 ${
+          isDegraded ? "bg-warning text-dark" : "bg-secondary"
+        }`}
         style={{ fontFamily: "monospace" }}
         data-testid="display-printing-badge"
+        data-degraded={isDegraded}
+        title={
+          isDegraded
+            ? "This printing wasn't found - showing the closest available match instead."
+            : undefined
+        }
       >
+        {isDegraded && <i className="bi bi-exclamation-triangle-fill me-1" />}
         {printingBadge}
       </span>
     )}
-    {/* Confirm? affordance (DeckbuilderConfirmAffordance) wires in here for real in Step 2's
-        second instrument PR, alongside the printing badge's full degraded-state treatment
-        (degradedQueries) - see the design doc's §6. */}
+    {/* Adapts CardSlot.tsx's own mount of this component (same props, same gating logic inside
+        DeckbuilderConfirmAffordance itself - not forked) for the rail's status header: N's
+        "open the grid selector" becomes "expand (or keep expanded, if already open) the Choose
+        Image accordion section" here instead of opening GridSelectorModal, since the rail has
+        no modal to open - see the design doc's §4.3/§4.4. */}
+    {cardIdentifier != null && (
+      <DeckbuilderConfirmAffordance
+        cardIdentifier={cardIdentifier}
+        searchQuery={searchQuery}
+        onOpenGridSelector={onOpenChooseImage}
+      />
+    )}
   </div>
 );
 
@@ -308,6 +347,20 @@ const Rail = ({ selectedSlotRef, cardDocumentsByIdentifier }: RailProps) => {
       ? selectProjectMember(state, selectedSlotRef.face, selectedSlotRef.slot)
       : undefined
   );
+  const query = projectMember?.query;
+  // Hooks must run unconditionally on every render (same order regardless of selectedSlotRef),
+  // so this - like the projectMember selector above - is called before the idle-state early
+  // return below, with the "nothing selected yet" case handled inside the selector itself
+  // rather than by skipping the call.
+  const isDegraded = useAppSelector((state) =>
+    selectIsSearchQueryDegraded(
+      state,
+      query?.query,
+      query?.cardType,
+      query?.expansionCode,
+      query?.collectorNumber
+    )
+  );
 
   if (selectedSlotRef == null) {
     return (
@@ -320,7 +373,6 @@ const Rail = ({ selectedSlotRef, cardDocumentsByIdentifier }: RailProps) => {
     );
   }
 
-  const query = projectMember?.query;
   const selectedImage = projectMember?.selectedImage;
   const cardName =
     selectedImage != null
@@ -338,6 +390,11 @@ const Rail = ({ selectedSlotRef, cardDocumentsByIdentifier }: RailProps) => {
       ...previous,
       [key]: !previous[key],
     }));
+  // "focus, if already open" (design doc §4.3.4) - always force-open, never toggle-closed, so
+  // the Confirm affordance's N path can't accidentally collapse a section the user already had
+  // open.
+  const onOpenChooseImage = () =>
+    setExpandedSections((previous) => ({ ...previous, chooseImage: true }));
 
   return (
     <div data-testid="display-rail-content">
@@ -346,6 +403,10 @@ const Rail = ({ selectedSlotRef, cardDocumentsByIdentifier }: RailProps) => {
         slot={selectedSlotRef.slot}
         cardName={cardName}
         printingBadge={printingBadge}
+        isDegraded={isDegraded}
+        cardIdentifier={selectedImage}
+        searchQuery={query}
+        onOpenChooseImage={onOpenChooseImage}
       />
       <RailSection
         sectionKey="chooseImage"

frontend/src/mocks/handlers.ts

@@ -513,6 +513,30 @@ export const searchResultsForDFCMatchedCards1And4 = http.post(
     )
 );
 
+// A printing-specific search whose filter found nothing and was retried unfiltered - the backend
+// reports this via degradedQueries (schema_types.ts), which the requested-printing badge's
+// degraded-style variant is keyed off (Proposal H, Step 2 PR 2b). cardDocument1 carries no
+// canonicalCard data, so this is deliberately independent of the printing-confirmation affordance
+// fixtures above - the two instruments are tested in isolation from each other.
+export const searchResultsDegradedPrinting = http.post(
+  buildRoute("3/editorSearch/"),
+  () => {
+    const hashKey = computeSearchQueryHashKey({
+      query: "my search query",
+      cardType: CardType.Card,
+      expansionCode: "XYZ",
+      collectorNumber: "999",
+    });
+    return HttpResponse.json(
+      {
+        results: { [hashKey]: [cardDocument1.identifier] },
+        degradedQueries: [hashKey],
+      },
+      { status: 200 }
+    );
+  }
+);
+
 export const searchResultsServerError = http.post(
   buildRoute("3/editorSearch/"),
   () => HttpResponse.json(createError("3/editorSearch"), { status: 200 })

frontend/src/store/api.ts

@@ -924,11 +924,19 @@ export async function APIGetVoteQueue(
   });
 }
 
+// The 2/editorSearch/ (legacy, pre-E-2) endpoint predates degradedQueries entirely - there is no
+// equivalent signal to report, so callers always see an empty array from this path, never a
+// false positive/negative about degraded status.
+export interface EditorSearchResult {
+  results: SearchResults;
+  degradedQueries: Array<string>;
+}
+
 async function APIEditorSearchLegacy(
   backendURL: string,
   searchSettings: SearchSettings,
   queriesToSearch: Array<SearchQuery>
-): Promise<SearchResults> {
+): Promise<EditorSearchResult> {
   const rawResponse = await fetch(formatURL(backendURL, "/2/editorSearch/"), {
     method: "POST",
     body: JSON.stringify({
@@ -956,7 +964,7 @@ async function APIEditorSearchLegacy(
             )
           )
         );
-      return transformedResults;
+      return { results: transformedResults, degradedQueries: [] };
     }
     throw { name: content.name, message: content.message };
   });
@@ -966,7 +974,7 @@ export async function APIEditorSearch(
   backendURL: string,
   searchSettings: SearchSettings,
   queriesToSearch: Array<SearchQuery>
-): Promise<SearchResults> {
+): Promise<EditorSearchResult> {
   try {
     const rawResponse = await fetch(formatURL(backendURL, "/3/editorSearch/"), {
       method: "POST",
@@ -988,7 +996,11 @@ export async function APIEditorSearch(
     }
     return rawResponse.json().then((content) => {
       if (rawResponse.status === 200 && content.results != null) {
-        return content.results as EditorSearchResponse["results"];
+        return {
+          results: content.results as EditorSearchResponse["results"],
+          degradedQueries: (content.degradedQueries ??
+            []) as EditorSearchResponse["degradedQueries"],
+        };
       }
       throw { name: content.name, message: content.message };
     });

frontend/src/store/slices/projectSlice.test.ts

@@ -58,6 +58,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
       },
       searchResults: {
         searchResults: {},
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },
@@ -103,6 +104,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
       },
       searchResults: {
         searchResults: {},
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },
@@ -158,6 +160,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
       },
       searchResults: {
         searchResults: {},
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },
@@ -212,6 +215,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
             cardType: "CARD" as CardType,
           })]: [],
         },
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },
@@ -257,6 +261,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
       },
       searchResults: {
         searchResults: {},
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },
@@ -302,6 +307,7 @@ describe("selectQueriesWithoutSearchResults tests", () => {
       },
       searchResults: {
         searchResults: {},
+        degradedQueryHashKeys: [],
         status: "idle" as ThunkStatus,
         error: null,
       },