From 17de5f44a5ca6be67590234b6e60bcb6a7165876 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 00:10:13 -0400
Subject: [PATCH 1/8] feat(market): open listings in the skincraft 3d viewer on
 the market beta

Adds a View in 3D launcher to every listing card in the market beta grid
and gives the viewer a listing-details panel (name, wear bar, pattern,
name tag, accessories, price with a native buy handoff, restrictions,
and description) with prev/next navigation that pages through listings
via steam's own infinite-scroll loader.
---
 .../common/skincraft_viewer_modal.ts          | 288 +++++++++++++++++-
 .../common/skincraft_viewer_modal_styles.ts   | 258 ++++++++++++++++
 src/lib/components/market/react/listing.ts    |  27 ++
 src/lib/components/market/react/placement.ts  |  10 +-
 src/lib/components/market/react/view_3d.ts    | 117 +++++++
 src/lib/page_scripts/market_listing.ts        |   8 +-
 src/lib/services/skincraft_embed.ts           | 142 ++++++++-
 .../services/skincraft_inventory_targets.ts   |   2 +-
 .../services/skincraft_market_targets.test.ts | 184 +++++++++++
 src/lib/services/skincraft_market_targets.ts  | 194 ++++++++++++
 .../skincraft_viewer_protocol.test.ts         | 112 +++++++
 src/lib/services/skincraft_viewer_protocol.ts | 160 +++++++++-
 12 files changed, 1472 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/components/market/react/view_3d.ts
 create mode 100644 src/lib/services/skincraft_market_targets.test.ts
 create mode 100644 src/lib/services/skincraft_market_targets.ts

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index 0756cf99..6c95a8d4 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -4,7 +4,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {guard} from 'lit/directives/guard.js';
 import {createRef, ref} from 'lit/directives/ref.js';
 import {styleMap} from 'lit/directives/style-map.js';
-import type {SkinCraftViewerTarget} from '../../services/skincraft_viewer_protocol';
+import type {SkinCraftListingDetails, SkinCraftViewerTarget} from '../../services/skincraft_viewer_protocol';
 import {MODAL_TRANSITION_MS, skinCraftViewerModalStyles} from './skincraft_viewer_modal_styles';
 
 type LoadPhase = 'loading' | 'revealed' | 'error';
@@ -14,11 +14,38 @@ export type SkinCraftViewerModalOptions = {
     embedSrc: string;
     /** Heading for the item strip, e.g. "Inventory" — the modal itself is surface-agnostic. */
     itemsTitle: string;
+    /** `grid` shows the item strip; `details` swaps it for a listing-details panel with prev/next. */
+    layout?: 'grid' | 'details';
     onClose: () => void;
     onRetry: () => void;
     onSelect: (target: SkinCraftViewerTarget) => void;
+    /** Fired when the item strip scrolls near its end, for surfaces with paginated items. */
+    onItemsNearEnd?: () => void;
+    /** Enables the details panel's Buy button; the host hands off to the surface's purchase flow. */
+    onBuy?: (target: SkinCraftViewerTarget) => void;
 };
 
+/** About two card rows — asking for more this early keeps strip scrolling seamless. */
+const ITEMS_NEAR_END_PX = 240;
+
+/** In details mode, prefetch the next page once selection comes within this many items of the end. */
+const ITEMS_NEAR_END_COUNT = 5;
+
+/** Full 0–1 wear range in the same bands the float bar uses. */
+const WEAR_SEGMENTS = [
+    {width: 7, color: 'green'},
+    {width: 8, color: '#18a518'},
+    {width: 23, color: '#9acd32'},
+    {width: 7, color: '#cd5c5c'},
+    {width: 55, color: '#f92424'},
+];
+
+function formatRestrictionDays(days: number): string {
+    if (days === 7) return 'one week';
+    if (days === 1) return 'one day';
+    return `${days} days`;
+}
+
 function mixHexColors(base: string, tint: string, tintAmount: number): string {
     const mixChannel = (offset: number): number => {
         const baseChannel = Number.parseInt(base.slice(offset, offset + 2), 16);
@@ -57,6 +84,7 @@ export class SkinCraftViewerModal {
     private readonly root: ShadowRoot;
     private readonly dialogRef = createRef<HTMLDialogElement>();
     private readonly frameRef = createRef<HTMLIFrameElement>();
+    private readonly itemGridRef = createRef<HTMLDivElement>();
 
     private target?: SkinCraftViewerTarget;
     private items: SkinCraftViewerTarget[] = [];
@@ -111,6 +139,7 @@ export class SkinCraftViewerModal {
 
         void this.revealIconWhenDecoded(target.iconUrl, request);
         this.scrollSelectedIntoView();
+        this.maybeRequestMore(this.selectedIndex);
         if (opening) this.openDialog();
     }
 
@@ -147,14 +176,20 @@ export class SkinCraftViewerModal {
         render(this.template(), this.root, {host: this});
     }
 
+    private get layout(): 'grid' | 'details' {
+        return this.options.layout ?? 'grid';
+    }
+
     private template(): TemplateResult {
         const revealed = this.phase === 'revealed';
+        const details = this.layout === 'details';
 
         return html`
             <dialog
                 ${ref(this.dialogRef)}
                 class="${classMap({
-                    'has-items': this.items.length > 1,
+                    'has-items': !details && this.items.length > 1,
+                    'has-details': details,
                     entering: this.entering,
                     closing: this.closing,
                 })}"
@@ -163,6 +198,7 @@ export class SkinCraftViewerModal {
                 @pointerdown="${this.handleDialogPointerDown}"
                 @click="${this.handleDialogClick}"
                 @transitionend="${this.handleTransitionEnd}"
+                @keydown="${this.handleKeydown}"
             >
                 <header class="modal-header">
                     <div class="modal-title" id="skincraft-viewer-title">${this.target?.name ?? ''}</div>
@@ -193,15 +229,7 @@ export class SkinCraftViewerModal {
                     </div>
                 </header>
                 <div class="modal-body">
-                    <aside class="item-panel" aria-label="${this.options.itemsTitle}">
-                        <div class="item-panel-header">
-                            <span>${this.options.itemsTitle}</span>
-                            <span class="item-count">${this.items.length}</span>
-                        </div>
-                        <div class="item-grid" @click="${this.handleItemsClick}">
-                            ${guard([this.items, this.selectedKey], () => this.renderItemCards())}
-                        </div>
-                    </aside>
+                    ${details ? nothing : this.renderItemPanel()}
                     <div class="viewer-stage">
                         <iframe
                             ${ref(this.frameRef)}
@@ -216,15 +244,242 @@ export class SkinCraftViewerModal {
                             ${this.renderLoading()}${this.renderError()}
                         </div>
                     </div>
+                    ${details ? this.renderDetailsPanel() : nothing}
                 </div>
             </dialog>
         `;
     }
 
+    private renderItemPanel(): TemplateResult {
+        return html`
+            <aside class="item-panel" aria-label="${this.options.itemsTitle}">
+                <div class="item-panel-header">
+                    <span>${this.options.itemsTitle}</span>
+                    <span class="item-count">${this.items.length}</span>
+                </div>
+                <div
+                    ${ref(this.itemGridRef)}
+                    class="item-grid"
+                    @click="${this.handleItemsClick}"
+                    @scroll="${this.handleItemsScroll}"
+                >
+                    ${guard([this.items, this.selectedKey], () => this.renderItemCards())}
+                </div>
+            </aside>
+        `;
+    }
+
+    private renderDetailsPanel(): TemplateResult {
+        const target = this.target;
+        const details = target?.details;
+        const index = this.selectedIndex;
+
+        return html`
+            <aside class="details-panel" aria-label="${this.options.itemsTitle}">
+                <div class="details-nav">
+                    <button
+                        class="details-nav-btn"
+                        type="button"
+                        aria-label="Previous listing"
+                        ?disabled="${index <= 0}"
+                        @click="${this.handlePrevious}"
+                    >
+                        ‹
+                    </button>
+                    <span class="details-count">${index >= 0 ? `${index + 1} / ${this.items.length}` : ''}</span>
+                    <button
+                        class="details-nav-btn"
+                        type="button"
+                        aria-label="Next listing"
+                        ?disabled="${index < 0 || index >= this.items.length - 1}"
+                        @click="${this.handleNext}"
+                    >
+                        ›
+                    </button>
+                </div>
+                <div class="details-scroll">
+                    <div
+                        class="details-name"
+                        style="${styleMap({color: target?.rarityColor ? `#${target.rarityColor}` : undefined})}"
+                    >
+                        ${target?.name ?? ''}
+                    </div>
+                    ${details?.game || details?.type
+                        ? html`<div class="details-type">
+                              ${[details.game, details.type].filter(Boolean).join(' · ')}
+                          </div>`
+                        : nothing}
+                    ${this.renderWearBar(details)} ${this.renderDetailProps(details)}
+                    ${this.renderDetailActions(target, details)} ${this.renderAccessories(details)}
+                    ${this.renderRestrictions(details)} ${this.renderDetailLines(details)}
+                </div>
+            </aside>
+        `;
+    }
+
+    private renderWearBar(details?: SkinCraftListingDetails): TemplateResult | typeof nothing {
+        const wear = Number(details?.wearRating);
+        if (!Number.isFinite(wear)) return nothing;
+
+        const percent = (Math.min(Math.max(wear, 0), 1) * 100).toFixed(3);
+        return html`
+            <div class="details-wear-bar">
+                <div class="details-wear-track">
+                    ${WEAR_SEGMENTS.map(
+                        (segment) =>
+                            html`<div
+                                style="${styleMap({width: `${segment.width}%`, backgroundColor: segment.color})}"
+                            ></div>`
+                    )}
+                </div>
+                <div class="details-wear-marker" style="${styleMap({left: `${percent}%`})}"></div>
+            </div>
+        `;
+    }
+
+    private renderDetailProps(details?: SkinCraftListingDetails): TemplateResult | typeof nothing {
+        if (!details?.nameTag && !details?.patternTemplate && !details?.wearRating) return nothing;
+
+        return html`
+            <div class="details-props">
+                ${details.nameTag ? html`<div>Name Tag: ${details.nameTag}</div>` : nothing}
+                ${details.patternTemplate ? html`<div>Pattern Template: ${details.patternTemplate}</div>` : nothing}
+                ${details.wearRating ? html`<div>Wear Rating: ${details.wearRating}</div>` : nothing}
+            </div>
+        `;
+    }
+
+    private renderDetailActions(
+        target?: SkinCraftViewerTarget,
+        details?: SkinCraftListingDetails
+    ): TemplateResult | typeof nothing {
+        const inspectUrl = target?.inspectUrl;
+        const showBuy = !!details?.price && !!details.listingId && !!this.options.onBuy;
+        if (!inspectUrl && !showBuy) return nothing;
+
+        return html`
+            <div class="details-actions">
+                ${inspectUrl ? html`<a class="details-inspect" href="${inspectUrl}">Inspect in Game...</a>` : nothing}
+                ${showBuy
+                    ? html`
+                          <span class="details-price">${details.price}</span>
+                          <button class="details-buy" type="button" @click="${this.handleBuy}">Buy</button>
+                      `
+                    : nothing}
+            </div>
+        `;
+    }
+
+    private renderAccessories(details?: SkinCraftListingDetails): TemplateResult | typeof nothing {
+        if (!details?.accessories?.length) return nothing;
+
+        return html`
+            <div class="details-accessories">
+                <div class="details-section-title">Accessories</div>
+                ${details.accessories.map(
+                    (accessory) => html`
+                        <div class="details-accessory">
+                            ${accessory.iconUrl
+                                ? html`<img src="${accessory.iconUrl}" alt="" loading="lazy" draggable="false" />`
+                                : nothing}
+                            <span>${accessory.name}</span>
+                        </div>
+                    `
+                )}
+            </div>
+        `;
+    }
+
+    private renderRestrictions(details?: SkinCraftListingDetails): TemplateResult | typeof nothing {
+        const restrictions: string[] = [];
+        if (details?.tradeRestrictionDays) {
+            restrictions.push(`will not be tradable for ${formatRestrictionDays(details.tradeRestrictionDays)}`);
+        }
+        if (details?.marketRestrictionDays) {
+            restrictions.push(
+                `cannot be listed on the Steam Community Market for ${formatRestrictionDays(
+                    details.marketRestrictionDays
+                )}`
+            );
+        }
+        if (!restrictions.length) return nothing;
+
+        return html`
+            <div class="details-restrictions">
+                <div>After purchase, this item:</div>
+                <ul>
+                    ${restrictions.map((line) => html`<li>${line}</li>`)}
+                </ul>
+            </div>
+        `;
+    }
+
+    private renderDetailLines(details?: SkinCraftListingDetails): TemplateResult | typeof nothing {
+        if (!details?.lines?.length) return nothing;
+
+        return html`
+            <div class="details-lines">
+                ${details.lines.map(
+                    (line) =>
+                        html`<p
+                            class="${line.italic ? 'italic' : ''}"
+                            style="${styleMap({color: line.color ? `#${line.color}` : undefined})}"
+                        >
+                            ${line.text}
+                        </p>`
+                )}
+            </div>
+        `;
+    }
+
     private get selectedKey(): string | undefined {
         return this.target ? targetKey(this.target) : undefined;
     }
 
+    private get selectedIndex(): number {
+        const key = this.selectedKey;
+        if (!key) return -1;
+        return this.items.findIndex((item) => targetKey(item) === key);
+    }
+
+    private handlePrevious(): void {
+        this.selectNeighbor(-1);
+    }
+
+    private handleNext(): void {
+        this.selectNeighbor(1);
+    }
+
+    private selectNeighbor(step: number): void {
+        const index = this.selectedIndex;
+        const neighbor = index >= 0 ? this.items[index + step] : undefined;
+        if (!neighbor) return;
+
+        this.maybeRequestMore(index + step);
+        this.options.onSelect(neighbor);
+    }
+
+    private maybeRequestMore(index: number): void {
+        if (this.layout !== 'details' || index < 0) return;
+        if (this.items.length - index <= ITEMS_NEAR_END_COUNT) this.options.onItemsNearEnd?.();
+    }
+
+    private handleKeydown(event: KeyboardEvent): void {
+        if (this.layout !== 'details') return;
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.selectNeighbor(-1);
+        } else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.selectNeighbor(1);
+        }
+    }
+
+    private handleBuy(): void {
+        if (this.target) this.options.onBuy?.(this.target);
+    }
+
     // Both status blocks stay mounted and toggle `hidden` so the item icon survives an error →
     // retry cycle; its fade-in is driven by a decode() that needs the <img> to already exist.
     private renderLoading(): TemplateResult {
@@ -383,6 +638,17 @@ export class SkinCraftViewerModal {
         if (event.target === this.dialogRef.value && event.propertyName === 'transform') this.finishClose();
     }
 
+    /** Whether the item strip sits near its end — also true when it has too few items to scroll. */
+    itemsNearEnd(): boolean {
+        const grid = this.itemGridRef.value;
+        if (!grid) return false;
+        return grid.scrollTop + grid.clientHeight >= grid.scrollHeight - ITEMS_NEAR_END_PX;
+    }
+
+    private handleItemsScroll(): void {
+        if (this.itemsNearEnd()) this.options.onItemsNearEnd?.();
+    }
+
     private handleItemsClick(event: MouseEvent): void {
         const node = event.target;
         if (!(node instanceof Element)) return;
diff --git a/src/lib/components/common/skincraft_viewer_modal_styles.ts b/src/lib/components/common/skincraft_viewer_modal_styles.ts
index 83194bda..dc5033e2 100644
--- a/src/lib/components/common/skincraft_viewer_modal_styles.ts
+++ b/src/lib/components/common/skincraft_viewer_modal_styles.ts
@@ -423,6 +423,264 @@ export const skinCraftViewerModalStyles = `
         background: rgba(255, 255, 255, 0.1);
     }
 
+    .details-panel {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+        background: #181b21;
+    }
+
+    .details-nav {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        height: 48px;
+        padding: 0 10px;
+        border-bottom: 1px solid rgba(193, 206, 255, 0.08);
+    }
+
+    .details-nav-btn {
+        display: grid;
+        width: 34px;
+        height: 34px;
+        padding: 0 0 3px;
+        place-items: center;
+        color: rgba(245, 248, 255, 0.78);
+        font: inherit;
+        font-size: 22px;
+        line-height: 1;
+        background: rgba(255, 255, 255, 0.06);
+        border: 0;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: color 150ms ease, background-color 150ms ease;
+    }
+
+    .details-nav-btn:hover:not(:disabled) {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.12);
+    }
+
+    .details-nav-btn:disabled {
+        opacity: 0.35;
+        cursor: default;
+    }
+
+    .details-count {
+        color: rgba(245, 248, 255, 0.5);
+        font-size: 12px;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .details-scroll {
+        flex: 1;
+        min-height: 0;
+        padding: 16px;
+        overflow-y: auto;
+        scrollbar-color: rgba(193, 206, 255, 0.2) transparent;
+        scrollbar-width: thin;
+    }
+
+    .details-scroll::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .details-scroll::-webkit-scrollbar-thumb {
+        background: rgba(193, 206, 255, 0.2);
+        border: 2px solid transparent;
+        border-radius: 999px;
+        background-clip: padding-box;
+    }
+
+    .details-name {
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 1.25;
+        overflow-wrap: break-word;
+    }
+
+    .details-type {
+        margin-top: 4px;
+        color: rgba(245, 248, 255, 0.55);
+        font-size: 13px;
+    }
+
+    .details-wear-bar {
+        position: relative;
+        margin: 16px 0 6px;
+    }
+
+    .details-wear-track {
+        display: flex;
+        height: 8px;
+        overflow: hidden;
+        border-radius: 4px;
+        opacity: 0.85;
+    }
+
+    .details-wear-track div {
+        height: 100%;
+    }
+
+    .details-wear-marker {
+        position: absolute;
+        top: -3px;
+        width: 3px;
+        height: 14px;
+        background: #d9d9d9;
+        border-radius: 4px;
+        transform: translateX(-50%);
+    }
+
+    .details-props {
+        margin-top: 14px;
+        font-size: 13.5px;
+        line-height: 1.65;
+    }
+
+    .details-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 16px 0;
+        padding: 14px 0;
+        border-top: 1px solid rgba(193, 206, 255, 0.1);
+        border-bottom: 1px solid rgba(193, 206, 255, 0.1);
+    }
+
+    .details-inspect {
+        flex: 0 0 auto;
+        padding: 8px 12px;
+        color: inherit;
+        font-size: 13px;
+        text-decoration: none;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        transition: background-color 150ms ease;
+    }
+
+    .details-inspect:hover {
+        background: rgba(255, 255, 255, 0.16);
+    }
+
+    .details-price {
+        margin-left: auto;
+        font-size: 15px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .details-buy {
+        padding: 8px 18px;
+        color: #fff;
+        font: inherit;
+        font-size: 13px;
+        font-weight: 600;
+        background: #6fa720;
+        border: 0;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background-color 150ms ease;
+    }
+
+    .details-buy:hover {
+        background: #83bd2c;
+    }
+
+    .details-accessories {
+        margin-bottom: 16px;
+    }
+
+    .details-section-title {
+        margin-bottom: 8px;
+        color: rgba(245, 248, 255, 0.82);
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .details-accessory {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-top: 4px;
+        padding: 5px 8px;
+        font-size: 13px;
+        background: rgba(255, 255, 255, 0.04);
+        border-radius: 6px;
+    }
+
+    .details-accessory img {
+        width: 48px;
+        height: 36px;
+        object-fit: contain;
+        flex: 0 0 auto;
+    }
+
+    .details-restrictions {
+        color: rgba(245, 248, 255, 0.6);
+        font-size: 13px;
+        line-height: 1.5;
+    }
+
+    .details-restrictions ul {
+        margin: 6px 0 0;
+        padding-left: 22px;
+    }
+
+    .details-lines {
+        margin-top: 14px;
+        padding-top: 14px;
+        border-top: 1px solid rgba(193, 206, 255, 0.1);
+    }
+
+    .details-lines p {
+        margin: 10px 0;
+        color: rgba(245, 248, 255, 0.72);
+        font-size: 13px;
+        line-height: 1.5;
+    }
+
+    .details-lines p.italic {
+        font-style: italic;
+    }
+
+    dialog.has-details {
+        width: min(94vw, calc(80vh * 16 / 9 + 340px), 2260px);
+        width: min(94vw, calc(80dvh * 16 / 9 + 340px), 2260px);
+    }
+
+    dialog.has-details .modal-body {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 340px;
+    }
+
+    dialog.has-details .details-panel {
+        /* The stage's height (its column width at 16:9), restated because the panel's own content
+           must not be what sizes the shared grid row. Tracks the same 2260px ceiling as the dialog. */
+        height: min(calc((min(94vw, 2260px) - 340px) * 9 / 16), 80vh);
+        height: min(calc((min(94vw, 2260px) - 340px) * 9 / 16), 80dvh);
+        border-left: 1px solid rgba(193, 206, 255, 0.1);
+    }
+
+    @media (max-width: 1167px) {
+        dialog.has-details .modal-body {
+            display: block;
+            max-height: calc(100vh - 80px);
+            max-height: calc(100dvh - 80px);
+            overflow-y: auto;
+        }
+
+        dialog.has-details .details-panel {
+            height: auto;
+            max-height: 38vh;
+            border-top: 1px solid rgba(193, 206, 255, 0.1);
+            border-left: 0;
+        }
+    }
+
     .hidden {
         display: none !important;
     }
diff --git a/src/lib/components/market/react/listing.ts b/src/lib/components/market/react/listing.ts
index 9955b2ed..17c5b9da 100644
--- a/src/lib/components/market/react/listing.ts
+++ b/src/lib/components/market/react/listing.ts
@@ -1,5 +1,10 @@
 import {ItemInfo} from '../../../bridge/handlers/fetch_inspect_info';
 import {gFloatFetcher} from '../../../services/float_fetcher';
+import {
+    getCardListing,
+    MARKET_LISTING_CARD_SELECTOR,
+    toSkinCraftListingItem,
+} from '../../../services/skincraft_market_targets';
 import {getFiberProps} from '../../../utils/fiber';
 import {defineInjectionScope, InjectionMode} from '../../injectors';
 import {isReactSteamMarket} from '../mode';
@@ -13,6 +18,10 @@ export interface ReactListingContext {
     itemInfo: ItemInfo;
 }
 
+export interface ReactListingCardContext {
+    listing: MarketListing;
+}
+
 export const ReactMarketListingScope = defineInjectionScope<ReactListingContext>({
     selector: 'div[style*="--grid-rows"]:has([style*="market_listings/"])',
     mode: InjectionMode.CONTINUOUS,
@@ -20,6 +29,24 @@ export const ReactMarketListingScope = defineInjectionScope<ReactListingContext>
     context: buildReactListingContext,
 });
 
+/**
+ * Unlike {@link ReactMarketListingScope}, covers every listing card — no rendered screenshot or
+ * float fetch required — for injections that only need the listing itself.
+ */
+export const ReactMarketListingCardScope = defineInjectionScope<ReactListingCardContext>({
+    selector: MARKET_LISTING_CARD_SELECTOR,
+    mode: InjectionMode.CONTINUOUS,
+    guard: isReactSteamMarket,
+    context: buildReactListingCardContext,
+});
+
+function buildReactListingCardContext(scope: HTMLElement): ReactListingCardContext | null | undefined {
+    const listing = getCardListing(scope);
+    if (!listing) return undefined;
+
+    return toSkinCraftListingItem(listing) ? {listing} : null;
+}
+
 function getInspectLink(listing: MarketListing): string | null {
     const link = listing.description.actions?.[0]?.link;
     if (!link) return null;
diff --git a/src/lib/components/market/react/placement.ts b/src/lib/components/market/react/placement.ts
index d07f148d..6cf9addf 100644
--- a/src/lib/components/market/react/placement.ts
+++ b/src/lib/components/market/react/placement.ts
@@ -1,7 +1,7 @@
 import type {ScopedInjectionArgs} from '../../injectors';
 import {getFadePercentage, isBlueSkin, parseRank} from '../../../utils/skin';
 import {hasDopplerPhase} from '../../../utils/dopplers';
-import type {ReactListingContext} from './listing';
+import type {ReactListingCardContext, ReactListingContext} from './listing';
 
 function hasSeedDetail(context: ReactListingContext): boolean {
     return (
@@ -29,6 +29,14 @@ export function findWearSpan({
     return undefined;
 }
 
+export function findListingImageFrame({
+    scope,
+}: ScopedInjectionArgs<ReactListingCardContext>): HTMLElement | null | undefined {
+    return (
+        scope.querySelector<HTMLElement>('div[style*="--position:relative"]:has([style*="--bg-image"])') ?? undefined
+    );
+}
+
 export function findSeedSpan({
     scope,
     context,
diff --git a/src/lib/components/market/react/view_3d.ts b/src/lib/components/market/react/view_3d.ts
new file mode 100644
index 00000000..0787c44b
--- /dev/null
+++ b/src/lib/components/market/react/view_3d.ts
@@ -0,0 +1,117 @@
+import {css, html, nothing} from 'lit';
+import {property, state} from 'lit/decorators.js';
+
+import {environment} from '../../../../environment';
+import {gSkinCraftEmbed} from '../../../services/skincraft_embed';
+import {getLoadedListingTargets, toSkinCraftListingItem} from '../../../services/skincraft_market_targets';
+import type {SkinCraftItem} from '../../../services/skincraft_viewer_protocol';
+import {gWebGpuAvailability, type WebGpuAvailability} from '../../../services/webgpu_availability';
+import {webGpuGuidance} from '../../../utils/webgpu_guidance';
+import {FloatElement} from '../../custom';
+import {CustomElement, InjectIntoScope, InjectionPosition} from '../../injectors';
+import {ReactMarketListingCardScope, type ReactListingCardContext} from './listing';
+import {findListingImageFrame} from './placement';
+
+/**
+ * Overlays a SkinCraft launcher on each Steam Market beta listing card, mirroring the inventory
+ * "View in 3D" button: it renders for anything SkinCraft can show, and WebGPU capability only
+ * decides enabled vs disabled-with-guidance. It stays hidden while the probe settles so it
+ * never appears and then changes.
+ */
+@CustomElement()
+@InjectIntoScope(ReactMarketListingCardScope, {
+    anchor: findListingImageFrame,
+    position: InjectionPosition.Append,
+})
+export class ReactListingView3D extends FloatElement {
+    @property({attribute: false}) injectionContext?: ReactListingCardContext;
+
+    @state() private webGpuStatus: WebGpuAvailability = 'checking';
+
+    static styles = [
+        ...FloatElement.styles,
+        css`
+            :host {
+                position: absolute;
+                top: 8px;
+                right: 8px;
+                z-index: 1;
+            }
+
+            .view-3d-btn {
+                display: flex;
+                padding: 5px;
+                border: none;
+                border-radius: 6px;
+                background: rgba(0, 0, 0, 0.4);
+                cursor: pointer;
+            }
+
+            .view-3d-btn img {
+                display: block;
+            }
+
+            .view-3d-btn:hover {
+                background: rgba(0, 0, 0, 0.65);
+            }
+
+            .view-3d-btn.unavailable {
+                cursor: default;
+                opacity: 0.5;
+            }
+        `,
+    ];
+
+    private get skinCraftItem(): SkinCraftItem | undefined {
+        const listing = this.injectionContext?.listing;
+        return listing && toSkinCraftListingItem(listing);
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void gWebGpuAvailability.settled().then((status) => {
+            this.webGpuStatus = status;
+        });
+    }
+
+    // The listing card behind the button is itself clickable, so always swallow the click.
+    private handleClick(event: Event): void {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const item = this.skinCraftItem;
+        if (this.webGpuStatus !== 'available' || !item) return;
+
+        gSkinCraftEmbed.open(item, getLoadedListingTargets());
+    }
+
+    protected render() {
+        if (this.webGpuStatus === 'checking' || !this.skinCraftItem) return nothing;
+
+        if (this.webGpuStatus !== 'available') {
+            const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
+            return html`
+                <span>
+                    ${this.tooltip(webGpuGuidance(reason), 'hint--bottom-left hint--large')}
+                    <button
+                        class="view-3d-btn unavailable"
+                        type="button"
+                        aria-disabled="true"
+                        @click=${this.handleClick}
+                    >
+                        <img src="${environment.skincraft_embed_origin}/icon.svg" height="22" alt="View in 3D" />
+                    </button>
+                </span>
+            `;
+        }
+
+        return html`
+            <span>
+                ${this.tooltip('View in 3D', 'hint--bottom-left')}
+                <button class="view-3d-btn" type="button" @click=${this.handleClick}>
+                    <img src="${environment.skincraft_embed_origin}/icon.svg" height="22" alt="View in 3D" />
+                </button>
+            </span>
+        `;
+    }
+}
diff --git a/src/lib/page_scripts/market_listing.ts b/src/lib/page_scripts/market_listing.ts
index 19010b53..b6362f1a 100644
--- a/src/lib/page_scripts/market_listing.ts
+++ b/src/lib/page_scripts/market_listing.ts
@@ -5,7 +5,13 @@ import '../components/market/react/filter_panel';
 import '../components/market/react/rank';
 import '../components/market/react/seed_info';
 import '../components/market/react/highlight';
+import '../components/market/react/view_3d';
+import {gSkinCraftEmbed} from '../services/skincraft_embed';
+import {buyListing, loadMoreListingTargets} from '../services/skincraft_market_targets';
 
 init('src/lib/page_scripts/market_listing.js', main);
 
-async function main() {}
+async function main() {
+    gSkinCraftEmbed.registerItemsProvider(loadMoreListingTargets);
+    gSkinCraftEmbed.registerBuyListingHandler(buyListing);
+}
diff --git a/src/lib/services/skincraft_embed.ts b/src/lib/services/skincraft_embed.ts
index 86371d95..47d9ddc1 100644
--- a/src/lib/services/skincraft_embed.ts
+++ b/src/lib/services/skincraft_embed.ts
@@ -10,11 +10,21 @@ import {
 import type {SkinCraftEmbedCommand} from './skincraft_embed_protocol';
 import {getLoadedInventoryTargets} from './skincraft_inventory_targets';
 import {
+    isBuySkinCraftListingMessage,
     isOpenSkinCraftViewerMessage,
+    isRequestSkinCraftViewerItemsMessage,
+    isSkinCraftViewerItemsMessage,
     SKINCRAFT_VIEWER_MESSAGE_SOURCE,
     STEAM_INSPECT_URL_PATTERN,
 } from './skincraft_viewer_protocol';
-import type {OpenSkinCraftViewerMessage, SkinCraftItem, SkinCraftViewerTarget} from './skincraft_viewer_protocol';
+import type {
+    BuySkinCraftListingMessage,
+    OpenSkinCraftViewerMessage,
+    RequestSkinCraftViewerItemsMessage,
+    SkinCraftItem,
+    SkinCraftViewerItemsMessage,
+    SkinCraftViewerTarget,
+} from './skincraft_viewer_protocol';
 
 const LOAD_TIMEOUT_MS = 20_000;
 type LoadPhase = 'idle' | 'loading' | 'loaded' | 'error';
@@ -37,12 +47,31 @@ class SkinCraftEmbedService {
     private showLoadingCover = false;
     private frameHasContent = false;
     private needsFrameReload = false;
+    private itemsProvider?: () => Promise<SkinCraftItem[]>;
+    private buyHandler?: (listingId: string) => void;
+    private providingItems = false;
+    private itemsRequestPending = false;
+    private itemCount = 0;
 
     constructor() {
-        if (!this.runsInPage) window.addEventListener('message', this.handleOpenRequest);
+        if (this.runsInPage) {
+            window.addEventListener('message', this.handlePageRequest);
+        } else {
+            window.addEventListener('message', this.handleViewerMessage);
+        }
     }
 
-    open(target: SkinCraftItem): void {
+    /** Page-context surfaces with paginated items (the Market beta) register how to load more. */
+    registerItemsProvider(provider: () => Promise<SkinCraftItem[]>): void {
+        this.itemsProvider = provider;
+    }
+
+    /** Page-context surfaces with purchasable items register how to hand off to their buy flow. */
+    registerBuyListingHandler(handler: (listingId: string) => void): void {
+        this.buyHandler = handler;
+    }
+
+    open(target: SkinCraftItem, items?: SkinCraftItem[]): void {
         if (!target.inspect) return;
 
         if (this.runsInPage) {
@@ -51,17 +80,52 @@ class SkinCraftEmbedService {
                     source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
                     type: 'open',
                     target,
-                    inventory:
-                        typeof g_ActiveInventory === 'undefined' || !g_ActiveInventory
-                            ? []
-                            : getLoadedInventoryTargets(g_ActiveInventory),
+                    inventory: items ?? this.loadedInventoryTargets(),
                 } satisfies OpenSkinCraftViewerMessage,
                 window.location.origin
             );
             return;
         }
 
-        this.openEmbeddedViewer(target, []);
+        this.openEmbeddedViewer(target, items ?? []);
+    }
+
+    private loadedInventoryTargets(): SkinCraftItem[] {
+        return typeof g_ActiveInventory === 'undefined' || !g_ActiveInventory
+            ? []
+            : getLoadedInventoryTargets(g_ActiveInventory);
+    }
+
+    private handlePageRequest = (event: MessageEvent): void => {
+        if (event.source !== window || event.origin !== window.location.origin) return;
+        if (isRequestSkinCraftViewerItemsMessage(event.data)) {
+            void this.provideItems();
+        } else if (isBuySkinCraftListingMessage(event.data)) {
+            this.buyHandler?.(event.data.listingId);
+        }
+    };
+
+    private async provideItems(): Promise<void> {
+        if (!this.itemsProvider || this.providingItems) return;
+
+        this.providingItems = true;
+        let inventory: SkinCraftItem[] = [];
+        try {
+            inventory = await this.itemsProvider();
+        } catch {
+            // An empty answer reads as "nothing more" — the content script keeps its current strip.
+        } finally {
+            this.providingItems = false;
+        }
+
+        window.postMessage(
+            {
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'items',
+                inventory,
+            } satisfies SkinCraftViewerItemsMessage,
+            window.location.origin
+        );
     }
 
     close(): void {
@@ -70,6 +134,8 @@ class SkinCraftEmbedService {
         this.active = false;
         this.pendingInspect = undefined;
         this.latestLoadId = undefined;
+        this.itemsRequestPending = false;
+        this.itemCount = 0;
         this.loadProgress = null;
         this.loadPhase = 'idle';
         this.showLoadingCover = false;
@@ -80,18 +146,67 @@ class SkinCraftEmbedService {
         document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
-    private handleOpenRequest = (event: MessageEvent): void => {
+    private handleViewerMessage = (event: MessageEvent): void => {
         if (event.source !== window || event.origin !== window.location.origin) return;
-        if (!isOpenSkinCraftViewerMessage(event.data)) return;
-        this.openEmbeddedViewer(event.data.target, event.data.inventory);
+        if (isOpenSkinCraftViewerMessage(event.data)) {
+            this.openEmbeddedViewer(event.data.target, event.data.inventory);
+        } else if (isSkinCraftViewerItemsMessage(event.data)) {
+            this.applyItemsUpdate(event.data.inventory);
+        }
     };
 
     private openEmbeddedViewer(target: SkinCraftItem, inventory: SkinCraftItem[]): void {
         const modal = this.ensureModal();
+        this.itemCount = inventory.length;
+        this.itemsRequestPending = false;
         modal.setItems(inventory.map((item) => this.toViewerTarget(item)));
         this.selectEmbeddedTarget(this.toViewerTarget(target));
     }
 
+    private get isMarketPage(): boolean {
+        return window.location.pathname.startsWith('/market/');
+    }
+
+    private requestMoreItems(): void {
+        if (this.itemsRequestPending || !this.active || !this.isMarketPage) return;
+        this.itemsRequestPending = true;
+        window.postMessage(
+            {
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'request-items',
+            } satisfies RequestSkinCraftViewerItemsMessage,
+            window.location.origin
+        );
+    }
+
+    /** Closes the viewer and hands the purchase to Steam's own flow for this listing. */
+    private handleBuyRequest(target: SkinCraftViewerTarget): void {
+        const listingId = target.details?.listingId;
+        if (!listingId) return;
+
+        this.close();
+        window.postMessage(
+            {
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-listing',
+                listingId,
+            } satisfies BuySkinCraftListingMessage,
+            window.location.origin
+        );
+    }
+
+    private applyItemsUpdate(items: SkinCraftItem[]): void {
+        this.itemsRequestPending = false;
+        // A shrunk harvest (a failed load, or the grid re-filtered underneath) never truncates the
+        // strip the user is scrolling — the snapshot only ever grows within a session.
+        if (!this.active || !this.modal || items.length <= this.itemCount) return;
+
+        this.itemCount = items.length;
+        this.modal.setItems(items.map((item) => this.toViewerTarget(item)));
+        // Keep filling while the user is still parked at the strip's end.
+        if (this.modal.itemsNearEnd()) this.requestMoreItems();
+    }
+
     private selectEmbeddedTarget(target: SkinCraftViewerTarget): void {
         const modal = this.ensureModal();
         // Switch in place only when the frame is showing a model; otherwise dropping the cover
@@ -119,12 +234,15 @@ class SkinCraftEmbedService {
         this.frameHasContent = false;
         const modal = new SkinCraftViewerModal({
             embedSrc: this.embedSrc,
-            itemsTitle: 'Inventory',
+            itemsTitle: this.isMarketPage ? 'Listings' : 'Inventory',
+            layout: this.isMarketPage ? 'details' : 'grid',
             onClose: () => this.close(),
             onRetry: () => {
                 if (this.activeTarget) this.requestLoad(this.activeTarget.inspect, true);
             },
             onSelect: (target) => this.selectEmbeddedTarget(target),
+            onItemsNearEnd: () => this.requestMoreItems(),
+            onBuy: this.isMarketPage ? (target) => this.handleBuyRequest(target) : undefined,
         });
         document.body.appendChild(modal.element);
         window.addEventListener('message', this.handleEmbedMessage);
diff --git a/src/lib/services/skincraft_inventory_targets.ts b/src/lib/services/skincraft_inventory_targets.ts
index be4ecab2..d2d724e9 100644
--- a/src/lib/services/skincraft_inventory_targets.ts
+++ b/src/lib/services/skincraft_inventory_targets.ts
@@ -13,7 +13,7 @@ import {
 } from './skincraft_viewer_protocol';
 import type {SkinCraftItem} from './skincraft_viewer_protocol';
 
-type CachedItemInfoLookup = (assetId: string) => ItemInfo | undefined;
+export type CachedItemInfoLookup = (assetId: string) => ItemInfo | undefined;
 
 const cachedItemInfo: CachedItemInfoLookup = (assetId) => gFloatFetcher.getCached(assetId);
 
diff --git a/src/lib/services/skincraft_market_targets.test.ts b/src/lib/services/skincraft_market_targets.test.ts
new file mode 100644
index 00000000..ec6222b3
--- /dev/null
+++ b/src/lib/services/skincraft_market_targets.test.ts
@@ -0,0 +1,184 @@
+import {describe, expect, it} from 'vitest';
+import type {ItemInfo} from '../bridge/handlers/fetch_inspect_info';
+import type {MarketListing} from '../components/market/react/types';
+import {formatFloatWithRank, formatSeed} from '../utils/skin';
+import {STEAM_ECONOMY_IMAGE_PREFIX} from '../utils/steam_images';
+import {toSkinCraftListingItem} from './skincraft_market_targets';
+import {isOpenSkinCraftViewerMessage, SKINCRAFT_VIEWER_MESSAGE_SOURCE} from './skincraft_viewer_protocol';
+
+const MASKED_LINK = 'steam://run/730//+csgo_econ_action_preview%20%propid:6%';
+
+function createListing(overrides: {description?: object; asset?: object} = {}): MarketListing {
+    return {
+        listingid: '556910233323745386',
+        asset: {
+            assetid: '53323033442',
+            asset_properties: [
+                {propertyid: 2, float_value: 0.529},
+                {propertyid: 6, string_value: 'a'.repeat(80)},
+            ],
+            ...overrides.asset,
+        },
+        description: {
+            appid: 730,
+            market_hash_name: 'AK-47 | Redline (Battle-Scarred)',
+            type: 'Classified Rifle',
+            name_color: 'd32ce6',
+            background_color: '3d293f',
+            icon_url: 'icon-path',
+            tags: [],
+            actions: [{name: 'Inspect in Game...', link: MASKED_LINK}],
+            ...overrides.description,
+        },
+    } as unknown as MarketListing;
+}
+
+describe('SkinCraft market targets', () => {
+    it('maps a beta listing, treating its empty tags as absent when deciding renderability', () => {
+        expect(toSkinCraftListingItem(createListing())).toEqual({
+            inspect: 'a'.repeat(80),
+            inspectUrl: `steam://run/730//+csgo_econ_action_preview%20${'a'.repeat(80)}`,
+            name: 'AK-47 | Redline (Battle-Scarred)',
+            iconUrl: `${STEAM_ECONOMY_IMAGE_PREFIX}icon-path/330x192`,
+            assetId: '53323033442',
+            seed: undefined,
+            float: undefined,
+            rarityColor: 'd32ce6',
+            backgroundColor: '3d293f',
+            details: {
+                listingId: '556910233323745386',
+                game: 'Counter-Strike 2',
+                type: 'Classified Rifle',
+                wearRating: '0.52900000',
+            },
+        });
+    });
+
+    it("mirrors Steam's item dialog details for the panel", () => {
+        const listing = {
+            ...createListing({
+                asset: {
+                    assetid: '53323033442',
+                    asset_properties: [
+                        {propertyid: 1, int_value: '515'},
+                        {propertyid: 2, float_value: 0.5291814804077148},
+                        {propertyid: 5, string_value: 'AK-47| Nerfed'},
+                        {propertyid: 6, string_value: 'a'.repeat(80)},
+                    ],
+                },
+                description: {
+                    market_tradable_restriction: 7,
+                    market_marketable_restriction: 7,
+                    descriptions: [
+                        {type: 'html', value: 'Exterior: Battle-Scarred', name: 'exterior_wear'},
+                        {type: 'html', value: ' ', name: 'blank'},
+                        {type: 'html', value: 'Powerful and reliable.\n\n<i>Never be afraid</i>', name: 'description'},
+                        {type: 'html', value: 'The Phoenix Collection', color: '9da1a9', name: 'itemset_name'},
+                    ],
+                },
+            }),
+            strSubtotal: '$35.20',
+        } as MarketListing;
+
+        expect(toSkinCraftListingItem(listing)?.details).toEqual({
+            listingId: '556910233323745386',
+            game: 'Counter-Strike 2',
+            type: 'Classified Rifle',
+            nameTag: 'AK-47| Nerfed',
+            patternTemplate: '515',
+            wearRating: '0.52918148',
+            price: '$35.20',
+            tradeRestrictionDays: 7,
+            marketRestrictionDays: 7,
+            lines: [
+                {text: 'Exterior: Battle-Scarred', italic: undefined, color: undefined},
+                {text: 'Powerful and reliable.', italic: undefined, color: undefined},
+                {text: 'Never be afraid', italic: true, color: undefined},
+                {text: 'The Phoenix Collection', italic: undefined, color: '9da1a9'},
+            ],
+        });
+    });
+
+    it('extracts applied stickers from the sticker_info markup, keeping them out of the text lines', () => {
+        const icon = 'https://cdn.steamstatic.com/apps/730/icons/econ/stickers/stockh2021/faze.abc.png';
+        const listing = createListing({
+            description: {
+                descriptions: [
+                    {
+                        type: 'html',
+                        value:
+                            `<div id="sticker_info" class="sticker_info"><center>` +
+                            `<img width=64 height=48 src="${icon}" title="Sticker: FaZe Clan | Stockholm 2021">` +
+                            `<img width=64 height=48 src="https://evil.example/x.png" title="Sticker: Spoofed &amp; Fake">` +
+                            `<br>Sticker: FaZe Clan | Stockholm 2021</center></div>`,
+                        name: 'sticker_info',
+                    },
+                    {type: 'html', value: 'The Phoenix Collection', name: 'itemset_name'},
+                ],
+            },
+        });
+        const details = toSkinCraftListingItem(listing)?.details;
+
+        expect(details?.accessories).toEqual([
+            {name: 'Sticker | FaZe Clan | Stockholm 2021', iconUrl: icon},
+            {name: 'Sticker | Spoofed & Fake', iconUrl: undefined},
+        ]);
+        expect(details?.lines).toEqual([{text: 'The Phoenix Collection', italic: undefined, color: undefined}]);
+    });
+
+    it('accepts non-skin renderable types by their type string', () => {
+        const listing = createListing({
+            description: {market_hash_name: 'Sticker | Crown (Foil)', type: 'High Grade Sticker'},
+        });
+
+        expect(toSkinCraftListingItem(listing)?.inspect).toBe('a'.repeat(80));
+    });
+
+    it('rejects item types SkinCraft cannot render', () => {
+        const listing = createListing({
+            description: {market_hash_name: 'Dreams & Nightmares Case', type: 'Base Grade Container'},
+        });
+
+        expect(toSkinCraftListingItem(listing)).toBeUndefined();
+    });
+
+    it('requires the masked inspect hex', () => {
+        const listing = createListing({asset: {asset_properties: [{propertyid: 2, float_value: 0.529}]}});
+
+        expect(toSkinCraftListingItem(listing)).toBeUndefined();
+    });
+
+    it('prefers a rarity colour resolved from tags over the name colour', () => {
+        const listing = createListing({
+            description: {
+                tags: [
+                    {category: 'Weapon', internal_name: 'weapon_ak47'},
+                    {category: 'Rarity', internal_name: 'Rarity_Ancient_Weapon', color: 'eb4b4b'},
+                ],
+            },
+        });
+
+        expect(toSkinCraftListingItem(listing)?.rarityColor).toBe('eb4b4b');
+    });
+
+    it('formats float and seed from cached item info', () => {
+        const itemInfo = {floatvalue: 0.5291814804077148, paintseed: 515, paintindex: 316} as unknown as ItemInfo;
+        const target = toSkinCraftListingItem(createListing(), () => itemInfo);
+
+        expect(target?.float).toBe(formatFloatWithRank(itemInfo, 6));
+        expect(target?.seed).toBe(formatSeed(itemInfo));
+    });
+
+    it('produces targets the viewer protocol accepts', () => {
+        const target = toSkinCraftListingItem(createListing());
+
+        expect(
+            isOpenSkinCraftViewerMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'open',
+                target,
+                inventory: [target],
+            })
+        ).toBe(true);
+    });
+});
diff --git a/src/lib/services/skincraft_market_targets.ts b/src/lib/services/skincraft_market_targets.ts
new file mode 100644
index 00000000..f5bf1973
--- /dev/null
+++ b/src/lib/services/skincraft_market_targets.ts
@@ -0,0 +1,194 @@
+import type {MarketListing, MarketListingProps} from '../components/market/react/types';
+import type {InventoryAsset, rgAsset, rgAssetProperty} from '../types/steam';
+import {getFiberProps} from '../utils/fiber';
+import {toSkinCraftItem} from './skincraft_inventory_targets';
+import type {CachedItemInfoLookup} from './skincraft_inventory_targets';
+import {
+    HEX_COLOR_PATTERN,
+    MAX_SKINCRAFT_ACCESSORIES,
+    MAX_SKINCRAFT_DETAIL_LINES,
+    MAX_SKINCRAFT_DETAIL_TEXT,
+    MAX_SKINCRAFT_INVENTORY_TARGETS,
+    SKINCRAFT_ACCESSORY_ICON_PREFIXES,
+} from './skincraft_viewer_protocol';
+import type {
+    SkinCraftAccessory,
+    SkinCraftDetailLine,
+    SkinCraftItem,
+    SkinCraftListingDetails,
+} from './skincraft_viewer_protocol';
+
+/** Every listing card in the Market beta results grid, with or without a rendered screenshot. */
+export const MARKET_LISTING_CARD_SELECTOR = 'div[style*="--grid-rows"]';
+
+const LOAD_MORE_TIMEOUT_MS = 5_000;
+const LOAD_MORE_POLL_MS = 250;
+
+/** A market listing reshaped as the inventory-style asset {@link toSkinCraftItem} consumes. */
+function toListingAsset(listing: MarketListing): InventoryAsset {
+    // Beta market descriptions ship empty `tags`; dropping them lets the type/name fallbacks
+    // decide renderability instead.
+    const {tags, ...description} = listing.description;
+    return {
+        ...listing.asset,
+        description: (tags?.length ? listing.description : description) as unknown as rgAsset,
+    } as unknown as InventoryAsset;
+}
+
+/** The description entries that carry applied sticker/charm markup rather than prose. */
+const ACCESSORY_INFO_ENTRIES = new Set(['sticker_info', 'keychain_info']);
+
+function decodeHtmlEntities(text: string): string {
+    return text
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/&amp;/g, '&');
+}
+
+/**
+ * Pulls the applied stickers/charms out of Steam's `sticker_info`/`keychain_info` markup. Regex
+ * over Steam's own fixed-shape HTML, so the mapping stays runnable outside a DOM.
+ */
+function toAccessories(listing: MarketListing): SkinCraftAccessory[] | undefined {
+    const accessories: SkinCraftAccessory[] = [];
+    for (const entry of listing.description.descriptions ?? []) {
+        if (!ACCESSORY_INFO_ENTRIES.has(entry.name) || typeof entry.value !== 'string') continue;
+
+        for (const [tag] of entry.value.matchAll(/<img\b[^>]*>/gi)) {
+            // Steam titles these "Sticker: <name>" / "Charm: <name>"; the dialog renders " | ".
+            const name = decodeHtmlEntities(/\btitle="([^"]*)"/i.exec(tag)?.[1] ?? '')
+                .trim()
+                .replace(':', ' |');
+            if (!name) continue;
+
+            const src = /\bsrc="([^"]*)"/i.exec(tag)?.[1] ?? '';
+            const iconUrl = SKINCRAFT_ACCESSORY_ICON_PREFIXES.some((prefix) => src.startsWith(prefix))
+                ? src
+                : undefined;
+            accessories.push({name: name.slice(0, 256), iconUrl});
+            if (accessories.length === MAX_SKINCRAFT_ACCESSORIES) return accessories;
+        }
+    }
+    return accessories.length ? accessories : undefined;
+}
+
+/** Flattens Steam's HTML description entries into sanitized plain-text lines. */
+function toDetailLines(listing: MarketListing): SkinCraftDetailLine[] | undefined {
+    const lines: SkinCraftDetailLine[] = [];
+    for (const entry of listing.description.descriptions ?? []) {
+        if ((entry.type && entry.type !== 'html') || typeof entry.value !== 'string') continue;
+        if (ACCESSORY_INFO_ENTRIES.has(entry.name)) continue;
+
+        for (const raw of entry.value.split(/\n+/)) {
+            const italic = /^\s*<i>/i.test(raw);
+            const text = raw.replace(/<[^>]*>/g, '').trim();
+            if (!text) continue;
+
+            const color = entry.color && HEX_COLOR_PATTERN.test(entry.color) ? entry.color : undefined;
+            lines.push({text: text.slice(0, MAX_SKINCRAFT_DETAIL_TEXT), italic: italic || undefined, color});
+            if (lines.length === MAX_SKINCRAFT_DETAIL_LINES) return lines;
+        }
+    }
+    return lines.length ? lines : undefined;
+}
+
+function toListingDetails(listing: MarketListing): SkinCraftListingDetails {
+    const description = listing.description;
+    const property = (id: number): rgAssetProperty | undefined =>
+        listing.asset.asset_properties?.find((p) => p.propertyid === id);
+    const wear = Number(property(2)?.float_value);
+
+    return {
+        listingId: listing.listingid,
+        game: description.appid === 730 ? 'Counter-Strike 2' : undefined,
+        type: description.type || undefined,
+        nameTag: property(5)?.string_value,
+        patternTemplate: property(1)?.int_value,
+        wearRating: Number.isFinite(wear) ? wear.toFixed(8) : undefined,
+        price: listing.strSubtotal || undefined,
+        tradeRestrictionDays: description.market_tradable_restriction || undefined,
+        marketRestrictionDays: description.market_marketable_restriction || undefined,
+        accessories: toAccessories(listing),
+        lines: toDetailLines(listing),
+    };
+}
+
+export function toSkinCraftListingItem(
+    listing: MarketListing,
+    getCachedItemInfo?: CachedItemInfoLookup
+): SkinCraftItem | undefined {
+    const target = toSkinCraftItem(toListingAsset(listing), [], getCachedItemInfo);
+    if (!target) return;
+
+    // Without tags, rarity falls back to the colour Steam itself renders the name in.
+    const nameColor = listing.description.name_color;
+    const rarityColor = target.rarityColor ?? (nameColor && HEX_COLOR_PATTERN.test(nameColor) ? nameColor : undefined);
+    return {...target, rarityColor, details: toListingDetails(listing)};
+}
+
+export function getCardListing(scope: HTMLElement): MarketListing | undefined {
+    return getFiberProps<MarketListingProps>(scope, (fiber) => typeof fiber.key === 'string')?.listing;
+}
+
+/** SkinCraft targets for the market listings currently mounted on the page, in page order. */
+export function getLoadedListingTargets(getCachedItemInfo?: CachedItemInfoLookup): SkinCraftItem[] {
+    const targets: SkinCraftItem[] = [];
+    const seenAssets = new Set<string>();
+
+    for (const scope of document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR)) {
+        const listing = getCardListing(scope);
+        const target = listing && toSkinCraftListingItem(listing, getCachedItemInfo);
+        if (!target?.assetId || seenAssets.has(target.assetId)) continue;
+
+        seenAssets.add(target.assetId);
+        targets.push(target);
+        if (targets.length === MAX_SKINCRAFT_INVENTORY_TARGETS) break;
+    }
+
+    return targets;
+}
+
+/**
+ * Loads the grid's next page by revealing its infinite-scroll sentinel — Steam's own loader keeps
+ * pagination consistent with whatever filters the user has applied — then re-harvests every mounted
+ * card. The page's scroll position is restored once the new cards land (the results sit behind the
+ * viewer modal while this runs). Resolving with no growth means the end of the results, a timeout,
+ * or an in-flight page; the caller treats them all as "nothing more right now".
+ */
+export async function loadMoreListingTargets(): Promise<SkinCraftItem[]> {
+    const cards = document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR);
+    const lastCard = cards[cards.length - 1];
+    if (!lastCard) return getLoadedListingTargets();
+
+    const {scrollX, scrollY} = window;
+    lastCard.scrollIntoView({block: 'end'});
+    try {
+        await waitForCardGrowth(cards.length);
+    } finally {
+        window.scrollTo(scrollX, scrollY);
+    }
+
+    return getLoadedListingTargets();
+}
+
+async function waitForCardGrowth(previousCount: number): Promise<void> {
+    const deadline = Date.now() + LOAD_MORE_TIMEOUT_MS;
+    while (Date.now() < deadline) {
+        await new Promise((resolve) => window.setTimeout(resolve, LOAD_MORE_POLL_MS));
+        if (document.querySelectorAll(MARKET_LISTING_CARD_SELECTOR).length > previousCount) return;
+    }
+}
+
+/** Hands off to Steam's own purchase flow by clicking the listing card's native Buy button. */
+export function buyListing(listingId: string): boolean {
+    for (const scope of document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR)) {
+        if (getCardListing(scope)?.listingid !== listingId) continue;
+
+        const buyButton = [...scope.querySelectorAll('button')].find((button) => button.textContent?.trim() === 'Buy');
+        buyButton?.click();
+        return !!buyButton;
+    }
+    return false;
+}
diff --git a/src/lib/services/skincraft_viewer_protocol.test.ts b/src/lib/services/skincraft_viewer_protocol.test.ts
index 51ee4be1..839da575 100644
--- a/src/lib/services/skincraft_viewer_protocol.test.ts
+++ b/src/lib/services/skincraft_viewer_protocol.test.ts
@@ -1,6 +1,10 @@
 import {describe, expect, it} from 'vitest';
 import {
+    isBuySkinCraftListingMessage,
     isOpenSkinCraftViewerMessage,
+    isRequestSkinCraftViewerItemsMessage,
+    isSkinCraftViewerItemsMessage,
+    MAX_SKINCRAFT_DETAIL_TEXT,
     MAX_SKINCRAFT_INVENTORY_TARGETS,
     SKINCRAFT_VIEWER_MESSAGE_SOURCE,
 } from './skincraft_viewer_protocol';
@@ -92,3 +96,111 @@ describe('SkinCraft viewer open messages', () => {
         ).toBe(false);
     });
 });
+
+describe('SkinCraft viewer listing details', () => {
+    const details = {
+        listingId: '556910233323745386',
+        game: 'Counter-Strike 2',
+        type: 'Classified Rifle',
+        nameTag: 'AK-47| Nerfed',
+        patternTemplate: '515',
+        wearRating: '0.52918148',
+        price: '$35.20',
+        tradeRestrictionDays: 7,
+        marketRestrictionDays: 7,
+        accessories: [
+            {
+                name: 'Sticker | dupreeh | Katowice 2019',
+                iconUrl: 'https://cdn.steamstatic.com/apps/730/icons/econ/stickers/kat2019/dupreeh.png',
+            },
+        ],
+        lines: [{text: 'Exterior: Battle-Scarred'}, {text: 'Never be afraid', italic: true, color: '9da1a9'}],
+    };
+
+    it('accepts a target carrying well-formed details', () => {
+        expect(
+            isOpenSkinCraftViewerMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'open',
+                target: {...target, details},
+                inventory: [],
+            })
+        ).toBe(true);
+    });
+
+    it.each([
+        ['a non-numeric listing id', {...details, listingId: 'not-a-listing'}],
+        ['an oversized line', {...details, lines: [{text: 'a'.repeat(MAX_SKINCRAFT_DETAIL_TEXT + 1)}]}],
+        ['a malformed line colour', {...details, lines: [{text: 'x', color: 'red'}]}],
+        ['out-of-range restriction days', {...details, tradeRestrictionDays: 9000}],
+        [
+            'an accessory icon from an untrusted origin',
+            {...details, accessories: [{name: 'Sticker | X', iconUrl: 'https://evil.example/x.png'}]},
+        ],
+    ])('rejects details with %s', (_label, malformed) => {
+        expect(
+            isOpenSkinCraftViewerMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'open',
+                target: {...target, details: malformed},
+                inventory: [],
+            })
+        ).toBe(false);
+    });
+});
+
+describe('SkinCraft viewer buy messages', () => {
+    it('accepts only well-formed listing ids from this protocol', () => {
+        expect(
+            isBuySkinCraftListingMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-listing',
+                listingId: '556910233323745386',
+            })
+        ).toBe(true);
+        expect(
+            isBuySkinCraftListingMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-listing',
+                listingId: 'javascript:alert(1)',
+            })
+        ).toBe(false);
+        expect(isBuySkinCraftListingMessage({source: 'other', type: 'buy-listing', listingId: '1'})).toBe(false);
+    });
+});
+
+describe('SkinCraft viewer items messages', () => {
+    it('accepts a request for more items only from this protocol', () => {
+        expect(
+            isRequestSkinCraftViewerItemsMessage({source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'request-items'})
+        ).toBe(true);
+        expect(isRequestSkinCraftViewerItemsMessage({source: 'other', type: 'request-items'})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'items'})).toBe(
+            false
+        );
+    });
+
+    it('holds item updates to the same target validation as open messages', () => {
+        expect(
+            isSkinCraftViewerItemsMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'items',
+                inventory: [target],
+            })
+        ).toBe(true);
+        expect(
+            isSkinCraftViewerItemsMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'items',
+                inventory: [{...target, inspect: 'not-an-inspect'}],
+            })
+        ).toBe(false);
+        expect(
+            isSkinCraftViewerItemsMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'items',
+                inventory: Array.from({length: MAX_SKINCRAFT_INVENTORY_TARGETS + 1}, () => target),
+            })
+        ).toBe(false);
+    });
+});
diff --git a/src/lib/services/skincraft_viewer_protocol.ts b/src/lib/services/skincraft_viewer_protocol.ts
index 79a9f44f..d93027d3 100644
--- a/src/lib/services/skincraft_viewer_protocol.ts
+++ b/src/lib/services/skincraft_viewer_protocol.ts
@@ -8,6 +8,43 @@ export const HEX_COLOR_PATTERN = /^[0-9a-f]{6}$/i;
 export const STEAM_INSPECT_URL_PATTERN =
     /^steam:\/\/(?:run|rungame)\/730\/\d{0,20}\/\+csgo_econ_action_preview%20[0-9a-f]{40,8192}$/i;
 const ASSET_ID_PATTERN = /^\d{1,32}$/;
+export const MAX_SKINCRAFT_DETAIL_LINES = 24;
+export const MAX_SKINCRAFT_DETAIL_TEXT = 2048;
+export const MAX_SKINCRAFT_ACCESSORIES = 8;
+
+/** The hosts Steam serves sticker/charm icons from. */
+export const SKINCRAFT_ACCESSORY_ICON_PREFIXES = [
+    'https://cdn.steamstatic.com/apps/730/icons/',
+    'https://steamcdn-a.akamaihd.net/apps/730/icons/',
+] as const;
+
+/** One sanitized line of Steam's item description block (exterior, flavour text, collection, …). */
+export type SkinCraftDetailLine = {
+    text: string;
+    italic?: boolean;
+    color?: string;
+};
+
+/** A sticker or charm applied to the listed item. */
+export type SkinCraftAccessory = {
+    name: string;
+    iconUrl?: string;
+};
+
+/** The listing facts the viewer's details panel mirrors from Steam's own item dialog. */
+export type SkinCraftListingDetails = {
+    listingId?: string;
+    game?: string;
+    type?: string;
+    nameTag?: string;
+    patternTemplate?: string;
+    wearRating?: string;
+    price?: string;
+    tradeRestrictionDays?: number;
+    marketRestrictionDays?: number;
+    accessories?: SkinCraftAccessory[];
+    lines?: SkinCraftDetailLine[];
+};
 
 /** An item as it crosses the page → content-script boundary. */
 export type SkinCraftItem = {
@@ -21,6 +58,7 @@ export type SkinCraftItem = {
     float?: string;
     rarityColor?: string;
     backgroundColor?: string;
+    details?: SkinCraftListingDetails;
 };
 
 /** A {@link SkinCraftItem} the modal can render, with its SkinCraft permalink resolved. */
@@ -33,6 +71,87 @@ export type OpenSkinCraftViewerMessage = {
     inventory: SkinCraftItem[];
 };
 
+/** Content script → page: load more items for the viewer's strip (paginated surfaces only). */
+export type RequestSkinCraftViewerItemsMessage = {
+    source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
+    type: 'request-items';
+};
+
+/** Content script → page: hand the user off to Steam's own purchase flow for a listing. */
+export type BuySkinCraftListingMessage = {
+    source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
+    type: 'buy-listing';
+    listingId: string;
+};
+
+/** Page → content script: the refreshed item strip, answering a `request-items`. */
+export type SkinCraftViewerItemsMessage = {
+    source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
+    type: 'items';
+    inventory: SkinCraftItem[];
+};
+
+function isBoundedString(value: unknown, maxLength: number): value is string {
+    return typeof value === 'string' && value.length <= maxLength;
+}
+
+function isOptional<T>(value: unknown, check: (value: unknown) => value is T): boolean {
+    return value === undefined || check(value);
+}
+
+function isRestrictionDays(value: unknown): value is number {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 365;
+}
+
+function isSkinCraftDetailLine(data: unknown): data is SkinCraftDetailLine {
+    if (!data || typeof data !== 'object') return false;
+
+    const line = data as Partial<SkinCraftDetailLine>;
+    return (
+        isBoundedString(line.text, MAX_SKINCRAFT_DETAIL_TEXT) &&
+        (line.italic === undefined || typeof line.italic === 'boolean') &&
+        (line.color === undefined || (typeof line.color === 'string' && HEX_COLOR_PATTERN.test(line.color)))
+    );
+}
+
+function isSkinCraftAccessory(data: unknown): data is SkinCraftAccessory {
+    if (!data || typeof data !== 'object') return false;
+
+    const accessory = data as Partial<SkinCraftAccessory>;
+    return (
+        isBoundedString(accessory.name, 256) &&
+        (accessory.iconUrl === undefined ||
+            (isBoundedString(accessory.iconUrl, 4096) &&
+                SKINCRAFT_ACCESSORY_ICON_PREFIXES.some((prefix) => accessory.iconUrl!.startsWith(prefix))))
+    );
+}
+
+function isSkinCraftListingDetails(data: unknown): data is SkinCraftListingDetails {
+    if (!data || typeof data !== 'object') return false;
+
+    const details = data as Partial<SkinCraftListingDetails>;
+    return (
+        (details.listingId === undefined ||
+            (typeof details.listingId === 'string' && ASSET_ID_PATTERN.test(details.listingId))) &&
+        (details.accessories === undefined ||
+            (Array.isArray(details.accessories) &&
+                details.accessories.length <= MAX_SKINCRAFT_ACCESSORIES &&
+                details.accessories.every(isSkinCraftAccessory))) &&
+        isOptional(details.game, (v): v is string => isBoundedString(v, 128)) &&
+        isOptional(details.type, (v): v is string => isBoundedString(v, 256)) &&
+        isOptional(details.nameTag, (v): v is string => isBoundedString(v, 256)) &&
+        isOptional(details.patternTemplate, (v): v is string => isBoundedString(v, 16)) &&
+        isOptional(details.wearRating, (v): v is string => isBoundedString(v, 32)) &&
+        isOptional(details.price, (v): v is string => isBoundedString(v, 64)) &&
+        isOptional(details.tradeRestrictionDays, isRestrictionDays) &&
+        isOptional(details.marketRestrictionDays, isRestrictionDays) &&
+        (details.lines === undefined ||
+            (Array.isArray(details.lines) &&
+                details.lines.length <= MAX_SKINCRAFT_DETAIL_LINES &&
+                details.lines.every(isSkinCraftDetailLine)))
+    );
+}
+
 /** Structural check only: does the untyped message data have the shape of a {@link SkinCraftItem}? */
 function isSkinCraftItemShape(data: unknown): data is SkinCraftItem {
     if (!data || typeof data !== 'object') return false;
@@ -47,7 +166,8 @@ function isSkinCraftItemShape(data: unknown): data is SkinCraftItem {
         (item.float === undefined || typeof item.float === 'string') &&
         (item.rarityColor === undefined || typeof item.rarityColor === 'string') &&
         (item.backgroundColor === undefined || typeof item.backgroundColor === 'string') &&
-        (item.iconUrl === undefined || typeof item.iconUrl === 'string')
+        (item.iconUrl === undefined || typeof item.iconUrl === 'string') &&
+        (item.details === undefined || isSkinCraftListingDetails(item.details))
     );
 }
 
@@ -71,6 +191,10 @@ function isSkinCraftItem(data: unknown): data is SkinCraftItem {
     return isSkinCraftItemShape(data) && isValidSkinCraftItem(data);
 }
 
+function isSkinCraftItemList(data: unknown): data is SkinCraftItem[] {
+    return Array.isArray(data) && data.length <= MAX_SKINCRAFT_INVENTORY_TARGETS && data.every(isSkinCraftItem);
+}
+
 export function isOpenSkinCraftViewerMessage(data: unknown): data is OpenSkinCraftViewerMessage {
     if (!data || typeof data !== 'object') return false;
 
@@ -79,8 +203,36 @@ export function isOpenSkinCraftViewerMessage(data: unknown): data is OpenSkinCra
         message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
         message.type === 'open' &&
         isSkinCraftItem(message.target) &&
-        Array.isArray(message.inventory) &&
-        message.inventory.length <= MAX_SKINCRAFT_INVENTORY_TARGETS &&
-        message.inventory.every(isSkinCraftItem)
+        isSkinCraftItemList(message.inventory)
+    );
+}
+
+export function isRequestSkinCraftViewerItemsMessage(data: unknown): data is RequestSkinCraftViewerItemsMessage {
+    if (!data || typeof data !== 'object') return false;
+
+    const message = data as Partial<RequestSkinCraftViewerItemsMessage>;
+    return message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE && message.type === 'request-items';
+}
+
+export function isBuySkinCraftListingMessage(data: unknown): data is BuySkinCraftListingMessage {
+    if (!data || typeof data !== 'object') return false;
+
+    const message = data as Partial<BuySkinCraftListingMessage>;
+    return (
+        message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
+        message.type === 'buy-listing' &&
+        typeof message.listingId === 'string' &&
+        ASSET_ID_PATTERN.test(message.listingId)
+    );
+}
+
+export function isSkinCraftViewerItemsMessage(data: unknown): data is SkinCraftViewerItemsMessage {
+    if (!data || typeof data !== 'object') return false;
+
+    const message = data as Partial<SkinCraftViewerItemsMessage>;
+    return (
+        message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
+        message.type === 'items' &&
+        isSkinCraftItemList(message.inventory)
     );
 }

From c761a33d50607f4a70e71e3316afa4c7abea2418 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 00:16:54 -0400
Subject: [PATCH 2/8] feat(market): source accessories from asset_accessories
 with scrape levels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the sticker_info markup parsing with the listing's structured
asset_accessories, which carry each sticker/charm's own description and
slot properties — so rows now show Steam's per-accessory attribute line
(Sticker Scrape Level from propertyid 4, Charm Template from 3) with
icons served from the economy image CDN like every other item icon.
---
 .../common/skincraft_viewer_modal.ts          |  7 +-
 .../common/skincraft_viewer_modal_styles.ts   | 12 ++++
 src/lib/components/market/react/types.ts      | 11 ++++
 .../services/skincraft_market_targets.test.ts | 56 ++++++++++++----
 src/lib/services/skincraft_market_targets.ts  | 65 ++++++++++---------
 .../skincraft_viewer_protocol.test.ts         |  3 +-
 src/lib/services/skincraft_viewer_protocol.ts | 12 ++--
 7 files changed, 112 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index 6c95a8d4..cf9774d3 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -382,7 +382,12 @@ export class SkinCraftViewerModal {
                             ${accessory.iconUrl
                                 ? html`<img src="${accessory.iconUrl}" alt="" loading="lazy" draggable="false" />`
                                 : nothing}
-                            <span>${accessory.name}</span>
+                            <span class="details-accessory-text">
+                                <span>${accessory.name}</span>
+                                ${accessory.detail
+                                    ? html`<span class="details-accessory-detail">${accessory.detail}</span>`
+                                    : nothing}
+                            </span>
                         </div>
                     `
                 )}
diff --git a/src/lib/components/common/skincraft_viewer_modal_styles.ts b/src/lib/components/common/skincraft_viewer_modal_styles.ts
index dc5033e2..18141123 100644
--- a/src/lib/components/common/skincraft_viewer_modal_styles.ts
+++ b/src/lib/components/common/skincraft_viewer_modal_styles.ts
@@ -619,6 +619,18 @@ export const skinCraftViewerModalStyles = `
         flex: 0 0 auto;
     }
 
+    .details-accessory-text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    .details-accessory-detail {
+        color: rgba(245, 248, 255, 0.45);
+        font-size: 12px;
+    }
+
     .details-restrictions {
         color: rgba(245, 248, 255, 0.6);
         font-size: 13px;
diff --git a/src/lib/components/market/react/types.ts b/src/lib/components/market/react/types.ts
index 83c1753e..c238e2ea 100644
--- a/src/lib/components/market/react/types.ts
+++ b/src/lib/components/market/react/types.ts
@@ -35,11 +35,22 @@ export interface MarketListingDescription
     tags: unknown[];
 }
 
+/** A sticker/charm applied to a listed item, with its own description and slot properties. */
+export interface MarketListingAccessory {
+    classid: string;
+    standalone_properties: rgAssetProperty[];
+    /** Properties tying the accessory to its host item, e.g. propertyid 4 = sticker scrape level. */
+    parent_relationship_properties: rgAssetProperty[];
+    nested_accessories: MarketListingAccessory[];
+    description: MarketListingDescription;
+}
+
 export interface MarketListingAsset {
     asset_properties: rgAssetProperty[];
     amount: number;
     appid: number;
     accessory_properties: rgAssetProperty[];
+    asset_accessories?: MarketListingAccessory[];
     assetid: string;
     classid: string;
     contextid: string;
diff --git a/src/lib/services/skincraft_market_targets.test.ts b/src/lib/services/skincraft_market_targets.test.ts
index ec6222b3..9f829609 100644
--- a/src/lib/services/skincraft_market_targets.test.ts
+++ b/src/lib/services/skincraft_market_targets.test.ts
@@ -99,20 +99,37 @@ describe('SkinCraft market targets', () => {
         });
     });
 
-    it('extracts applied stickers from the sticker_info markup, keeping them out of the text lines', () => {
-        const icon = 'https://cdn.steamstatic.com/apps/730/icons/econ/stickers/stockh2021/faze.abc.png';
+    it("maps applied accessories with Steam's own attribute lines, keeping their markup out of the text lines", () => {
+        const accessory = (description: object, parentProperties: object[] = []) => ({
+            classid: '7104637288',
+            standalone_properties: [],
+            parent_relationship_properties: parentProperties,
+            nested_accessories: [],
+            description,
+        });
         const listing = createListing({
+            asset: {
+                assetid: '53323033442',
+                asset_properties: [{propertyid: 6, string_value: 'a'.repeat(80)}],
+                asset_accessories: [
+                    accessory(
+                        {market_hash_name: 'Sticker | NRG | Austin 2025', type: 'High Grade Sticker', icon_url: 'nrg'},
+                        [{propertyid: 4, float_value: 0.6800000071525574}]
+                    ),
+                    accessory({
+                        market_hash_name: 'Sticker | OG | Austin 2025',
+                        type: 'High Grade Sticker',
+                        icon_url: 'og',
+                    }),
+                    accessory(
+                        {market_hash_name: 'Charm | Baby Karat T', type: 'Extraordinary Charm', icon_url: 'charm'},
+                        [{propertyid: 3, int_value: '88143'}]
+                    ),
+                ],
+            },
             description: {
                 descriptions: [
-                    {
-                        type: 'html',
-                        value:
-                            `<div id="sticker_info" class="sticker_info"><center>` +
-                            `<img width=64 height=48 src="${icon}" title="Sticker: FaZe Clan | Stockholm 2021">` +
-                            `<img width=64 height=48 src="https://evil.example/x.png" title="Sticker: Spoofed &amp; Fake">` +
-                            `<br>Sticker: FaZe Clan | Stockholm 2021</center></div>`,
-                        name: 'sticker_info',
-                    },
+                    {type: 'html', value: '<div class="sticker_info"><img src="x"></div>', name: 'sticker_info'},
                     {type: 'html', value: 'The Phoenix Collection', name: 'itemset_name'},
                 ],
             },
@@ -120,8 +137,21 @@ describe('SkinCraft market targets', () => {
         const details = toSkinCraftListingItem(listing)?.details;
 
         expect(details?.accessories).toEqual([
-            {name: 'Sticker | FaZe Clan | Stockholm 2021', iconUrl: icon},
-            {name: 'Sticker | Spoofed & Fake', iconUrl: undefined},
+            {
+                name: 'Sticker | NRG | Austin 2025',
+                iconUrl: `${STEAM_ECONOMY_IMAGE_PREFIX}nrg/330x192`,
+                detail: 'Sticker Scrape Level: 0.680000007',
+            },
+            {
+                name: 'Sticker | OG | Austin 2025',
+                iconUrl: `${STEAM_ECONOMY_IMAGE_PREFIX}og/330x192`,
+                detail: 'Sticker Scrape Level: 0',
+            },
+            {
+                name: 'Charm | Baby Karat T',
+                iconUrl: `${STEAM_ECONOMY_IMAGE_PREFIX}charm/330x192`,
+                detail: 'Charm Template: 88143',
+            },
         ]);
         expect(details?.lines).toEqual([{text: 'The Phoenix Collection', italic: undefined, color: undefined}]);
     });
diff --git a/src/lib/services/skincraft_market_targets.ts b/src/lib/services/skincraft_market_targets.ts
index f5bf1973..375f715c 100644
--- a/src/lib/services/skincraft_market_targets.ts
+++ b/src/lib/services/skincraft_market_targets.ts
@@ -1,6 +1,7 @@
-import type {MarketListing, MarketListingProps} from '../components/market/react/types';
+import type {MarketListing, MarketListingAccessory, MarketListingProps} from '../components/market/react/types';
 import type {InventoryAsset, rgAsset, rgAssetProperty} from '../types/steam';
 import {getFiberProps} from '../utils/fiber';
+import {steamEconomyImageUrl} from '../utils/steam_images';
 import {toSkinCraftItem} from './skincraft_inventory_targets';
 import type {CachedItemInfoLookup} from './skincraft_inventory_targets';
 import {
@@ -9,7 +10,6 @@ import {
     MAX_SKINCRAFT_DETAIL_LINES,
     MAX_SKINCRAFT_DETAIL_TEXT,
     MAX_SKINCRAFT_INVENTORY_TARGETS,
-    SKINCRAFT_ACCESSORY_ICON_PREFIXES,
 } from './skincraft_viewer_protocol';
 import type {
     SkinCraftAccessory,
@@ -35,41 +35,44 @@ function toListingAsset(listing: MarketListing): InventoryAsset {
     } as unknown as InventoryAsset;
 }
 
-/** The description entries that carry applied sticker/charm markup rather than prose. */
+/** The description entries that duplicate applied sticker/charm data as markup rather than prose. */
 const ACCESSORY_INFO_ENTRIES = new Set(['sticker_info', 'keychain_info']);
 
-function decodeHtmlEntities(text: string): string {
-    return text
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&quot;/g, '"')
-        .replace(/&#39;/g, "'")
-        .replace(/&amp;/g, '&');
+/** Matches how Steam prints scrape levels: the float32 value at 9 significant digits. */
+function formatScrapeLevel(value: number): string {
+    return String(Number(value.toPrecision(9)));
+}
+
+/** The per-accessory attribute line, from the {@link https://steamcommunity.com AssetPropertySchema} ids. */
+function toAccessoryDetail(accessory: MarketListingAccessory): string | undefined {
+    const properties = [
+        ...(accessory.parent_relationship_properties ?? []),
+        ...(accessory.standalone_properties ?? []),
+    ];
+
+    const scrape = Number(properties.find((p) => p.propertyid === 4)?.float_value);
+    if (Number.isFinite(scrape)) return `Sticker Scrape Level: ${formatScrapeLevel(scrape)}`;
+
+    const template = properties.find((p) => p.propertyid === 3)?.int_value;
+    if (template) return `Charm Template: ${template}`;
+
+    // Steam spells out the zero on unscraped stickers rather than dropping the line.
+    return accessory.description.type?.endsWith('Sticker') ? 'Sticker Scrape Level: 0' : undefined;
 }
 
-/**
- * Pulls the applied stickers/charms out of Steam's `sticker_info`/`keychain_info` markup. Regex
- * over Steam's own fixed-shape HTML, so the mapping stays runnable outside a DOM.
- */
 function toAccessories(listing: MarketListing): SkinCraftAccessory[] | undefined {
     const accessories: SkinCraftAccessory[] = [];
-    for (const entry of listing.description.descriptions ?? []) {
-        if (!ACCESSORY_INFO_ENTRIES.has(entry.name) || typeof entry.value !== 'string') continue;
-
-        for (const [tag] of entry.value.matchAll(/<img\b[^>]*>/gi)) {
-            // Steam titles these "Sticker: <name>" / "Charm: <name>"; the dialog renders " | ".
-            const name = decodeHtmlEntities(/\btitle="([^"]*)"/i.exec(tag)?.[1] ?? '')
-                .trim()
-                .replace(':', ' |');
-            if (!name) continue;
-
-            const src = /\bsrc="([^"]*)"/i.exec(tag)?.[1] ?? '';
-            const iconUrl = SKINCRAFT_ACCESSORY_ICON_PREFIXES.some((prefix) => src.startsWith(prefix))
-                ? src
-                : undefined;
-            accessories.push({name: name.slice(0, 256), iconUrl});
-            if (accessories.length === MAX_SKINCRAFT_ACCESSORIES) return accessories;
-        }
+    for (const accessory of listing.asset.asset_accessories ?? []) {
+        const description = accessory.description;
+        if (typeof description?.market_hash_name !== 'string') continue;
+
+        const icon = description.icon_url_large || description.icon_url;
+        accessories.push({
+            name: description.market_hash_name.slice(0, 256),
+            iconUrl: icon ? steamEconomyImageUrl(icon) : undefined,
+            detail: toAccessoryDetail(accessory),
+        });
+        if (accessories.length === MAX_SKINCRAFT_ACCESSORIES) break;
     }
     return accessories.length ? accessories : undefined;
 }
diff --git a/src/lib/services/skincraft_viewer_protocol.test.ts b/src/lib/services/skincraft_viewer_protocol.test.ts
index 839da575..7bbd425c 100644
--- a/src/lib/services/skincraft_viewer_protocol.test.ts
+++ b/src/lib/services/skincraft_viewer_protocol.test.ts
@@ -111,7 +111,8 @@ describe('SkinCraft viewer listing details', () => {
         accessories: [
             {
                 name: 'Sticker | dupreeh | Katowice 2019',
-                iconUrl: 'https://cdn.steamstatic.com/apps/730/icons/econ/stickers/kat2019/dupreeh.png',
+                iconUrl: 'https://community.akamai.steamstatic.com/economy/image/dupreeh/330x192',
+                detail: 'Sticker Scrape Level: 0.680000007',
             },
         ],
         lines: [{text: 'Exterior: Battle-Scarred'}, {text: 'Never be afraid', italic: true, color: '9da1a9'}],
diff --git a/src/lib/services/skincraft_viewer_protocol.ts b/src/lib/services/skincraft_viewer_protocol.ts
index d93027d3..7752925f 100644
--- a/src/lib/services/skincraft_viewer_protocol.ts
+++ b/src/lib/services/skincraft_viewer_protocol.ts
@@ -12,12 +12,6 @@ export const MAX_SKINCRAFT_DETAIL_LINES = 24;
 export const MAX_SKINCRAFT_DETAIL_TEXT = 2048;
 export const MAX_SKINCRAFT_ACCESSORIES = 8;
 
-/** The hosts Steam serves sticker/charm icons from. */
-export const SKINCRAFT_ACCESSORY_ICON_PREFIXES = [
-    'https://cdn.steamstatic.com/apps/730/icons/',
-    'https://steamcdn-a.akamaihd.net/apps/730/icons/',
-] as const;
-
 /** One sanitized line of Steam's item description block (exterior, flavour text, collection, …). */
 export type SkinCraftDetailLine = {
     text: string;
@@ -29,6 +23,8 @@ export type SkinCraftDetailLine = {
 export type SkinCraftAccessory = {
     name: string;
     iconUrl?: string;
+    /** Steam's per-accessory attribute line, e.g. "Sticker Scrape Level: 0.680000007". */
+    detail?: string;
 };
 
 /** The listing facts the viewer's details panel mirrors from Steam's own item dialog. */
@@ -120,9 +116,9 @@ function isSkinCraftAccessory(data: unknown): data is SkinCraftAccessory {
     const accessory = data as Partial<SkinCraftAccessory>;
     return (
         isBoundedString(accessory.name, 256) &&
+        isOptional(accessory.detail, (v): v is string => isBoundedString(v, 128)) &&
         (accessory.iconUrl === undefined ||
-            (isBoundedString(accessory.iconUrl, 4096) &&
-                SKINCRAFT_ACCESSORY_ICON_PREFIXES.some((prefix) => accessory.iconUrl!.startsWith(prefix))))
+            (isBoundedString(accessory.iconUrl, 4096) && accessory.iconUrl.startsWith(STEAM_ECONOMY_IMAGE_PREFIX)))
     );
 }
 

From f6acf81549a748321cd061493c33687502168477 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 00:40:34 -0400
Subject: [PATCH 3/8] feat(market): polish the viewer details panel chrome and
 card launcher

Replaces the modal header in the market layout with panel-native chrome
(skincraft attribution and close up top, paired previous/next pager in
the footer), gives accessory rows breathing room, and moves the card
launcher into the price row as a plain 3D button sized to Steam's own
Buy button.
---
 .../common/skincraft_viewer_modal.ts          | 129 ++++++++++++------
 .../common/skincraft_viewer_modal_styles.ts   |  66 ++++++---
 src/lib/components/market/react/placement.ts  |   7 +-
 src/lib/components/market/react/view_3d.ts    |  56 ++++----
 4 files changed, 159 insertions(+), 99 deletions(-)

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index cf9774d3..ed2bfb65 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -40,6 +40,24 @@ const WEAR_SEGMENTS = [
     {width: 55, color: '#f92424'},
 ];
 
+function renderChevron(direction: 'left' | 'right'): TemplateResult {
+    return html`
+        <svg
+            viewBox="0 0 24 24"
+            width="15"
+            height="15"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+        >
+            <path d="${direction === 'left' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'}" />
+        </svg>
+    `;
+}
+
 function formatRestrictionDays(days: number): string {
     if (days === 7) return 'one week';
     if (days === 1) return 'one day';
@@ -200,34 +218,7 @@ export class SkinCraftViewerModal {
                 @transitionend="${this.handleTransitionEnd}"
                 @keydown="${this.handleKeydown}"
             >
-                <header class="modal-header">
-                    <div class="modal-title" id="skincraft-viewer-title">${this.target?.name ?? ''}</div>
-                    <div class="modal-header-actions">
-                        <a
-                            class="skincraft-attribution"
-                            href="${this.target?.itemUrl ?? ''}"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            aria-label="Open on SkinCraft"
-                        >
-                            <img
-                                class="skincraft-logo-mark"
-                                src="https://csfloat.com/assets/skincraft-logo-mark.svg"
-                                alt=""
-                                aria-hidden="true"
-                            />
-                            <span class="skincraft-wordmark">skincraft<span>.gg</span></span>
-                        </a>
-                        <button
-                            class="close-button"
-                            type="button"
-                            aria-label="Close 3D viewer"
-                            @click="${this.options.onClose}"
-                        >
-                            ×
-                        </button>
-                    </div>
-                </header>
+                ${details ? nothing : this.renderHeader()}
                 <div class="modal-body">
                     ${details ? nothing : this.renderItemPanel()}
                     <div class="viewer-stage">
@@ -250,6 +241,45 @@ export class SkinCraftViewerModal {
         `;
     }
 
+    private renderHeader(): TemplateResult {
+        return html`
+            <header class="modal-header">
+                <div class="modal-title" id="skincraft-viewer-title">${this.target?.name ?? ''}</div>
+                <div class="modal-header-actions">
+                    ${this.renderAttribution()}
+                    <button
+                        class="close-button"
+                        type="button"
+                        aria-label="Close 3D viewer"
+                        @click="${this.options.onClose}"
+                    >
+                        ×
+                    </button>
+                </div>
+            </header>
+        `;
+    }
+
+    private renderAttribution(): TemplateResult {
+        return html`
+            <a
+                class="skincraft-attribution"
+                href="${this.target?.itemUrl ?? ''}"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Open on SkinCraft"
+            >
+                <img
+                    class="skincraft-logo-mark"
+                    src="https://csfloat.com/assets/skincraft-logo-mark.svg"
+                    alt=""
+                    aria-hidden="true"
+                />
+                <span class="skincraft-wordmark">skincraft<span>.gg</span></span>
+            </a>
+        `;
+    }
+
     private renderItemPanel(): TemplateResult {
         return html`
             <aside class="item-panel" aria-label="${this.options.itemsTitle}">
@@ -276,30 +306,21 @@ export class SkinCraftViewerModal {
 
         return html`
             <aside class="details-panel" aria-label="${this.options.itemsTitle}">
-                <div class="details-nav">
-                    <button
-                        class="details-nav-btn"
-                        type="button"
-                        aria-label="Previous listing"
-                        ?disabled="${index <= 0}"
-                        @click="${this.handlePrevious}"
-                    >
-                        ‹
-                    </button>
-                    <span class="details-count">${index >= 0 ? `${index + 1} / ${this.items.length}` : ''}</span>
+                <div class="details-header">
+                    ${this.renderAttribution()}
                     <button
-                        class="details-nav-btn"
+                        class="close-button"
                         type="button"
-                        aria-label="Next listing"
-                        ?disabled="${index < 0 || index >= this.items.length - 1}"
-                        @click="${this.handleNext}"
+                        aria-label="Close 3D viewer"
+                        @click="${this.options.onClose}"
                     >
-                        ›
+                        ×
                     </button>
                 </div>
                 <div class="details-scroll">
                     <div
                         class="details-name"
+                        id="skincraft-viewer-title"
                         style="${styleMap({color: target?.rarityColor ? `#${target.rarityColor}` : undefined})}"
                     >
                         ${target?.name ?? ''}
@@ -313,6 +334,26 @@ export class SkinCraftViewerModal {
                     ${this.renderDetailActions(target, details)} ${this.renderAccessories(details)}
                     ${this.renderRestrictions(details)} ${this.renderDetailLines(details)}
                 </div>
+                <div class="details-footer">
+                    <button
+                        class="details-nav-btn"
+                        type="button"
+                        ?disabled="${index <= 0}"
+                        @click="${this.handlePrevious}"
+                    >
+                        ${renderChevron('left')}
+                        <span>Previous</span>
+                    </button>
+                    <button
+                        class="details-nav-btn"
+                        type="button"
+                        ?disabled="${index < 0 || index >= this.items.length - 1}"
+                        @click="${this.handleNext}"
+                    >
+                        <span>Next</span>
+                        ${renderChevron('right')}
+                    </button>
+                </div>
             </aside>
         `;
     }
diff --git a/src/lib/components/common/skincraft_viewer_modal_styles.ts b/src/lib/components/common/skincraft_viewer_modal_styles.ts
index 18141123..a8050b6c 100644
--- a/src/lib/components/common/skincraft_viewer_modal_styles.ts
+++ b/src/lib/components/common/skincraft_viewer_modal_styles.ts
@@ -431,37 +431,54 @@ export const skinCraftViewerModalStyles = `
         background: #181b21;
     }
 
-    .details-nav {
+    .details-header {
         display: flex;
         flex: 0 0 auto;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         height: 48px;
-        padding: 0 10px;
+        padding: 0 10px 0 16px;
         border-bottom: 1px solid rgba(193, 206, 255, 0.08);
     }
 
     .details-nav-btn {
-        display: grid;
-        width: 34px;
-        height: 34px;
-        padding: 0 0 3px;
-        place-items: center;
-        color: rgba(245, 248, 255, 0.78);
+        display: inline-flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        height: 36px;
+        padding: 0 12px;
+        color: rgba(245, 248, 255, 0.85);
         font: inherit;
-        font-size: 22px;
-        line-height: 1;
-        background: rgba(255, 255, 255, 0.06);
-        border: 0;
+        font-size: 13px;
+        font-weight: 600;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(193, 206, 255, 0.12);
         border-radius: 8px;
         cursor: pointer;
-        transition: color 150ms ease, background-color 150ms ease;
+        transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
+    }
+
+    .details-nav-btn svg {
+        flex: 0 0 auto;
+        opacity: 0.65;
+        transition: opacity 150ms ease;
     }
 
     .details-nav-btn:hover:not(:disabled) {
         color: #fff;
-        background: rgba(255, 255, 255, 0.12);
+        background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(193, 206, 255, 0.24);
+    }
+
+    .details-nav-btn:hover:not(:disabled) svg {
+        opacity: 1;
+    }
+
+    .details-nav-btn:active:not(:disabled) {
+        transform: translateY(1px);
     }
 
     .details-nav-btn:disabled {
@@ -469,10 +486,14 @@ export const skinCraftViewerModalStyles = `
         cursor: default;
     }
 
-    .details-count {
-        color: rgba(245, 248, 255, 0.5);
-        font-size: 12px;
-        font-variant-numeric: tabular-nums;
+    .details-footer {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 8px 10px;
+        border-top: 1px solid rgba(193, 206, 255, 0.08);
     }
 
     .details-scroll {
@@ -604,9 +625,9 @@ export const skinCraftViewerModalStyles = `
     .details-accessory {
         display: flex;
         align-items: center;
-        gap: 10px;
-        margin-top: 4px;
-        padding: 5px 8px;
+        gap: 12px;
+        margin-top: 6px;
+        padding: 9px 10px;
         font-size: 13px;
         background: rgba(255, 255, 255, 0.04);
         border-radius: 6px;
@@ -622,8 +643,9 @@ export const skinCraftViewerModalStyles = `
     .details-accessory-text {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: 4px;
         min-width: 0;
+        line-height: 1.35;
     }
 
     .details-accessory-detail {
diff --git a/src/lib/components/market/react/placement.ts b/src/lib/components/market/react/placement.ts
index 6cf9addf..7a93c3fc 100644
--- a/src/lib/components/market/react/placement.ts
+++ b/src/lib/components/market/react/placement.ts
@@ -29,11 +29,10 @@ export function findWearSpan({
     return undefined;
 }
 
-export function findListingImageFrame({
-    scope,
-}: ScopedInjectionArgs<ReactListingCardContext>): HTMLElement | null | undefined {
+export function findPriceRow({scope}: ScopedInjectionArgs<ReactListingCardContext>): HTMLElement | null | undefined {
     return (
-        scope.querySelector<HTMLElement>('div[style*="--position:relative"]:has([style*="--bg-image"])') ?? undefined
+        scope.querySelector<HTMLElement>('div[style*="--justify:end"][style*="--align:center"]:has(button)') ??
+        undefined
     );
 }
 
diff --git a/src/lib/components/market/react/view_3d.ts b/src/lib/components/market/react/view_3d.ts
index 0787c44b..fac4865c 100644
--- a/src/lib/components/market/react/view_3d.ts
+++ b/src/lib/components/market/react/view_3d.ts
@@ -1,7 +1,6 @@
 import {css, html, nothing} from 'lit';
 import {property, state} from 'lit/decorators.js';
 
-import {environment} from '../../../../environment';
 import {gSkinCraftEmbed} from '../../../services/skincraft_embed';
 import {getLoadedListingTargets, toSkinCraftListingItem} from '../../../services/skincraft_market_targets';
 import type {SkinCraftItem} from '../../../services/skincraft_viewer_protocol';
@@ -10,49 +9,49 @@ import {webGpuGuidance} from '../../../utils/webgpu_guidance';
 import {FloatElement} from '../../custom';
 import {CustomElement, InjectIntoScope, InjectionPosition} from '../../injectors';
 import {ReactMarketListingCardScope, type ReactListingCardContext} from './listing';
-import {findListingImageFrame} from './placement';
+import {findPriceRow} from './placement';
 
 /**
- * Overlays a SkinCraft launcher on each Steam Market beta listing card, mirroring the inventory
- * "View in 3D" button: it renders for anything SkinCraft can show, and WebGPU capability only
- * decides enabled vs disabled-with-guidance. It stays hidden while the probe settles so it
- * never appears and then changes.
+ * Adds a 3D launcher to each Steam Market beta listing card's price row, mirroring the inventory
+ * "View in 3D" button's behaviour: it renders for anything SkinCraft can show, and WebGPU
+ * capability only decides enabled vs disabled-with-guidance. It stays hidden while the probe
+ * settles so it never appears and then changes.
  */
 @CustomElement()
 @InjectIntoScope(ReactMarketListingCardScope, {
-    anchor: findListingImageFrame,
-    position: InjectionPosition.Append,
+    anchor: findPriceRow,
+    position: InjectionPosition.Prepend,
 })
 export class ReactListingView3D extends FloatElement {
     @property({attribute: false}) injectionContext?: ReactListingCardContext;
 
     @state() private webGpuStatus: WebGpuAvailability = 'checking';
 
+    // Sits left-aligned in the card's price/Buy row, sized to match Steam's own Buy button there.
     static styles = [
         ...FloatElement.styles,
         css`
             :host {
-                position: absolute;
-                top: 8px;
-                right: 8px;
-                z-index: 1;
+                margin-right: auto;
             }
 
             .view-3d-btn {
-                display: flex;
-                padding: 5px;
-                border: none;
-                border-radius: 6px;
-                background: rgba(0, 0, 0, 0.4);
+                display: inline-flex;
+                align-items: center;
+                height: 24px;
+                padding: 0 10px;
+                color: #fff;
+                font-family: inherit;
+                font-size: 12px;
+                background: rgba(255, 255, 255, 0.12);
+                border: 0;
+                border-radius: 2px;
                 cursor: pointer;
+                transition: background-color 150ms ease;
             }
 
-            .view-3d-btn img {
-                display: block;
-            }
-
-            .view-3d-btn:hover {
-                background: rgba(0, 0, 0, 0.65);
+            .view-3d-btn:hover:not(.unavailable) {
+                background: rgba(255, 255, 255, 0.2);
             }
 
             .view-3d-btn.unavailable {
@@ -92,14 +91,15 @@ export class ReactListingView3D extends FloatElement {
             const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
             return html`
                 <span>
-                    ${this.tooltip(webGpuGuidance(reason), 'hint--bottom-left hint--large')}
+                    ${this.tooltip(webGpuGuidance(reason), 'hint--large')}
                     <button
                         class="view-3d-btn unavailable"
                         type="button"
                         aria-disabled="true"
+                        aria-label="View in 3D"
                         @click=${this.handleClick}
                     >
-                        <img src="${environment.skincraft_embed_origin}/icon.svg" height="22" alt="View in 3D" />
+                        3D
                     </button>
                 </span>
             `;
@@ -107,10 +107,8 @@ export class ReactListingView3D extends FloatElement {
 
         return html`
             <span>
-                ${this.tooltip('View in 3D', 'hint--bottom-left')}
-                <button class="view-3d-btn" type="button" @click=${this.handleClick}>
-                    <img src="${environment.skincraft_embed_origin}/icon.svg" height="22" alt="View in 3D" />
-                </button>
+                ${this.tooltip('View in 3D')}
+                <button class="view-3d-btn" type="button" aria-label="View in 3D" @click=${this.handleClick}>3D</button>
             </span>
         `;
     }

From 38315c31383ffc1e7942bb73ba78a275ec41e183 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 00:55:06 -0400
Subject: [PATCH 4/8] feat(market): launch the viewer from the native item
 dialog

Injects a View in 3D action beside each dialog pane's Inspect in Game
link (skipping accessory inspect links by matching the pane listing's
own hex), styled to the native button. Opening dismisses Steam's dialog
via its own Escape path first, and the shared launcher behaviour moves
into a common base for the card and dialog buttons.
---
 src/lib/components/market/react/listing.ts   |  26 +++-
 src/lib/components/market/react/placement.ts |   5 +
 src/lib/components/market/react/view_3d.ts   | 141 ++++++++++++++-----
 src/lib/services/skincraft_market_targets.ts |  12 +-
 4 files changed, 143 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/market/react/listing.ts b/src/lib/components/market/react/listing.ts
index 17c5b9da..7262336c 100644
--- a/src/lib/components/market/react/listing.ts
+++ b/src/lib/components/market/react/listing.ts
@@ -1,7 +1,7 @@
 import {ItemInfo} from '../../../bridge/handlers/fetch_inspect_info';
 import {gFloatFetcher} from '../../../services/float_fetcher';
 import {
-    getCardListing,
+    getFiberListing,
     MARKET_LISTING_CARD_SELECTOR,
     toSkinCraftListingItem,
 } from '../../../services/skincraft_market_targets';
@@ -41,12 +41,34 @@ export const ReactMarketListingCardScope = defineInjectionScope<ReactListingCard
 });
 
 function buildReactListingCardContext(scope: HTMLElement): ReactListingCardContext | null | undefined {
-    const listing = getCardListing(scope);
+    const listing = getFiberListing(scope);
     if (!listing) return undefined;
 
     return toSkinCraftListingItem(listing) ? {listing} : null;
 }
 
+/**
+ * The main "Inspect in Game..." link inside the item dialog, one per swipeable listing pane —
+ * dialog injections anchor beside it.
+ */
+export const ReactMarketDialogInspectScope = defineInjectionScope<ReactListingCardContext>({
+    selector: 'dialog a[href*="csgo_econ_action_preview"]',
+    mode: InjectionMode.CONTINUOUS,
+    guard: isReactSteamMarket,
+    context: buildReactDialogInspectContext,
+});
+
+function buildReactDialogInspectContext(scope: HTMLElement): ReactListingCardContext | null | undefined {
+    const listing = getFiberListing(scope);
+    if (!listing) return undefined;
+
+    const item = toSkinCraftListingItem(listing);
+    if (!item) return null;
+    // Accessory rows carry their own inspect links; only the pane's own launch link qualifies.
+    if (!(scope instanceof HTMLAnchorElement) || !scope.href.includes(item.inspect)) return null;
+    return {listing};
+}
+
 function getInspectLink(listing: MarketListing): string | null {
     const link = listing.description.actions?.[0]?.link;
     if (!link) return null;
diff --git a/src/lib/components/market/react/placement.ts b/src/lib/components/market/react/placement.ts
index 7a93c3fc..5e03361e 100644
--- a/src/lib/components/market/react/placement.ts
+++ b/src/lib/components/market/react/placement.ts
@@ -36,6 +36,11 @@ export function findPriceRow({scope}: ScopedInjectionArgs<ReactListingCardContex
     );
 }
 
+/** The dialog scope is the inspect link itself; the launcher lands right beside it. */
+export function findDialogInspectLink({scope}: ScopedInjectionArgs<ReactListingCardContext>): HTMLElement {
+    return scope;
+}
+
 export function findSeedSpan({
     scope,
     context,
diff --git a/src/lib/components/market/react/view_3d.ts b/src/lib/components/market/react/view_3d.ts
index fac4865c..f40ed884 100644
--- a/src/lib/components/market/react/view_3d.ts
+++ b/src/lib/components/market/react/view_3d.ts
@@ -8,26 +8,58 @@ import {gWebGpuAvailability, type WebGpuAvailability} from '../../../services/we
 import {webGpuGuidance} from '../../../utils/webgpu_guidance';
 import {FloatElement} from '../../custom';
 import {CustomElement, InjectIntoScope, InjectionPosition} from '../../injectors';
-import {ReactMarketListingCardScope, type ReactListingCardContext} from './listing';
-import {findPriceRow} from './placement';
+import {ReactMarketDialogInspectScope, ReactMarketListingCardScope, type ReactListingCardContext} from './listing';
+import {findDialogInspectLink, findPriceRow} from './placement';
 
 /**
- * Adds a 3D launcher to each Steam Market beta listing card's price row, mirroring the inventory
- * "View in 3D" button's behaviour: it renders for anything SkinCraft can show, and WebGPU
- * capability only decides enabled vs disabled-with-guidance. It stays hidden while the probe
- * settles so it never appears and then changes.
+ * Shared behaviour for the market 3D launchers, mirroring the inventory "View in 3D" button: they
+ * render for anything SkinCraft can show, and WebGPU capability only decides enabled vs
+ * disabled-with-guidance. They stay hidden while the probe settles so they never appear and then
+ * change. Subclasses own placement and presentation.
  */
+abstract class MarketView3DButton extends FloatElement {
+    @property({attribute: false}) injectionContext?: ReactListingCardContext;
+
+    @state() protected webGpuStatus: WebGpuAvailability = 'checking';
+
+    protected get skinCraftItem(): SkinCraftItem | undefined {
+        const listing = this.injectionContext?.listing;
+        return listing && toSkinCraftListingItem(listing);
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void gWebGpuAvailability.settled().then((status) => {
+            this.webGpuStatus = status;
+        });
+    }
+
+    /** Runs just before the viewer opens, e.g. to dismiss the surface the button sits on. */
+    protected beforeOpen(): void {}
+
+    // The elements behind these buttons are themselves clickable, so always swallow the click.
+    protected handleClick(event: Event): void {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const item = this.skinCraftItem;
+        if (this.webGpuStatus !== 'available' || !item) return;
+
+        // A dialog deep-link can show a listing whose card isn't mounted; keep it navigable.
+        const targets = getLoadedListingTargets();
+        if (!targets.some((target) => target.assetId === item.assetId)) targets.unshift(item);
+        this.beforeOpen();
+        gSkinCraftEmbed.open(item, targets);
+    }
+}
+
+/** Adds a 3D launcher to each listing card's price row, sized to Steam's own Buy button there. */
 @CustomElement()
 @InjectIntoScope(ReactMarketListingCardScope, {
     anchor: findPriceRow,
     position: InjectionPosition.Prepend,
 })
-export class ReactListingView3D extends FloatElement {
-    @property({attribute: false}) injectionContext?: ReactListingCardContext;
-
-    @state() private webGpuStatus: WebGpuAvailability = 'checking';
-
-    // Sits left-aligned in the card's price/Buy row, sized to match Steam's own Buy button there.
+export class ReactListingView3D extends MarketView3DButton {
     static styles = [
         ...FloatElement.styles,
         css`
@@ -61,29 +93,6 @@ export class ReactListingView3D extends FloatElement {
         `,
     ];
 
-    private get skinCraftItem(): SkinCraftItem | undefined {
-        const listing = this.injectionContext?.listing;
-        return listing && toSkinCraftListingItem(listing);
-    }
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        void gWebGpuAvailability.settled().then((status) => {
-            this.webGpuStatus = status;
-        });
-    }
-
-    // The listing card behind the button is itself clickable, so always swallow the click.
-    private handleClick(event: Event): void {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const item = this.skinCraftItem;
-        if (this.webGpuStatus !== 'available' || !item) return;
-
-        gSkinCraftEmbed.open(item, getLoadedListingTargets());
-    }
-
     protected render() {
         if (this.webGpuStatus === 'checking' || !this.skinCraftItem) return nothing;
 
@@ -113,3 +122,65 @@ export class ReactListingView3D extends FloatElement {
         `;
     }
 }
+
+/**
+ * Adds a viewer launcher beside the item dialog's "Inspect in Game..." action, matching its native
+ * styling. Opening the viewer first dismisses Steam's dialog the way pressing Escape would.
+ */
+@CustomElement()
+@InjectIntoScope(ReactMarketDialogInspectScope, {
+    anchor: findDialogInspectLink,
+    position: InjectionPosition.After,
+})
+export class ReactDialogView3D extends MarketView3DButton {
+    static styles = [
+        ...FloatElement.styles,
+        css`
+            .view-3d-btn {
+                display: inline-flex;
+                align-items: center;
+                height: 24px;
+                padding: 0 12px;
+                color: #fff;
+                font-family: inherit;
+                font-size: 12px;
+                font-weight: 300;
+                background: #3d4450;
+                border: 0;
+                border-radius: 2px;
+                cursor: pointer;
+                transition: background-color 150ms ease;
+            }
+
+            .view-3d-btn:hover:not(.unavailable) {
+                background: #464d5c;
+            }
+
+            .view-3d-btn.unavailable {
+                cursor: default;
+                opacity: 0.5;
+            }
+        `,
+    ];
+
+    protected beforeOpen(): void {
+        // The dialog owns the ?detail=… routing, and Escape is Steam's own dismissal path.
+        document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', code: 'Escape', bubbles: true}));
+    }
+
+    protected render() {
+        if (this.webGpuStatus === 'checking' || !this.skinCraftItem) return nothing;
+
+        if (this.webGpuStatus !== 'available') {
+            const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
+            return html`
+                <span>
+                    ${this.tooltip(webGpuGuidance(reason), 'hint--large')}
+                    <button class="view-3d-btn unavailable" type="button" aria-disabled="true">View in 3D</button>
+                </span>
+            `;
+        }
+
+        return html`<button class="view-3d-btn" type="button" @click=${this.handleClick}>View in 3D</button>`;
+    }
+}
diff --git a/src/lib/services/skincraft_market_targets.ts b/src/lib/services/skincraft_market_targets.ts
index 375f715c..5506920d 100644
--- a/src/lib/services/skincraft_market_targets.ts
+++ b/src/lib/services/skincraft_market_targets.ts
@@ -131,8 +131,12 @@ export function toSkinCraftListingItem(
     return {...target, rarityColor, details: toListingDetails(listing)};
 }
 
-export function getCardListing(scope: HTMLElement): MarketListing | undefined {
-    return getFiberProps<MarketListingProps>(scope, (fiber) => typeof fiber.key === 'string')?.listing;
+/** The listing owning `element`, from whichever ancestor fiber carries it in its props. */
+export function getFiberListing(element: HTMLElement): MarketListing | undefined {
+    return getFiberProps<MarketListingProps>(element, (fiber) => {
+        const props = fiber.memoizedProps;
+        return !!props && typeof props === 'object' && !!(props as Partial<MarketListingProps>).listing;
+    })?.listing;
 }
 
 /** SkinCraft targets for the market listings currently mounted on the page, in page order. */
@@ -141,7 +145,7 @@ export function getLoadedListingTargets(getCachedItemInfo?: CachedItemInfoLookup
     const seenAssets = new Set<string>();
 
     for (const scope of document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR)) {
-        const listing = getCardListing(scope);
+        const listing = getFiberListing(scope);
         const target = listing && toSkinCraftListingItem(listing, getCachedItemInfo);
         if (!target?.assetId || seenAssets.has(target.assetId)) continue;
 
@@ -187,7 +191,7 @@ async function waitForCardGrowth(previousCount: number): Promise<void> {
 /** Hands off to Steam's own purchase flow by clicking the listing card's native Buy button. */
 export function buyListing(listingId: string): boolean {
     for (const scope of document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR)) {
-        if (getCardListing(scope)?.listingid !== listingId) continue;
+        if (getFiberListing(scope)?.listingid !== listingId) continue;
 
         const buyButton = [...scope.querySelectorAll('button')].find((button) => button.textContent?.trim() === 'Buy');
         buyButton?.click();

From 6d75e06001880f6c4aabbcb65d0fe1b1375ead44 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 23:09:44 -0400
Subject: [PATCH 5/8] feat(market): forward embed arrow keys and return
 nav-click focus to the viewer

---
 .../common/skincraft_viewer_modal.ts          | 22 +++++++++++--------
 src/lib/services/skincraft_embed.ts           |  3 +++
 .../services/skincraft_embed_protocol.test.ts |  2 ++
 src/lib/services/skincraft_embed_protocol.ts  |  4 ++++
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index ed2bfb65..423576ed 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -488,12 +488,24 @@ export class SkinCraftViewerModal {
         return this.items.findIndex((item) => targetKey(item) === key);
     }
 
+    // Nav clicks hand focus back to the viewer: a button that kept it would re-trigger on keypress.
     private handlePrevious(): void {
         this.selectNeighbor(-1);
+        this.focusViewer();
     }
 
     private handleNext(): void {
         this.selectNeighbor(1);
+        this.focusViewer();
+    }
+
+    /** Steps the selection for a navigation hotkey; the embed forwards its keydowns through here. */
+    navigateByKey(key: string): boolean {
+        if (this.layout !== 'details') return false;
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight') return false;
+
+        this.selectNeighbor(key === 'ArrowLeft' ? -1 : 1);
+        return true;
     }
 
     private selectNeighbor(step: number): void {
@@ -511,15 +523,7 @@ export class SkinCraftViewerModal {
     }
 
     private handleKeydown(event: KeyboardEvent): void {
-        if (this.layout !== 'details') return;
-
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            this.selectNeighbor(-1);
-        } else if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            this.selectNeighbor(1);
-        }
+        if (this.navigateByKey(event.key)) event.preventDefault();
     }
 
     private handleBuy(): void {
diff --git a/src/lib/services/skincraft_embed.ts b/src/lib/services/skincraft_embed.ts
index 47d9ddc1..254b3926 100644
--- a/src/lib/services/skincraft_embed.ts
+++ b/src/lib/services/skincraft_embed.ts
@@ -334,6 +334,9 @@ class SkinCraftEmbedService {
                 this.frameHasContent = false;
                 this.modal?.setError(message.message || 'SkinCraft could not load this item.');
                 break;
+            case 'key':
+                if (this.active) this.modal?.navigateByKey(message.key);
+                break;
             case 'inspect-requested': {
                 // A switch-in-place keeps the old model on screen while the next loads; only `loaded`
                 // means the frame shows `activeTarget`.
diff --git a/src/lib/services/skincraft_embed_protocol.test.ts b/src/lib/services/skincraft_embed_protocol.test.ts
index 50e45a13..610e8bf6 100644
--- a/src/lib/services/skincraft_embed_protocol.test.ts
+++ b/src/lib/services/skincraft_embed_protocol.test.ts
@@ -12,6 +12,7 @@ describe('SkinCraft embed messages', () => {
             isSkinCraftEmbedEvent({...envelope, type: 'error', id: '1', code: 'load-failed', message: 'Failed'})
         ).toBe(true);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'inspect-requested'})).toBe(true);
+        expect(isSkinCraftEmbedEvent({...envelope, type: 'key', key: 'ArrowRight'})).toBe(true);
     });
 
     it('rejects spoofed, malformed, and unknown messages', () => {
@@ -19,6 +20,7 @@ describe('SkinCraft embed messages', () => {
         expect(isSkinCraftEmbedEvent({source: 'skincraft-embed', v: 2, type: 'ready'})).toBe(false);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'error', code: 'failed', message: 5})).toBe(false);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'future-event'})).toBe(false);
+        expect(isSkinCraftEmbedEvent({...envelope, type: 'key', key: 42})).toBe(false);
     });
 });
 
diff --git a/src/lib/services/skincraft_embed_protocol.ts b/src/lib/services/skincraft_embed_protocol.ts
index 82e2bb73..8f7060e6 100644
--- a/src/lib/services/skincraft_embed_protocol.ts
+++ b/src/lib/services/skincraft_embed_protocol.ts
@@ -20,6 +20,8 @@ export type SkinCraftEmbedEvent = EmbedEnvelope &
         | {type: 'error'; id?: string; code: string; message: string}
         // The sandboxed iframe can't launch steam:// itself.
         | {type: 'inspect-requested'}
+        // Forwarded while the iframe holds focus, so the parent's hotkeys keep working.
+        | {type: 'key'; key: string}
     );
 
 export function isSkinCraftEmbedEvent(data: unknown): data is SkinCraftEmbedEvent {
@@ -45,6 +47,8 @@ export function isSkinCraftEmbedEvent(data: unknown): data is SkinCraftEmbedEven
             return hasValidId;
         case 'error':
             return hasValidId && typeof message.code === 'string' && typeof message.message === 'string';
+        case 'key':
+            return typeof message.key === 'string';
         default:
             return false;
     }

From 6d05727ca5077a609cd809e8d485c01082da27da Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Fri, 21 Aug 2026 23:21:49 -0400
Subject: [PATCH 6/8] fix(market): replace embed key forwarding with a
 parent-side nav-button focus fix

---
 .../common/skincraft_viewer_modal.ts          | 27 +++++++++++--------
 .../common/skincraft_viewer_modal_styles.ts   |  1 +
 src/lib/services/skincraft_embed.ts           |  3 ---
 .../services/skincraft_embed_protocol.test.ts |  2 --
 src/lib/services/skincraft_embed_protocol.ts  |  4 ---
 5 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index 423576ed..b028d78e 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -212,6 +212,7 @@ export class SkinCraftViewerModal {
                     closing: this.closing,
                 })}"
                 aria-labelledby="skincraft-viewer-title"
+                tabindex="-1"
                 @cancel="${this.handleCancel}"
                 @pointerdown="${this.handleDialogPointerDown}"
                 @click="${this.handleDialogClick}"
@@ -488,24 +489,20 @@ export class SkinCraftViewerModal {
         return this.items.findIndex((item) => targetKey(item) === key);
     }
 
-    // Nav clicks hand focus back to the viewer: a button that kept it would re-trigger on keypress.
     private handlePrevious(): void {
         this.selectNeighbor(-1);
-        this.focusViewer();
+        this.dropNavFocus();
     }
 
     private handleNext(): void {
         this.selectNeighbor(1);
-        this.focusViewer();
+        this.dropNavFocus();
     }
 
-    /** Steps the selection for a navigation hotkey; the embed forwards its keydowns through here. */
-    navigateByKey(key: string): boolean {
-        if (this.layout !== 'details') return false;
-        if (key !== 'ArrowLeft' && key !== 'ArrowRight') return false;
-
-        this.selectNeighbor(key === 'ArrowLeft' ? -1 : 1);
-        return true;
+    // A nav button must not keep focus: keys would re-trigger it, and once it disables at the
+    // list's end, focus falls to <body> and the dialog stops hearing the arrow hotkeys.
+    private dropNavFocus(): void {
+        this.dialogRef.value?.focus({preventScroll: true});
     }
 
     private selectNeighbor(step: number): void {
@@ -523,7 +520,15 @@ export class SkinCraftViewerModal {
     }
 
     private handleKeydown(event: KeyboardEvent): void {
-        if (this.navigateByKey(event.key)) event.preventDefault();
+        if (this.layout !== 'details') return;
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.selectNeighbor(-1);
+        } else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.selectNeighbor(1);
+        }
     }
 
     private handleBuy(): void {
diff --git a/src/lib/components/common/skincraft_viewer_modal_styles.ts b/src/lib/components/common/skincraft_viewer_modal_styles.ts
index a8050b6c..3cc90736 100644
--- a/src/lib/components/common/skincraft_viewer_modal_styles.ts
+++ b/src/lib/components/common/skincraft_viewer_modal_styles.ts
@@ -18,6 +18,7 @@ export const skinCraftViewerModalStyles = `
         border: 1px solid rgba(193, 206, 255, 0.12);
         border-radius: 12px;
         overflow: hidden;
+        outline: none;
         color: inherit;
         background: #15171c;
         box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
diff --git a/src/lib/services/skincraft_embed.ts b/src/lib/services/skincraft_embed.ts
index 254b3926..47d9ddc1 100644
--- a/src/lib/services/skincraft_embed.ts
+++ b/src/lib/services/skincraft_embed.ts
@@ -334,9 +334,6 @@ class SkinCraftEmbedService {
                 this.frameHasContent = false;
                 this.modal?.setError(message.message || 'SkinCraft could not load this item.');
                 break;
-            case 'key':
-                if (this.active) this.modal?.navigateByKey(message.key);
-                break;
             case 'inspect-requested': {
                 // A switch-in-place keeps the old model on screen while the next loads; only `loaded`
                 // means the frame shows `activeTarget`.
diff --git a/src/lib/services/skincraft_embed_protocol.test.ts b/src/lib/services/skincraft_embed_protocol.test.ts
index 610e8bf6..50e45a13 100644
--- a/src/lib/services/skincraft_embed_protocol.test.ts
+++ b/src/lib/services/skincraft_embed_protocol.test.ts
@@ -12,7 +12,6 @@ describe('SkinCraft embed messages', () => {
             isSkinCraftEmbedEvent({...envelope, type: 'error', id: '1', code: 'load-failed', message: 'Failed'})
         ).toBe(true);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'inspect-requested'})).toBe(true);
-        expect(isSkinCraftEmbedEvent({...envelope, type: 'key', key: 'ArrowRight'})).toBe(true);
     });
 
     it('rejects spoofed, malformed, and unknown messages', () => {
@@ -20,7 +19,6 @@ describe('SkinCraft embed messages', () => {
         expect(isSkinCraftEmbedEvent({source: 'skincraft-embed', v: 2, type: 'ready'})).toBe(false);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'error', code: 'failed', message: 5})).toBe(false);
         expect(isSkinCraftEmbedEvent({...envelope, type: 'future-event'})).toBe(false);
-        expect(isSkinCraftEmbedEvent({...envelope, type: 'key', key: 42})).toBe(false);
     });
 });
 
diff --git a/src/lib/services/skincraft_embed_protocol.ts b/src/lib/services/skincraft_embed_protocol.ts
index 8f7060e6..82e2bb73 100644
--- a/src/lib/services/skincraft_embed_protocol.ts
+++ b/src/lib/services/skincraft_embed_protocol.ts
@@ -20,8 +20,6 @@ export type SkinCraftEmbedEvent = EmbedEnvelope &
         | {type: 'error'; id?: string; code: string; message: string}
         // The sandboxed iframe can't launch steam:// itself.
         | {type: 'inspect-requested'}
-        // Forwarded while the iframe holds focus, so the parent's hotkeys keep working.
-        | {type: 'key'; key: string}
     );
 
 export function isSkinCraftEmbedEvent(data: unknown): data is SkinCraftEmbedEvent {
@@ -47,8 +45,6 @@ export function isSkinCraftEmbedEvent(data: unknown): data is SkinCraftEmbedEven
             return hasValidId;
         case 'error':
             return hasValidId && typeof message.code === 'string' && typeof message.message === 'string';
-        case 'key':
-            return typeof message.key === 'string';
         default:
             return false;
     }

From 9def27b12243173deecae78b54587c5df5164991 Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Mon, 24 Aug 2026 13:08:12 -0400
Subject: [PATCH 7/8] fix(market): confirm the buy hand-off and harden the 3d
 viewer protocol

---
 .../common/skincraft_viewer_modal.ts          |  34 +++--
 .../common/skincraft_viewer_modal_styles.ts   |   7 +
 src/lib/components/common/ui/floatbar.ts      |   9 +-
 src/lib/components/market/react/placement.ts  |   6 +-
 src/lib/components/market/react/types.ts      |  30 ++--
 src/lib/components/market/react/view_3d.ts    | 110 +++++++--------
 src/lib/services/skincraft_embed.ts           |  99 +++++++++++--
 .../services/skincraft_inventory_targets.ts   |  50 +++++--
 .../services/skincraft_market_targets.test.ts |  98 ++++++++++++-
 src/lib/services/skincraft_market_targets.ts  | 130 +++++++++++++-----
 .../skincraft_viewer_protocol.test.ts         |  38 +++++
 src/lib/services/skincraft_viewer_protocol.ts |  72 ++++++++--
 src/lib/utils/skin.ts                         |  32 +++--
 13 files changed, 543 insertions(+), 172 deletions(-)

diff --git a/src/lib/components/common/skincraft_viewer_modal.ts b/src/lib/components/common/skincraft_viewer_modal.ts
index b028d78e..ff4084e1 100644
--- a/src/lib/components/common/skincraft_viewer_modal.ts
+++ b/src/lib/components/common/skincraft_viewer_modal.ts
@@ -5,6 +5,7 @@ import {guard} from 'lit/directives/guard.js';
 import {createRef, ref} from 'lit/directives/ref.js';
 import {styleMap} from 'lit/directives/style-map.js';
 import type {SkinCraftListingDetails, SkinCraftViewerTarget} from '../../services/skincraft_viewer_protocol';
+import {FLOAT_CONDITION_BANDS} from '../../utils/skin';
 import {MODAL_TRANSITION_MS, skinCraftViewerModalStyles} from './skincraft_viewer_modal_styles';
 
 type LoadPhase = 'loading' | 'revealed' | 'error';
@@ -19,10 +20,10 @@ export type SkinCraftViewerModalOptions = {
     onClose: () => void;
     onRetry: () => void;
     onSelect: (target: SkinCraftViewerTarget) => void;
-    /** Fired when the item strip scrolls near its end, for surfaces with paginated items. */
+    /** Fired when the user nears the end of the loaded items — strip scroll in `grid`, selection proximity in `details`. */
     onItemsNearEnd?: () => void;
     /** Enables the details panel's Buy button; the host hands off to the surface's purchase flow. */
-    onBuy?: (target: SkinCraftViewerTarget) => void;
+    onBuy?: (listingId: string) => void;
 };
 
 /** About two card rows — asking for more this early keeps strip scrolling seamless. */
@@ -32,13 +33,7 @@ const ITEMS_NEAR_END_PX = 240;
 const ITEMS_NEAR_END_COUNT = 5;
 
 /** Full 0–1 wear range in the same bands the float bar uses. */
-const WEAR_SEGMENTS = [
-    {width: 7, color: 'green'},
-    {width: 8, color: '#18a518'},
-    {width: 23, color: '#9acd32'},
-    {width: 7, color: '#cd5c5c'},
-    {width: 55, color: '#f92424'},
-];
+const WEAR_SEGMENTS = FLOAT_CONDITION_BANDS.map((band) => ({width: band.max - band.min, color: band.color}));
 
 function renderChevron(direction: 'left' | 'right'): TemplateResult {
     return html`
@@ -109,6 +104,7 @@ export class SkinCraftViewerModal {
     private phase: LoadPhase = 'loading';
     private progress: number | null = null;
     private errorMessage = '';
+    private buyNotice = '';
     private entering = false;
     private closing = false;
     private iconReady = false;
@@ -148,6 +144,7 @@ export class SkinCraftViewerModal {
     show(target: SkinCraftViewerTarget): void {
         this.target = target;
         this.iconReady = false;
+        this.buyNotice = '';
         const request = ++this.iconRequest;
 
         this.cancelClose();
@@ -189,6 +186,12 @@ export class SkinCraftViewerModal {
         this.update();
     }
 
+    /** Surfaces a failed buy hand-off next to the Buy button; cleared on the next selection. */
+    setBuyNotice(message: string): void {
+        this.buyNotice = message;
+        this.update();
+    }
+
     // `host` binds `this` inside the template's @event handlers, the way LitElement does it.
     private update(): void {
         render(this.template(), this.root, {host: this});
@@ -409,6 +412,7 @@ export class SkinCraftViewerModal {
                       `
                     : nothing}
             </div>
+            ${this.buyNotice ? html`<div class="details-buy-notice" role="alert">${this.buyNotice}</div>` : nothing}
         `;
     }
 
@@ -510,7 +514,7 @@ export class SkinCraftViewerModal {
         const neighbor = index >= 0 ? this.items[index + step] : undefined;
         if (!neighbor) return;
 
-        this.maybeRequestMore(index + step);
+        // `onSelect` leads back into `show()`, which runs `maybeRequestMore` for the new index.
         this.options.onSelect(neighbor);
     }
 
@@ -532,7 +536,8 @@ export class SkinCraftViewerModal {
     }
 
     private handleBuy(): void {
-        if (this.target) this.options.onBuy?.(this.target);
+        const listingId = this.target?.details?.listingId;
+        if (listingId) this.options.onBuy?.(listingId);
     }
 
     // Both status blocks stay mounted and toggle `hidden` so the item icon survives an error →
@@ -693,8 +698,13 @@ export class SkinCraftViewerModal {
         if (event.target === this.dialogRef.value && event.propertyName === 'transform') this.finishClose();
     }
 
-    /** Whether the item strip sits near its end — also true when it has too few items to scroll. */
+    /** Whether the user sits near the end of the loaded items — strip scroll in `grid`, selection proximity in `details`. */
     itemsNearEnd(): boolean {
+        if (this.layout === 'details') {
+            const index = this.selectedIndex;
+            return index >= 0 && this.items.length - index <= ITEMS_NEAR_END_COUNT;
+        }
+
         const grid = this.itemGridRef.value;
         if (!grid) return false;
         return grid.scrollTop + grid.clientHeight >= grid.scrollHeight - ITEMS_NEAR_END_PX;
diff --git a/src/lib/components/common/skincraft_viewer_modal_styles.ts b/src/lib/components/common/skincraft_viewer_modal_styles.ts
index 3cc90736..6b56679f 100644
--- a/src/lib/components/common/skincraft_viewer_modal_styles.ts
+++ b/src/lib/components/common/skincraft_viewer_modal_styles.ts
@@ -612,6 +612,13 @@ export const skinCraftViewerModalStyles = `
         background: #83bd2c;
     }
 
+    .details-buy-notice {
+        margin: -8px 0 16px;
+        color: #ff8585;
+        font-size: 12.5px;
+        line-height: 1.4;
+    }
+
     .details-accessories {
         margin-bottom: 16px;
     }
diff --git a/src/lib/components/common/ui/floatbar.ts b/src/lib/components/common/ui/floatbar.ts
index cb354dc5..cc64d330 100644
--- a/src/lib/components/common/ui/floatbar.ts
+++ b/src/lib/components/common/ui/floatbar.ts
@@ -1,5 +1,6 @@
 import {html, css} from 'lit';
 import {property} from 'lit/decorators.js';
+import {FLOAT_CONDITION_BANDS} from '../../../utils/skin';
 import {FloatElement} from '../../custom';
 import {CustomElement} from '../../injectors';
 
@@ -44,13 +45,7 @@ export class FloatBar extends FloatElement {
         `,
     ];
 
-    private readonly floatConditions = [
-        {min: 0, max: 7, color: 'green'},
-        {min: 7, max: 15, color: '#18a518'},
-        {min: 15, max: 38, color: '#9acd32'},
-        {min: 38, max: 45, color: '#cd5c5c'},
-        {min: 45, max: 100, color: '#f92424'},
-    ];
+    private readonly floatConditions = FLOAT_CONDITION_BANDS;
 
     get minFloatPercentage(): number {
         return this.minFloat * 100;
diff --git a/src/lib/components/market/react/placement.ts b/src/lib/components/market/react/placement.ts
index 5e03361e..8ba288b3 100644
--- a/src/lib/components/market/react/placement.ts
+++ b/src/lib/components/market/react/placement.ts
@@ -1,4 +1,5 @@
 import type {ScopedInjectionArgs} from '../../injectors';
+import {MARKET_PRICE_ROW_SELECTOR} from '../../../services/skincraft_market_targets';
 import {getFadePercentage, isBlueSkin, parseRank} from '../../../utils/skin';
 import {hasDopplerPhase} from '../../../utils/dopplers';
 import type {ReactListingCardContext, ReactListingContext} from './listing';
@@ -30,10 +31,7 @@ export function findWearSpan({
 }
 
 export function findPriceRow({scope}: ScopedInjectionArgs<ReactListingCardContext>): HTMLElement | null | undefined {
-    return (
-        scope.querySelector<HTMLElement>('div[style*="--justify:end"][style*="--align:center"]:has(button)') ??
-        undefined
-    );
+    return scope.querySelector<HTMLElement>(MARKET_PRICE_ROW_SELECTOR) ?? undefined;
 }
 
 /** The dialog scope is the inspect link itself; the launcher lands right beside it. */
diff --git a/src/lib/components/market/react/types.ts b/src/lib/components/market/react/types.ts
index c238e2ea..8f61ad4f 100644
--- a/src/lib/components/market/react/types.ts
+++ b/src/lib/components/market/react/types.ts
@@ -1,4 +1,4 @@
-import type {Action, rgAssetProperty, rgDescription, rgInternalDescription} from '../../../types/steam';
+import type {Action, rgDescription, rgInternalDescription} from '../../../types/steam';
 
 /**
  * Shapes of the props Steam's React version of the Steam Market renders into its listing components. We read these
@@ -16,11 +16,21 @@ export interface MarketDescriptionLine extends rgInternalDescription {
     name: string;
 }
 
+/** An asset property as the React market hydrates it: `float_value` arrives as a number here, not the string the rg-asset form carries. */
+export interface MarketAssetProperty {
+    propertyid: number;
+    int_value?: string;
+    float_value?: number;
+    string_value?: string;
+}
+
+// Fields the React fiber has been seen to omit are optional — nothing validates this payload
+// before we read it, so consumers must handle their absence.
 export interface MarketListingDescription
-    extends Omit<rgDescription, 'commodity' | 'tradable' | 'marketable' | 'tags'> {
+    extends Omit<rgDescription, 'commodity' | 'tradable' | 'marketable' | 'tags' | 'descriptions'> {
     commodity: boolean;
     currency: boolean;
-    descriptions: MarketDescriptionLine[];
+    descriptions?: MarketDescriptionLine[];
     fraudwarnings: string[];
     tradable: boolean;
     market_marketable_restriction: number;
@@ -32,24 +42,24 @@ export interface MarketListingDescription
     owner_descriptions: rgInternalDescription[];
     sealed: boolean;
     sealed_type: number;
-    tags: unknown[];
+    tags?: rgDescription['tags'];
 }
 
 /** A sticker/charm applied to a listed item, with its own description and slot properties. */
 export interface MarketListingAccessory {
     classid: string;
-    standalone_properties: rgAssetProperty[];
+    standalone_properties?: MarketAssetProperty[];
     /** Properties tying the accessory to its host item, e.g. propertyid 4 = sticker scrape level. */
-    parent_relationship_properties: rgAssetProperty[];
-    nested_accessories: MarketListingAccessory[];
-    description: MarketListingDescription;
+    parent_relationship_properties?: MarketAssetProperty[];
+    nested_accessories?: MarketListingAccessory[];
+    description?: MarketListingDescription;
 }
 
 export interface MarketListingAsset {
-    asset_properties: rgAssetProperty[];
+    asset_properties?: MarketAssetProperty[];
     amount: number;
     appid: number;
-    accessory_properties: rgAssetProperty[];
+    accessory_properties?: MarketAssetProperty[];
     asset_accessories?: MarketListingAccessory[];
     assetid: string;
     classid: string;
diff --git a/src/lib/components/market/react/view_3d.ts b/src/lib/components/market/react/view_3d.ts
index f40ed884..3782e663 100644
--- a/src/lib/components/market/react/view_3d.ts
+++ b/src/lib/components/market/react/view_3d.ts
@@ -1,8 +1,10 @@
 import {css, html, nothing} from 'lit';
+import type {TemplateResult} from 'lit';
 import {property, state} from 'lit/decorators.js';
 
 import {gSkinCraftEmbed} from '../../../services/skincraft_embed';
 import {getLoadedListingTargets, toSkinCraftListingItem} from '../../../services/skincraft_market_targets';
+import {MAX_SKINCRAFT_INVENTORY_TARGETS} from '../../../services/skincraft_viewer_protocol';
 import type {SkinCraftItem} from '../../../services/skincraft_viewer_protocol';
 import {gWebGpuAvailability, type WebGpuAvailability} from '../../../services/webgpu_availability';
 import {webGpuGuidance} from '../../../utils/webgpu_guidance';
@@ -11,6 +13,26 @@ import {CustomElement, InjectIntoScope, InjectionPosition} from '../../injectors
 import {ReactMarketDialogInspectScope, ReactMarketListingCardScope, type ReactListingCardContext} from './listing';
 import {findDialogInspectLink, findPriceRow} from './placement';
 
+const VIEW_3D_BUTTON_BASE_STYLES = css`
+    .view-3d-btn {
+        display: inline-flex;
+        align-items: center;
+        height: 24px;
+        color: #fff;
+        font-family: inherit;
+        font-size: 12px;
+        border: 0;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: background-color 150ms ease;
+    }
+
+    .view-3d-btn.unavailable {
+        cursor: default;
+        opacity: 0.5;
+    }
+`;
+
 /**
  * Shared behaviour for the market 3D launchers, mirroring the inventory "View in 3D" button: they
  * render for anything SkinCraft can show, and WebGPU capability only decides enabled vs
@@ -47,10 +69,31 @@ abstract class MarketView3DButton extends FloatElement {
 
         // A dialog deep-link can show a listing whose card isn't mounted; keep it navigable.
         const targets = getLoadedListingTargets();
-        if (!targets.some((target) => target.assetId === item.assetId)) targets.unshift(item);
+        if (!targets.some((target) => target.assetId === item.assetId)) {
+            if (targets.length === MAX_SKINCRAFT_INVENTORY_TARGETS) targets.pop();
+            targets.unshift(item);
+        }
         this.beforeOpen();
         gSkinCraftEmbed.open(item, targets);
     }
+
+    protected renderUnavailableButton(label: string): TemplateResult {
+        const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
+        return html`
+            <span>
+                ${this.tooltip(webGpuGuidance(reason), 'hint--large')}
+                <button
+                    class="view-3d-btn unavailable"
+                    type="button"
+                    aria-disabled="true"
+                    aria-label="View in 3D"
+                    @click=${this.handleClick}
+                >
+                    ${label}
+                </button>
+            </span>
+        `;
+    }
 }
 
 /** Adds a 3D launcher to each listing card's price row, sized to Steam's own Buy button there. */
@@ -62,57 +105,27 @@ abstract class MarketView3DButton extends FloatElement {
 export class ReactListingView3D extends MarketView3DButton {
     static styles = [
         ...FloatElement.styles,
+        VIEW_3D_BUTTON_BASE_STYLES,
         css`
             :host {
                 margin-right: auto;
             }
 
             .view-3d-btn {
-                display: inline-flex;
-                align-items: center;
-                height: 24px;
                 padding: 0 10px;
-                color: #fff;
-                font-family: inherit;
-                font-size: 12px;
                 background: rgba(255, 255, 255, 0.12);
-                border: 0;
-                border-radius: 2px;
-                cursor: pointer;
-                transition: background-color 150ms ease;
             }
 
             .view-3d-btn:hover:not(.unavailable) {
                 background: rgba(255, 255, 255, 0.2);
             }
-
-            .view-3d-btn.unavailable {
-                cursor: default;
-                opacity: 0.5;
-            }
         `,
     ];
 
     protected render() {
         if (this.webGpuStatus === 'checking' || !this.skinCraftItem) return nothing;
 
-        if (this.webGpuStatus !== 'available') {
-            const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
-            return html`
-                <span>
-                    ${this.tooltip(webGpuGuidance(reason), 'hint--large')}
-                    <button
-                        class="view-3d-btn unavailable"
-                        type="button"
-                        aria-disabled="true"
-                        aria-label="View in 3D"
-                        @click=${this.handleClick}
-                    >
-                        3D
-                    </button>
-                </span>
-            `;
-        }
+        if (this.webGpuStatus !== 'available') return this.renderUnavailableButton('3D');
 
         return html`
             <span>
@@ -135,51 +148,34 @@ export class ReactListingView3D extends MarketView3DButton {
 export class ReactDialogView3D extends MarketView3DButton {
     static styles = [
         ...FloatElement.styles,
+        VIEW_3D_BUTTON_BASE_STYLES,
         css`
             .view-3d-btn {
-                display: inline-flex;
-                align-items: center;
-                height: 24px;
                 padding: 0 12px;
-                color: #fff;
-                font-family: inherit;
-                font-size: 12px;
                 font-weight: 300;
                 background: #3d4450;
-                border: 0;
-                border-radius: 2px;
-                cursor: pointer;
-                transition: background-color 150ms ease;
             }
 
             .view-3d-btn:hover:not(.unavailable) {
                 background: #464d5c;
             }
-
-            .view-3d-btn.unavailable {
-                cursor: default;
-                opacity: 0.5;
-            }
         `,
     ];
 
     protected beforeOpen(): void {
         // The dialog owns the ?detail=… routing, and Escape is Steam's own dismissal path.
+        const dialog = this.closest('dialog');
         document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', code: 'Escape', bubbles: true}));
+        // A dialog still open after Steam's async handling ignored the synthetic key.
+        window.setTimeout(() => {
+            if (dialog?.open) console.warn("CSFloat: Steam's item dialog ignored the dismissal before the 3D viewer.");
+        }, 500);
     }
 
     protected render() {
         if (this.webGpuStatus === 'checking' || !this.skinCraftItem) return nothing;
 
-        if (this.webGpuStatus !== 'available') {
-            const reason = gWebGpuAvailability.unavailableReason ?? 'no-webgpu';
-            return html`
-                <span>
-                    ${this.tooltip(webGpuGuidance(reason), 'hint--large')}
-                    <button class="view-3d-btn unavailable" type="button" aria-disabled="true">View in 3D</button>
-                </span>
-            `;
-        }
+        if (this.webGpuStatus !== 'available') return this.renderUnavailableButton('View in 3D');
 
         return html`<button class="view-3d-btn" type="button" @click=${this.handleClick}>View in 3D</button>`;
     }
diff --git a/src/lib/services/skincraft_embed.ts b/src/lib/services/skincraft_embed.ts
index 47d9ddc1..6ec71790 100644
--- a/src/lib/services/skincraft_embed.ts
+++ b/src/lib/services/skincraft_embed.ts
@@ -11,8 +11,10 @@ import type {SkinCraftEmbedCommand} from './skincraft_embed_protocol';
 import {getLoadedInventoryTargets} from './skincraft_inventory_targets';
 import {
     isBuySkinCraftListingMessage,
+    isMalformedSkinCraftViewerMessage,
     isOpenSkinCraftViewerMessage,
     isRequestSkinCraftViewerItemsMessage,
+    isSkinCraftBuyListingResultMessage,
     isSkinCraftViewerItemsMessage,
     SKINCRAFT_VIEWER_MESSAGE_SOURCE,
     STEAM_INSPECT_URL_PATTERN,
@@ -21,12 +23,15 @@ import type {
     BuySkinCraftListingMessage,
     OpenSkinCraftViewerMessage,
     RequestSkinCraftViewerItemsMessage,
+    SkinCraftBuyListingResultMessage,
     SkinCraftItem,
     SkinCraftViewerItemsMessage,
     SkinCraftViewerTarget,
 } from './skincraft_viewer_protocol';
 
 const LOAD_TIMEOUT_MS = 20_000;
+/** The page answers synchronously; a miss means the page script died or was never injected. */
+const BUY_RESULT_TIMEOUT_MS = 2_000;
 type LoadPhase = 'idle' | 'loading' | 'loaded' | 'error';
 
 class SkinCraftEmbedService {
@@ -48,10 +53,12 @@ class SkinCraftEmbedService {
     private frameHasContent = false;
     private needsFrameReload = false;
     private itemsProvider?: () => Promise<SkinCraftItem[]>;
-    private buyHandler?: (listingId: string) => void;
+    private buyHandler?: (listingId: string) => boolean;
     private providingItems = false;
     private itemsRequestPending = false;
     private itemCount = 0;
+    private pendingBuyListingId?: string;
+    private buyResultTimer?: number;
 
     constructor() {
         if (this.runsInPage) {
@@ -67,7 +74,7 @@ class SkinCraftEmbedService {
     }
 
     /** Page-context surfaces with purchasable items register how to hand off to their buy flow. */
-    registerBuyListingHandler(handler: (listingId: string) => void): void {
+    registerBuyListingHandler(handler: (listingId: string) => boolean): void {
         this.buyHandler = handler;
     }
 
@@ -101,23 +108,31 @@ class SkinCraftEmbedService {
         if (isRequestSkinCraftViewerItemsMessage(event.data)) {
             void this.provideItems();
         } else if (isBuySkinCraftListingMessage(event.data)) {
-            this.buyHandler?.(event.data.listingId);
+            this.answerBuyRequest(event.data.listingId);
+        } else if (isMalformedSkinCraftViewerMessage(event.data, ['buy-listing'])) {
+            console.error('CSFloat: dropped a malformed SkinCraft viewer message in the page context.', event.data);
         }
     };
 
     private async provideItems(): Promise<void> {
-        if (!this.itemsProvider || this.providingItems) return;
+        if (this.providingItems) return;
 
         this.providingItems = true;
         let inventory: SkinCraftItem[] = [];
         try {
-            inventory = await this.itemsProvider();
-        } catch {
+            if (this.itemsProvider) {
+                inventory = await this.itemsProvider();
+            } else {
+                console.error('CSFloat: SkinCraft viewer items were requested before a provider was registered.');
+            }
+        } catch (e) {
             // An empty answer reads as "nothing more" — the content script keeps its current strip.
+            console.error('CSFloat: failed to load more items for the SkinCraft viewer.', e);
         } finally {
             this.providingItems = false;
         }
 
+        // Always answered, even empty: the content script's pending flag latches until a response.
         window.postMessage(
             {
                 source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
@@ -128,6 +143,26 @@ class SkinCraftEmbedService {
         );
     }
 
+    private answerBuyRequest(listingId: string): void {
+        let success = false;
+        try {
+            success = this.buyHandler?.(listingId) ?? false;
+        } catch (e) {
+            console.error('CSFloat: the buy hand-off threw.', e);
+        }
+        if (!success) console.error(`CSFloat: found no native Buy button for listing ${listingId}.`);
+
+        window.postMessage(
+            {
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-result',
+                listingId,
+                success,
+            } satisfies SkinCraftBuyListingResultMessage,
+            window.location.origin
+        );
+    }
+
     close(): void {
         if (!this.active) return;
 
@@ -135,6 +170,7 @@ class SkinCraftEmbedService {
         this.pendingInspect = undefined;
         this.latestLoadId = undefined;
         this.itemsRequestPending = false;
+        this.clearBuyRequest();
         this.itemCount = 0;
         this.loadProgress = null;
         this.loadPhase = 'idle';
@@ -152,6 +188,10 @@ class SkinCraftEmbedService {
             this.openEmbeddedViewer(event.data.target, event.data.inventory);
         } else if (isSkinCraftViewerItemsMessage(event.data)) {
             this.applyItemsUpdate(event.data.inventory);
+        } else if (isSkinCraftBuyListingResultMessage(event.data)) {
+            this.handleBuyResult(event.data);
+        } else if (isMalformedSkinCraftViewerMessage(event.data, ['open', 'items', 'buy-result'])) {
+            console.error('CSFloat: dropped a malformed SkinCraft viewer message.', event.data);
         }
     };
 
@@ -179,12 +219,15 @@ class SkinCraftEmbedService {
         );
     }
 
-    /** Closes the viewer and hands the purchase to Steam's own flow for this listing. */
-    private handleBuyRequest(target: SkinCraftViewerTarget): void {
-        const listingId = target.details?.listingId;
-        if (!listingId) return;
+    /**
+     * Hands the purchase to Steam's own flow. The viewer only closes once the page confirms the
+     * hand-off — a fire-and-forget close would leave a failure with no dialog and no explanation.
+     */
+    private handleBuyRequest(listingId: string): void {
+        if (this.pendingBuyListingId) return;
 
-        this.close();
+        this.pendingBuyListingId = listingId;
+        this.buyResultTimer = window.setTimeout(() => this.finishBuyRequest(false), BUY_RESULT_TIMEOUT_MS);
         window.postMessage(
             {
                 source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
@@ -195,15 +238,41 @@ class SkinCraftEmbedService {
         );
     }
 
+    private handleBuyResult(message: SkinCraftBuyListingResultMessage): void {
+        if (message.listingId !== this.pendingBuyListingId) return;
+        this.finishBuyRequest(message.success);
+    }
+
+    private finishBuyRequest(success: boolean): void {
+        if (!this.pendingBuyListingId) return;
+
+        const listingId = this.pendingBuyListingId;
+        this.clearBuyRequest();
+        if (success) {
+            this.close();
+            return;
+        }
+
+        console.error(`CSFloat: the buy hand-off for listing ${listingId} failed.`);
+        this.modal?.setBuyNotice("Steam's purchase flow couldn't be opened — the listing may no longer be available.");
+    }
+
+    private clearBuyRequest(): void {
+        this.pendingBuyListingId = undefined;
+        if (this.buyResultTimer === undefined) return;
+        window.clearTimeout(this.buyResultTimer);
+        this.buyResultTimer = undefined;
+    }
+
     private applyItemsUpdate(items: SkinCraftItem[]): void {
         this.itemsRequestPending = false;
         // A shrunk harvest (a failed load, or the grid re-filtered underneath) never truncates the
-        // strip the user is scrolling — the snapshot only ever grows within a session.
+        // items the user is navigating — the snapshot only ever grows within a session.
         if (!this.active || !this.modal || items.length <= this.itemCount) return;
 
         this.itemCount = items.length;
         this.modal.setItems(items.map((item) => this.toViewerTarget(item)));
-        // Keep filling while the user is still parked at the strip's end.
+        // Keep filling while the user is still near the end of the loaded items.
         if (this.modal.itemsNearEnd()) this.requestMoreItems();
     }
 
@@ -242,7 +311,7 @@ class SkinCraftEmbedService {
             },
             onSelect: (target) => this.selectEmbeddedTarget(target),
             onItemsNearEnd: () => this.requestMoreItems(),
-            onBuy: this.isMarketPage ? (target) => this.handleBuyRequest(target) : undefined,
+            onBuy: this.isMarketPage ? (listingId) => this.handleBuyRequest(listingId) : undefined,
         });
         document.body.appendChild(modal.element);
         window.addEventListener('message', this.handleEmbedMessage);
@@ -343,7 +412,7 @@ class SkinCraftEmbedService {
                 if (this.loadPhase === 'loaded' && url && STEAM_INSPECT_URL_PATTERN.test(url)) {
                     window.location.href = url;
                 } else {
-                    console.warn('SkinCraft: no launchable inspect link for the item on screen.');
+                    console.warn('CSFloat: no launchable inspect link for the item on screen.');
                 }
                 break;
             }
diff --git a/src/lib/services/skincraft_inventory_targets.ts b/src/lib/services/skincraft_inventory_targets.ts
index d2d724e9..e18f9c54 100644
--- a/src/lib/services/skincraft_inventory_targets.ts
+++ b/src/lib/services/skincraft_inventory_targets.ts
@@ -1,4 +1,4 @@
-import type {CAppwideInventory, CInventory, InventoryAsset, rgAsset, rgAssetProperty} from '../types/steam';
+import type {CAppwideInventory, CInventory, rgAsset, rgAssetProperty} from '../types/steam';
 import type {ItemInfo} from '../bridge/handlers/fetch_inspect_info';
 import {ContextId} from '../types/steam_constants';
 import {isCAppwideInventory} from '../utils/checkers';
@@ -7,7 +7,9 @@ import {steamEconomyImageUrl} from '../utils/steam_images';
 import {gFloatFetcher} from './float_fetcher';
 import {
     HEX_COLOR_PATTERN,
+    MAX_SKINCRAFT_ICON_URL,
     MAX_SKINCRAFT_INVENTORY_TARGETS,
+    MAX_SKINCRAFT_ITEM_NAME,
     SKINCRAFT_INSPECT_PATTERN,
     STEAM_INSPECT_URL_PATTERN,
 } from './skincraft_viewer_protocol';
@@ -15,16 +17,35 @@ import type {SkinCraftItem} from './skincraft_viewer_protocol';
 
 export type CachedItemInfoLookup = (assetId: string) => ItemInfo | undefined;
 
+/** An asset property loose enough to cover both the rg-asset and React-market value typings. */
+export type SkinCraftSourceProperty = {propertyid: number; string_value?: string};
+
+/** The description slice {@link toSkinCraftItem} reads; inventory `rgAsset`s and market fiber descriptions both qualify. */
+export type SkinCraftSourceDescription = Pick<
+    rgAsset,
+    'market_hash_name' | 'type' | 'tags' | 'actions' | 'icon_url' | 'icon_url_large' | 'background_color'
+> & {asset_properties?: SkinCraftSourceProperty[]};
+
+/** The asset slice {@link toSkinCraftItem} reads, so market listings satisfy it without casts. */
+export type SkinCraftSourceAsset = {
+    assetid: string;
+    asset_properties?: SkinCraftSourceProperty[];
+    description: SkinCraftSourceDescription;
+};
+
 const cachedItemInfo: CachedItemInfoLookup = (assetId) => gFloatFetcher.getCached(assetId);
 
-function getAssetProperties(asset: InventoryAsset, fallbackProperties: rgAssetProperty[]): rgAssetProperty[] {
+function getAssetProperties(
+    asset: SkinCraftSourceAsset,
+    fallbackProperties: SkinCraftSourceProperty[]
+): SkinCraftSourceProperty[] {
     if (asset.asset_properties?.length) return asset.asset_properties;
     if (asset.description.asset_properties?.length) return asset.description.asset_properties;
     return fallbackProperties;
 }
 
 /** Item types SkinCraft renders (gloves fall under `isSkin`). */
-function isSkinCraftRenderable(description: rgAsset): boolean {
+function isSkinCraftRenderable(description: SkinCraftSourceDescription): boolean {
     return (
         isSkin(description) ||
         isSticker(description) ||
@@ -39,7 +60,9 @@ const MASKED_ACTION_PATTERN =
     /^steam:\/\/(?:run|rungame)\/730\/\d{0,20}\/\+csgo_econ_action_preview%20(%propid:6%|[0-9a-f]{40,8192})$/i;
 
 /** Split at the hex slot, which Steam either fills from asset property 6 or embeds inline. */
-function getMaskedInspectAction(description: rgAsset): {prefix: string; embeddedHex?: string} | undefined {
+function getMaskedInspectAction(
+    description: SkinCraftSourceDescription
+): {prefix: string; embeddedHex?: string} | undefined {
     for (const action of description.actions ?? []) {
         const slot = MASKED_ACTION_PATTERN.exec(action.link)?.[1];
         if (slot) {
@@ -53,8 +76,8 @@ function getMaskedInspectAction(description: rgAsset): {prefix: string; embedded
 }
 
 function getSkinCraftInspect(
-    asset: InventoryAsset,
-    fallbackProperties: rgAssetProperty[]
+    asset: SkinCraftSourceAsset,
+    fallbackProperties: SkinCraftSourceProperty[]
 ): Pick<SkinCraftItem, 'inspect' | 'inspectUrl'> | undefined {
     if (!isSkinCraftRenderable(asset.description)) return;
 
@@ -69,9 +92,15 @@ function getSkinCraftInspect(
     return {inspect, inspectUrl: inspectUrl && STEAM_INSPECT_URL_PATTERN.test(inspectUrl) ? inspectUrl : undefined};
 }
 
+/** Bounded per the viewer protocol; an over-long URL drops the icon, not the item. */
+export function toBoundedIconUrl(icon: string | undefined): string | undefined {
+    const iconUrl = icon ? steamEconomyImageUrl(icon) : undefined;
+    return iconUrl && iconUrl.length <= MAX_SKINCRAFT_ICON_URL ? iconUrl : undefined;
+}
+
 export function toSkinCraftItem(
-    asset: InventoryAsset | undefined,
-    fallbackProperties: rgAssetProperty[] = [],
+    asset: SkinCraftSourceAsset | undefined,
+    fallbackProperties: SkinCraftSourceProperty[] = [],
     getCachedItemInfo: CachedItemInfoLookup = cachedItemInfo
 ): SkinCraftItem | undefined {
     if (!asset?.description || typeof asset.description.market_hash_name !== 'string') return;
@@ -79,14 +108,13 @@ export function toSkinCraftItem(
     const inspectFields = getSkinCraftInspect(asset, fallbackProperties);
     if (!inspectFields) return;
 
-    const icon = asset.description.icon_url_large || asset.description.icon_url;
     const itemInfo = getCachedItemInfo(asset.assetid);
     const rarityColor = asset.description.tags?.find((tag) => tag.category === 'Rarity')?.color;
     const backgroundColor = asset.description.background_color;
     return {
         ...inspectFields,
-        name: asset.description.market_hash_name,
-        iconUrl: icon ? steamEconomyImageUrl(icon) : undefined,
+        name: asset.description.market_hash_name.slice(0, MAX_SKINCRAFT_ITEM_NAME),
+        iconUrl: toBoundedIconUrl(asset.description.icon_url_large || asset.description.icon_url),
         assetId: asset.assetid,
         seed: itemInfo ? formatSeed(itemInfo) : undefined,
         float: itemInfo ? formatFloatWithRank(itemInfo, 6) : undefined,
diff --git a/src/lib/services/skincraft_market_targets.test.ts b/src/lib/services/skincraft_market_targets.test.ts
index 9f829609..cb98e2ee 100644
--- a/src/lib/services/skincraft_market_targets.test.ts
+++ b/src/lib/services/skincraft_market_targets.test.ts
@@ -3,8 +3,18 @@ import type {ItemInfo} from '../bridge/handlers/fetch_inspect_info';
 import type {MarketListing} from '../components/market/react/types';
 import {formatFloatWithRank, formatSeed} from '../utils/skin';
 import {STEAM_ECONOMY_IMAGE_PREFIX} from '../utils/steam_images';
-import {toSkinCraftListingItem} from './skincraft_market_targets';
-import {isOpenSkinCraftViewerMessage, SKINCRAFT_VIEWER_MESSAGE_SOURCE} from './skincraft_viewer_protocol';
+import {formatBuyerPrice, toSkinCraftListingItem} from './skincraft_market_targets';
+import {
+    isOpenSkinCraftViewerMessage,
+    MAX_SKINCRAFT_ACCESSORIES,
+    MAX_SKINCRAFT_ACCESSORY_NAME,
+    MAX_SKINCRAFT_DETAIL_FIELD,
+    MAX_SKINCRAFT_DETAIL_LINES,
+    MAX_SKINCRAFT_DETAIL_TEXT,
+    MAX_SKINCRAFT_ITEM_NAME,
+    MAX_SKINCRAFT_PATTERN_TEMPLATE,
+    SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+} from './skincraft_viewer_protocol';
 
 const MASKED_LINK = 'steam://run/730//+csgo_econ_action_preview%20%propid:6%';
 
@@ -199,6 +209,19 @@ describe('SkinCraft market targets', () => {
         expect(target?.seed).toBe(formatSeed(itemInfo));
     });
 
+    it('drops non-hex text colours instead of forwarding them', () => {
+        const listing = createListing({
+            description: {
+                name_color: 'red',
+                descriptions: [{type: 'html', value: 'The Phoenix Collection', color: '#9da1a9', name: 'itemset_name'}],
+            },
+        });
+        const target = toSkinCraftListingItem(listing);
+
+        expect(target?.rarityColor).toBeUndefined();
+        expect(target?.details?.lines).toEqual([{text: 'The Phoenix Collection', italic: undefined, color: undefined}]);
+    });
+
     it('produces targets the viewer protocol accepts', () => {
         const target = toSkinCraftListingItem(createListing());
 
@@ -211,4 +234,75 @@ describe('SkinCraft market targets', () => {
             })
         ).toBe(true);
     });
+
+    it('clamps oversized Steam data to the protocol bounds so the message still validates', () => {
+        const accessory = (name: string, template?: string) => ({
+            classid: '1',
+            parent_relationship_properties: template ? [{propertyid: 3, int_value: template}] : [],
+            description: {market_hash_name: name, type: 'Extraordinary Charm', icon_url: 'charm'},
+        });
+        const listing = createListing({
+            asset: {
+                assetid: '53323033442',
+                asset_properties: [
+                    {propertyid: 1, int_value: '9'.repeat(40)},
+                    {propertyid: 5, string_value: 'N'.repeat(400)},
+                    {propertyid: 6, string_value: 'a'.repeat(80)},
+                ],
+                asset_accessories: Array.from({length: MAX_SKINCRAFT_ACCESSORIES + 2}, () =>
+                    accessory('C'.repeat(400), '9'.repeat(200))
+                ),
+            },
+            description: {
+                market_hash_name: `${'M'.repeat(600)} (Factory New)`,
+                type: 'T'.repeat(400),
+                market_tradable_restriction: 9000,
+                descriptions: Array.from({length: MAX_SKINCRAFT_DETAIL_LINES + 6}, (_, index) => ({
+                    type: 'html',
+                    value: index ? `line ${index}` : 'x'.repeat(MAX_SKINCRAFT_DETAIL_TEXT + 100),
+                    name: `line-${index}`,
+                })),
+            },
+        });
+        const target = toSkinCraftListingItem(listing);
+        const details = target?.details;
+
+        expect(target?.name).toHaveLength(MAX_SKINCRAFT_ITEM_NAME);
+        expect(details?.type).toHaveLength(MAX_SKINCRAFT_DETAIL_FIELD);
+        expect(details?.nameTag).toHaveLength(MAX_SKINCRAFT_DETAIL_FIELD);
+        expect(details?.patternTemplate).toHaveLength(MAX_SKINCRAFT_PATTERN_TEMPLATE);
+        expect(details?.tradeRestrictionDays).toBeUndefined();
+        expect(details?.accessories).toHaveLength(MAX_SKINCRAFT_ACCESSORIES);
+        expect(details?.accessories?.[0].name).toHaveLength(MAX_SKINCRAFT_ACCESSORY_NAME);
+        expect(details?.lines).toHaveLength(MAX_SKINCRAFT_DETAIL_LINES);
+        expect(details?.lines?.[0].text).toHaveLength(MAX_SKINCRAFT_DETAIL_TEXT);
+        expect(
+            isOpenSkinCraftViewerMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'open',
+                target,
+                inventory: [target],
+            })
+        ).toBe(true);
+    });
+});
+
+describe('formatBuyerPrice', () => {
+    const listing = (strSubtotal: string, unPrice?: number, unFee?: number) =>
+        ({strSubtotal, unPrice, unFee}) as MarketListing;
+
+    it('adds the buyer fee inside the localized subtotal format', () => {
+        expect(formatBuyerPrice(listing('$35.20', 3520, 528))).toBe('$40.48');
+        expect(formatBuyerPrice(listing('1 234,56 zł', 123456, 17283))).toBe('1 407,39 zł');
+        expect(formatBuyerPrice(listing('R$ 1.234,56', 123456, 876544))).toBe('R$ 10.000,00');
+        expect(formatBuyerPrice(listing('0,99€', 99, 15))).toBe('1,14€');
+    });
+
+    it('leaves formats it cannot verify against the raw subtotal untouched', () => {
+        expect(formatBuyerPrice(listing('¥ 3,520', 352000, 52800))).toBe('¥ 3,520');
+        expect(formatBuyerPrice(listing('$35.20', 9999, 528))).toBe('$35.20');
+        expect(formatBuyerPrice(listing('$35.20', 3520, 0))).toBe('$35.20');
+        expect(formatBuyerPrice(listing('$35.20'))).toBe('$35.20');
+        expect(formatBuyerPrice(listing(''))).toBeUndefined();
+    });
 });
diff --git a/src/lib/services/skincraft_market_targets.ts b/src/lib/services/skincraft_market_targets.ts
index 5506920d..ea04f371 100644
--- a/src/lib/services/skincraft_market_targets.ts
+++ b/src/lib/services/skincraft_market_targets.ts
@@ -1,15 +1,26 @@
-import type {MarketListing, MarketListingAccessory, MarketListingProps} from '../components/market/react/types';
-import type {InventoryAsset, rgAsset, rgAssetProperty} from '../types/steam';
+import type {
+    MarketAssetProperty,
+    MarketListing,
+    MarketListingAccessory,
+    MarketListingProps,
+} from '../components/market/react/types';
 import {getFiberProps} from '../utils/fiber';
-import {steamEconomyImageUrl} from '../utils/steam_images';
-import {toSkinCraftItem} from './skincraft_inventory_targets';
-import type {CachedItemInfoLookup} from './skincraft_inventory_targets';
+import {toBoundedIconUrl, toSkinCraftItem} from './skincraft_inventory_targets';
+import type {CachedItemInfoLookup, SkinCraftSourceAsset} from './skincraft_inventory_targets';
 import {
+    ASSET_ID_PATTERN,
     HEX_COLOR_PATTERN,
+    isRestrictionDays,
     MAX_SKINCRAFT_ACCESSORIES,
+    MAX_SKINCRAFT_ACCESSORY_DETAIL,
+    MAX_SKINCRAFT_ACCESSORY_NAME,
+    MAX_SKINCRAFT_DETAIL_FIELD,
     MAX_SKINCRAFT_DETAIL_LINES,
     MAX_SKINCRAFT_DETAIL_TEXT,
     MAX_SKINCRAFT_INVENTORY_TARGETS,
+    MAX_SKINCRAFT_PATTERN_TEMPLATE,
+    MAX_SKINCRAFT_PRICE,
+    MAX_SKINCRAFT_WEAR_RATING,
 } from './skincraft_viewer_protocol';
 import type {
     SkinCraftAccessory,
@@ -21,18 +32,31 @@ import type {
 /** Every listing card in the Market beta results grid, with or without a rendered screenshot. */
 export const MARKET_LISTING_CARD_SELECTOR = 'div[style*="--grid-rows"]';
 
+/** The action row at the bottom of a listing card, holding Steam's own Buy button. */
+export const MARKET_PRICE_ROW_SELECTOR = 'div[style*="--justify:end"][style*="--align:center"]:has(button)';
+
 const LOAD_MORE_TIMEOUT_MS = 5_000;
 const LOAD_MORE_POLL_MS = 250;
 
-/** A market listing reshaped as the inventory-style asset {@link toSkinCraftItem} consumes. */
-function toListingAsset(listing: MarketListing): InventoryAsset {
+/** Steam's asset property ids, as they appear in both the rg-asset and React-market payloads. */
+const AssetPropertyId = {
+    PatternTemplate: 1,
+    Wear: 2,
+    CharmTemplate: 3,
+    ScrapeLevel: 4,
+    NameTag: 5,
+} as const;
+
+/** A market listing reshaped as the inventory-style source {@link toSkinCraftItem} consumes. */
+function toListingAsset(listing: MarketListing): SkinCraftSourceAsset {
     // Beta market descriptions ship empty `tags`; dropping them lets the type/name fallbacks
     // decide renderability instead.
     const {tags, ...description} = listing.description;
     return {
-        ...listing.asset,
-        description: (tags?.length ? listing.description : description) as unknown as rgAsset,
-    } as unknown as InventoryAsset;
+        assetid: listing.asset.assetid,
+        asset_properties: listing.asset.asset_properties,
+        description: tags?.length ? listing.description : description,
+    };
 }
 
 /** The description entries that duplicate applied sticker/charm data as markup rather than prose. */
@@ -43,21 +67,22 @@ function formatScrapeLevel(value: number): string {
     return String(Number(value.toPrecision(9)));
 }
 
-/** The per-accessory attribute line, from the {@link https://steamcommunity.com AssetPropertySchema} ids. */
+/** The per-accessory attribute line; property 4 is the sticker scrape level, 3 the charm template. */
 function toAccessoryDetail(accessory: MarketListingAccessory): string | undefined {
     const properties = [
         ...(accessory.parent_relationship_properties ?? []),
         ...(accessory.standalone_properties ?? []),
     ];
+    const property = (id: number): MarketAssetProperty | undefined => properties.find((p) => p.propertyid === id);
 
-    const scrape = Number(properties.find((p) => p.propertyid === 4)?.float_value);
+    const scrape = Number(property(AssetPropertyId.ScrapeLevel)?.float_value);
     if (Number.isFinite(scrape)) return `Sticker Scrape Level: ${formatScrapeLevel(scrape)}`;
 
-    const template = properties.find((p) => p.propertyid === 3)?.int_value;
-    if (template) return `Charm Template: ${template}`;
+    const template = property(AssetPropertyId.CharmTemplate)?.int_value;
+    if (template) return `Charm Template: ${template}`.slice(0, MAX_SKINCRAFT_ACCESSORY_DETAIL);
 
     // Steam spells out the zero on unscraped stickers rather than dropping the line.
-    return accessory.description.type?.endsWith('Sticker') ? 'Sticker Scrape Level: 0' : undefined;
+    return accessory.description?.type?.endsWith('Sticker') ? 'Sticker Scrape Level: 0' : undefined;
 }
 
 function toAccessories(listing: MarketListing): SkinCraftAccessory[] | undefined {
@@ -66,10 +91,9 @@ function toAccessories(listing: MarketListing): SkinCraftAccessory[] | undefined
         const description = accessory.description;
         if (typeof description?.market_hash_name !== 'string') continue;
 
-        const icon = description.icon_url_large || description.icon_url;
         accessories.push({
-            name: description.market_hash_name.slice(0, 256),
-            iconUrl: icon ? steamEconomyImageUrl(icon) : undefined,
+            name: description.market_hash_name.slice(0, MAX_SKINCRAFT_ACCESSORY_NAME),
+            iconUrl: toBoundedIconUrl(description.icon_url_large || description.icon_url),
             detail: toAccessoryDetail(accessory),
         });
         if (accessories.length === MAX_SKINCRAFT_ACCESSORIES) break;
@@ -97,22 +121,54 @@ function toDetailLines(listing: MarketListing): SkinCraftDetailLine[] | undefine
     return lines.length ? lines : undefined;
 }
 
+/**
+ * The buyer-facing price (subtotal + fee, what Steam's cards show), formatted by rewriting the
+ * numeric part of the localized `strSubtotal`; falls back to it whenever it doesn't parse as `unPrice`.
+ */
+export function formatBuyerPrice(listing: MarketListing): string | undefined {
+    const subtotal = listing.strSubtotal;
+    if (!subtotal) return undefined;
+
+    const {unPrice, unFee} = listing;
+    if (!Number.isInteger(unPrice) || !Number.isInteger(unFee) || unFee <= 0) return subtotal;
+
+    const centsDigits = (cents: number): string => (cents / 100).toFixed(2).replace('.', '');
+    const numeric = /\d[\d.,'\s]*\d|\d/.exec(subtotal)?.[0];
+    // Two-decimal formats only: without that separator this could be a zero-decimal currency.
+    const decimalSeparator = numeric && numeric.length >= 4 ? numeric.charAt(numeric.length - 3) : '';
+    if (!numeric || !decimalSeparator || /\d/.test(decimalSeparator)) return subtotal;
+    if (numeric.replace(/\D/g, '') !== centsDigits(unPrice)) return subtotal;
+
+    const totalDigits = centsDigits(unPrice + unFee);
+    const groupSeparator = /\D/.exec(numeric.slice(0, -3))?.[0];
+    const integer = totalDigits.slice(0, -2);
+    const grouped = groupSeparator ? integer.replace(/\B(?=(\d{3})+$)/g, groupSeparator) : integer;
+    return subtotal.replace(numeric, `${grouped}${decimalSeparator}${totalDigits.slice(-2)}`);
+}
+
+function toRestrictionDays(value: number | undefined): number | undefined {
+    return value && isRestrictionDays(value) ? value : undefined;
+}
+
 function toListingDetails(listing: MarketListing): SkinCraftListingDetails {
     const description = listing.description;
-    const property = (id: number): rgAssetProperty | undefined =>
+    const property = (id: number): MarketAssetProperty | undefined =>
         listing.asset.asset_properties?.find((p) => p.propertyid === id);
-    const wear = Number(property(2)?.float_value);
+    const wear = Number(property(AssetPropertyId.Wear)?.float_value);
+    const nameTag = property(AssetPropertyId.NameTag)?.string_value;
+    const template = property(AssetPropertyId.PatternTemplate)?.int_value;
 
+    // Clamped to the validator's bounds — one over-limit value would drop the whole message.
     return {
-        listingId: listing.listingid,
+        listingId: ASSET_ID_PATTERN.test(listing.listingid) ? listing.listingid : undefined,
         game: description.appid === 730 ? 'Counter-Strike 2' : undefined,
-        type: description.type || undefined,
-        nameTag: property(5)?.string_value,
-        patternTemplate: property(1)?.int_value,
-        wearRating: Number.isFinite(wear) ? wear.toFixed(8) : undefined,
-        price: listing.strSubtotal || undefined,
-        tradeRestrictionDays: description.market_tradable_restriction || undefined,
-        marketRestrictionDays: description.market_marketable_restriction || undefined,
+        type: description.type ? description.type.slice(0, MAX_SKINCRAFT_DETAIL_FIELD) : undefined,
+        nameTag: typeof nameTag === 'string' ? nameTag.slice(0, MAX_SKINCRAFT_DETAIL_FIELD) : undefined,
+        patternTemplate: template ? String(template).slice(0, MAX_SKINCRAFT_PATTERN_TEMPLATE) : undefined,
+        wearRating: Number.isFinite(wear) ? wear.toFixed(8).slice(0, MAX_SKINCRAFT_WEAR_RATING) : undefined,
+        price: formatBuyerPrice(listing)?.slice(0, MAX_SKINCRAFT_PRICE),
+        tradeRestrictionDays: toRestrictionDays(description.market_tradable_restriction),
+        marketRestrictionDays: toRestrictionDays(description.market_marketable_restriction),
         accessories: toAccessories(listing),
         lines: toDetailLines(listing),
     };
@@ -160,9 +216,8 @@ export function getLoadedListingTargets(getCachedItemInfo?: CachedItemInfoLookup
 /**
  * Loads the grid's next page by revealing its infinite-scroll sentinel — Steam's own loader keeps
  * pagination consistent with whatever filters the user has applied — then re-harvests every mounted
- * card. The page's scroll position is restored once the new cards land (the results sit behind the
- * viewer modal while this runs). Resolving with no growth means the end of the results, a timeout,
- * or an in-flight page; the caller treats them all as "nothing more right now".
+ * card. The page's scroll position is restored either way (the results sit behind the viewer modal
+ * while this runs). No growth — end of results, or a timeout — reads as "nothing more right now".
  */
 export async function loadMoreListingTargets(): Promise<SkinCraftItem[]> {
     const cards = document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR);
@@ -186,6 +241,17 @@ async function waitForCardGrowth(previousCount: number): Promise<void> {
         await new Promise((resolve) => window.setTimeout(resolve, LOAD_MORE_POLL_MS));
         if (document.querySelectorAll(MARKET_LISTING_CARD_SELECTOR).length > previousCount) return;
     }
+    console.debug('CSFloat: the market grid did not grow before the timeout; treating as end of results.');
+}
+
+/** Steam's purchase button in a card's price row: by English label, else the row's only button. */
+function findBuyButton(scope: HTMLElement): HTMLButtonElement | undefined {
+    const row = scope.querySelector<HTMLElement>(MARKET_PRICE_ROW_SELECTOR);
+    const buttons = [...(row ?? scope).querySelectorAll('button')];
+    return (
+        buttons.find((button) => button.textContent?.trim() === 'Buy') ??
+        (row && buttons.length === 1 ? buttons[0] : undefined)
+    );
 }
 
 /** Hands off to Steam's own purchase flow by clicking the listing card's native Buy button. */
@@ -193,7 +259,7 @@ export function buyListing(listingId: string): boolean {
     for (const scope of document.querySelectorAll<HTMLElement>(MARKET_LISTING_CARD_SELECTOR)) {
         if (getFiberListing(scope)?.listingid !== listingId) continue;
 
-        const buyButton = [...scope.querySelectorAll('button')].find((button) => button.textContent?.trim() === 'Buy');
+        const buyButton = findBuyButton(scope);
         buyButton?.click();
         return !!buyButton;
     }
diff --git a/src/lib/services/skincraft_viewer_protocol.test.ts b/src/lib/services/skincraft_viewer_protocol.test.ts
index 7bbd425c..fbcbb02b 100644
--- a/src/lib/services/skincraft_viewer_protocol.test.ts
+++ b/src/lib/services/skincraft_viewer_protocol.test.ts
@@ -3,7 +3,10 @@ import {
     isBuySkinCraftListingMessage,
     isOpenSkinCraftViewerMessage,
     isRequestSkinCraftViewerItemsMessage,
+    isSkinCraftBuyListingResultMessage,
     isSkinCraftViewerItemsMessage,
+    MAX_SKINCRAFT_ACCESSORIES,
+    MAX_SKINCRAFT_DETAIL_LINES,
     MAX_SKINCRAFT_DETAIL_TEXT,
     MAX_SKINCRAFT_INVENTORY_TARGETS,
     SKINCRAFT_VIEWER_MESSAGE_SOURCE,
@@ -138,6 +141,14 @@ describe('SkinCraft viewer listing details', () => {
             'an accessory icon from an untrusted origin',
             {...details, accessories: [{name: 'Sticker | X', iconUrl: 'https://evil.example/x.png'}]},
         ],
+        [
+            'too many accessories',
+            {...details, accessories: Array.from({length: MAX_SKINCRAFT_ACCESSORIES + 1}, () => ({name: 'Sticker'}))},
+        ],
+        [
+            'too many description lines',
+            {...details, lines: Array.from({length: MAX_SKINCRAFT_DETAIL_LINES + 1}, () => ({text: 'x'}))},
+        ],
     ])('rejects details with %s', (_label, malformed) => {
         expect(
             isOpenSkinCraftViewerMessage({
@@ -168,6 +179,33 @@ describe('SkinCraft viewer buy messages', () => {
         ).toBe(false);
         expect(isBuySkinCraftListingMessage({source: 'other', type: 'buy-listing', listingId: '1'})).toBe(false);
     });
+
+    it('holds buy results to the same listing id and source rules', () => {
+        expect(
+            isSkinCraftBuyListingResultMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-result',
+                listingId: '556910233323745386',
+                success: false,
+            })
+        ).toBe(true);
+        expect(
+            isSkinCraftBuyListingResultMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-result',
+                listingId: 'javascript:alert(1)',
+                success: true,
+            })
+        ).toBe(false);
+        expect(
+            isSkinCraftBuyListingResultMessage({
+                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
+                type: 'buy-result',
+                listingId: '1',
+                success: 'yes',
+            })
+        ).toBe(false);
+    });
 });
 
 describe('SkinCraft viewer items messages', () => {
diff --git a/src/lib/services/skincraft_viewer_protocol.ts b/src/lib/services/skincraft_viewer_protocol.ts
index 7752925f..4cfcb472 100644
--- a/src/lib/services/skincraft_viewer_protocol.ts
+++ b/src/lib/services/skincraft_viewer_protocol.ts
@@ -7,11 +7,22 @@ export const SKINCRAFT_INSPECT_PATTERN = /^[0-9a-f]{40,8192}$/i;
 export const HEX_COLOR_PATTERN = /^[0-9a-f]{6}$/i;
 export const STEAM_INSPECT_URL_PATTERN =
     /^steam:\/\/(?:run|rungame)\/730\/\d{0,20}\/\+csgo_econ_action_preview%20[0-9a-f]{40,8192}$/i;
-const ASSET_ID_PATTERN = /^\d{1,32}$/;
+/** Also fits listing ids, which share the numeric-id format. */
+export const ASSET_ID_PATTERN = /^\d{1,32}$/;
 export const MAX_SKINCRAFT_DETAIL_LINES = 24;
 export const MAX_SKINCRAFT_DETAIL_TEXT = 2048;
 export const MAX_SKINCRAFT_ACCESSORIES = 8;
 
+// Producers must clamp to these same bounds: one over-limit field drops its whole message.
+export const MAX_SKINCRAFT_ITEM_NAME = 512;
+export const MAX_SKINCRAFT_ICON_URL = 4096;
+export const MAX_SKINCRAFT_ACCESSORY_NAME = 256;
+export const MAX_SKINCRAFT_ACCESSORY_DETAIL = 128;
+export const MAX_SKINCRAFT_DETAIL_FIELD = 256;
+export const MAX_SKINCRAFT_PATTERN_TEMPLATE = 16;
+export const MAX_SKINCRAFT_WEAR_RATING = 32;
+export const MAX_SKINCRAFT_PRICE = 64;
+
 /** One sanitized line of Steam's item description block (exterior, flavour text, collection, …). */
 export type SkinCraftDetailLine = {
     text: string;
@@ -87,6 +98,14 @@ export type SkinCraftViewerItemsMessage = {
     inventory: SkinCraftItem[];
 };
 
+/** Page → content script: whether the `buy-listing` hand-off reached Steam's purchase flow. */
+export type SkinCraftBuyListingResultMessage = {
+    source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
+    type: 'buy-result';
+    listingId: string;
+    success: boolean;
+};
+
 function isBoundedString(value: unknown, maxLength: number): value is string {
     return typeof value === 'string' && value.length <= maxLength;
 }
@@ -95,10 +114,25 @@ function isOptional<T>(value: unknown, check: (value: unknown) => value is T): b
     return value === undefined || check(value);
 }
 
-function isRestrictionDays(value: unknown): value is number {
+export function isRestrictionDays(value: unknown): value is number {
     return typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 365;
 }
 
+/**
+ * A message claiming our source and an expected type, yet failing its guard — producer/validator
+ * drift that receivers log rather than drop silently.
+ */
+export function isMalformedSkinCraftViewerMessage(data: unknown, expectedTypes: readonly string[]): boolean {
+    if (!data || typeof data !== 'object') return false;
+
+    const message = data as {source?: unknown; type?: unknown};
+    return (
+        message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
+        typeof message.type === 'string' &&
+        expectedTypes.includes(message.type)
+    );
+}
+
 function isSkinCraftDetailLine(data: unknown): data is SkinCraftDetailLine {
     if (!data || typeof data !== 'object') return false;
 
@@ -115,10 +149,11 @@ function isSkinCraftAccessory(data: unknown): data is SkinCraftAccessory {
 
     const accessory = data as Partial<SkinCraftAccessory>;
     return (
-        isBoundedString(accessory.name, 256) &&
-        isOptional(accessory.detail, (v): v is string => isBoundedString(v, 128)) &&
+        isBoundedString(accessory.name, MAX_SKINCRAFT_ACCESSORY_NAME) &&
+        isOptional(accessory.detail, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_ACCESSORY_DETAIL)) &&
         (accessory.iconUrl === undefined ||
-            (isBoundedString(accessory.iconUrl, 4096) && accessory.iconUrl.startsWith(STEAM_ECONOMY_IMAGE_PREFIX)))
+            (isBoundedString(accessory.iconUrl, MAX_SKINCRAFT_ICON_URL) &&
+                accessory.iconUrl.startsWith(STEAM_ECONOMY_IMAGE_PREFIX)))
     );
 }
 
@@ -134,11 +169,11 @@ function isSkinCraftListingDetails(data: unknown): data is SkinCraftListingDetai
                 details.accessories.length <= MAX_SKINCRAFT_ACCESSORIES &&
                 details.accessories.every(isSkinCraftAccessory))) &&
         isOptional(details.game, (v): v is string => isBoundedString(v, 128)) &&
-        isOptional(details.type, (v): v is string => isBoundedString(v, 256)) &&
-        isOptional(details.nameTag, (v): v is string => isBoundedString(v, 256)) &&
-        isOptional(details.patternTemplate, (v): v is string => isBoundedString(v, 16)) &&
-        isOptional(details.wearRating, (v): v is string => isBoundedString(v, 32)) &&
-        isOptional(details.price, (v): v is string => isBoundedString(v, 64)) &&
+        isOptional(details.type, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_DETAIL_FIELD)) &&
+        isOptional(details.nameTag, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_DETAIL_FIELD)) &&
+        isOptional(details.patternTemplate, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_PATTERN_TEMPLATE)) &&
+        isOptional(details.wearRating, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_WEAR_RATING)) &&
+        isOptional(details.price, (v): v is string => isBoundedString(v, MAX_SKINCRAFT_PRICE)) &&
         isOptional(details.tradeRestrictionDays, isRestrictionDays) &&
         isOptional(details.marketRestrictionDays, isRestrictionDays) &&
         (details.lines === undefined ||
@@ -172,14 +207,14 @@ function isValidSkinCraftItem(item: SkinCraftItem): boolean {
     return (
         SKINCRAFT_INSPECT_PATTERN.test(item.inspect) &&
         (item.inspectUrl === undefined || STEAM_INSPECT_URL_PATTERN.test(item.inspectUrl)) &&
-        item.name.length <= 512 &&
+        item.name.length <= MAX_SKINCRAFT_ITEM_NAME &&
         (item.assetId === undefined || ASSET_ID_PATTERN.test(item.assetId)) &&
         (item.seed === undefined || item.seed.length <= 64) &&
         (item.float === undefined || item.float.length <= 64) &&
         (item.rarityColor === undefined || HEX_COLOR_PATTERN.test(item.rarityColor)) &&
         (item.backgroundColor === undefined || HEX_COLOR_PATTERN.test(item.backgroundColor)) &&
         (item.iconUrl === undefined ||
-            (item.iconUrl.length <= 4096 && item.iconUrl.startsWith(STEAM_ECONOMY_IMAGE_PREFIX)))
+            (item.iconUrl.length <= MAX_SKINCRAFT_ICON_URL && item.iconUrl.startsWith(STEAM_ECONOMY_IMAGE_PREFIX)))
     );
 }
 
@@ -232,3 +267,16 @@ export function isSkinCraftViewerItemsMessage(data: unknown): data is SkinCraftV
         isSkinCraftItemList(message.inventory)
     );
 }
+
+export function isSkinCraftBuyListingResultMessage(data: unknown): data is SkinCraftBuyListingResultMessage {
+    if (!data || typeof data !== 'object') return false;
+
+    const message = data as Partial<SkinCraftBuyListingResultMessage>;
+    return (
+        message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
+        message.type === 'buy-result' &&
+        typeof message.listingId === 'string' &&
+        ASSET_ID_PATTERN.test(message.listingId) &&
+        typeof message.success === 'boolean'
+    );
+}
diff --git a/src/lib/utils/skin.ts b/src/lib/utils/skin.ts
index 2a2fbf64..2acd26a5 100644
--- a/src/lib/utils/skin.ts
+++ b/src/lib/utils/skin.ts
@@ -22,6 +22,15 @@ export function rangeFromWear(wear: number): [number, number] | null {
     return null;
 }
 
+/** The float condition bands and their bar colours, as percentages of the full 0–1 wear range. */
+export const FLOAT_CONDITION_BANDS = [
+    {min: 0, max: 7, color: 'green'},
+    {min: 7, max: 15, color: '#18a518'},
+    {min: 15, max: 38, color: '#9acd32'},
+    {min: 38, max: 45, color: '#cd5c5c'},
+    {min: 45, max: 100, color: '#f92424'},
+] as const;
+
 export function getLowestRank(info: ItemInfo): number | undefined {
     if (!info.low_rank && !info.high_rank) {
         // Item has no rank to return
@@ -103,6 +112,9 @@ export function renderClickableRank(info: ItemInfo): TemplateResult<1> {
     </a>`;
 }
 
+/** The description fields the item-type guards read; full `rgAsset`s and market fiber descriptions both qualify. */
+export type AssetTypeSource = Pick<rgAsset, 'market_hash_name' | 'type' | 'tags'>;
+
 export function isSellableOnCSFloat(asset: rgAsset): boolean {
     return (
         isSkin(asset) ||
@@ -115,7 +127,7 @@ export function isSellableOnCSFloat(asset: rgAsset): boolean {
         isPin(asset)
     );
 }
-export function isSkin(asset: rgAsset): boolean {
+export function isSkin(asset: AssetTypeSource): boolean {
     return asset.tags
         ? asset.tags.some((a) => a.category === 'Weapon' || (a.category === 'Type' && a.internal_name === 'Type_Hands'))
         : ['★', 'Factory New', 'Minimal Wear', 'Field-Tested', 'Well-Worn', 'Battle-Scarred'].some((keyword) =>
@@ -123,39 +135,39 @@ export function isSkin(asset: rgAsset): boolean {
           );
 }
 
-export function isCharm(asset: rgAsset): boolean {
+export function isCharm(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Charm', 'CSGO_Tool_Keychain');
 }
 
-export function isHighlightCharm(asset: rgAsset): boolean {
+export function isHighlightCharm(asset: AssetTypeSource): boolean {
     return isCharm(asset) && !!asset.tags && asset.tags.some((a) => a.internal_name === 'highlight');
 }
 
-export function isAgent(asset: rgAsset): boolean {
+export function isAgent(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Agent', 'Type_CustomPlayer');
 }
 
-export function isSticker(asset: rgAsset): boolean {
+export function isSticker(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Sticker', 'CSGO_Tool_Sticker');
 }
 
-export function isPatch(asset: rgAsset): boolean {
+export function isPatch(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Patch', 'CSGO_Type_Patch');
 }
 
-export function isCase(asset: rgAsset): boolean {
+export function isCase(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Container', 'CSGO_Type_WeaponCase');
 }
 
-export function isMusicKit(asset: rgAsset): boolean {
+export function isMusicKit(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Music Kit', 'CSGO_Type_MusicKit');
 }
 
-export function isPin(asset: rgAsset): boolean {
+export function isPin(asset: AssetTypeSource): boolean {
     return isAbstractType(asset, 'Pin', 'CSGO_Type_Collectible');
 }
 
-function isAbstractType(asset: rgAsset, type: string, internalName: string): boolean {
+function isAbstractType(asset: AssetTypeSource, type: string, internalName: string): boolean {
     // Half-hydrated descriptions can arrive without `type`, despite the declared shape.
     if (typeof asset.type === 'string' && asset.type.endsWith(type)) {
         return true;

From dcfe622558f5379e26b699ea6508ab2c7614e84f Mon Sep 17 00:00:00 2001
From: Syed Zaidi <yknse27@gmail.com>
Date: Mon, 24 Aug 2026 15:08:00 -0400
Subject: [PATCH 8/8] fix(market): pin the viewer's current item and tag item
 requests

---
 src/lib/services/skincraft_embed.ts           | 36 ++++++++++++++---
 .../skincraft_viewer_protocol.test.ts         | 40 ++++++++-----------
 src/lib/services/skincraft_viewer_protocol.ts | 20 ++++++++--
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/lib/services/skincraft_embed.ts b/src/lib/services/skincraft_embed.ts
index 6ec71790..6ed5e571 100644
--- a/src/lib/services/skincraft_embed.ts
+++ b/src/lib/services/skincraft_embed.ts
@@ -55,7 +55,9 @@ class SkinCraftEmbedService {
     private itemsProvider?: () => Promise<SkinCraftItem[]>;
     private buyHandler?: (listingId: string) => boolean;
     private providingItems = false;
+    private latestItemsRequestId = 0;
     private itemsRequestPending = false;
+    private itemsRequestId = 0;
     private itemCount = 0;
     private pendingBuyListingId?: string;
     private buyResultTimer?: number;
@@ -106,7 +108,7 @@ class SkinCraftEmbedService {
     private handlePageRequest = (event: MessageEvent): void => {
         if (event.source !== window || event.origin !== window.location.origin) return;
         if (isRequestSkinCraftViewerItemsMessage(event.data)) {
-            void this.provideItems();
+            void this.provideItems(event.data.requestId);
         } else if (isBuySkinCraftListingMessage(event.data)) {
             this.answerBuyRequest(event.data.listingId);
         } else if (isMalformedSkinCraftViewerMessage(event.data, ['buy-listing'])) {
@@ -114,7 +116,12 @@ class SkinCraftEmbedService {
         }
     };
 
-    private async provideItems(): Promise<void> {
+    /**
+     * Requests that arrive mid-load coalesce into it: the harvest reads the grid once the load
+     * settles, so it answers the newest request, and every request gets an answer.
+     */
+    private async provideItems(requestId: number): Promise<void> {
+        this.latestItemsRequestId = requestId;
         if (this.providingItems) return;
 
         this.providingItems = true;
@@ -137,6 +144,7 @@ class SkinCraftEmbedService {
             {
                 source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
                 type: 'items',
+                requestId: this.latestItemsRequestId,
                 inventory,
             } satisfies SkinCraftViewerItemsMessage,
             window.location.origin
@@ -187,7 +195,7 @@ class SkinCraftEmbedService {
         if (isOpenSkinCraftViewerMessage(event.data)) {
             this.openEmbeddedViewer(event.data.target, event.data.inventory);
         } else if (isSkinCraftViewerItemsMessage(event.data)) {
-            this.applyItemsUpdate(event.data.inventory);
+            this.applyItemsUpdate(event.data);
         } else if (isSkinCraftBuyListingResultMessage(event.data)) {
             this.handleBuyResult(event.data);
         } else if (isMalformedSkinCraftViewerMessage(event.data, ['open', 'items', 'buy-result'])) {
@@ -214,6 +222,7 @@ class SkinCraftEmbedService {
             {
                 source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
                 type: 'request-items',
+                requestId: ++this.itemsRequestId,
             } satisfies RequestSkinCraftViewerItemsMessage,
             window.location.origin
         );
@@ -264,18 +273,33 @@ class SkinCraftEmbedService {
         this.buyResultTimer = undefined;
     }
 
-    private applyItemsUpdate(items: SkinCraftItem[]): void {
+    private applyItemsUpdate({requestId, inventory}: SkinCraftViewerItemsMessage): void {
+        // Only the outstanding request counts: `close()` can't cancel the page's in-flight load, so
+        // its answer may land in a later session, after that session's own request or none at all.
+        if (!this.itemsRequestPending || requestId !== this.itemsRequestId) return;
+
         this.itemsRequestPending = false;
+        if (!this.active || !this.modal) return;
+
+        const items = inventory.map((item) => this.toViewerTarget(item));
+        // A harvest only covers mounted cards; the current item may have none (a dialog deep-link)
+        // and must stay in the strip or Previous/Next both disable under it.
+        const current = this.activeTarget;
+        if (current && !items.some((item) => this.isSameTarget(item, current))) items.unshift(current);
         // A shrunk harvest (a failed load, or the grid re-filtered underneath) never truncates the
         // items the user is navigating — the snapshot only ever grows within a session.
-        if (!this.active || !this.modal || items.length <= this.itemCount) return;
+        if (items.length <= this.itemCount) return;
 
         this.itemCount = items.length;
-        this.modal.setItems(items.map((item) => this.toViewerTarget(item)));
+        this.modal.setItems(items);
         // Keep filling while the user is still near the end of the loaded items.
         if (this.modal.itemsNearEnd()) this.requestMoreItems();
     }
 
+    private isSameTarget(a: SkinCraftViewerTarget, b: SkinCraftViewerTarget): boolean {
+        return (a.assetId || a.inspect) === (b.assetId || b.inspect);
+    }
+
     private selectEmbeddedTarget(target: SkinCraftViewerTarget): void {
         const modal = this.ensureModal();
         // Switch in place only when the frame is showing a model; otherwise dropping the cover
diff --git a/src/lib/services/skincraft_viewer_protocol.test.ts b/src/lib/services/skincraft_viewer_protocol.test.ts
index fbcbb02b..595000dc 100644
--- a/src/lib/services/skincraft_viewer_protocol.test.ts
+++ b/src/lib/services/skincraft_viewer_protocol.test.ts
@@ -209,35 +209,27 @@ describe('SkinCraft viewer buy messages', () => {
 });
 
 describe('SkinCraft viewer items messages', () => {
-    it('accepts a request for more items only from this protocol', () => {
-        expect(
-            isRequestSkinCraftViewerItemsMessage({source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'request-items'})
-        ).toBe(true);
-        expect(isRequestSkinCraftViewerItemsMessage({source: 'other', type: 'request-items'})).toBe(false);
-        expect(isRequestSkinCraftViewerItemsMessage({source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'items'})).toBe(
-            false
-        );
+    it('accepts a request for more items only from this protocol, carrying a request id', () => {
+        const request = {source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'request-items', requestId: 1};
+        expect(isRequestSkinCraftViewerItemsMessage(request)).toBe(true);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, source: 'other'})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, type: 'items'})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, requestId: undefined})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, requestId: '1'})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, requestId: -1})).toBe(false);
+        expect(isRequestSkinCraftViewerItemsMessage({...request, requestId: 1.5})).toBe(false);
     });
 
     it('holds item updates to the same target validation as open messages', () => {
+        const update = {source: SKINCRAFT_VIEWER_MESSAGE_SOURCE, type: 'items', requestId: 1, inventory: [target]};
+        expect(isSkinCraftViewerItemsMessage(update)).toBe(true);
+        expect(isSkinCraftViewerItemsMessage({...update, requestId: undefined})).toBe(false);
+        expect(isSkinCraftViewerItemsMessage({...update, inventory: [{...target, inspect: 'not-an-inspect'}]})).toBe(
+            false
+        );
         expect(
             isSkinCraftViewerItemsMessage({
-                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
-                type: 'items',
-                inventory: [target],
-            })
-        ).toBe(true);
-        expect(
-            isSkinCraftViewerItemsMessage({
-                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
-                type: 'items',
-                inventory: [{...target, inspect: 'not-an-inspect'}],
-            })
-        ).toBe(false);
-        expect(
-            isSkinCraftViewerItemsMessage({
-                source: SKINCRAFT_VIEWER_MESSAGE_SOURCE,
-                type: 'items',
+                ...update,
                 inventory: Array.from({length: MAX_SKINCRAFT_INVENTORY_TARGETS + 1}, () => target),
             })
         ).toBe(false);
diff --git a/src/lib/services/skincraft_viewer_protocol.ts b/src/lib/services/skincraft_viewer_protocol.ts
index 4cfcb472..084ffc2b 100644
--- a/src/lib/services/skincraft_viewer_protocol.ts
+++ b/src/lib/services/skincraft_viewer_protocol.ts
@@ -78,10 +78,14 @@ export type OpenSkinCraftViewerMessage = {
     inventory: SkinCraftItem[];
 };
 
-/** Content script → page: load more items for the viewer's strip (paginated surfaces only). */
+/**
+ * Content script → page: load more items for the viewer's strip (paginated surfaces only). The
+ * page echoes `requestId` so an answer to a request from an earlier viewer session is recognizable.
+ */
 export type RequestSkinCraftViewerItemsMessage = {
     source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
     type: 'request-items';
+    requestId: number;
 };
 
 /** Content script → page: hand the user off to Steam's own purchase flow for a listing. */
@@ -91,10 +95,11 @@ export type BuySkinCraftListingMessage = {
     listingId: string;
 };
 
-/** Page → content script: the refreshed item strip, answering a `request-items`. */
+/** Page → content script: the refreshed item strip, answering the `request-items` with `requestId`. */
 export type SkinCraftViewerItemsMessage = {
     source: typeof SKINCRAFT_VIEWER_MESSAGE_SOURCE;
     type: 'items';
+    requestId: number;
     inventory: SkinCraftItem[];
 };
 
@@ -118,6 +123,10 @@ export function isRestrictionDays(value: unknown): value is number {
     return typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 365;
 }
 
+function isRequestId(value: unknown): value is number {
+    return typeof value === 'number' && Number.isSafeInteger(value) && value >= 0;
+}
+
 /**
  * A message claiming our source and an expected type, yet failing its guard — producer/validator
  * drift that receivers log rather than drop silently.
@@ -242,7 +251,11 @@ export function isRequestSkinCraftViewerItemsMessage(data: unknown): data is Req
     if (!data || typeof data !== 'object') return false;
 
     const message = data as Partial<RequestSkinCraftViewerItemsMessage>;
-    return message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE && message.type === 'request-items';
+    return (
+        message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
+        message.type === 'request-items' &&
+        isRequestId(message.requestId)
+    );
 }
 
 export function isBuySkinCraftListingMessage(data: unknown): data is BuySkinCraftListingMessage {
@@ -264,6 +277,7 @@ export function isSkinCraftViewerItemsMessage(data: unknown): data is SkinCraftV
     return (
         message.source === SKINCRAFT_VIEWER_MESSAGE_SOURCE &&
         message.type === 'items' &&
+        isRequestId(message.requestId) &&
         isSkinCraftItemList(message.inventory)
     );
 }