Rework layout per review: starburst anchored right, card centered in chip ring

Card panel + candidate grid columns swapped back (candidates left, starburst
anchored right) and intro text right-aligned to match. The starburst is now
contained to the card's own box (moved inside AttributeChipPanel's card slot,
sized off CardArea instead of the whole ring+chips panel) rather than
bleeding across the full page and covering the heading/candidate grid.

AttributeChipPanel restructured to a CSS grid ring (standalone chips top,
the two exclusion groups left/right, card dead center) instead of stacking
chips above the card image.

Also: tier 4 now prioritizes a card with one AI vote + one agreeing human
vote (one vote from crossing PRINTING_TAG_MIN_VOTES=2) over a totally fresh
zero-vote card - a small, concrete step toward "closest to resolving first"
without building a full scoring system.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016i9S7LQsCL3FGaih3ZTRBJ

Author: WilfordGrimley

MPCAutofill/cardpicker/question_feed.py

@@ -14,6 +14,8 @@
 
 from typing import Optional
 
+from django.db.models import Count
+
 from cardpicker.artist_consensus import get_contested_artist_card_ids
 from cardpicker.attribute_tags import ATTRIBUTE_CHIP_TAG_NAMES
 from cardpicker.models import (
@@ -168,11 +170,21 @@ def _tier_3_moderation(user: object) -> Optional[QuestionFeedItem]:
 
 
 def _tier_4_fresh(anonymous_id: str) -> Optional[QuestionFeedItem]:
+    # A card with one AI-sourced vote plus one *agreeing* human vote (weight 1.5 at default
+    # settings - still short of PRINTING_TAG_MIN_VOTES=2) is exactly as close to resolving as
+    # a card can get without being resolved outright, yet it's excluded from tier 1 (any human
+    # vote moves a card out of tier 1's "AI-only" pool) and isn't contested (agreeing votes,
+    # not conflicting, so tier 2's contested check doesn't catch it either) - it lands here,
+    # in tier 4, with zero votes and 28,112 genuinely-untouched cards. `-vote_count` surfaces
+    # these "one vote from resolving" cards first within this tier, a small, concrete answer
+    # to "prioritize whichever question is closest to actually resolving" without building a
+    # full scoring system (out of scope - see this module's docstring).
     printing_card = (
         Card.objects.filter(printing_tag_status=PrintingTagStatus.UNRESOLVED)
         .exclude(pk__in=get_contested_card_ids())
         .exclude(printing_tags__anonymous_id=anonymous_id)
-        .order_by("-date_created")
+        .annotate(vote_count=Count("printing_tags", distinct=True))
+        .order_by("-vote_count", "-date_created")
         .first()
     )
     if printing_card is not None:

MPCAutofill/cardpicker/tests/test_question_feed.py

@@ -125,6 +125,23 @@ def test_tier_4_fresh_unresolved_printing_when_nothing_higher_priority_exists(se
         assert item.type.value == "identify_printing"
         assert item.card.identifier == card.identifier
 
+    def test_tier_4_prioritizes_a_card_one_vote_from_resolving_over_a_totally_fresh_one(self, db):
+        # zero votes at all - the common case, 28k+ of these exist at once
+        CardFactory(printing_tag_status=PrintingTagStatus.UNRESOLVED)
+        # one AI vote + one *agreeing* human vote (weight 1.5 < PRINTING_TAG_MIN_VOTES=2, so
+        # not yet resolved) - excluded from tier 1 (has a human vote) and not contested
+        # (agreeing, not conflicting), so it falls through to tier 4 same as a fresh card,
+        # but is one vote closer to actually resolving than one with zero votes.
+        almost_resolved = CardFactory(printing_tag_status=PrintingTagStatus.UNRESOLVED)
+        printing = CanonicalCardFactory()
+        CardPrintingTagFactory(card=almost_resolved, printing=printing, source=VoteSource.AI)
+        CardPrintingTagFactory(card=almost_resolved, printing=printing, source=VoteSource.USER)
+
+        item = get_next_question_feed_item("anon-1", AnonymousUser())
+
+        assert item is not None
+        assert item.card.identifier == almost_resolved.identifier
+
     def test_tier_4_artist_when_no_printing_candidates_remain(self, db):
         card = CardFactory(
             printing_tag_status=PrintingTagStatus.RESOLVED, artist_vote_status=ArtistVoteStatus.UNRESOLVED

frontend/src/features/attributeChips/AttributeChipPanel.test.tsx

@@ -25,6 +25,7 @@ function Wrapper({ onSubmitted }: { onSubmitted?: (tagName: string) => void }) {
         tagConfidence={{}}
         chipStates={states}
         onChipStatesChange={setStates}
+        cardSlot={<div data-testid="card-slot-stub">card</div>}
       />
     </Provider>
   );

frontend/src/features/attributeChips/AttributeChipPanel.tsx

@@ -62,6 +62,52 @@ const ChipRow = styled.div`
   justify-content: center;
 `;
 
+const ChipColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  align-items: stretch;
+`;
+
+// A 3x3 grid with the card slot dead center and chips forming a ring around it - "top" holds
+// the standalone toggles, "left"/"right" hold the two exclusion groups (arbitrarily assigned;
+// nothing about a group is inherently left- or right-handed). Empty grid-template-columns
+// cells (corners, bottom) collapse via `auto` sizing rather than reserving dead space.
+const ChipRing = styled.div`
+  display: grid;
+  grid-template-areas:
+    ".    top   ."
+    "left card  right"
+    ".    .     .";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto auto;
+  gap: 0.6rem;
+  align-items: center;
+  justify-items: center;
+`;
+
+const TopArea = styled(ChipRow)`
+  grid-area: top;
+`;
+
+const LeftArea = styled(ChipColumn)`
+  grid-area: left;
+`;
+
+const RightArea = styled(ChipColumn)`
+  grid-area: right;
+`;
+
+// position: relative so an absolutely-positioned burst rendered as part of `cardSlot` (see
+// QuestionFeed.tsx) sizes and centers itself against the card's own box specifically, not
+// this whole ring (which includes the flanking chip columns and would make the burst far
+// larger, and off-center, than intended - see docs/features/printing-tags.md's Stage 7).
+const CardArea = styled.div`
+  grid-area: card;
+  width: 100%;
+  position: relative;
+`;
+
 interface AttributeChipPanelProps {
   backendURL: string;
   cardIdentifier: string;
@@ -71,6 +117,10 @@ interface AttributeChipPanelProps {
    * filtering (QuestionFeed.tsx) needs to read the same state. */
   chipStates: Record<string, ChipVoteState>;
   onChipStatesChange: (next: Record<string, ChipVoteState>) => void;
+  /** The card image/reveal-overlay/caption, rendered dead center with chips forming a ring
+   * around it - passed in rather than owned here so QuestionFeed.tsx keeps sole ownership of
+   * the reveal-animation state machine (revealed/onAnimationEnd) that slot's contents depend on. */
+  cardSlot: React.ReactNode;
 }
 
 export function AttributeChipPanel({
@@ -79,6 +129,7 @@ export function AttributeChipPanel({
   tagConfidence,
   chipStates,
   onChipStatesChange,
+  cardSlot,
 }: AttributeChipPanelProps) {
   const dispatch = useAppDispatch();
   const getTagDisplayName = useTagDisplayName();
@@ -176,17 +227,27 @@ export function AttributeChipPanel({
     );
   };
 
+  // EXCLUSION_GROUPS[0] (Border Color) renders left, [1] (Frame Style) renders right - an
+  // arbitrary but fixed assignment, not a semantic left/right meaning for either group.
+  const [leftGroup, rightGroup] = EXCLUSION_GROUPS;
+
   return (
-    <div data-testid="attribute-chip-panel">
-      <ChipRow className="mb-2">
+    <ChipRing data-testid="attribute-chip-panel">
+      <TopArea>
         {STANDALONE_CHIPS.map((chip) => renderChip(chip.tagName, chip.label))}
-      </ChipRow>
-      {EXCLUSION_GROUPS.map((group) => (
-        <ChipRow key={group.id} className="mb-2">
-          {group.chips.map((chip) => renderChip(chip.tagName, chip.label))}
-        </ChipRow>
-      ))}
-    </div>
+      </TopArea>
+      {leftGroup != null && (
+        <LeftArea>
+          {leftGroup.chips.map((chip) => renderChip(chip.tagName, chip.label))}
+        </LeftArea>
+      )}
+      <CardArea>{cardSlot}</CardArea>
+      {rightGroup != null && (
+        <RightArea>
+          {rightGroup.chips.map((chip) => renderChip(chip.tagName, chip.label))}
+        </RightArea>
+      )}
+    </ChipRing>
   );
 }
 

frontend/src/features/printingTags/cardPanel.tsx

@@ -129,7 +129,7 @@ export const BurstSvg = styled.svg`
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 340%;
+  width: 140%;
   aspect-ratio: 1;
   transform: translate(-50%, -50%);
   z-index: -1;

frontend/src/features/questionFeed/QuestionFeed.tsx

@@ -227,11 +227,14 @@ export function QuestionFeed() {
   const hiddenCount = allCandidates.length - visibleCandidates.length;
   const noMatchDisabled = !hasAnyExplicitChip(chipStates);
 
-  const cardPanel = (
-    <CardPanel
-      ref={cardPanelRef}
-      style={stickyTop != null ? { top: stickyTop } : undefined}
-    >
+  // BurstSvg renders alongside (not inside) RevealWrapper deliberately - RevealWrapper has
+  // overflow: hidden (it clips the silhouette-reveal animation to the card's own box), which
+  // would also clip the burst's intentional bleed if it were a descendant instead of a
+  // sibling. Both size themselves against whichever positioned ancestor contains them -
+  // AttributeChipPanel's CardArea now, so the burst centers on and scales with the card's own
+  // rendered width specifically, not the wider ring (card + flanking chip columns) around it.
+  const cardImage = (
+    <>
       <BurstSvg viewBox={STARBURST_VIEWBOX}>
         <polygon
           points={STARBURST_OUTER_FRAMES[starburstFrame]}
@@ -242,17 +245,6 @@ export function QuestionFeed() {
           fill={STARBURST_INNER_COLOR}
         />
       </BurstSvg>
-      {isCandidateType && (
-        <div className="mb-2">
-          <AttributeChipPanel
-            backendURL={backendURL}
-            cardIdentifier={item.card.identifier}
-            tagConfidence={item.tagConfidence ?? {}}
-            chipStates={chipStates}
-            onChipStatesChange={setChipStates}
-          />
-        </div>
-      )}
       <RevealWrapper>
         <img
           src={item.card.mediumThumbnailUrl}
@@ -269,6 +261,30 @@ export function QuestionFeed() {
         )}
       </RevealWrapper>
       <div className="text-center mt-1">{item.card.name}</div>
+    </>
+  );
+
+  // The card renders dead center with chips forming a ring around it (AttributeChipPanel's
+  // ChipRing grid) rather than stacked above it - the starburst behind the whole assembly is
+  // purely decorative (pointer-events: none throughout), so it never competes with any of
+  // this for clicks regardless of how it visually bleeds.
+  const cardPanel = (
+    <CardPanel
+      ref={cardPanelRef}
+      style={stickyTop != null ? { top: stickyTop } : undefined}
+    >
+      {/* cardPanel is only ever rendered from the isCandidateType branch below - the
+          artist/tag/moderation branch renders its own plain image directly, uninvolved with
+          chips or the starburst. BurstSvg now lives inside `cardImage` itself (see above),
+          not here, so it sizes against the card's own box rather than this whole ring. */}
+      <AttributeChipPanel
+        backendURL={backendURL}
+        cardIdentifier={item.card.identifier}
+        tagConfidence={item.tagConfidence ?? {}}
+        chipStates={chipStates}
+        onChipStatesChange={setChipStates}
+        cardSlot={cardImage}
+      />
     </CardPanel>
   );
 
@@ -287,16 +303,7 @@ export function QuestionFeed() {
         <Row className="g-4">
           {isCandidateType ? (
             <>
-              {/* position + a non-auto z-index together give this column its own local
-                  stacking context, containing CardPanel's z-index: -1 (see cardPanel.tsx) so
-                  it can't escape and render the whole panel - chips included - unclickable
-                  behind this sibling column at the hit-testing layer. position: relative
-                  alone does NOT establish a stacking context - see
-                  docs/features/printing-tags.md's Stage 7 section for the full story. */}
-              <Col xs={12} md={5} style={{ position: "relative", zIndex: 0 }}>
-                {cardPanel}
-              </Col>
-              <Col xs={12} md={7}>
+              <Col xs={12} md={5}>
                 {!revealed ? (
                   <div className="text-center py-4">
                     <Spinner size={2} />
@@ -438,17 +445,18 @@ export function QuestionFeed() {
                   </>
                 )}
               </Col>
+              {/* position + a non-auto z-index together give this column its own local
+                  stacking context, containing CardPanel's z-index: -1 (see cardPanel.tsx) so
+                  it can't escape and render the whole panel - chips included - unclickable
+                  behind this sibling column at the hit-testing layer. position: relative
+                  alone does NOT establish a stacking context - see
+                  docs/features/printing-tags.md's Stage 7 section for the full story. */}
+              <Col xs={12} md={7} style={{ position: "relative", zIndex: 0 }}>
+                {cardPanel}
+              </Col>
             </>
           ) : (
             <>
-              <Col xs={12} md={5}>
-                <img
-                  src={item.card.mediumThumbnailUrl}
-                  alt={item.card.name}
-                  style={{ width: "100%" }}
-                />
-                <div className="text-center mt-1">{item.card.name}</div>
-              </Col>
               <Col xs={12} md={7}>
                 {item.type === "artist" && (
                   <>
@@ -510,6 +518,14 @@ export function QuestionFeed() {
                   </>
                 )}
               </Col>
+              <Col xs={12} md={5}>
+                <img
+                  src={item.card.mediumThumbnailUrl}
+                  alt={item.card.name}
+                  style={{ width: "100%" }}
+                />
+                <div className="text-center mt-1">{item.card.name}</div>
+              </Col>
             </>
           )}
         </Row>

frontend/src/pages/whatsthat.tsx

@@ -62,20 +62,29 @@ const StarburstContent = styled.div`
   padding: 0 1.5rem;
 `;
 
+// The starburst+card assembly anchors to the right of the page (see QuestionFeed.tsx's
+// column order), so the intro copy above it reads right-to-left too, keeping the whole
+// header visually aligned with what sits below it rather than starting from the opposite edge.
+const IntroText = styled.div`
+  text-align: right;
+`;
+
 function PrintingQueueOrDefault() {
   const remoteBackendConfigured = useRemoteBackendConfigured();
 
   return remoteBackendConfigured ? (
     <>
       <StarburstBackground>
         <StarburstContent>
-          <h1>What&apos;s That Card?</h1>
-          <p>
-            Test your Magic: the Gathering knowledge! One card at a time, help
-            identify which real-world printing, artist, or descriptor tag each
-            card image depicts - contested and AI-suggested cards come first,
-            since they need your eyes the most.
-          </p>
+          <IntroText>
+            <h1>What&apos;s That Card?</h1>
+            <p>
+              Test your Magic: the Gathering knowledge! One card at a time, help
+              identify which real-world printing, artist, or descriptor tag each
+              card image depicts - contested and AI-suggested cards come first,
+              since they need your eyes the most.
+            </p>
+          </IntroText>
           <AuthWidget />
           <QuestionFeed />
         </StarburstContent>